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
Make navigation and hierarchy explicit
Declare the page language, provide a skip link, use landmarks, and organize headings by content hierarchy. These patterns help people move through the page without scanning every visual detail.
- html lang identifies pronunciation rules
- A skip link bypasses repeated navigation
- main identifies the unique primary content
- Heading levels represent nesting, not font size
Use links, buttons, and labels for their real jobs
Links navigate and buttons act. Visible labels tell users what information a form expects before and after typing. Native controls expose names, roles, states, and keyboard behavior more reliably than generic containers.
<label for="search">Search documentation</label>
<input id="search" name="query" type="search">
<button type="submit">Search</button>Provide equivalent information
Alternative text communicates an informative image’s purpose. Captions and transcripts support recorded media. Table headers describe data relationships. Error messages identify the problem and explain how to fix it.
- Use alt="" for images that add no information
- Avoid embedding essential text only inside images
- Associate table headers with scope
- Connect form hints and errors programmatically
Test the native experience
Navigate using only the keyboard, zoom the page, inspect the accessibility tree, and run an automated scan. Automated tools find only some problems, so complete tasks manually and listen to a representative screen-reader flow.
Frequently asked questions
Should I add ARIA to every semantic element?
No. Native HTML already exposes semantics. Add ARIA only when it supplies necessary names, relationships, states, or custom-widget behavior that native HTML cannot express.
Is placeholder text a label?
No. Placeholder text disappears during entry and may be difficult to perceive. Give form controls persistent visible labels.
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