Language 8 of 10 · Topic 0.1

Semantic HTML5 Elements & Accessible DOM Hierarchy

1Concept

Semantic HTML (<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>) communicates structural meaning to search engines (SEO) and screen readers (Accessibility/a11y).

2Architecture Diagram

+-------------------------------------------------------+
| <header> (Logo, Global Branding)                      |
+-------------------------------------------------------+
| <nav> (Primary Navigation Links)                      |
+---------------------------+---------------------------+
| <main> <article>          | <aside> (Related Sidebar) |
| <h1> Core Content </h1>   |                           |
| <section> Content Block   |                           |
+---------------------------+---------------------------+
| <footer> (Copyright, Terms, Contact)                  |
+-------------------------------------------------------+

3Code Example

Stage 0 Language Foundations
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CareerAI PRO</title>
</head>
<body>
    <header>
        <nav aria-label="Main Navigation">
            <a href="/">Home</a>
            <a href="/interview">Interview Prep</a>
        </nav>
    </header>
    <main>
        <article>
            <h1>AI Technical Interview Simulator</h1>
            <p>Master 50 real questions per tech track.</p>
        </article>
    </main>
    <footer>
        <p>&copy; 2026 CareerAI PRO. All rights reserved.</p>
    </footer>
</body>
</html>

4Expected Output

[Rendered accessible semantic DOM tree with zero div-soup]

5Key Takeaways

  • Semantic tags improve SEO indexation and WCAG accessibility.
  • Use only one <h1> tag per page as the primary headline.
  • Use ARIA attributes only when native HTML elements cannot convey meaning.