HTML5 Document Structure Tags
HTML5 introduced semantic elements to describe the structure of web documents more clearly:
| Tag | Purpose |
|---|
<section> | Defines a standalone section in a document, typically with a heading. |
<article> | Represents self-contained content (e.g., a blog post, article, or comment). |
<aside> | Defines content that is tangentially related (e.g., a sidebar or ad). |
<header> | Contains introductory content (logo, nav, heading) usually at the top of a section or page. |
<footer> | Contains footer information (contact, copyright, links). |
<nav> | Declares navigation links. |
<dialog> | Represents a dialog box or popup window. |
<figure> | Wraps self-contained media content (images, charts, etc.) with <figcaption>. |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Structure Example</title>
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<a href="#home">Home</a> |
<a href="#about">About</a> |
<a href="#contact">Contact</a>
</nav>
</header>
<section id="home">
<h2>Welcome Section</h2>
<p>This is the main welcome section of the page.</p>
</section>
<section id="about">
<article>
<h2>About Us</h2>
<p>This article talks about our history and mission.</p>
</article>
<article>
<h2>Team</h2>
<p>This article introduces our team members.</p>
</article>
</section>
<aside>
<h3>Quick Links</h3>
<ul>
<li><a href="#">FAQ</a></li>
<li><a href="#">Support</a></li>
</ul>
</aside>
<figure>
<img src="image.jpg" alt="Example Image" width="300">
<figcaption>This is a caption for the image.</figcaption>
</figure>
<dialog open>
<p>This is a sample dialog box.</p>
</dialog>
<footer>
<p>© 2025 My Website. All rights reserved.</p>
</footer>
</body>
</html>
HTML5 Multimedia and Graphics
Audio & Video Tags
htmlCopyEdit<audio controls>
<source src="sound.mp3" type="audio/mpeg">
</audio>
<video controls width="400">
<source src="video.mp4" type="video/mp4">
</video>
- Attributes:
controls, autoplay, loop, muted, poster (for <video>)
me-local | Select local date and time (no timezone). |
date | Select a calendar date. |
month | Select month and year only. |
week | Select a week of the year. |
time | Select time (hours & minutes). |
number | Input only numeric values. |
range | Slider control to select a numeric value. |
email | Validates email format. |
url | Validates web address format. |
✅ Example: HTML5 Web Form
htmlCopyEdit<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Input Types Example</title>
</head>
<body>
<h2>HTML5 Web Form Example</h2>
<form>
<label for="datetime">Date & Time:</label>
<input type="datetime-local" id="datetime" name="datetime"><br><br>
<label for="date">Date:</label>
<input type="date" id="date" name="date"><br><br>
<label for="month">Month:</label>
<input type="month" id="month" name="month"><br><br>
<label for="week">Week:</label>
<input type="week" id="week" name="week"><br><br>
<label for="time">Time:</label>
<input type="time" id="time" name="time"><br><br>
<label for="number">Number (1-10):</label>
<input type="number" id="number" name="number" min="1" max="10"><br><br>
<label for="range">Volume (0–100):</label>
<input type="range" id="range" name="volume" min="0" max="100"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="url">Website:</label>
<input type="url" id="url" name="url"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
