A Full HTML5 Tags List: Get to Know the New Features
HTML5 New Elements
Lots of new features get added to coding languages every year. Same happened with the introduction of HTML5: some old tags have been changed to new ones, 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 comprehensive, yet easy to understand list of new HTML5 tags that you can refer to quickly when you need to.
HTML5 Tags: Main Tips
- While the first version of HTML5 was presented in 2008, it wasn't until 2014 that it became the stable World Wide Web Consortium recommendation.
- In HTML5, new features were introduced to simplify working with document structures and including media elements in the page.
- HTML5 took the constantly growing number of Internet-supporting devices into consideration and implemented changes to make the user experience as smooth as possible.
The Complete 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.
You can include attributes for HTML5 tags using three different types of syntax. See all of them in the example below:
<input type="text" value=HTML5> <input type="text" value="HTML5 New Elements"> <input type="text" value='HTML5 New Elements'>
New Structural Elements
To simplify working with the structure of the document for the developer, HTML5 introduced semantic tags:
HTML5 <article> tag defines a piece of self-contained information that can be reused:
<article> <h1>Fun Fact</h1> <p>Fun fact: most of the fun facts on the Internet are not actually fun.</p> </article>
The content of the <aside> tags describes content to be set to the side (e.g., a sidebar):
<aside> <h4>Lake</h4> <p>Oxford lake is a lake in the state.</p> </aside>
HTML5 <details> tag describes the details of your website or content in general. The details can either be visible to everyone or hidden. To provide a short summary for this element, use the new <summary> element:
<details> <summary>Copyright</summary> <p>- by your company</p> <p>Content governed by copyright.</p> </details>
<dialog> defines the dialog box in your website:
<dialog open id="DialogExample"> <p>Here is some text for example.</p> </dialog>
Note: not every browser supports the <dialog> tag equally well, so be careful when using it.
<figure> <figcaption>Dog</figcaption> <img src="image.png" alt="The Bread Dog" width="300" height="300"> </figure>
One of the new HTML5 features that help you describe your content better is the <footer> element, which sets space for footnotes:
<footer> <address> Postal Address: Door No.00, Street, City, State, Country. </address> <p>Copyright © 2018 All rights reserved.</p> </footer>
<main> depicts space for the main content of a webpage:
<main id="content" class="group" role="main">
The new <nav> element describes a special space for navigation links on your website:
<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>
<section> is used to set a part of the content for one section element:
<section> <h1>Section Heading</h1> <p>The section tag can contain any elements.</p> <img src="image.png" alt="section example"> </section>
New Inline Elements in HTML5
The <mark> element highlights the text (or part of it) on your site:
<p>The mark tag is <mark>useful</mark> when you need to highlight important information.</p>
<progress> defines a progress bar for a task, which is included on your web page:
<progress value="60" max="100"></progress>
Similarly, the <meter> element depicts a scalar measurement in a defined range on your website:
<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>
<time> is one of the HTML5 new tags used to define time and date on your website:
<h2>The premiere show starts at <time>21:00</time> today.</h2>
Working with Text in HTML5
<wbr> is one of the HTML5 new features. It defines the placement for a possible word break:
<p>To learn programming, you must be <wbr>Motivated</wbr> and ready.</p>
<ruby>, <rt> and <rp> tags are used to display ruby annotations for Asian characters. The
<ruby> element defines the annotations,
<rt> represents the ruby text, and
<rp> helps in cases when the browser does not support the elements from ruby text:
<ruby>攻殻 <rp>（ </rp> <rt>こrうかく</rt> <rp> ）</rp> 機動隊 <rp>（ </rp> <rt>きsどうたtい</rt> <rp> ）</rp> </ruby>
HTML5 <bdi> feature allows creating mirrored text. It means that the text will be written from right to left. It is very useful when writing in languages such as Arabic, or simply adding some whimsicality:
<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>
Newly Introduced Form Elements
The content of the <datalist> tags represents a drop-down menu allowing the users to select one or more predefined options:
<input list="books"> <datalist id="books"> <option value="Fiction"> <option value="Non-Fiction"> </datalist>
Using <output> tags creates an area for a result of a mathematical calculation in the page:
<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>
HTML5 New Features for Graphics and Sounds
<canvas id="canvas01" width="400" height="300" style="border: 1px solid #eee;"></canvas>
<svg> defines a specific space for SVG (scalable vector graphics) drawing on your web page:
<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>
Both of these new HTML5 elements are usually used with the <source> element which defines the source of the media to embed:
<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>
<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>
By using the <track> tags, you can provide an audio track for both
<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>
For external plug-ins in the website, use <embed>:
HTML5 Tags: Summary
- HTML5 was presented to the public in 2008, but the official specification was only finished in 2014.
- The new features of HTML5 make it easier to work with document structures and media elements.
- HTML5 simplified user experience adapting it to the modern reality of using the Internet on devices with various-sized screens.