HTML References
HTML5 New Tags
HTML5 introduced several new tags to improve semantic meaning, multimedia handling, and web structure.
These tags make the code more readable and help search engines and assistive technologies (like screen readers) understand the content better.
Why HTML5 Introduced New Tags
Before HTML5, developers used generic <div> and <span> tags for layout, which didn’t convey meaning.
HTML5 introduced semantic elements - tags that describe their purpose clearly (like <header>, <footer>, <article>).
Example:
html
<header>
<h1>Welcome to HTML5</h1>
</header>
<article>
<h2>HTML5 Features</h2>
<p>HTML5 brings new structure and multimedia tags for modern web development.</p>
</article>
<footer>
<p>© 2025 HTML5 & CSS3</p>
</footer>This is both developer-friendly and SEO-friendly.
Structural & Semantic Tags
| Tag | Description |
|---|---|
<header> | Defines the top section of a webpage or a document section. |
<footer> | Defines the footer section (bottom area). |
<nav> | Represents a navigation menu or group of links. |
<article> | Defines self-contained, independent content (e.g., news, blog posts). |
<section> | Represents a thematic grouping of content. |
<aside> | Defines content indirectly related to the main content (e.g., sidebar). |
<main> | Specifies the main or central content of a document. |
<figure> | Groups images, diagrams, or illustrations with captions. |
<figcaption> | Defines a caption for the <figure> element. |
<mark> | Highlights text. |
<time> | Represents time, date, or both. |
Multimedia Tags
| Tag | Description |
|---|---|
<audio> | Used to embed audio files. |
<video> | Used to embed videos. |
<source> | Defines multiple media sources for <audio> or <video>. |
<track> | Provides captions or subtitles for videos. |
<canvas> | Used for drawing graphics using JavaScript. |
<svg> | Defines scalable vector graphics. |
<embed> | Embeds external content like plugins or media. |
Example:
html
<video controls width="320">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>Form-Related New Tags
| Tag | Description |
|---|---|
<datalist> | Defines a list of pre-defined options for an input field. |
<output> | Represents the result of a calculation or action. |
<progress> | Shows the completion progress of a task. |
<meter> | Displays a scalar measurement (e.g., temperature, rating). |
<keygen> | (Deprecated) Used for generating encryption keys. |
Example:
html
<label for="browser">Choose your browser:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
</datalist>Interactive & Scripting Tags
| Tag | Description |
|---|---|
<details> | Creates a collapsible content section. |
<summary> | Defines a visible heading for the <details> element. |
<dialog> | Represents a dialog box or popup. |
<menu> | Defines a list or menu of commands. |
<menuitem> | Represents a command in a popup menu (deprecated in HTML5.2). |
Example:
html
<details>
<summary>Show Details</summary>
<p>This is additional information that can be toggled open or closed.</p>
</details>Other Useful Additions
| Tag | Description |
|---|---|
<wbr> | Suggests a possible line break. |
<bdi> | Isolates text for bidirectional formatting. |
<bdo> | Overrides current text direction. |
<ruby>, <rt>, <rp> | Used for annotations in East Asian typography. |
Example:
html
<p>My name is <bdi>علي</bdi>.</p>Complete Example of HTML5 New Tags
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 New Tags Example</title>
</head>
<body>
<header>
<h1>HTML5 Semantic Example</h1>
<nav>
<a href="#home">Home</a> |
<a href="#articles">Articles</a>
</nav>
</header>
<main>
<article id="articles">
<header>
<h2>Understanding HTML5 Tags</h2>
</header>
<p>HTML5 introduced many new elements that improve the structure of web documents.</p>
<figure>
<img src="/assets/images/html5_and_css3_logo.png" alt="HTML5 Logo" width="150">
<figcaption>HTML5 Logo</figcaption>
</figure>
</article>
<aside>
<h3>Did You Know?</h3>
<p>You can use the <mark><mark></mark> tag to highlight important text!</p>
</aside>
</main>
<footer>
<p>© 2025 HTML5 & CSS3 Tutorials</p>
<time datetime="2025-10-22">October 22, 2025</time>
</footer>
</body>
</html>Browser Support
Chrome | Edge | Firefox | Safari | Opera | IE9+ |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |
Conclusion
HTML5 new tags have made web pages more meaningful, accessible, and organized.
They reduce dependency on <div>-based layouts and improve both user experience and SEO performance.
Learning and applying these tags is essential for writing modern, professional, and semantic HTML.