HTML5 New Tags

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>
    <h1>Heading for Article</h1>
</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>FullStack Web Development</h1>

<section>
    <h2>Frontend Development</h2>
</section>

<section>
    <h2>Backend Development</h2>
</section>

</article>

Main

Main Tag is used once in a webpage to define main content of webpage. As per W3C, main in unique in a webpage.

The Main Element explains the main topic of the webpage.

To use main more than once, use hidden attribute on one main. Make sure at one time, only one main is visible.

<header>
  <h1>Header</h1>
</header>

<nav>
  <a href="">link</a>
  <a href="">link</a>
</nav>

<main>
  <h2>Main Content</h2>
</main>

<footer>
  <p>Footer</p>
</footer>

Two main in webpage

<main>
  <h1>Main Content 1</h1>
</main>
<main hidden>
  <h1>Main Content 2</h1>
</main>

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 Examples

           
<main>
  <aside>
      <p>Aside</p>
  </aside>
  <section>
    <h2>Section</h2>
  </section>
</main>

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

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

Details with open attribute

An additional open attribute can open details on page load..

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

Time

Time tag is an semantic inline level element used to represent date or time in Gregorian calendar. datetime attribute in time is recommended to add date and time in ISO Format.

Time Tag Example

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

<p> New Batch Timings are <time datetime="2026-07-21T10: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> <bdi lang="he">שלום</bdi> friend</p>

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. Figure can contain multiple child elements, but only one figcaption is allowed.

Figcaption

Figcaption is the caption of figure element.

<figure>    
    <img src="img/path" alt="..." width="400" height="300">
    <figcaption> caption for image</figcaption>    
</figure>    

Picture

The picture tag is used to specify multiple image sources for different devices or screen sizes.

It can be used to show either high or low resolution image for Desktop, Mobile or particular device.

It can also be used to show different image formats for modern and legacy browsers.

Picture tags can enhance performance of a website.

Picture for Mobile Devices

For mobile devices, use smaller image files to reduce loading time.

        
<picture>
    <source srcset="img/logo-sm.png" media="(max-width: 460px)">
    <img src="img/logo.png" alt="Tech Altum Logo" width="200" height="100">
</picture> 

To test picture tag, minimize your browsers screen, or if using smartphone, use landscape and portrait mode to test.

Picture Tag for high pixel density devices

For pixel density devices, use srcset with pixel density descriptors. 2x means twice the pixel density. We can also use 1.25x for 1.25 times or more pixel density.

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

Picture tag for webp images

The picture tag can also be used to show different image formats for modern and legacy browsers. If browser supports webp format, it will display webp image, otherwise it will display jpg image.

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

Picture tag for avif images

AVIf is a modern and efficient image format supported by many browsers after 2023. Use it for better image quality and performance.

        
<picture>
    <source srcset="img/logo.avif" type="image/avif">
    <source srcset="img/logo.webp" type="image/webp">
    <img src="img/logo.jpg" alt="Tech Altum Logo" width="200" height="100">
</picture> 
    

Header

Defines a header for a document, section or an article. Header can be used more than once on a single webpage. But try to use single header in a section, or an article.

<article>    
    <header>
        <h1>Header for Article<h1>
    </header>
    <p>Article Content Goes Here...</p>
</article>    

Footer

Footer tag defines footer of an document, section or an article. A webpage can have multiple footers, but in separate sections.

            
<footer>
  <p>Content for footer</p>
</footer>  

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.

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

Meter

Meter tag represents a scalar measurement within a known range, or a fractional value. This is also known as a gauge. Examples include disk usage, the relevance of a query result, or the fraction of a voting population.

Attributes: value (current value), min (minimum value), max (maximum value), low, high, optimum.

<p>Disk usage: <meter value="0.8" min="0" max="1">80%</meter></p>

Progress

Progress tag represents the completion progress of a task. It can be used to show the progress of a file upload, download, or any other task.

Attributes: value (current progress), max (total progress).

<p>File upload progress: <progress value="70" max="100">70%</progress></p>

Nav

Nav Tag is used to group navigational links. Nav can be used twice or more in a single webpage.

<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>            
            

Wbr

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

document.getElementById("para").innerHTML<wbr>="This is a para";    

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.