Moving Beyond the “Div Soup” Era

In the early days of web development, building a webpage often meant wrapping almost everything in generic <div> elements. Although this approach could produce visually appealing layouts, it offered little information about the purpose of each component. Developers sometimes referred to this practice as “div soup” — a collection of containers that looked organised but lacked meaningful structure.

Modern web development takes a more thoughtful approach. Semantic HTML layout uses elements that describe the purpose of their content, helping browsers, assistive technologies, search engines, and developers understand how a webpage is organised.

Four particularly important elements are <header>, <nav>, <main>, and <footer>. Together, they establish the basic anatomy of a webpage, separating introductory information, navigation, primary content, and supporting details.

Understanding these elements is essential for junior web developers, digital designers, and anyone building accessible, maintainable websites. This guide explains their roles, common mistakes, and how to use them together in practical HTML.

1. <header>: The Landmark of Context

The <header> element provides introductory content for a webpage or a particular section. It commonly contains branding, headings, navigation-related introductory elements, and other information that helps users understand the content they are viewing.

For example, a website header might include:

• The company logo and site name.
• The main page heading or website introduction.
• A search field.
• Author information or publication details.
• Supporting introductory text.

A simple example looks like this:

<header>
  <a href="/" aria-label="Homepage">
    <img src="logo.svg" alt="Example website">
  </a>
  <h1>Web Development Guide</h1>
  <p>Practical advice for modern developers.</p>
</header>

This structure makes the introductory purpose of the content clear without relying on generic containers.

The Difference Between <header> and <head>

One common mistake among beginners is confusing these two elements.

The <head> element contains document metadata, such as the page title, character encoding, stylesheets, and search engine descriptions. Most of this information is not displayed as ordinary page content.

The <header> element, by contrast, belongs within the visible document body and contains introductory content.

In short, <head> provides information about the document, while <header> introduces content to the user.

Remember that a webpage can have a site-level header and additional headers within individual articles or sections.

2. <nav>: Guiding User Journeys

The <nav> element identifies a major block of navigation links. It helps visitors move between important pages and allows assistive technologies to recognise navigation landmarks.

A typical primary navigation menu might contain links to a website's homepage, services, blog, and contact page.

<nav aria-label="Primary navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

The list structure makes the links easy to understand and maintain. The aria-label provides a descriptive name for the navigation landmark, which is particularly useful when a page contains several navigation regions.

Why Navigation Semantics Matter

Screen reader users can navigate directly between recognised landmarks rather than listening to every element in sequence. A properly labelled <nav> therefore makes finding important links more efficient.

Semantic navigation also benefits developers. Instead of searching through numerous generic containers, they can identify the main navigation area immediately.

However, not every group of links needs a <nav> element. A small collection of privacy, copyright, or account-related links may fit better elsewhere, depending on its purpose and prominence.

Best practice: Reserve <nav> for significant navigation blocks. If a page contains multiple navigation elements, give each a meaningful label that distinguishes its purpose.

3. <main>: The Heart of Your Content

The <main> element identifies the primary content of a document. It separates the information that makes a page unique from repeated components such as site branding, primary navigation, and general footer links.

Consider a technology blog. Its main content might be an article about semantic HTML, including headings, explanations, examples, and images. The same website header and footer may appear on hundreds of other pages, but the article itself is specific to that URL.

A simplified example is:

<main>
  <article>
    <h1>Understanding Semantic HTML</h1>
    <p>
      Semantic HTML describes the purpose of webpage content
      using meaningful elements.
    </p>
  </article>
</main>

The Golden Rule: One Main Landmark

A document should normally contain one visible, non-hidden <main> element representing its primary content.

Although HTML permits multiple <main> elements in certain circumstances when all but one are hidden, this is rarely necessary for a standard webpage. Using a single main landmark provides a clearer experience for assistive technology users.

The <main> element should not be placed inside <header>, <nav>, <footer>, <article>, <aside>, or <section> elements. Instead, it generally sits within the document body as the container for the page's central content.

Does <main> Help SEO?

Semantic HTML helps search engines interpret the structure and purpose of page content. A clearly organised main area can make a page easier to understand and maintain, particularly when combined with descriptive headings, useful text, and relevant internal links.

However, adding <main> does not automatically improve rankings. Search engines consider many factors, including content quality, relevance, page experience, and technical accessibility.

Use <main> because it accurately describes the page structure, not as a shortcut to higher rankings.

4. <footer>: Anchoring Information and Legal Details

The <footer> element contains supplementary information about its nearest relevant sectioning content or the webpage as a whole.

A site-wide footer often appears at the bottom of the page and provides information that visitors may need after reading the main content.

Common footer elements include:

• Copyright notices.
• Contact information.
• Privacy policy and terms of use links.
• Sitemap links.
• Social media profiles.
• Company or author details.

For example:

<footer>
  <p>&copy; 2026 Example Website.</p>
  <nav aria-label="Footer navigation">
    <a href="/privacy-policy">Privacy Policy</a>
    <a href="/terms">Terms of Use</a>
    <a href="/contact">Contact</a>
  </nav>
</footer>

This example demonstrates that a footer can contain a separate navigation landmark when its links form a meaningful navigation block.

Can an Article Have Its Own Footer?

Yes. HTML allows <footer> elements inside standalone <article> and <section> components where appropriate.

An article footer might contain the author's name, publication date, related information, or links to share the article. Such a footer belongs to that particular article rather than the entire website.

For example:

<article>
  <h2>Why Semantic HTML Matters</h2>
  <p>Semantic elements make page structure easier to understand.</p>
  <footer>
    <p>Written by the editorial team.</p>
  </footer>
</article>

This modular approach makes larger pages easier to organise, especially when they contain multiple articles, product cards, or editorial sections.

5. Implementation Blueprint: Bringing the Elements Together

The following example demonstrates how the four elements can work together in a simple, accessible webpage.

A Complete Semantic HTML Example

<!DOCTYPE html>
<html lang="en-GB">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Learn how semantic HTML improves webpage structure and accessibility.">
  <title>The Anatomy of a Webpage</title>
</head>
<body>

  <header>
    <a href="/" aria-label="Example website homepage">
      Example Website
    </a>
    <h1>The Anatomy of a Webpage</h1>
    <nav aria-label="Primary navigation">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/guides">Guides</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h2>Understanding Semantic HTML</h2>
      <p>
        Semantic HTML gives webpage elements meaningful roles,
        helping browsers, developers and assistive technologies
        interpret content.
      </p>
      <section>
        <h3>Why Structure Matters</h3>
        <p>
          A consistent document structure improves navigation,
          readability and long-term maintainability.
        </p>
      </section>
    </article>
  </main>

  <footer>
    <p>&copy; 2026 Example Website.</p>
    <nav aria-label="Footer navigation">
      <a href="/privacy-policy">Privacy Policy</a>
      <a href="/contact">Contact</a>
    </nav>
  </footer>

</body>
</html>

This example provides a clear document hierarchy. The <head> contains metadata, the <header> introduces the website, <nav> groups the main navigation links, <main> identifies the primary content, and <footer> provides supplementary links.

Accessibility Checklist

Before publishing a webpage, check the following:

1. Use semantic elements appropriately: Choose elements based on the purpose of their content rather than their default appearance.
2. Maintain a logical heading hierarchy: Use <h1> for the main page heading, followed by <h2> for major sections and <h3> for relevant subsections. Do not select heading levels merely to achieve a particular font size.
3. Provide meaningful link text: Avoid vague labels such as “click here” when a more descriptive destination can be provided.
4. Label multiple navigation landmarks: Use distinct labels such as aria-label="Primary navigation" and aria-label="Footer navigation" when appropriate.
5. Avoid unnecessary ARIA roles: Native semantic elements already expose their standard roles. For example, <main> does not need role="main", and <nav> does not need role="navigation".
6. Check keyboard accessibility: Ensure links and interactive controls can be reached and operated using a keyboard.
7. Test with assistive technologies: Automated tools can help identify issues, but manual checks with a keyboard and screen reader provide additional insight.

Semantic HTML is a strong foundation for accessibility, but it does not guarantee an accessible website on its own. Content, interaction design, contrast, focus management, and testing remain important.

6. Clarifying Sectioning and Landmark Rules

Understanding the difference between sectioning elements and landmark elements is essential for writing accessible, maintainable HTML. Although these concepts overlap, they serve different purposes.

Sectioning Elements vs Accessibility Landmarks

Sectioning elements organise content into meaningful parts of a document. Examples include <article>, <section>, and <nav>. The <header> and <footer> elements provide introductory and concluding content for a page or section, depending on their context.

Accessibility landmarks, on the other hand, identify important regions that assistive technologies can use to navigate a webpage. Native HTML elements such as <header>, <nav>, <main>, and <footer> can expose landmark roles when used in the appropriate context.

The distinction matters because not every sectioning element automatically creates a landmark.

For example, <article> and <section> do not automatically create named accessibility landmarks. An <article> generally represents a self-contained composition, while a <section> groups thematically related content and should usually have a heading.

Understanding the Four Main Landmark Elements

• <header>: Creates a banner landmark when it belongs to the overall page body rather than being nested within sectioning content. A header inside an <article> or <section> is not automatically a banner landmark.
• <nav>: Creates a navigation landmark. When a page contains multiple navigation regions, provide distinct accessible names where necessary.
• <main>: Identifies the primary content of the document. A typical webpage should have one visible main landmark.
• <footer>: Creates a contentinfo landmark when it belongs to the overall page rather than an individual section or article. A footer inside an <article> does not automatically become the page's contentinfo landmark.

Do All Sections Need ARIA Roles?

No. Native HTML semantics should be the first choice. Adding redundant ARIA roles, such as role="main" to <main> or role="navigation" to <nav>, is unnecessary in ordinary circumstances.

Use ARIA attributes when they provide information that native HTML does not already supply. For instance, aria-label can distinguish a primary navigation region from a footer navigation region.

<header>
  <h1>Web Development Guide</h1>
  <nav aria-label="Primary navigation">
    <a href="/">Home</a>
    <a href="/guides">Guides</a>
  </nav>
</header>

<main>
  <article>
    <header>
      <h2>Semantic HTML Explained</h2>
      <p>Published by the editorial team</p>
    </header>

    <section aria-labelledby="benefits-heading">
      <h3 id="benefits-heading">Benefits of Semantic HTML</h3>
      <p>Meaningful elements improve structure and support accessibility.</p>
    </section>

    <footer>
      <p>Article author: Editorial Team</p>
    </footer>
  </article>
</main>

<footer>
  <nav aria-label="Footer navigation">
    <a href="/privacy">Privacy policy</a>
    <a href="/contact">Contact</a>
  </nav>
  <p>&copy; 2026 Web Development Guide</p>
</footer>

In this example, the outer <header> provides the page's introductory content, while the article's nested <header> and <footer> provide metadata about that article. The outer <footer> provides site-wide supplementary information.

The <section> uses aria-labelledby to associate the section with its visible heading. This is useful when a named region is needed, but it does not mean every section must be assigned an ARIA label.

Practical Rules to Remember

1. Use <main> for the document's primary content, normally once per page.
2. Use <nav> for significant navigation blocks, not every collection of links.
3. Use <section> for a thematic grouping, usually with a heading.
4. Use <article> for content that forms a self-contained composition.
5. Remember that nested <header> and <footer> elements do not automatically create page-level banner and contentinfo landmarks.
6. Prefer native HTML semantics over unnecessary ARIA attributes.
7. Test the resulting landmark structure with accessibility inspection tools and, where possible, a screen reader.

Following these rules helps ensure that your webpage anatomy is meaningful in both the HTML document structure and the accessibility tree.

Technical note: The most important correction is that <header> and <footer> do not always map to page-level landmarks. Their landmark roles depend on their context, whereas <nav> and <main> have their own specific landmark semantics. This distinction prevents a common accessibility misconception.

A well-structured webpage is easier to navigate, understand, and maintain. By using <header>, <nav>, <main>, and <footer> correctly, developers can replace the ambiguity of generic containers with meaningful structure.

These elements also support inclusive design by helping assistive technologies identify important regions. For search engines, they contribute to a clearer document structure, although semantic markup alone does not guarantee better organic rankings.

Whether you are creating a personal blog, a business website, or a complex web application, semantic HTML layout is a practical foundation for building websites that work well for both people and machines.

Frequently Asked Questions

Can you have multiple <header> or <footer> tags on one page?

Yes. A page can contain multiple <header> and <footer> elements when they belong to different sections or articles. For example, an individual article may have its own header and footer in addition to the website-wide header and footer.

Does semantic HTML directly improve organic search rankings?

Not automatically. Semantic HTML helps search engines interpret page structure and can support accessibility and maintainability. However, no single semantic element guarantees a ranking improvement. High-quality content, relevance, technical performance, and other SEO factors remain important.

What is the difference between <div> and semantic HTML elements?

A <div> is a generic container with no inherent semantic meaning. Elements such as <header>, <nav>, <main>, and <footer> communicate the purpose of their content, making the document easier to understand and navigate.

Should every webpage use all four elements?

Most conventional webpages benefit from a clear header, primary content area, and appropriate supporting structure. A navigation element is useful when the page includes a significant group of navigation links, while a footer is appropriate when supplementary information is needed. The correct structure depends on the page's content and purpose.