Code has been added to clipboard!

A full HTML5 tags list: learn HTML5 new features and elements in one place

HTML5 New Elements

Every year lots of languages add new words to their vocabularies. The same applies to programming languages, and particularly to the HTML. When HTML5 was introduced to the public, this markup language offered a variety of new features such as new HTML5 tags.

In this tutorial, you'll find a lot of information about new HTML5 tags that were added to HTML "vocabulary". Also, along with HTML5 elements, you'll learn about HTML5 features that are now applicable and widely usable.

The variety of new HTML5 tags allows the developers to write their code quicker and make it more dynamic. Some old HTML5 features were renewed into new ones, some were removed at all, and others were freshly made to help people create their websites in an easier manner.

I've made a huge list of new HTML5 tags for you to learn and start using.

HTML5 Tags: Main Tips

  • HTML5 introduced many new tags and attributes;
  • Attribute syntax has changed from previous versions;
  • There are new elements in structure, form, graphics, and media categories;
  • All the newly introduced elements can be found in the list below.

HTML5 Tags: New HTML5 Structural Elements

In this part, you'll find a list of new structural HTML5 tags. The HTML5 tags list below is placed in alphabetical order.

<article>

This new HTML5 tag defines space for an article. It's way easier to use this element instead of <p> if you need a specific formatting for a long text.

Example
<article>
  <h1>Fun Fact</h1>
  <p>Fun fact: most of the fun facts on the Internet are not actually fun.</p>
</article>

Try it Live Find Coding Exercises

<aside>

This one of the new HTML5 tags describes the content which should be set to the side. It can be used as a sidebar or a part of additional text.

Example

<aside>
  <h4>Lake</h4>
  <p>Oxford lake is a lake in the state.</p>
</aside>

Try it Live Find Coding Exercises

<bdi>

This HTML5 feature allows creating mirrored text (or a part of a text). It means that the text will be written not from left to right, but vice versa. It is very useful when writing in Arabic languages or making funny looking text.

Example
<ul>
  <li>Player <bdi>One</bdi>: 66 points</li>
  <li>Player <bdi>Two</bdi>: 66 points</li>
  <li>Player <bdi>Three</bdi>: 69 points</li>
</ul>

Try it Live Find Coding Exercises

<details>

This new HTML5 tag describes the details of your website or content in general. The details can either be visible to everyone or hidden.

Example
<details>
  <summary>Copyright</summary>
  <p>- by your company</p>
  <p>Content governed by copyright.</p>
</details>

Try it Live Find Coding Exercises

<dialog>

This is one of the new HTML5 tags. It defines the dialog box in your website. However, Microsoft Edge and Internet Explorer do not support this tag.

Example

<table>
  <tbody>
    <tr>
      <th>Morning<dialog open>This is a blank window</dialog></th>
      <th>Day</th>
      <th>Evening</th>
    </tr>
    <tr>
      <td>8:00</td>
      <td>12:00</td>
      <td>17:00</td>
    </tr>
  </tbody>
</table>

Try it Live Find Coding Exercises

<figcaption>

The <figcaption> element defines the caption of <figure> element. This HTML5 tag goes together with <figure> element.

Example
<figure>
  <figcaption>Dog</figcaption>
  <img src="image.png" alt="The Bread Dog" width="300" height="300">
</figure>

Try it Live Find Coding Exercises

<figure>

This new HTML5 tag sets space for isolated content. It can be photos, diagrams, codes, videos, etc.

Example
<figure>
  <figcaption>Logo</figcaption>
  <img src="image.png" alt="Logo" width="300" height="300">
</figure>

Try it Live Find Coding Exercises

<footer>

This is one of the new HTML5 features for describing your content better. This tag sets a space for footnotes.

Example
<footer>
  <address>
    Postal Address: Door No.00, Street, City, State, Country.
  </address>
  <p>Copyright © 2018 All rights reserved.</p>
</footer>

Try it Live Find Coding Exercises

<header>

The <header> tag allows you to set the header - the main title - of your website. It is similar to title element, but is visible in the website.

Example

<header>
  <h1>JavaScript</h1>
  <h3>What is JavaScript?</h3>
  <p>Today we are going to talk about JavaScript</p>
</header>
 

Try it Live Find Coding Exercises

<main>

This is one of the new HTML5 tags which depicts space for the main content of a webpage.

Example
<main id="content" class="group" role="main">

Try it Live Find Coding Exercises

<mark>

This new HTML5 element makes the text (or part of the text) highlighted on your site.

Example

<p>The mark tag is <mark>useful</mark> when you need to highlight important information.</p>

Try it Live Find Coding Exercises

<menuitem>

In HTML5, this element creates a menu item which can be accessed through a pop-up menu on your website.

Example
<img src="image.png" id="doggo" width="250" alt="Space Doggo" contextmenu="sunmenu">

<menu type="context" id="sunmenu">
  <menuitem label="Zoom In" icon="Myzoom-in.png" onclick="zoomin()">
  <menuitem label="Zoom Out" icon="Myzoom-out.png" onclick="zoomout()">
  <menuitem label="Reload Image" icon="Myreload.png" onclick="window.location.reload();">
</menu>

Try it Live Find Coding Exercises

<meter>

This element depicts a scalar measurement in a defined range on your website.
tag/game-dev

Karma points: 85%

Gas in Tanker: 11%

Example

<p>Karma points: <meter optimum="30" high="80" max="100" value="85">85%</meter></p>
<p>Gas in Tanker: <meter low="20" max="100" value="11">11%</meter></p>
<p>Animals Petted: <meter low="10" high="60" min="0" max="50" value="43" title="Animals">Petting</meter></p>
<p>Satisfaction: <meter max="100" optimum="100" value="100">100%</meter></p>

Try it Live Find Coding Exercises

<nav>

This is one of the HTML5 new elements which describes a special space for navigation links on your website.

Example
<nav>
  <ul>
    <li><a href="https://www.bitdegree.org/tag/gamified/">Gamified Courses</a></li>
    <li><a href="https://www.bitdegree.org/tutorials/">Tutorials</a></li>
    <li><a href="https://www.bitdegree.org/course/learn-solidity-space-doggos/">Space doggo courses</a></li>
    <li><a href="https://www.bitdegree.org/tag/game-dev/">Game Dev Courses</a></li>
  </ul>
</nav>

Try it Live Find Coding Exercises

<progress>

One of the new HTML5 tags that define a progress bar for a task which is included on your web page.

Example
<progress value="60" max="100"></progress>

Try it Live Find Coding Exercises

<rp>

This HTML5 tag describes what is shown when the browser does not support <ruby> element included in your website.

Example
<ruby>攻殻
  <rp></rp>
  <rt>こうかく</rt>
  <rp></rp>
</ruby>

Try it Live Find Coding Exercises

<rt>

The <rt> element describes the explanation for Asian typography so your web page could display Asian symbols correctly.

Example
<ruby><rt>Kan</rt><rt>ji</rt>
</ruby>

Try it Live Find Coding Exercises

<ruby>

This element is used to define annotation for Asian typography so your website could display Asian symbols correctly.

Example
<ruby>攻殻
  <rp></rp>
  <rt>こrうかく</rt>
  <rp></rp>
  機動隊
  <rp></rp>
  <rt>きsどうたtい</rt>
  <rp></rp>
</ruby>

Try it Live Find Coding Exercises

<section>

This is also one of the new HTML5 tags. It is used to set a part of the content to one <section> element.

Example
<section>
  <h1>Section Heading</h1>
  <p>The section tag can contain any elements.</p>
  <img src="image.png" alt="section example">
</section>

Try it Live Find Coding Exercises

<summary>

This element is used for defining a title for the <details> element on your web page.

Some details

Provide more info about the details here.

 

Example

<details>
  <summary>Some details</summary> 
  <p>Provide more info about the details here.</p>
</details>

Try it Live Find Coding Exercises

<time>

This is one of the new HTML5 tags for defining time and date on your website.

Example
<h2>The premiere show starts at <time>21:00</time> today.</h2>

Try it Live Find Coding Exercises

<wbr>

This is one of the HTML5 new features which creates a space for a possible line break when a website is watched on different-sized screens.

Example
<p>To learn programming, you must be <wbr>Motivated</wbr> and ready.</p>

Try it Live Find Coding Exercises

HTML5 Tags: New HTML5 Form Elements

<datalist>

The <datalist> tag sets pre-defined options in HTML input element when creating HTML forms.

Example
<input list="books">
<datalist id="books">
  <option value="Fiction">
  <option value="Non-Fiction">
</datalist>

Try it Live Find Coding Exercises

<keygen> (deprecated)

This is one of the new HTML5 tags which defines space for the key-pair generator for HTML forms. However, this tag is deprecated.

Example
<form action="login" method="POST">
  Username: <input type="text" name="user_name">
  Password: <input type="password" name="user_password">
  Keygen Strength: <keygen name="login_form">
  <input type="submit" value="Login">
</form>

Try it Live Find Coding Exercises

<output>

This tag creates an area for a result of a calculation on your web page.

Example
<form oninput="result.value=parseInt(x.value)+parseInt(y.value)">
  0<input type="range" id="x" value="75">100
  +<input type="number" id="y" value="72">
  =<output name="result" for="x y"></output>
</form>

Try it Live Find Coding Exercises

HTML5 Tags: New HTML5 Graphics Elements

<canvas>

This is one of the new HTML5 elements which separates some specific space for JavaScript graphics that you may want to include on your site.

Example
<canvas id="canvas01" width="400" height="300" style="border: 1px solid #eee;"></canvas>

Try it Live Find Coding Exercises

<svg>

This is one of the new HTML5 tags, which defines a specific space for SVG graphic drawing on your web page.

Example
<svg width="200" height="200">
  <rect width="200" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>

Try it Live Find Coding Exercises

HTML5 Tags: New HTML5 Media Elements

<audio>

This is one of the new HTML5 tags which sets a specific area for including audio content into your website.

Example
<audio controls>
  <source src="audio-tag-example.mp3" type="audio/mpeg">
  <source src="audio-tag-sample.wav" type="audio/wav">
  <source src="audio-tag-demo.ogg" type="audio/ogg">
  Audio tag is not supported in this browser.
</audio>

Try it Live Find Coding Exercises

<embed>

This is also one of the new HTML5 tags that depicts a specific space for external plug-ins to your website.

Example
<embed src="https://www.youtube.com/embed/10r9ozshGVE">

Try it Live Find Coding Exercises

<source>

This element defines a source for <video> or <audio> elements from where the content it taken from.

Example
<audio controls>
  <source src="melody.mp3" type="audio/mpeg">
  <source src="melody.ogg" type="audio/ogg">
  This text will be displayed if the browser does not support the audio element.
</audio>

Try it Live Find Coding Exercises

<track>

This is one of the new HTML5 tags which sets an audio track for <video> or <audio> elements on your website.

Example
<video controls width="325" height="245">
  <source src="random_video.mp4" type="video/mp4">
  <source src="track_video.mp4" type="video/mp4">
  <track src="english_subtitles.vtt" kind="subtitles" srclang="en" label="English">
  <track src="lithuanian_subtitles_lt.vtt" kind="subtitles" srclang="lt" label="Lithuanian">
</video>

Try it Live Find Coding Exercises

<video>

This net HTML5 tag sets a specific place for adding video material to your website to make your content more interesting and dynamic.

Example
<video controls width="400" height="300">
  <source src="video-tag-example.mp4" type="video/mp4">
  <source src="video-tag-sample.webm" type="video/webm">
  <source src="video-tag-demo.ogg" type="video/ogg">
  Video tag is not supported in this browser.
</video>

Try it Live Find Coding Exercises

HTML5 Tags: New Attribute Syntax

There are four new different ways to write an attribute with HTML5 tags. The examples below show all of those four ways.

Example
<input type="text" value="HTML5 New Elements" disabled>

Find Coding Exercises

Example
<input type="text" value=HTML5>

Find Coding Exercises

Example
<input type="text" value="HTML5 New Elements">

Find Coding Exercises

Example
<input type="text" value='HTML5 New Elements'>

Find Coding Exercises