> Canonical URL: https://codingcat.dev/course/odin-web-development-foundations/lesson/semantic-html5-dom-tree-and-accessibility

# Semantic HTML5, Document Landmarks & the Accessibility Tree | The Odin Project 1: Web Development Foundations (HTML, CSS, Flexbox & JS Basics) | CodingCat.dev Course

[🧶 The Odin Project 1: Web Development Foundations (HTML, CSS, Flexbox & JS Basics)](/course/odin-web-development-foundations)Section 1.2 · Lesson 2 of 4[← Prev Lesson](/course/odin-web-development-foundations/lesson/how-the-web-works-http-dns-and-devtools)[Next Lesson →](/course/odin-web-development-foundations/lesson/css-box-model-cascade-and-flexbox-layout-engine)

# Semantic HTML5, Document Landmarks & the Accessibility Tree

![Semantic HTML5, Document Landmarks & the Accessibility Tree Architecture Diagram](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/e80a1ca6a63caef6c16b88bc1c6c10ddae39bfd1-1280x720.jpg?w=1920&h=1080&q=82&fit=max&auto=format)[@CodingCatDev62.5K / 100K Subscribers Goal](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Subscribe on YouTube→](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Watch on YouTube App ↗](https://www.youtube.com/watch?v=A_ZlhtqlSn4&list=PLbWnTzpJdmjs)

## 1. The 15-Second Hook

Wrapping every piece of your UI in generic div tags breaks keyboard navigation, hurts SEO, and forces you to reinvent browser behavior in JavaScript. Let's master semantic HTML5 landmarks.

## 2. Architecture Mental Model (Visual Diagram)

On the left, div soup with click handlers traps keyboard and screen-reader users. On the right, semantic landmarks like header, nav, main, article, and button build a clean accessibility tree automatically.

## 3. Show Me the Code (src/index.html)

Copied! 🐾