Semantic HTML

Give your page landmarks that browsers, search engines and screen readers understand.

Beginner 13 min read Lesson 11 of 480 Challenge included

What you will be able to do

Choose semantic elements over divs
Build a landmark structure
Understand the accessibility tree

A page built entirely from <div> elements works visually, but it is invisible to assistive technology. Semantic elements describe the role of each region.

layout.htmlHTML

<header>
  <a href="/">EduByte</a>
  <nav aria-label="Main">
    <a href="/tutorials">Tutorials</a>
    <a href="/certifications">Certifications</a>
  </nav>
</header>

<main>
  <article>
    <h1>Build a profile page</h1>
    <p>...</p>
  </article>
  <aside aria-label="Related lessons">...</aside>
</main>

<footer>
  <p>© 2026 EduByte</p>
</footer>

Element	Role
`<header>`	Introductory content for a page or section.
`<nav>`	A set of navigation links.
`<main>`	The single primary content region — one per page.
`<article>`	Self-contained content that could stand alone.
`<aside>`	Related but secondary content.
`<footer>`	Closing information for a page or section.

Your turn

Replace the div soup

Medium

Rewrite the structure using header, nav, main and footer instead of divs.

HTML · starter

<div class="top">
  <div class="links"><a href="/">Home</a></div>
</div>
<div class="content"><h1>Welcome</h1></div>
<div class="bottom">© 2026</div>

Check your understanding before moving on.

Knowledge checkQuestion 1

How many <main> elements should a page have?

Select an answer to continue

Study tools

Make it yours.

Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.

Sign in to save notes and flashcards.Both are private to your account and stay with your progress.

Finished reading?

Lock in what you just learned.

Mark this lesson complete to save your place and move one step closer to the certificate.

Next: Media and embeds

Lesson 11 of 480 · 0% of course