HTML Course 10.2 Semantic structure of a page (header, nav, main, footer)

HTML Course 10.2 Semantic Structure of a Page (header, nav, main, footer)

A well‐structured HTML document uses semantic elements to define the different regions of a page.
HTML5 introduced several landmark elements—header, nav, main,
and footer—that help both developers and assistive technologies understand the purpose of each section.

The <header> Element

The header element represents introductory content typically found at the top of a page
or section. It often contains logos, titles, subtitles, and sometimes navigational aids.

• Can appear multiple times in a document (once per section/article).
• May contain headings (h1–h6), logos, icons, search forms, and even a nav element.
• Not to be confused with the document’s head (which holds metadata).

  
  

    
  
  
  
My Awesome Website
  
  

    Login
    Sign Up
  

  

The <nav> Element

The nav element defines a section intended for navigation links. It groups primary site navigation,
table of contents, or any other block of navigational links.

• Should be used only for significant navigation blocks.
• Use aria-label when multiple nav regions exist (e.g., main menu vs. footer links).
• Breadcrumbs and pagination can use nav if they represent navigation.

The <main> Element

The main element encapsulates the main content of a document. There must be only one
main per page, and it should not be nested within other landmark elements (like header,
nav, footer, or aside).

• Helps screen readers skip directly to primary content.
• Cannot appear more than once in a document.
• Should exclude site-wide navigation and footer content.

  

    
Understanding Semantic Layouts
    
Semantic HTML improves accessibility and SEO by giving meaning to page sections.
  

  

    
Why Use Semantic Elements?
    
They clearly define the role of each block of content, enabling assistive tech to navigate more effectively.
  

  

The <footer> Element

The footer element typically appears at the bottom of its nearest ancestor section,
article, or at the page’s end. It often contains metadata, legal links, copyright
information, and secondary navigation.

• May contain contact info, related links, and social media icons.
• Multiple footer elements can exist (one per section/article plus a page footer).
• Should not be nested inside main if it’s the page footer.

Putting It All Together

Below is a simplified template demonstrating how these elements combine to form a complete semantic layout.

  
My Awesome Website
  



  

    
Welcome to Our Site
    
This is the primary content region. Screen readers and search engines recognize it as the main focus.
  



  

Best Practices

• Use landmarks (header, nav, main, footer) for accessibility and SEO.
• Keep only one main per page and place it after primary navigation.
• Use aria-label to differentiate multiple nav regions.
• Ensure that header and footer content remains relevant to their sections.
• Avoid using div for structural landmarks when semantic tags exist.