What is Semantic HTML?

Semantic HTML uses elements that clearly describe their meaning to both browsers and developers. It improves accessibility, SEO, and code maintainability.

Semantic vs Non-Semantic

Why Semantic HTML Matters

For Accessibility:

• Screen readers announce element types
• Users can navigate by landmarks
• Content has context

For SEO:

• Search engines understand content structure
• Better indexing of important content
• Improved search rankings

For Developers:

• Self-documenting code
• Easier to maintain
• Consistent patterns

Common Semantic Elements

Landmark Elements

Landmark elements help users navigate:

• <header> - Introductory content
• <nav> - Navigation section
• <main> - Primary content (one per page)
• <aside> - Tangentially related content
• <footer> - Closing content

The Outline Algorithm

Good document outline:

1. Site Title (h1)
   1. Article One (h2)
      1. Section 1.1 (h3)
      2. Section 1.2 (h3)
   2. Article Two (h2)

Div and Span Still Have Uses

<div> and <span> are for:

• Styling hooks
• JavaScript targets
• Layout containers
• When no semantic element applies

Exercise: Convert to Semantic HTML

Convert div-based structure to semantic HTML:

Semantic HTML communicates meaning and improves the web for everyone!