5. Semantic HTML5

Level: IntermediateDuration: 15m

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>
    &copy; 2025 Your name
  </footer>
</body>
</html>

💡 Bonus Challenge: Try nesting `<article>` inside `<section>` for blog posts or updates on your profile page.

MDN: Semantic HTML Guide