HTML5 New Elements with Examples

HTML5 gave the web new elements that describe content with more meaning. Developers now use these elements to build pages with strong structure and context.

Old versions of HTML had only basic tags; hence, HTML5 solved the gap with new semantic tags.

Why HTML5 Introduced New Semantic Elements

Semantic tags tell the browser and user what a section of content means. A tag like <header> shows the top section of a page, while <footer> shows the bottom.

Tags like <header> and <footer> define top and bottom sections. A <section> divides content into blocks and <article> holds stand-alone content.

The <mark> tag highlights words with focus. The <time> tag sets dates and times in a standard way.

HTML5 added <audio> for sound and <video> for video content. Both let developers run media without plugins.

All new browsers support HTML5 tags. Old browsers can use polyfills to show them in the right way.

Search engines read semantic tags to know page structure. Screen readers also use these tags to guide users with strong support. Hence, new tags improve ranking and make sites easy to use.

Examples of the New Elements in HTML5

Use of <header>

<header>
  <h1>My Web Page</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>

This example shows a <header> with a title and a navigation menu. A browser reads the block as the top part of the page, and it also tells search engines about the start of content.

Use of <article>

<article>
  <h2>News Post</h2>
  <p>This is a full post with text and links.</p>
</article>

This <article> tag holds a post that can stand on its own. A news site uses it for a post that does not depend on other content, and search engines read it as an independent block.

Use of <video> with Controls

<video width="400" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

The <video> tag shows a movie that runs inside the browser. The controls attribute gives play, pause, and volume, and the source tag adds the file path for the media.

Use of <time>

<p>The event starts at <time datetime="2025-08-21T19:00">7 PM</time>.</p>

The <time> tag marks a date or hour with machine-readable data. A calendar tool or search engine can use this format to track events, while the user still reads a human time.

Wrapping Up

You learned about new HTML5 elements and their uses. You also saw how tags like <header>, <article>, <video>, and <time> improve structure and support.

Here is a quick recap:

HTML5 gave semantic tags, which improve SEO, they support accessibility.

FAQs

<header> - Defines page or section header  
<footer> - Defines page or section footer  
<article> - Represents independent content  
<section> - Groups related content  
<nav> - Defines navigation links  

<section>  
  <h2>News</h2>  
  <article>  
    <h3>Local Event</h3>  
    <p>Details about the event.</p>  
  </article>  
</section>  

<header>Site Title</header>  
<main>Main content here</main>  
<footer>Contact Info</footer>  

Similar Reads