Semantic HTML

In the last lesson you learned about div and span. You used them to group and organize content on Nadia's page.

div works. But it does not tell you anything about what is inside it. You see a div in your code and you have no idea if it is a header, a sidebar, a footer, or something else entirely. You have to read the content to figure it out.

Semantic HTML fixes that. Instead of wrapping everything in generic boxes, you use tags that actually describe what each part of your page is.

By the end of this lesson Nadia's page will have real meaningful structure. The kind that browsers, search engines, and screen readers all understand perfectly.

What Are Semantic HTML Tags

A semantic tag is a tag whose name tells you exactly what kind of content is inside it.

You have already been using semantic tags without realising it.

h1 tells you this is the main heading. p tells you this is a paragraph. img tells you this is an image. table tells you this is tabular data. The tag name itself describes the content. That is what makes it semantic.

Now compare that to div. What does div tell you about what is inside it? Nothing. It is just a box. You have to read the content or add a comment to know what it is.

That is the difference between semantic and non-semantic.

The Problem With Divs Everywhere

Here is what Nadia's page looks like organized with only div elements:

<div>
  <h1>Nadia</h1>
</div>

<div>
  <a href="#early-life">Early Life</a>
  <a href="#career">Career</a>
</div>

<div>
  <div id="early-life">
    <h2>Early Life</h2>
    <p>Nadia was born in New York City in 1988.</p>
  </div>
</div>

<div>
  <p>Born: 1988</p>
  <p>Occupation: Software Engineer</p>
</div>

<div>
  <p>Last updated: 2025</p>
</div>

It works. But look at it. Five div elements. No way to tell which one is the header, which one is the navigation, which one is the main content, which one is the sidebar. You have to read every single line to figure out what is what.

Now let us do it the right way.

Semantic Layout Tags

HTML gives us a set of tags specifically designed to describe the layout of a page. Here is what each one means:

• header — The top section of the page. Usually holds the main title or logo.
• nav — Navigation links. The table of contents or menu that helps users move around the page.
• main — The core content of the page. There should only ever be one main on a page.
• section — A thematic group of content. Like the Early Life section or the Career section on Nadia's page.
• aside — Extra information that sits alongside the main content. Like the info box on a Wikipedia page.
• footer — The bottom of the page. Usually holds things like last updated date or copyright info.

Building Nadia's Page With Semantic Tags

Now let us take those same five div elements and replace them with proper semantic tags. Watch how much clearer the code becomes:

The page looks exactly the same in the browser. But look at the code. You can read it like a map. Header at the top. Navigation below it. Main content in the middle with sections inside. Sidebar information in the aside. Footer at the bottom.

No comments needed. No guessing. The tags say exactly what everything is.

Why Semantic HTML Actually Matters

This is not just about making your code look nice. There are three real reasons semantic HTML matters.

It helps search engines.

When Google reads your page it uses your HTML structure to understand what the page is about. A header tag tells it this is the title area. A main tag tells it this is the core content. A nav tag tells it these are navigation links. The better Google understands your page the better it can rank it.

It helps screen readers.

People who are visually impaired use screen readers to browse the web. A screen reader reads your HTML out loud. If your page uses semantic tags the screen reader can jump straight to the main content, skip the nav, or go directly to a specific section. With only div elements it has no idea where anything is.

It helps you and other developers.

Six months from now when you open your code again, semantic tags tell you instantly what each part of the page is. No hunting through lines of div elements trying to remember what was what.

Putting It All Together

Here is the complete Nadia page with full semantic structure:

Try editing it. Add a new section for Recognition or Personal Life. Move something into the aside. See how the structure stays clear no matter how much content you add.

You now know how to give your page real meaningful structure. Semantic tags. Proper layout. Clean organized code.

In the next lesson we bring everything together. You will learn about the full HTML page structure, the parts that wrap around everything you have written so far, and how to build a complete proper HTML document from top to bottom.

Next — HTML Page Structure