Day 6 — Semantic HTML and page structure

You can build any page out of divs. You should not, and this lesson is why.

The problem with div

<div> means nothing. It is a box. A page made only of divs looks fine and tells a screen reader, a search engine and the next developer absolutely nothing about what is what.

<div class="header">
  <div class="logo">DAI Academy</div>
  <div class="menu">
    <a href="/">Home</a> <a href="/courses">Courses</a>
  </div>
</div>
<div class="content">
  <div class="title">Welcome</div>
  <div>Some text.</div>
</div>

Look at the Outline tab. Every single line says div. Now the same page with real elements:

<header>
  <p>DAI Academy</p>
  <nav>
    <a href="/">Home</a> <a href="/courses">Courses</a>
  </nav>
</header>
<main>
  <h1>Welcome</h1>
  <p>Some text.</p>
</main>
<footer>
  <p>&copy; 2026 DAI Academy</p>
</footer>

Identical on screen. Completely different to everything that is not a pair of eyes.

What each one means

Element	Use it for
`<header>`	The top of the page, or the top of an article
`<nav>`	A block of navigation links. Not every link - the main menu.
`<main>`	The unique content of this page. Exactly one per page.
`<article>`	Something that would still make sense on its own - a blog post, a review, a product card
`<section>`	A thematic chunk, normally with a heading
`<aside>`	Related but not essential - a sidebar, a pull quote
`<footer>`	The bottom of the page or of an article
`<figure>`	An image, chart or code block with a caption
`<div>`	When you genuinely only need a box to hang CSS on

Why a screen reader user cares They can jump straight to <main> and skip your menu. With <div class="content"> they cannot, and they listen to your entire navigation on every single page.

section or article?

Ask: would this still make sense if you cut it out and pasted it somewhere else on its own?

Yes - a student review, a news item, a job posting. That is an article.
No - "Our courses" only makes sense inside this page. That is a section.

<main>
  <h1>Student reviews</h1>

  <section>
    <h2>This month</h2>

    <article>
      <h3>Anita, MIS Executive</h3>
      <p>I came in knowing only VLOOKUP.</p>
      <footer><p><small>Posted 4 March</small></p></footer>
    </article>

    <article>
      <h3>Rahul, Analyst</h3>
      <p>The SQL module got me the interview.</p>
      <footer><p><small>Posted 11 March</small></p></footer>
    </article>
  </section>
</main>

Note that an <article> can have its own <footer>. These elements describe a part of the page, not a position on the screen.

A section should have a heading

A section with no heading is just a div If you cannot think of a heading for it, you do not want a section - you want a div. That is not a failure; a div is the right answer whenever there is no meaning to express.

The skip link

The first thing on a well-built page, and almost nobody does it. It lets a keyboard user jump past the menu.

<a href="#main">Skip to content</a>

<header>
  <nav>
    <a href="/">Home</a>
    <a href="/courses">Courses</a>
    <a href="/contact">Contact</a>
  </nav>
</header>

<main id="main">
  <h1>Advanced Excel</h1>
  <p>Six weeks, weekday and weekend batches.</p>
</main>

Normally it is hidden until it receives keyboard focus, which needs CSS you will meet on Day 8.

A full page structure

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Advanced Excel Course - DAI Academy</title>
</head>
<body>
  <header>
    <p><strong>DAI ACADEMY</strong></p>
    <nav>
      <a href="/">Home</a>
      <a href="/courses.html">Courses</a>
      <a href="/contact.html">Contact</a>
    </nav>
  </header>

  <main>
    <h1>Advanced Excel</h1>

    <section>
      <h2>What you will learn</h2>
      <ul>
        <li>Formulas and functions</li>
        <li>Pivot tables</li>
        <li>Dashboards</li>
      </ul>
    </section>

    <aside>
      <h2>Next batch</h2>
      <p>Starts 4 April, weekday mornings.</p>
    </aside>
  </main>

  <footer>
    <p>&copy; 2026 DAI ACADEMY, Noida</p>
  </footer>
</body>
</html>

That is the shape of essentially every content page on the web. Learn it once and you will reuse it forever.

Try these yourself

Rewrite the div-soup example at the top using semantic elements, from memory.
Build a page with a header, nav, main with two sections, an aside and a footer.
Add three articles inside a section, each with its own heading and footer.
Add a skip link and check where it points.
Explain the difference between section and article in one sentence each.

← PreviousDay 5 — Forms, inputs and labels Next →Day 7 — CSS - making it look like something