Semantic HTML: layout
This course covers the three HTML elements that form a page's top-level skeleton: header, main and footer. It compares them with generic div markup and explains what each tag tells browsers, search engines, screen readers and other developers. Lessons map each tag to its landmark role in the accessibility tree and show how to inspect that tree in DevTools. The course also explains when div and span remain the accurate choice, and it ends by building a complete Rails layout with a skip link.
What you'll learn
- ✓Why semantic tags carry meaning that class names on a div do not
- ✓How page-level header, main and footer map to banner, main and contentinfo landmarks
- ✓The rule of one visible main per page and how skip links target it
- ✓Inspecting roles in the DevTools Accessibility panel and testing with a screen reader
- ✓When div and span are the accurate choice for layout or styling hooks
- ✓Building and checking a shared Rails layout skeleton
Why semantic tags beat div soup
With the right CSS, these two pages can render as pixel-for-pixel identical. The DOM Basics course's tree model applies equally to both: every box, every text node, in the same shape. What's different is invisible on screen and matters enormously anyway.
Read the full lesson free →Curriculum
7 lessonsWhy semantic tags beat div soup
Compares two identical-looking pages and shows why header, main and footer carry meaning that divs lack.
header: more than just the top of the page
Explains the page-level header, its use in a shared Rails layout, and when it becomes the banner landmark.
main: the one tag every page needs exactly once
Covers main as the unique content area, the one-per-page rule, skip links and where yield belongs.
footer: closing the page with meaning
Describes typical footer content, its contentinfo landmark, and an automatic copyright year in a Rails layout.
Landmark roles and the accessibility tree, made concrete
Shows the accessibility tree in DevTools, compares landmarks with generic divs, and suggests testing with built-in screen readers.
When div is still the right, honest choice
Explains when div and span fit pure layout or styling, and why overusing section clutters the landmarks list.
Putting it all together: structuring a real page skeleton
Builds a full Rails layout skeleton, checks it in DevTools, and applies a checklist for new layouts.