HTML Semantics

Section 11: Semantic HTML5 Elements

Semantic HTML is the practice of using HTML elements that communicate the meaning and purpose of content rather than choosing elements only for their visual appearance. Semantic elements help browsers, developers, search engines and assistive technologies understand the structure of a webpage.

For example, the header element identifies introductory content, nav identifies a navigation area, main identifies the primary content, article represents a self-contained composition, and footer identifies footer information. Using these elements correctly creates more understandable, maintainable and accessible websites.

1. Learning Objectives

By the end of this lesson, you will be able to:

Understand the difference between semantic and non-semantic HTML.
Explain why semantic HTML matters for accessibility, maintainability and search engines.
Use header, nav, main and footer correctly.
Understand the purpose of article, section and aside.
Choose between article, section and div based on content meaning.
Understand the address, time and search elements.
Build a semantic webpage layout using appropriate HTML elements.
Organize headings and landmarks for easier navigation.
Avoid common semantic HTML mistakes.
Apply semantic HTML in blogs, dashboards, documentation websites and business websites.

2. What Is Semantic HTML?

Semantic HTML uses elements whose names and built-in meanings describe the content they contain.

Consider two ways to create a navigation area.

Example A: Generic Elements

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

This code can display links, but the div elements do not inherently communicate that the region is navigation.

Example B: Semantic Elements

<nav aria-label="Main navigation">
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
</nav>

The nav element identifies the region as navigation. The accessible label helps distinguish it if a page contains multiple navigation regions.

Key Difference

Semantic elements: communicate meaning through their HTML semantics.
Non-semantic elements: provide generic containers without a specific content meaning.

Both types of elements can be styled with CSS. The main difference is not appearance but meaning and structure.

3. Why Semantic HTML Matters

3.1 Accessibility

Assistive technologies can use semantic elements to expose useful information about a page. For example, a screen reader can help users navigate between the main content, navigation areas and complementary content.

3.2 Maintainability

Semantic code makes it easier for developers to identify the purpose of different parts of a webpage.

Compare a page containing many nested div elements with a page that uses meaningful elements such as header, main, article and footer. The semantic version is often easier to read and maintain.