Week 4 Overview | Basic Elements | Document Sectioning | Images | DOM | Worksheet

Wendi's Web - HTML: Elements for Sectioning Content

Review the meaning of semantic elements

Understand the purpose and content of the following document sectioning elements:

<aside> ♿ WCAG 1.3 Adaptable – 1.3.1 Info and Relationships

https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html

</aside>

• <article>

• <address>

• <header>

• <footer>

  • usually includes a nested <address>

• <nav>

  • WCAG Technique H97 https://www.w3.org/WAI/WCAG22/Techniques/html/H97

• <section>

• <aside>

• Level-N headings (or “level headings”): <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

  • use the codepen example

  <aside> ♿

  WCAG Technique H42 https://www.w3.org/WAI/WCAG22/Techniques/html/H42

  WCAG SC 2.4.6 https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels.html

  • G130 https://www.w3.org/WAI/WCAG22/Techniques/general/G130 </aside>

<main> = a semantic element but technically not part of document sectioning

• actually a “content group” element
• often used to contain the content of the document that goes between <header> and <footer>
• e.g.

<header>
   <h1>Accessible Page Title</h1>
</header>

<main>
  <!-- the main content of the page goes here -->
</main>

<footer>
    <address>&copy; 2023 FirstName LastName</address>
</footer>

See the codepen examples of how we sometimes use some of these document sectioning elements