HTML5 introduced semantic elements that describe the meaning of the content on a page. These tags make your code easier to read, improve accessibility, and help search engines understand the structure of your website.
Structural HTML5 Elements
section
Use the <section> element to group related content that shares a common theme. It is more meaningful than a generic <div>.
<section>
<h2>Section 1</h2>
<p>This content belongs to section one.</p>
</section>
<section>
<h2>Section 2</h2>
<p>This content belongs to section two.</p>
</section>
article
Use <article> for content that can stand on its own, such as a blog post, news story, or product description.
<article>
<h2>My Favorite Topic</h2>
<p>This paragraph is meaningful on its own.</p>
</article>
header and footer
Use <header> for introductory content such as titles, logos, or navigation. Use <footer> for closing information such as copyright details or contact links.
<article>
<header>
<h2>Learning HTML5</h2>
</header>
<p>Semantic tags make HTML easier to understand.</p>
<footer>
<p>Published today.</p>
</footer>
</article>
Grouping and Related Content
aside
Use <aside> for supporting information that is related to the main content but not essential to it.
<p>HTML5 helps organize pages in a meaningful way.</p>
<aside>
<h4>Tip</h4>
<p>Semantic tags improve accessibility and search engine understanding.</p>
</aside>
figure and figcaption
Use <figure> to group visual content such as images, diagrams, or code examples. Use <figcaption> to add a caption.
<figure>
<img src="logo.png" alt="Example logo" />
<figcaption>An example figure with a caption.</figcaption>
</figure>
Navigation
nav
Use <nav> to group links that help users move around your website.
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
Embedded Content
Some HTML5 elements are used to embed media or external resources.
audio
Use <audio> to include sounds such as music or podcasts.
<audio controls>
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
canvas
Use <canvas> to draw graphics with JavaScript.
<canvas></canvas>
embed
Use <embed> to place external content such as a media player or plugin.
<embed type="text/html" src="another_page.html" />
track
Use <track> to add captions or subtitles to audio and video files.
<video controls>
<source src="movie.mp4" type="video/mp4" />
<track src="captions.vtt" kind="subtitles" srclang="en" label="English" />
</video>