HTML5
HTML5 – New Tags
HTML5 introduced many new elements to give pages clearer structure and native capabilities. These fall into groups: semantic/structural tags, media tags, graphics tags, and interactive/form tags. Below is a reference table followed by a runnable semantic-layout example.
New HTML5 Tags at a Glance
| Tag | Category | Purpose |
|---|---|---|
| <header> | Semantic | Introductory content or a group of navigation links |
| <nav> | Semantic | A section of major navigation links |
| <main> | Semantic | The dominant, unique content of the document |
| <section> | Semantic | A thematic grouping of content |
| <article> | Semantic | Self-contained, independently distributable content |
| <aside> | Semantic | Content tangential to the main content (sidebars) |
| <footer> | Semantic | Footer for a section or page |
| <figure> / <figcaption> | Semantic | Media with an associated caption |
| <audio> / <video> | Media | Embed sound and video natively |
| <source> / <track> | Media | Media alternatives and text tracks/subtitles |
| <canvas> | Graphics | Scriptable 2D drawing surface |
| <svg> | Graphics | Inline scalable vector graphics |
| <progress> / <meter> | Interactive | Task progress and scalar gauge measurements |
| <details> / <summary> | Interactive | Native expandable/collapsible disclosure widget |
| <datalist> | Form | Predefined autocomplete options for an input |
| <output> | Form | Result of a calculation or user action |
| <mark> | Text | Highlighted / marked reference text |
| <time> | Text | Machine-readable dates and times |
| <wbr> | Text | A suggested line-break opportunity |
Runnable Semantic Layout Example
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semantic HTML5 Layout</title>
<style>
body { font-family: sans-serif; margin: 0; }
header, footer { background: #1a73e8; color: #fff; padding: 12px 16px; }
nav a { color: #fff; margin-right: 12px; }
main { display: flex; gap: 16px; padding: 16px; }
article { flex: 2; }
aside { flex: 1; background: #f1f3f4; padding: 12px; }
</style>
</head>
<body>
<header>
<h1>My Blog</h1>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</header>
<main>
<article>
<h2>Understanding HTML5</h2>
<p>This article lives inside a semantic <article> element.</p>
</article>
<aside>
<h3>Related</h3>
<p>Sidebar content goes in <aside>.</p>
</aside>
</main>
<footer>
<p>© 2026 My Blog</p>
</footer>
</body>
</html>ℹ️
Semantic tags do not change how content looks by default — they describe MEANING. This helps search engines, screen readers, and other developers understand your page structure.
Key Takeaways
- HTML5 added semantic, media, graphics, and interactive tags.
- Semantic tags like <header>, <nav>, <main>, and <footer> replace generic <div> soup.
- Better structure improves accessibility and SEO.