Lesson 6 of 8

Semantic HTML

You can build an entire page using nothing but headings, paragraphs and lists. It'll look fine. But there's a set of elements that describe what each part of a page is for, and using them makes your pages easier to understand for browsers, search engines, screen readers and other developers. This is called semantic HTML.

What "semantic" means

"Semantic" just means "having to do with meaning". A semantic element tells you what its content is, not how it looks.

Compare these two:

html

<div>Kurser</div>

html

<header>Kurser</header>

They look exactly the same in the browser. But the second one says "this is the header of the page". A screen reader can use that to let someone jump straight past it to the main content. A search engine can use it to understand how your page is organized. And when you come back to your code in six months, you'll know immediately what that part is.

The main building blocks

Here are the semantic elements you'll use most:

header is the top of the page, usually with the site name and the navigation
nav wraps a group of navigation links, like a menu
main holds the main content of the page. There should only be one
section groups related content, usually with its own heading
article is a piece of content that makes sense on its own, like a blog post or a news story
aside is content that's related but on the side, like a box with extra tips
footer is the bottom of the page, with things like contact details and copyright

Put together, a typical page looks like this:

html

<body>
  <header>
    <h1>Alex Andersson</h1>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="projects.html">Projects</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section>
      <h2>About me</h2>
      <p>I'm learning web development.</p>
    </section>

    <section>
      <h2>Contact me</h2>
      <!-- the contact form goes here -->
    </section>
  </main>

  <footer>
    <p>Made by Alex</p>
  </footer>
</body>

Read it out loud and the structure almost explains itself.

Quick check

Where should the navigation menu of a page usually go?

Select one answer

div and span: the neutral boxes

Sometimes you need to group things just so you can style them, and none of the semantic elements fit. That's what div and span are for. They don't mean anything at all.

div is a block. It starts on a new line and takes up the full width, like a paragraph.
span is inline. It sits inside a line of text, like strong does.

html

<div class="card">
  <p>Price: <span class="price">99 kr</span></p>
</div>

There's nothing wrong with using div and span. You'll use them a lot once you start styling things with CSS. The rule is just: reach for a semantic element first, and use div or span when nothing else fits.

Quick check

You need a box around a few elements only so you can style it, and it has no special meaning. What should you use?

Select one answer

section or article?

These two are easy to mix up. Here's a simple test: would this content make sense if you copied it to a completely different website?

If yes, like a blog post, a product card or a comment, it's an article. If it only makes sense as part of this page, like the "About me" part of your home page, it's a section.

And if you're unsure, don't worry too much. Using either of them is still much better than using only div elements.

Quick check

How many main elements should a page have?

Select one answer

Try it yourself

Give your website a semantic structure:

Wrap your name (the h1) in a header
Inside the header, add a nav with a list of links to the sections on your page for now, like href="#about". Give each section a matching id, for example <section id="about">. Links that start with # jump to the element with that id on the same page
Wrap the rest of your content in main, with each part in its own section
Add a footer at the bottom with your name and the year

Click the links in your menu and watch the page jump to each section. You just built in-page navigation.