Back to course

Lesson 26: HTML5 Semantic Layout: The 'Why'

The HTML Masterclass: From Zero to Web Developer

26. HTML5 Semantic Layout: The 'Why'

Before HTML5, developers relied heavily on generic <div> elements with descriptive IDs (e.g., <div id="header">). HTML5 introduced semantic elements to describe the meaning of the content, not just its presentation.

26.1 What is Semantics?

Semantics means 'meaning.' A semantic element clearly describes its content to both the browser and the developer.

  • Non-Semantic: <div> (Tells you nothing about the content inside).
  • Semantic: <header> (Clearly indicates that the content inside is the introductory content for the page or section).

26.2 Benefits of Semantic HTML

  1. Accessibility: Screen readers use these tags to help visually impaired users navigate the page efficiently.
  2. SEO (Search Engine Optimization): Search engines prioritize content within semantic elements to better understand the topic and structure of your page.
  3. Developer Readability: Code becomes much easier for other developers (and future self) to understand.

In the next few lessons, we will replace common div structures with their HTML5 semantic counterparts.