HTML Semantics

3.3 Search Engine Understanding

Semantic HTML provides meaningful document structure that can help search engines interpret a page. However, using semantic elements does not automatically improve rankings, guarantee indexing or replace high-quality content and other SEO practices.

3.4 Consistency

Semantic elements encourage consistent page structures across a website. Developers can more easily recognize common areas such as navigation, main content and footer information.

4. The header Element

The header element represents introductory content for a page or a section of a page. It commonly contains a logo, heading, introductory text or navigation.

Example: Website Header

<header>
    <a href="/">
        <strong>Codementrix</strong>
    </a>

    <p>Learn web development step by step.</p>

    <nav aria-label="Main navigation">
        <a href="/">Home</a>
        <a href="/courses">Courses</a>
        <a href="/blog">Blog</a>
    </nav>
</header>

The header identifies introductory content. The nav element inside it identifies the navigation region.

Important Rules

• A webpage may contain more than one header, such as a page header and an article header.
• A header does not have to be the first element in every context, although it commonly appears near the beginning of a page or section.
• A header can contain headings, logos, introductory content and navigation.
• The header element is not the same as the head element, which contains document metadata.
• A header is not automatically a navigation region. Use nav for a distinct navigation area.

5. The nav Element

The nav element represents a section containing major navigation links. It is commonly used for a website's primary navigation, a table of contents or navigation between major sections of an application.

Example

<nav aria-label="Course navigation">
    <ul>
        <li><a href="/courses/html">HTML</a></li>
        <li><a href="/courses/css">CSS</a></li>
        <li><a href="/courses/javascript">JavaScript</a></li>
    </ul>
</nav>

Using a list inside nav is useful when the links form a group of related destinations, although a list is not mandatory.

Multiple Navigation Regions

A page can have several navigation regions. Give each region a meaningful accessible name when users need to distinguish between them.

<nav aria-label="Main navigation">
    <a href="/">Home</a>
    <a href="/courses">Courses</a>
</nav>

<nav aria-label="Breadcrumb">
    <a href="/">Home</a>
    <span aria-hidden="true"> / </span>
    <a href="/courses">Courses</a>
    <span aria-hidden="true"> / </span>
    <span aria-current="page">HTML</span>
</nav>

In this example, the second nav provides breadcrumb navigation. aria-current="page" identifies the current page within the breadcrumb trail.

When Should You Use nav?

Use nav for significant groups of navigation links, not necessarily for every isolated link on a page. A link inside an article does not need a nav wrapper merely because it links to another page.

6. The main Element

The main element identifies the dominant content of the document body. It excludes content that is repeated across pages, such as a site's main navigation or general footer.