HTML Course 19.1 Design of the semantic structure of a complete site

19.1 Design of the Semantic Structure of a Complete Site

Designing the semantic structure of a site means choosing the right HTML elements to reflect content hierarchy, improve accessibility, support SEO, and ease maintenance. Below are the main stages with deep details, best practices, and illustrative examples.

1. Define Information Architecture and Content Inventory

1. List all types of pages (home, listing, detail, about, contact, blog).
2. Create a content inventory: for each page, note headers, navigation, main content, sidebars, footers.
3. Map user journeys and group related pages into sections or modules.

2. Choose Appropriate Semantic Containers

Below is a quick reference for common semantic elements:

3. Plan the Document Outline

The HTML5 outline algorithm uses headings (

–

) nested in sections or articles to build a hierarchy. Keep this in mind:

• One <h1> per page if possible, but if omitted, the first <h2> in the <main> can serve as top-level.
• Each <section> or <article> can start with its own heading tag.
• Maintain logical ascending order: h2 → h3 → h4, etc.

4. Example: Semantic Skeleton of a Homepage

  
  

    
MySite
    
  

  
  

    

      
Featured Article
      

        

          
How to Structure Semantically
          
By Jane Doe on 2024-06-15
        
        
Short summary of the featured article goes here...
        
      
    

    

      
Latest Posts
      

        
Understanding <article> vs <section>
        
When to Use <aside> in Layouts
        
ARIA Landmarks for Accessibility
      
    

    
  

  
  
  

5. Example: Semantic Structure for a Blog Post Page

  

    
MySite Blog
    
  

  

    

      

        
Deep Dive into Semantic HTML5
        
By John Smith on 2024-06-20
      

      

        
Introduction
        
Semantic HTML5 provides meaning to page structure...
      

      

        
Code Examples
        
Below is a snippet showing a navigation block:
        
<nav role='navigation'>
  <ul>
    <li><a href='/'>Home</a></li>
    <li><a href='/blog/'>Blog</a></li>
  </ul>
</nav>
        




  


6. Accessibility and ARIA

Use role attributes only when native elements don’t convey the correct landmark.
Ensure aria-labelledby or aria-label for sections without visible headings.
Provide keyboard focus order that matches visual and semantic order.

7. Maintenance and Scalability
By sticking to semantic containers:

Developers know where to insert new content or widgets.
Search engines correctly interpret page sections for rich snippets.
Screen readers announce landmarks, improving navigation.

Conclusion
Designing a complete site with semantic HTML ensures clarity, accessibility, and maintainability. Start with content mapping, apply proper tags, test with assistive technologies, and evolve the structure as the site grows.