Learning overview
- Estimated time
- 4 minutes
- Difficulty
- Beginner
- Prerequisites
- No prior experience required
- Learning outcome
- Explain html using a clear mental model · Apply html in practical HTML work
- Last updated
- July 18, 2026
Model meaning before layout
A wireframe may show rectangles, but the document contains navigation, primary content, independent articles, supporting notes, and controls. Naming those roles before writing CSS produces a page that remains understandable when styles fail or change.
Start with the content outline. Identify the page topic, major sections, repeated navigation, and independent pieces. Then select elements whose definitions match those roles.
Use native contracts instead of recreating them
A button participates in keyboard navigation and exposes button semantics. An anchor participates in navigation and supports URL behavior. Headings create an outline that people can scan visually or through assistive technology.
Generic containers can be made interactive, but rebuilding native behavior requires focus management, keyboard events, states, roles, and testing. Native HTML starts with a stronger contract.
<!-- Navigation changes location -->
<a href="/guides/html-tutorial">Start the tutorial</a>
<!-- Button performs an action -->
<button type="button">Show table of contents</button>Review structure without visual styling
Disable CSS and read the page in source order. The topic, section hierarchy, navigation, controls, and supporting information should remain clear. Then inspect the accessibility tree to confirm names and roles match your intent.
- Can you identify the page topic from its h1?
- Do headings accurately name each section?
- Are navigation regions labeled when more than one exists?
- Are actions buttons and destinations links?
- Would another developer understand the structure without class names?
Frequently asked questions
Does semantic HTML automatically make a page accessible?
No, but it provides strong native roles and behavior. Content, names, keyboard flow, contrast, error handling, and testing still matter.
Is div ever the correct element?
Yes. Use div for grouping when no element with a more specific meaning fits. Generic elements are useful; using them for every role is the problem.
Topic graph
A taxonomy-generated path through this subject.
Related courses
Related learning
Recommended automatically from shared technologies, topics, intent, and difficulty.
Related Guides
Related Tutorials
Related Glossary
Related Cheatsheets
Related Projects
Related Interview Questions
Related reading
Hand-picked companion pages that deepen this topic.
Your next steps