HTML semantics · Document structure
Website Builder
Stack semantic HTML blocks, then read the generated markup.
A web page is a tree of nested elements: header, main, article, footer. Drag the blocks together and the generated HTML appears beneath. Browsers parse this tree, apply CSS, and run JavaScript against it. The DOM you'll later use in React is the same tree, just modifiable from code.
Website Builder
Click blocks to build your webpage. Click text to edit it.
Your page is empty. Click a block above to start building!
What’s happening under the hood
- ›Semantic HTML (`<article>`, `<nav>`, `<aside>`, `<main>`) carries meaning, not just appearance. Screen readers, search engines, and accessibility tools all depend on it.
- ›The browser parses HTML into a Document Object Model — a tree of nodes. JavaScript manipulates this tree at runtime; CSS styles its nodes via selectors.
- ›Frameworks like React render the same DOM tree from a description (JSX). The browser doesn't know the difference; it sees the resulting tree either way.
Dig deeper
Phase 2 · HTML FoundationsThe concept you just explored is taught with full depth in the formal DURA curriculum.