A Look into HTML5 New Elements

13 Sep 2018

Beginner

2.59K

In the earlier articles, we have seen the advent of HTML; have learnt about various elements, tags that make HTML wonderful. In this article, we are going to learn about the legacy problems solved by HTML5 and new stuffs which were introduced with HTML5.

Problem solved by HTML5

In HTML4 semantic sections of the document were differentiated by various <div> elements. HTML5 solves this issue by introducing various new sectioning elements such as <section>, <article>,<aside>, <header>, <footer> etc.This makes the HTML5 outline algorithm to read the document in a more precise and up to mark way. Let’s start with the list of new HTML5 elements and their respective descriptions.

HTML5 Element

Description

As the name suggests, it’s a separate section used to include a blog, a forum post, a magazine article etc.

<aside>

As the name suggests, it’s used to include some extra information regarding the main content.

<bdi>

It’s used to isolate the enclosed text which maybe formatted in a way different than the texts outside this tag.

Creates an interactive section, which when clicked will display its information.

< dialog>

Used to include a dialog box in the web page.

Used to include caption for an image inside a <figure> element.

Used to basically represent an image and its caption.

Used to include footer content in the web page, like licensing information, copyright information etc.

Used to include header content in the web page, like information about the page, summary etc.

<main>

Used to include the main centralized topic of the web page.

<mark>

Used to highlight a piece of content in the web page.

<meter>

Used to include a scalar/fractional value within a provided range, not to be confused with the <progress> element.

<nav>

Used to provide navigational links, ex: menus.

Used to include a progress bar in the web page.

<ruby>

Used to include a ruby annotation. Ex: Japanese characters

<rp>

Used to include parentheses in a ruby character.

<rt>

Used to include pronunciation of a ruby annotation.

Used to represent a section in the web page.

Used to include the information within a <details> element, click on the <summary> element would display the info.

<time>

Used to include Date/Time component in a web page.

<wbr>

Used to include a word break.

Sort of a dropdownlist, set of options.

Used to display result of a calculation in the web page.

Used to draw animations and graphics in a web page.

<audio>

Used to include an audio content in the web page.

<embed>

Used to include external plug-ins in the web page.

Used to specify multiple media resources for the <audio>, <video>, <picture> elements.

<track>

Used within an <audio> or <video> element to handle subtitles, captions, descriptions etc. of a video or audio in the web page.

<video>

Used to include a video in the web page.

BROWSER COMPATIBILITY

Let’s have a look at the browser compatibility of the above HTML5 elements.

Element

Yes

<aside>

Yes

<bdi>

Yes

No

Yes

No

Yes

< dialog>

Yes

No

Yes

No

Yes

Yes

Yes

<main>

Yes

<mark>

Yes

<meter>

Yes

<nav>

Yes

Yes

<ruby>

Yes

<rp>

Yes

<rt>

Yes

Yes

Yes

No

Yes

<time>

Yes

<wbr>

Yes

Yes

Yes

Yes

<audio>

Yes

<embed>

Yes

Yes

<track>

Yes

<track>

Yes

<video>

Yes

Code Examples of the above new HTML5 elements

 <!DOCTYPE html> 
 <html> 
 <head> 
 <meta charset="utf-8" /> 
 <title>HTML5</title> 
 <link href="StyleSheet.css" rel="stylesheet" /> 
 </head> 
 <body> 
 <h3><code>article</code> element example:</h3> 
 <article> 
 <h1>FIFA World Cup 2018</h1> 
 <article> 
 <h2>Winners</h2> 
 <p>France</p> 
 </article> 
 <article> 
 <h2>Runners Up</h2> 
 <p>Croatia</p> 
 </article> 
 <article> 
 <h2>3rd Place</h2> 
 <p>Belgium</p> 
 </article> 
 </article> 
 
 <h3><code>aside</code> element example:</h3> 
 <p>Jurassic World 2018</p> 
 <aside> 
 <p> 
 <i> 
 Dinosaurs appeared around 243 million years ago <br> 
 and were from Reptiles family. 
 </i> 
 </p> 
 </aside> 
 
 <h3><code>details</code> element example:</h3> 
 <details> 
 <summary>Details</summary> 
 Description of the detail. 
 </details> 
 
 <h3><code>dialog</code> element example:</h3> 
 <dialog open>This is a dialog window</dialog> 
 
 <h3><code>figure figcaption</code> elements example:</h3> 
 <figure> 
 <img src="https://blog.bufferapp.com/wp-content/uploads/2014/05/dreamstimefree_169606.jpg" alt="Coffee" height="100" width="100" /> 
 <figcaption>Coffee Beans</figcaption> 
 </figure> 
 
 <h3><code>footer</code> element example:</h3> 
 <footer> 
 <p>Copyright 2018</p> 
 <p> 
 Please contact: <a href="mailto:abcd@gmail.com"> 
 abcd@gmail.com 
 </a>. 
 </p> 
 </footer> 
 
 <h3><code>header</code> element example:</h3> 
 <header> 
 <h1>Very important text</h1> 
 </header> 
 <p>Lorem Ipsum dolor set amet....</p> 
 <h3><code>main</code> element example:</h3> 
 <main> 
 <h1>Operating Systems.</h1> 
 <p>Windows, Linux, MacOs.</p> 
 <article> 
 <h1>Windows</h1> 
 <p> 
 Provided by Microsoft. 
 </p> 
 </article> 
 <article> 
 <h1>Linux</h1> 
 <p>Various distributions, Open Source.</p> 
 </article> 
 <article> 
 <h1>MacOS</h1> 
 <p>Provided by Apple.</p> 
 </article> 
 </main> 
 
 <h3><code>mark</code> element example:</h3> 
 <mark>Hello There!!</mark> 

 <h3><code>meter</code> element example:</h3> 
 <meter value="0.4">40 %</meter> 
 
 <h3><code>nav</code> element example:</h3> 
 <nav> 
 <a href="http://www.google.com">Google</a> | 
 <a href="http://www.facebook.com">Facebook</a> | 
 <a href="http://www.apple.com">Apple</a> | 
 <a href="http://www.microsoft.com">Microsoft</a> 
 </nav> 
 
 <h3><code>progress</code> element example:</h3> 
 <div> 
 <label for="download">Download progress</label> 
 <progress id="download" name="download" max="100" value="40"> 
 40% 
 </progress> 
 </div> 
 
 <h3><code>ruby, rt, rp</code> elements example:</h3> 
 <ruby> 
 ? <rt><rp>(</rp>??`<rp>)</rp></rt> 
 </ruby> 
 
 <h3><code>section</code> element example:</h3> 
 <section> 
 <h1>Linux</h1> 
 <p>Open Source OS, various distros such as Ubuntu, Fedore, CentOS, Suse etc.</p> 
 </section> 
 
 <h3><code>summary</code> element example:</h3> 
 <details> 
 <summary>What's the verdict?</summary> 
 Test Cases have passed. 
 </details> 
 
 <h3><code>time</code> element example:</h3> 
 <p>The time is<time>10:00</time> now.</p> 
 <p>Let's meet on <time datetime="2018-09-21 21:00">Wednesday</time>.</p> 
 
 <h3><code>datalist</code> element example:</h3> 
 <label for="car-choice">Choose a car:</label> 
 <input list="car-list" id="car-choice" name="car-choice" /> 
 <datalist id="car-list"> 
 <option value="i20"> 
 <option value="Fortuner"> 
 <option value="Beetle"> 
 <option value="Polo"> 
 <option value="Santro"> 
 </datalist> 
 
 <h3><code>canvas</code> element example:</h3> 
 <canvas id="sampleCanvas">Your browser does not support canvas tag.</canvas> 
 <script> 
 var canvas = document.getElementById("sampleCanvas"); 
 var ctx = canvas.getContext("2d"); 
 ctx.fillStyle = "#80FF00"; 
 ctx.fillRect(0, 0, 80, 100); 
 </script> 
 
 <h3><code>audio</code> element example</h3> 
 <audio controls src="http://soundbible.com/mp3/Tyrannosaurus%20Rex%20Roar-SoundBible.com-807702404.mp3"> 
 Your browser does not support the 
 <code>audio</code> element. 
 </audio> 
 
 <h3><code>video</code> element example:</h3> 
 <video controls 
 muted 
 src="https://www.youtube.com/embed/b3sp1egBb0s" 
 width="300" 
 height="200"> 
 Your browser doesn't support videos. 
 </video> 
 
 <h3><code>embed</code> element example:</h3> 
 <embed src="https://www.youtube.com/embed/b3sp1egBb0s" /> 
 </body> 
 </html>

Outputs of the above code snippets in the browser are something as below

HTML5 New Way of Declaring Attributes

HTML5 has introduced 4 different ways to declare an attribute, let’s have a look at them.

Type

Example

Empty

Unquoted

Double-quoted

Single-quoted

HTML5 has introduced few new input types as well; let’s have a look at them.

color
datetime
datetime-local
email
month
range
search
tel
time
url
week

HTML5 codes for the above input types are as below

 
<!DOCTYPE html> 
 <html> 
 <head> 
 <meta charset="utf-8" /> 
 <title>HTML5</title> 
 <link href="StyleSheet.css" rel="stylesheet" /> 
 </head> 
 <body> 
 <form> 
 <h3>Color:</h3> 
 <input type="color" name="differentColor"> 
 
 <h3>Date:</h3> 
 <input type="date" name="whichDate"> 
 
 <h3>DateTime:</h3> 
 <input type="datetime" name="todayDatetime"> 
 
 <h3>DateTime-Local:</h3> 
 <input type="datetime-local" name="local"> 
 
 <h3>Email:</h3> 
 <input type="email" name="personalEmail"> 
 
 <h3>File:</h3> 
 <input type="file" name="attachment"> 
 
 <h3>Month:</h3> 
 <input type="month" name="auspiciousMonth"> 
 
 <h3>Number:</h3> 
 <input type="number" name="quantity"> 
 
 <h3>Range:</h3> 
 <input type="range" name="listOfNumbers"> 
 
 <h3>Search:</h3> 
 <input type="search" name="localSearch"> 
 
 <h3>Tel:</h3> 
 <input type="tel" name="telephone"> 
 
 <h3>Time:</h3> 
 <input type="time" name="userTime"> 
 
 <h3>Url:</h3> 
 <input type="url" name="siteUrl"> 
 
 <h3>Week:</h3> 
 <input type="week" name="valentineWeek"> 
 </form> 
</body> 
 </html>

New input types have given us the liberty to map almost any kind of input to the server side code without having to write mapping/plumbing code at the front end.Also these provide some kind of validations as well.

For ex: input type=”email”, it validates the standard email pattern.

SUMMARY

In this article, we have deep dived into the newer HTML5 elements, the newer input type attributes, 4 ways of declaring HTML5 attributes etc. In the articles to follow, we shall see about the HTML5 APIs and other stuffs.