Chapter 1 of 6

1.1 HTML Document Anatomy & Semantic Structure

Semantic HTML means using elements that clearly describe their meaning to both the browser and developer. Semantic markup improves SEO, screen reader accessibility, and maintainability.

Semantic HTML5 Templatehtml

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Accessible Web Page</title>
</head>
<body>
  <header>
    <nav aria-label="Main Navigation">
      <a href="/">Home</a>
    </nav>
  </header>
  
  <main>
    <article>
      <h1>Understanding HTML5 Semantics</h1>
      <p>Semantic elements convey meaning...</p>
    </article>
  </main>
  
  <footer>
    <p>&copy; 2026 TechTalks</p>
  </footer>
</body>
</html>

1.2 Web Accessibility (a11y) & ARIA

WCAG Core Principle

First Rule of ARIA: Do not use ARIA if a native HTML element already exists with the semantics and behavior you need! Native <button> is always better than <div role="button">.

CSS Foundations, Specificity & Box Model