HTML Course 10.3 Main content and sections (section, article, aside)

HTML Course 10.3 Main content and sections (section, article, aside)

In HTML5, semantic elements help define the structure of a document, improve accessibility, and boost SEO. Three core elements for structuring the main content are:

• <section>: Generic thematic grouping of content with a heading.
• <article>: Independent, self-contained content that could stand alone.
• <aside>: Tangentially related content, such as sidebars, pull quotes or adverts.

1. The <section> Element

The <section> element represents a thematic grouping of content, typically with a heading. It creates a new outline section in the HTML document structure.

• Implicit ARIA role: region (if labelled).
• Should include a heading (<h2>–<h6>).
• Use for chapters, tabbed pages, numbered sections in a thesis.
• Avoid using <div> purely for styling when a semantic grouping is appropriate.

Example: Grouping a team members list

  
Our Team
  
Meet the talented individuals driving our success:
  

    
Alice Smith – Lead Developer
    
Bob Jones – UX Designer
    
Carla Díaz – Project Manager
  

2. The <article> Element

The <article> element is for self-contained content that makes sense on its own. It can be syndicated, bookmarked or reused.

• Implicit ARIA role: article.
• Ideal for blog posts, news items, forum posts, user comments.
• May contain headings, figures, sections, footnotes, etc.
• Can be nested: an article may include subsections (<section>) or other articles (e.g., comment threads).

Example: Blog post with comments

  

    
5 Tips for Writing Semantic HTML
    
July 1, 2024 by Jane Doe
  
  
Writing semantic HTML improves accessibility, SEO, and maintainability...
  

  
  

    
Comments
    

      

        
John said on July 2, 2024:
      
      
Great article! I especially like the section on ARIA roles.
    
    

      

        
Maria said on July 3, 2024:
      
      
Very informative. Could you write more about <aside>?
    
  

3. The <aside> Element

The <aside> element contains content tangentially related to the surrounding content. It is often used for sidebars, call-out boxes, or advertising blocks.

• Implicit ARIA role: complementary (if labelled).
• Should be placed within <article> or at the page level to complement main content.
• Typically not part of the main flow but provides additional context or navigation.

Example: Sidebar with related links

4. Combining section, article, and aside

Use these elements together to build a well-structured, accessible page outline. Headings within each section form the document outline for screen readers and search engines.

  
Main Content

  
  

    

      
Revolutionizing Web Design with Flexbox
      
Published July 10, 2024 by Sam Lee
    
    
The Flexible Box Layout Module, or Flexbox, makes it easier to design flexible responsive layout structures without using floats or positioning...
    
  

  
  

    
CSS Tutorials
    

      
Grid Layout Crash Course
      
Learn CSS Grid with hands-on examples and projects...
    
    

      
Responsive Images in HTML
      
Techniques for serving optimized images to different devices...
    
  

5. Best Practices and Accessibility

• Always include a descriptive heading inside each <section>, <article>, and <aside> for proper document outline.
• Use ARIA labels (aria-labelledby or aria-label) if the element’s purpose isn’t clear from the heading.
• Avoid generic <div> when semantic elements exist.
• Keep <aside> content relevant but separate from the main narrative.
• Test with a screen reader or an HTML outline tool to ensure logical flow.

6. Summary Table