HTML5 New Tags

HTML5 includeds 20+ new tags or new elements. These tags or elements includes new media tags, new semantic tags, svg, canvas etc. HTML5 is now more semantic than html4. Here is a list of new tags in html5, with their meaning, use and example..

HTML5 Tags List

Tag Name Description
Article Defines an article, or Independent Content. Must have an Heading Tag( h2-h6).
Section Defines a section in a document. Must have an Heading Tag( h2-h6)
Aside Defines content aside from the page content
Details Defines additional details that the user can view or hide
Summary Defines a visible part for a <details> element
Time Defines a date/time <time datetime="2016-04-15T10:00">15 Apr</time>
<bdi> Isolates a part of text that might be formatted in a different direction from other text outside it
Command Defines a command button that a user can invoke
Figure Specifies self-contained content, like images, illustrations, diagrams, code listings, etc
Figcaption Defines a caption for a <figure> element
Picture Picture Element is used to show High or Low resolution image for Desktop and Mobile Websites
Footer Defines a footer for a document or section
Header Defines a header for a document or section
Mark Defines marked or highlighted text
meter Defines a scalar measurement within a known range (a gauge).
Nav Defines navigation links.
progress Represents the progress of a task.
canvas Canvas is used to create Graphs, Games and Animated contents using javascript.
HTML5 Canvas.
<canvas id="mycanvas">
</canvas>
SVG SVG Scalable Vector Graphics can create shapes, Graphs, And other Vector Based drawings. HTML5 SVG
<svg>
    <line x1="0" y1="0" x2="100" y2="50" stroke="red"></line>
</svg>
<ruby> Defines a ruby annotation (for East Asian typography)
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<rp> Defines what to show in browsers that do not support ruby annotations
Wbr Defines a possible line-break.

Article

Article defines an Self Contained composition in a webpage. An Artice could be a blog post, forum, newspaper article, an independent content, user comment.

An article must have an heading. h2-h6


<article>
    <h2>Heading for Article</h2>
</article>

Section

A Section represents an generic section of a document.Section could be various sections of an article with heading.

An section must have an heading. h2-h6


<section>
    <h2>Heading for Section</h2>
</section>

Aside

Aside is the sidebar of a container. The content inside aside is related to content around. Aside could be sibling of div, section or article. But the content inside aside is relevent to adjacent sibling.

Aside Example

           
<aside>
    <p>Aside</p>
</aside>

Details

Defines additional details that the user can view or hide. Content indside <details> is hidden. Only <summary> is visible to user. User can click on summary to view details .

Details Example

Click to see detailsHello

<details>
    <summary>Click To See</summary>
    <p>Hello</p>
</details>                
                

Details Example with open

An additional open attribute can open details on pageload..

Click to see detailsHello

<details open>
    <summary>Click To See</summary>
    <p>Hello</p>
</details>                
                

Time

Time tag is an inine level element, used to represents a time or exact date in gregorian calander.

Time Tag Example

New Batch Timings are 10:00 AM.


<p> New Batch Timings are <time>10:00</time> AM.</p>    

Time Tag with datetime

An additional datetime attribute can write datetime in ISO String.

New Batch Timings are 10:00 AM.


<p> New Batch Timings are <time datetime="2017-12-08T10:00">10:00</time> AM.</p>    

Command

Command Tag is an obsolate element of html5. It represents a command, which a user can invoke.


<command>    
<command type="command">    
<command type="radio">    
<command type="checkbox">    
command tag is obsolate now. Even major browsers doesn't support command tag. Try avoid it.

Figure

Figure tag Specifies self-contained content, like images, illustrations, diagrams, code listings, etc. Figure can have figcaption child to explain what figure is telling.


<figure>    
    <img src="img/path" alt="...">
    <figcaption> caption for image</figcaption>    
</figure>    

Picture

HTML5 picture tag is used to show either high or low resolution image for Desktop and Mobile view. We can set two or more different images for different screens, and browser will load a single image, which match criteria.

html5 picture tag

        
<picture>
    <source srcset="img/logo-sm.png" media="(max-width: 460px)">
    <img src="img/logo.png" alt="Tech Altum Logo">
</picture> 
To test picture tag, minimise your browsers screen, or if using smartphone, use landscape and portrait mode to test.



Mark

Mark is and inline level element used as an highlighter for text. Default background-color of mark tag is yellow, and default font color is black.

This text is marked.

<p>This text is <mark>marked<>/mark</p>


Wbr

wbr is a possible line break. This will works only if needed.

document.getElementById("para").innerHTML="This is a para."


document.getElementById("para").innerHTML<wbr>="This is a para";    
Minimize Browser window to test line break.

HTML5 Removed Tags

With HTML5, some presentational tags are removed. These tags still get browser supporat, but W3C Validator shows errors. Here is a list of some removed elements in html5.

HTML5 Removed Tags or Elements
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<marquee>
<noframes>
<strike>
<tt>