HTML/CSS - 11

HTML/CSS - 11: Semantic HTML & Better Page Structure

As webpages grow, it helps to use HTML tags that describe what each part of the page is for.

You already know that a <div> can group content together. Semantic HTML goes one step further by using tags such as <header>, <nav>, <main>, <section>, <article>, and <footer>.

These tags make the structure easier to understand because their names describe the job of the content inside them.

Your challenge: Turn a simple page made from generic <div> containers into a page that uses meaningful semantic HTML tags.

What should you notice?

Changing a <div> into a semantic element does not automatically make the page look completely different. The biggest change is in the meaning and structure of the HTML.

For example, this: <div class="nav"> can be replaced with: <nav> when that part of the page contains navigation links.

Think about the job: Before choosing a semantic tag, ask yourself what that part of the page is doing. If it contains the main navigation, use <nav>. If it contains the primary content, use <main>. If it is the bottom information area, <footer> may be appropriate.

Experiment: Replace the tags one at a time and watch the Live Output. The page should remain visible while the underlying HTML becomes easier to understand.

About <section> and <article>: A <section> groups related content, while an <article> is useful for a self-contained piece of content such as a story, post, or news item.

Good HTML habit: You do not need to replace every <div>. A <div> is still useful when you simply need a container for styling or layout and there is no more meaningful semantic tag.

<header>
  <h1>The Daily Kilobyte Journal</h1>
  <p>A tiny fictional technology journal.</p>
</header>

<nav>
  <a href="https://example.com">Home</a>
  <a href="https://example.org">Articles</a>
</nav>

<main>

  <section>
    <h2>Latest Stories</h2>

    <article>
      <h3>The Computer That Wouldn't Sleep</h3>
      <p>A short fictional story about a very determined computer.</p>
    </article>

  </section>

</main>

<footer>
  <p>End of today's edition.</p>
</footer>