5Semantic HTML5
Intermediate15m
What Is Semantic HTML?
Semantic HTML uses elements that describe their meaning clearly. Instead of relying solely on `<div>` and `<span>` for everything, you give your content tags that explain what they are. This improves accessibility, SEO, and makes your code easier to read.
💡 Tip: Screen readers and search engines benefit from semantic HTML. They can understand the structure and importance of your content better.
Key Semantic Tags
| Tag | Purpose | Example Usage |
|---|---|---|
| <header> | Intro or top section of a page or section | <header><h1>My Website</h1></header> |
| <nav> | Navigation links | <nav><a href="#home">Home</a></nav> |
| <main> | Main content area | <main><section>...</section></main> |
| <section> | Grouped content with theme | <section><h2>About</h2><p>Text...</p></section> |
| <article> | Self-contained piece of content | <article><h2>Blog Post</h2><p>Content...</p></article> |
| <aside> | Sidebar, related content, or ads | <aside>Related links</aside> |
| <footer> | Bottom section with copyright, links | <footer>© 2025 MySite</footer> |
| <figure> & <figcaption> | Images with captions | <figure><img src="img.jpg"><figcaption>Image description</figcaption></figure> |
Replacing Div Soup
Many beginners build layouts with lots of `<div>` tags. Semantic HTML helps you replace generic `<div>`s with meaningful tags so your code communicates the structure of your page.
html
<div id="header">Header content</div>
<div id="nav">Navigation links</div>
<div id="main">Main content</div>
<div id="footer">Footer info</div>
<!-- Can be replaced with -->
<header>Header content</header>
<nav>Navigation links</nav>
<main>Main content</main>
<footer>Footer info</footer>Mini Project Step 5: Semantic Personal Profile Page
Take your personal profile page with forms, and restructure it using semantic HTML tags:
- Wrap your top logo/title in `<header>`.
- Use `<nav>` for the menu or internal page links.
- Place your profile info and form inside `<main>`.
- Use `<section>` for profile details and another `<section>` for the contact form.
- Include `<aside>` for extra info or links like social media or hobbies.
- Add `<footer>` with copyright and any additional info.
- Use `<figure>` and `<figcaption>` for profile images.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Profile</title>
</head>
<body>
<header>
<h1>My Profile</h1>
</header>
<nav>
<a href="#profile">Profile</a> |
<a href="#contact">Contact</a>
</nav>
<main>
<section id="profile">
<h2>About Me</h2>
<p>Hi! I'm learning HTML and building my first profile page.</p>
<figure>
<img src="profile.jpg" alt="Person smiling">
<figcaption>Me at my desk</figcaption>
</figure>
</section>
<section id="contact">
<h2>Contact Form</h2>
<form>
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<button type="submit">Send</button>
</form>
</section>
</main>
<aside>
<h3>Hobbies</h3>
<ul>
<li>Coding</li>
<li>Music</li>
<li>Gaming</li>
</ul>
</aside>
<footer>
© 2025 Your name
</footer>
</body>
</html>💡 Bonus Challenge: Try nesting `<article>` inside `<section>` for blog posts or updates on your profile page.