New Elements in HTML5


New Elements

article header svg
aside main time
audio math track
bdi mark video
canvas meter wbr
datalist nav
details output
embed progress
figcaption section
figure source
footer summery

Main

<main>...</main> element is used to wrap the main content of the page.

Article

<article>...</article> element contains the important content inside the main element. This does not give any behavior to the content rather this is used for semantic purposes. You can have more than one article element in a page.

Aside

<aside>...</aside> is used to keep content that are important but not necessarily directly related to the main article and/or is not as important as the article element.

Section

<section>...</section> element is a bit like the <div> element and is used to group different elements. This grouping is for making a logical group rather than for visual purposes.

Header and Footer

<header>...</header> and <footer>...</footer> are generally used to frame the main content of the page above and below respectively.

<nav>...</nav> element is a logical container for site navigation. This is explicitly reserved for links to the locations or a part of the original web-site.

So far, A logical skeleton of a typical web-page would look like:

<!DOCTYPE html>
<html>
    <head>...</head>
    <body>
        <header>
            <nav>...</nav>
        </header>
        <main>
            <article>
                <section>...</section>
                <aside>...</aside>
            </article>
        </main>
        <footer>
            <nav>...</nav>
        </footer>
    </body>
</html>

Time

Helps semantically identify a point in time. The pubdate attribute gives the time stamp for the publication date of the page. A HTML page may only have a single pubdate attribute.

Code:

<time
    date="2018-07-15" pubdate>
    July 15, 2018
</time>

Figure and Figcaption

The figure and figcaption elements are meant to provide semantic meaning about the figure to search engines.

Code:

<figure>
    <figcpation>
        Screenshot of menu
    </figcaption>
    <img src="screenshot.jpg">
</figure>

Details and Summary

Code:

<details>
    <summary>Events</summary>
    <p>Come join us</p>
</details>

Following is an implementation of the same

Events

Come join us

Mark

<mark> highlighted text </mark> element provides semantic meaning to the highlighted text content.

wbr

<wbr> or wordbreak element can tell the browser where to hyphenate a really long word when wrapping text to new line.

Output

<output></output> element provides semantic meaning to the result of a calculation.

Embed

<embed src="intro.mov> acts as a host container for external plugin. These days, it is no longer used.

Canvas

<canvas>...</canvas> element is used to draw shapes on the page.

Audio and Video element

<video controls>
    <source src="vid.mp4" type="video/mp4">
    <source src="vid.webm" type="video/webm">
    <track
        kind = "subtitles"
        label = "Spanish Subtitle"
        src = "es.vtt"
        srclang = "en">
</video>
<audio controls>
        <source src="music.mp3" type="audio/mp3">
</audio>

Meter

meter element is used to demonstrate a value between a threshold of values. e.g battery power, product ratings and so on.


70 out of 100

<meter
    min="0"
    max="100"
    value="70">
    70 out of 100
</meter>

Progress

progress is a related element to meter, it depicts how much progress the user has made.


<progress
    max="100"
    value="50">
</progress>

Math

a 2 + b 2 = c 2

Code:

<math>
    <!-- MathML elements -->
</math>

Datalist

With this element we can define a list of elements which are shown as options in input field.

code:

<form>
    <input
        type="text"
        list="colors"
        name="color_names">
    <datalist id="colors">
        <option value="blue">
        <option value="red">
    </datalist>
</form>
Show Comments