Lesson 02: Semantic HTML

Learning Outcomes

After completing this lesson, you will understand what semantic HTML means and why it matters for accessibility and website structure. You will be able to identify semantic HTML tags and know when to use them appropriately. You will also recognize the difference between semantic and non-semantic markup, and understand how semantic HTML improves the experience for users who rely on assistive technologies.

Prerequisites

You should be comfortable with the basic HTML structure covered in Lesson 01, including understanding how tags work, creating headings and paragraphs, and the overall document structure with head and body sections.

What is Semantic HTML and Why It Matters

Semantic HTML refers to using HTML tags that clearly describe their meaning and purpose. The word "semantic" relates to meaning, so semantic HTML is markup that carries meaning about the content it contains, not just instructions about how it should look. When you use a semantic tag like <article> or <nav>, you're telling browsers, search engines, and assistive technologies what that section of your page represents, not just how it should be styled.

This matters because websites are read and interpreted by many different systems, not just visual browsers. Screen readers used by people with visual impairments rely on semantic HTML to understand page structure and navigate content effectively. Search engines use semantic HTML to better understand the content and context of your pages, which can improve how your site appears in search results. Browser features like reader mode that strip away distractions depend on semantic markup to identify the main content. Even developers working on your code in the future will find it much easier to understand and maintain if the HTML clearly expresses the meaning of each section.

Before HTML5, developers often used generic <div> tags for everything, adding class names like "header" or "navigation" to indicate purpose. While this worked for visual styling, it didn't provide any meaningful structure that machines or assistive technologies could understand.

Semantic HTML5 tags solve this problem by providing elements specifically designed to represent common page sections and content types. Using these tags creates:

More accessible websites for users with disabilities
More maintainable code that's easier to understand
More meaningful web pages that communicate structure clearly

Common Semantic HTML5 Elements

HTML5 introduced many semantic elements designed to represent common patterns found on web pages. Understanding when and how to use these elements helps you create better-structured, more accessible websites.

The `<header>` Element

The <header> element represents introductory content or navigational aids for its nearest ancestor section or the entire page.

Important: While you might think of "header" as just the top of a page, a header element can actually appear multiple times on a page:

Once for the entire document
Once within each major section if that section has its own introductory content

This element typically contains:

Headings
Logos or branding
Navigation links
Author information

The `<nav>` Element

The <nav> element represents a section of a page whose purpose is to provide navigation links. This could be:

The main site navigation
A table of contents
Any collection of links that help users move around the site

Note: Not every link on your page should be inside a <nav> element - only those that form a major navigation block. Including links within a nav element helps screen readers identify navigation areas and allows users to skip directly to navigation if they wish.

The `<main>` Element

The <main> element represents the dominant content of the document.

Important rules:

There should be only one <main> element per page
It should not be nested inside other semantic elements like <article>, <aside>, <header>, <footer>, or <nav>

The main content is the unique content of this page that isn't repeated across other pages. Screen readers can use this element to jump directly to the main content, which is especially useful on pages with extensive navigation or headers.

The `<article>` Element

The <article> element represents a self-contained composition that could be distributed independently from the rest of the site.

Examples include:

Blog posts
News articles
Forum posts
Any content item that makes sense on its own

An article should have its own heading structure and could theoretically be republished elsewhere without losing meaning. If your page has multiple independent pieces of content, each one should be wrapped in its own <article> element.

The `<section>` Element

The <section> element represents a generic standalone section of a document.

Important: Sections should always have a heading that describes their purpose.

Use <section> to group related content that forms a distinct part of a larger whole. For example, if you have a page with multiple topics, each topic could be its own section. The key is that each section should represent a distinct thematic grouping of content.

The `<aside>` Element

The <aside> element represents content that is tangentially related to the content around it. This often appears as:

Sidebars
Call-out boxes
Complementary information

Examples include: related links, author information, or definitions that enhance understanding but aren't essential to the main content flow.

The `<footer>` Element

The <footer> element represents footer content for its nearest sectioning element or the entire page. Footers typically contain:

Copyright information
Contact details
Links to related pages
Other metadata

Like headers, footers can appear multiple times on a page - once for the entire document and within individual sections.

Choosing Between `<article>` and `<section>`

Understanding when to use <article> versus <section> can be confusing at first. A helpful way to think about it is:

Use <article>: If the content makes complete sense on its own and could be distributed independently
Use <section>: If the content is part of a larger whole and needs context from the page

When in doubt: Consider whether someone reading just that content would understand it without the rest of the page. If yes, use <article>. If no, use <section>.

Semantic vs. Non-Semantic Markup

To understand the difference semantic HTML makes, consider how the same content structure could be marked up in different ways.

Non-Semantic Approach

Non-semantic markup relies on generic <div> elements with class names that only provide visual organization. For example:

<div class="navigation">
    <a href="/">Home</a>
    <a href="/about">About</a>
</div>

Problems with this approach:

While this works for styling with CSS, it provides no semantic meaning
A screen reader can't distinguish this <div> from any other <div> on the page
Search engines don't understand the purpose of the content
The structure is unclear to automated tools

Semantic Approach

Semantic markup uses elements that carry inherent meaning about the content they contain. Using <nav> instead:

<nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
</nav>

Benefits of this approach:

Immediately communicates that this is a navigation section
Assistive technologies can identify it, announce it to users, and provide shortcuts
Search engines understand the purpose of the content
The structure is clear and meaningful to both humans and machines

Impact on Search Engines and Accessibility

This difference becomes even more important when you consider how search engines and other automated systems parse web pages:

A search engine can understand that content within an <article> element represents the main article content
Content in <article> may receive different treatment in search rankings than content in <aside>
These semantic distinctions help search engines better understand and index your content
Screen readers can navigate more efficiently, jumping between major sections

By using semantic HTML, you create websites that are more accessible, better indexed, and easier to maintain.

Worked Example: Structuring a Blog Post Page

Creating a well-structured blog post page demonstrates how semantic HTML elements work together to create meaningful document structure. We'll build a page that includes a header, navigation, main content area with an article, and a footer, showing how each semantic element contributes to the overall page organization.

Step 1: Set Up the Basic Structure

Start with the basic HTML document structure you learned in Lesson 01. Inside the <body> element, begin with a <header> element that contains the site title and main navigation.

Why use <header>? The header wraps both the site branding and the primary navigation because these elements together form the introductory section of the page.

Step 2: Add Navigation

Inside the header, place a <nav> element containing your navigation links. This clearly identifies the navigation section for assistive technologies and helps users navigate your site efficiently.

Step 3: Create the Main Content Area

After the header, add a <main> element. This will contain the primary content of your page.

Inside main, place an <article> element for your blog post. The article element is appropriate here because a blog post is self-contained content that makes sense independently. Within the article, use:

Heading tags (<h2>, <h3>, etc.) to structure the content
Paragraph tags (<p>) for text
<section> elements to group related content within the article
Any other content elements you need

Step 4: Add Supplementary Content

If you want to include related links or author information, add an <aside> element. Place it:

Inside the article: If the sidebar relates specifically to this article
As a sibling to the article: If it relates to the entire page

Step 5: Add the Footer

Finally, add a <footer> element after the main content to contain:

Copyright information
Site-wide links
Contact information
Other metadata

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Blog Post</title>
</head>
<body>
    <header>
        <h1>My Blog</h1>
        <nav>
            <a href="/">Home</a>
            <a href="/about">About</a>
            <a href="/contact">Contact</a>
        </nav>
    </header>
    
    <main>
        <article>
            <h2>Understanding Semantic HTML</h2>
            <p>Semantic HTML helps create accessible websites...</p>
            <section>
                <h3>What Makes HTML Semantic</h3>
                <p>Semantic tags carry meaning about content...</p>
            </section>
        </article>
        
        <aside>
            <h3>Related Posts</h3>
            <ul>
                <li><a href="#">Previous Post</a></li>
            </ul>
        </aside>
    </main>
    
    <footer>
        <p>© 2024 My Blog. All rights reserved.</p>
    </footer>
</body>
</html>

What This Structure Achieves

Notice how each semantic element clearly communicates its purpose:

Screen reader users can navigate directly to the main content, jump to the navigation, or identify the article content separately from the aside content
Search engines understand that the article contains the primary content, while the aside contains supplementary material
Browser tools can parse the structure more effectively
Developers can understand the page organization at a glance

This structure makes your page more accessible and easier for both humans and machines to understand. Each semantic element serves a clear purpose and communicates meaning beyond just visual appearance.

Practice Opportunity

Create an HTML page about your favorite hobby or interest. Structure it using semantic HTML5 elements including a header with navigation, a main section containing an article, and a footer. Within the article, organize your content into logical sections using the section element. Each section should have its own heading. Include an aside element with related information or additional resources about your topic.

After creating your page, test it by viewing it in a browser. Consider how the semantic structure helps organize your content logically. Think about how a screen reader user would experience navigating your page, and how each semantic element provides context about what type of content it contains.

Summary of Key Concepts

Semantic HTML uses tags that carry meaning about their content, not just styling instructions. This creates more accessible websites that work better with assistive technologies, search engines, and other automated systems. HTML5 provides semantic elements like header, nav, main, article, section, aside, and footer that represent common page structures and content types.

Choosing the appropriate semantic element for your content improves the structure and meaning of your HTML documents. While you can still use div elements when no semantic element fits, preferring semantic elements whenever possible creates better, more maintainable, and more accessible web pages. The goal is to write HTML that clearly communicates both to visual browsers and to all the other systems that need to understand your content.

Next Steps

With a solid understanding of HTML structure and semantic markup, you're ready to learn how to style your pages with CSS. Lesson 03 covers CSS basics, teaching you how to add colors, fonts, spacing, and other visual styling to bring your HTML content to life.

Bibliography

Mozilla Developer Network. "HTML Semantic Elements." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Glossary/Semantics

Mozilla Developer Network. "HTML5 Semantic Elements Reference." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/HTML/Element

WebAIM. "Semantic Structure: Regions and Landmarks." WebAIM. https://webaim.org/techniques/semanticstructure/

W3C. "HTML5: A vocabulary and associated APIs for HTML and XHTML." W3C Recommendation. https://www.w3.org/TR/html5/

Back to Home | Previous Lesson | Next Lesson: CSS Basics