Semantic Structure in HTML: Giving Meaning to Your Content

Learn to build better websites with tags that describe their content, improving SEO, accessibility, and readability.

🏗️

Welcome! Let's learn how to build smarter websites using semantic HTML tags.

/* Building with meaning... */

The Top & Bottom: <header> and <footer>

The <header> tag is for introductory content—like a logo, site navigation, and a search bar. It's the "top" of your page or section. Conversely, the <footer> tag is for the "bottom," containing copyright information, contact details, or sitemap links.

The Core: <main>, <section>, and <article>

The <main> tag should contain the primary, unique content of the page. Within <main>, you use <section> to group thematically related content and <article> for self-contained, distributable content like a blog post or news story.

The Sides: <nav> and <aside>

The <nav> tag is specifically for major navigation blocks. The <aside> tag is for content that is tangentially related to the main content, like a sidebar with related links, a glossary, or advertisements.

Practice Zone

Interactive Test 1: Structure the Page

Drag the tags to build a logical page structure.

Arrastra en el orden correspondiente.

Arrastra las opciones:

Site Logo & Nav

Main Article

Completa el código:

Unlock with Premium

Interactive Test 2: Complete the Layout

Rellena los huecos en cada casilla.

<>
 <h1>My Blog</h1>
</>

<>
  
</>

<main>
  <>
    <h2>Post Title</h2>
  </>
</main>

<>
  <p>© 2025</p>
</>

Unlock with Premium

Practice Example: Code Your Own

Create a full HTML page layout using <header>, <nav>, <main>, <article>, <aside>, and <footer>.

* Write the code below. Correct characters will be shown in green and incorrect ones in red.

<!DOCTYPE html>
<html>
<head>
    <title>Semantic Page</title>
</head>
<body>
    <header>
        <h1>My Website</h1>
        <nav>
            <a href="/">Home</a>
        </nav>
    </header>
    <main>
        <article>
            <h2>Article Title</h2>
            <p>Main content...</p>
        </article>
        <aside>
            <p>Related links</p>
        </aside>
    </main>
    <footer>
        <p>Copyright 2025</p>
    </footer>
</body>
</html>

Unlock with Premium

Knowledge Check

Which semantic tag is best for a self-contained blog post that could be shared independently?

Unlock with Premium

Why Semantics Matter: SEO, Accessibility & Readability

Using semantic HTML isn't just about following rules; it has powerful, real-world benefits for your website and its users.

1. Supercharge Your SEO 🚀

Search engines like Google use the structure of your page to understand its content. A page with a clear <header>, <main> content, and <article> tags is much easier for crawlers to index correctly, which can lead to better search rankings.

// A search engine sees this structure
<article>
  <h1>Top 5 JavaScript Tips</h1>
  <p>Published on <time>2025-09-16</time></p>
</article>

🏆

Better Ranking

2. Accessibility for Everyone ♿

Screen readers rely on semantic tags to provide context to visually impaired users. A <nav> tag allows them to easily skip to the navigation, and a <main> tag lets them jump directly to the primary content, dramatically improving the user experience.



<nav>...</nav>


<main>...</main>

🔊

Clear Navigation

3. Cleaner, More Readable Code 📖

For developers, semantic HTML makes the codebase self-documenting. It’s immediately clear what each section of the page is for without relying on class names or comments. This makes maintenance and collaboration much easier.


<div class="header">...</div>
<div class="main-content">...</div>
<div class="sidebar">...</div>


<header>...</header>
<main>...</main>
<aside>...</aside>

Practical Takeaway: Writing semantic HTML is a mark of a professional developer. It creates websites that are more robust, accessible, and perform better on search engines.

Semantic Tag Glossary

<header>: Defines introductory content for a page or section, like a logo, title, and navigation.
<nav>: Contains the primary navigation links for a site.
<main>: Specifies the main, unique content of the document. There should only be one per page.
<section>: Represents a standalone thematic grouping of content, which doesn't have a more specific semantic element to represent it.
<article>: Represents a self-contained composition intended to be independently distributable or reusable (e.g., a blog post, news story, or forum post).
<aside>: Represents content tangentially related to the content around it, often presented as a sidebar.
<footer>: Defines the footer for a document or section, typically containing authorship, copyright, or contact information.
<figure> & <figcaption>: Used to encapsulate media such as an image, diagram, or code listing, with an optional caption (<figcaption>).