HTML5 Semantic Elements

HTML5 includes new tags or new elements. These tags or elements includes new media tags, 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..


Article

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

An article must have an heading or subheading, i.e h1-h6


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

Section

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

An section can include various chapters of a book or various webpage sections, like introductions, content, contact info etc.

An section must have an heading. h2-h6


<article>
  <h1>Article Heading</h1>
<section>
    <h2>Subheading 1 for Section</h2>
</section>
<section>
    <h2>Subheading 2 for Section</h2>
</section>
</article>

Aside

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

aside is use for links, sidebars, for ads and other content we want to put aside.

Aside Example

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

Details

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

Summary

Summary is the visible part of details. Except summary, everything details is hidden.

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 page load..

Click to see detailsHello

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

Time

Time tag is an inline level element, used to represents a time or exact date in Gregorian calender.

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>    

Bi-Directional Isolation (BDI)

BDI or Bi-Directional Isolation tag is used to add text with opposite direction and to isolate from other text if direction is unknown.


  <p>Hello friend</p>
  <p lang="he"> <bdi>שלום</bdi> friend</p>

Command

Command Tag is an obsolete 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 obsolete 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 showing.

Figcaption

Figcaption is the caption of figure element.


<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, Mobile or particular device. We can set two or more different images for different screens or resolutions, and browser will load a single resource from server, based on criteria. Like High quality images for Macbook and Full HD screens, medium quality images for normal screens and small image for mobiles.

Picture tags can enhance performance of a website.

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, minimize your browsers screen, or if using smartphone, use landscape and portrait mode to test.

Picture Tag for retina display in mac

html5 picture tag

        
<picture>
    <source srcset="img/retina.jpg, img/retina-2x.jpg 2x">
    <img src="img/non-retina.jpg" alt="Tech Altum Logo">
</picture> 
  

Picture tag for webp images

        
<picture>
    <source srcset="img/logo.webp" type="image/webp">
    <source srcset="img/logo.jpg" type="image/jpeg">
    <img src="img/logo.jpg" alt="Tech Altum Logo">
</picture> 
    



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 support, 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>