Theme

The foundational structure

Semantic HTML 1: Sections and Headings

Structure your content so it makes sense — to people and machines.

Introduction

Good design isn’t just how something looks.

It’s how it’s structured.

Before colours, spacing, or animations, your page needs a clear, meaningful structure. That’s where semantic HTML comes in.

In this lesson, you’ll learn how to use sections and headings properly so your content is easier to read, navigate, and maintain.

Why semantic structure matters

When you build a page, you’re not just designing for sight.

You’re designing for:

  • Screen readers
  • Search engines
  • Other developers
  • Your future self

Without structure, content becomes harder to:

  • Understand
  • Navigate
  • Maintain

Semantic HTML gives your content meaning, not just appearance.

Think in sections, not layouts

A common mistake is designing visually first.

Instead, start by asking:

What are the distinct parts of this page?

Most pages can be broken into clear sections, such as:

  • Header (site or page introduction)
  • Navigation
  • Main content
  • Sidebar (if needed)
  • Footer

Each of these should be represented using meaningful HTML elements.

The core sectioning elements

Here are the most common elements you’ll use.

Represents introductory content.

Use it for:

  • Page titles
  • Section introductions
  • Logos or branding

You can have more than one header — one for the page, and others inside sections.

<main>

Represents the primary content of the page.

  • Only use one <main> per page
  • It should contain the main topic or purpose

Think of it as: “What is this page actually about?”

<section>

Represents a thematic grouping of content.

Use it when:

  • The content has a clear topic
  • It would benefit from a heading

If you can’t give it a meaningful heading, it might not need to be a section.

<article>

Represents standalone content.

Use it for:

  • Blog posts
  • News articles
  • Cards or reusable content blocks

Ask yourself:

Could this content make sense on its own?

If yes, <article> is likely the right choice.

Represents closing or supporting information.

Use it for:

  • Copyright details
  • Related links
  • Author information

Like <header>, you can use it within sections too.

Headings: your content outline

Headings are not just for styling.

They define the structure of your content.

The basic rule

Use headings in a logical order:

  • <h1> — the main page title
  • <h2> — major sections
  • <h3> — subsections
  • <h4>–<h6> — deeper levels if needed

One <h1> per page

Your page should have a single, clear <h1>.

This tells users (and search engines):

“This is what the page is about.”

Everything else supports that.

Don’t skip levels

Avoid jumping from <h2> to <h4>.

Headings should follow a clear hierarchy, like an outline:

  • Start at the top
  • Go deeper step by step

This helps assistive technologies understand your content properly.

A simple example

Here’s how structure and headings work together:

<main>
  <h1>Learn Web Design</h1>  <section>
    <h2>Introduction</h2>
    <p>Welcome to the course...</p>
  </section>  <section>
    <h2>Core Concepts</h2>    <section>
      <h3>Semantic HTML</h3>
      <p>Understanding structure...</p>
    </section>    <section>
      <h3>Accessibility</h3>
      <p>Designing for everyone...</p>
    </section>
  </section>
</main>

Notice:

  • Each section has a heading
  • Headings follow a logical order
  • The structure is easy to follow

Common mistakes to avoid

Using <div> for everything

If everything is a <div>, nothing has meaning.

Use semantic elements where possible.

Styling instead of structuring

Don’t choose headings based on size.

Choose them based on meaning.

You can always style them later with CSS.

Overusing sections

Not everything needs a <section>.

If there’s no clear theme or heading, keep it simple.

How this applies in Builderius

When working in Builderius:

  • Think structure first, not layout
  • Use semantic elements for each block
  • Add headings before styling

Builderius gives you flexibility — but it’s up to you to use it intentionally.

Key takeaway

Structure comes before style.

If your HTML is clear:

  • Your design becomes easier
  • Your content becomes more accessible
  • Your site becomes more maintainable

What’s next

In the next lesson, you’ll go deeper into semantic HTML by exploring:

  • Landmarks and accessibility roles
  • How users navigate your page structure
  • How to make your layouts more inclusive