Code has been added to clipboard!

A Full HTML5 Tags List: Learn HTML5 New Features and Elements in One Place

HTML5 New Elements

HTML5 comes with numerous tags, which allow you to define the element's function on the website. They don’t really change how well your website is going to work. However, a variety of them allows developers to write their code quicker and make it more dynamic.

Lots of new tags get added to coding languages every year. Some old features have been changed to new ones in HTML5, some were removed altogether, and others were newly made to help people create their websites in an easier manner.

In this tutorial, you'll find a lot of information about new tags that were added to the HTML vocabulary. We've made a huge, yet easy to understand list of HTML5 new tags for you to be able to refer quickly. We will also cover HTML5 new features that are now applicable and widely used.

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.

List of What's New

First of all, we will present you with a list of all the HTML5 new tags. Most of them represent structural elements, but there are also new tags used for graphics, forms, and media.

See the HTML5 tags list below to review them. In the upcoming sections, each tag will be explained and illustrated with an example.

  • <article>
  • <aside>
  • <audio>
  • <bdi>
  • <canvas>
  • <datalist>
  • <details>
  • <dialog>
  • <embed>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <keygen> (DEPRECATED)
  • <main>
  • <mark>
  • <menuitem>
  • <meter>
  • <nav>
  • <output>
  • <progress>
  • <rp>
  • <rt>
  • <ruby>
  • <section>
  • <source>
  • <summary>
  • <svg>
  • <time>
  • <track>
  • <video>
  • <wbr>

Structural Elements

In this part, you'll find the new structural HTML5 tags list in alphabetical order.

article

HTML5 <article> tag defines space for an article. It's way easier to use this element instead of <p> if you need a specific formatting for 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>

aside

The <aside> tag 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>

bdi

HTML5 <bdi> 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 languages such as Arabic, or simply adding some whimsicality.

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>

details

HTML5 <details> 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>

dialog

<dialog> defines the dialog box in your website. However, Microsoft Edge and Internet Explorer do not support this tag.

Example
<dialog open id="DialogExample">
  <p>Here is some text for example.</p>
</dialog>

figcaption

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

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

figure

The new HTML5 <figure> 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>

footer

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

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

header

The <header> tag allows you to set the header - the main title - of your website. It is similar to the 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>

main

<main> depicts space for the main content of a webpage.

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

mark

The <mark> element highlights the text (or part of it) on your site.

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

menuitem

The <menuitem> 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>

meter

<meter> element depicts a scalar measurement in a defined range on your website.

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>

nav

The new <nav> element 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>

progress

<progress> defines a progress bar for a task, which is included on your web page.

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

rp

<rp> 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>

rt

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

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

ruby

The <ruby> element is used to define annotation for Asian typography so your website can display Asian symbols correctly.

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

section

<section> is used to set a part of the content for 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>

summary

The <summary> 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>

time

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

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

wbr

<wbr> 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>

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>

keygen (DEPRECATED)

The <keygen> tag 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>

output

<output> 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>

Graphics

canvas

<canvas> 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>

svg

<svg> 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>

Media

audio

<audio> 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>

embed

<embed> depicts a specific space for external plug-ins on your website.

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

source

The <source> element defines a source for video or audio elements.

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>

track

The <track> tag 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>

video

The new HTML5 <video> 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>

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>
Example
<input type="text" value=HTML5>
<input type="text" value="HTML5 New Elements">
<input type="text" value='HTML5 New Elements'>

HTML5 Tags: Summary

  • HTML5 has a lot of new attributes and tags.
  • Attribute syntax has changed.
  • There are new HTML5 elements in structure, form, graphics, and media categories.