New Tags in HTML5

HTML5 introduced several new tags that enhance the structure, semantics, and multimedia capabilities of web pages. These tags help make the content more meaningful and accessible to both users and search engines.

Semantic Elements

<header> – Defines a page or section header.
<nav> – Defines navigation links.
<article> – Represents a self-contained piece of content.
<section> – Represents a thematic grouping of content.
<aside> – Contains content tangentially related to the main content.
<footer> – Defines a footer for a section or page.

Media Elements

<audio> – Embeds sound content in documents.
<video> – Embeds video content with playback controls.
<source> – Specifies multiple media resources for media elements.
<track> – Provides subtitles and captions for <video> or <audio>.

Graphics and Interactive Content

<canvas> – Used for drawing graphics via scripting (JavaScript).
<svg> – Embeds scalable vector graphics (SVG) content.
<details> – Specifies additional details the user can view or hide.
<summary> – Summary, or label, for the <details> element.
<mark> – Highlights text that is relevant or important.
<progress> – Displays the progress of a task.
<meter> – Represents a scalar measurement within a known range.

Example


<article>
  <header>
    <h1>HTML5 Tags</h1>
  </header>
  <p>Learn about new semantic and multimedia tags.</p>
  <footer>Written by SmartCodingTips</footer>
</article>

← Previous: Intro to HTML5 Next: New Input Types →