Semantic HTML makes pages easier to understand and use. Start with native elements before building a complex component.
Landmarks and page structure
A page should generally have a main landmark, meaningful headings and navigational regions. Articles and sections represent distinct content, not just layout wrappers.
Links and buttons
Use links for navigation and buttons for actions. Their visible labels should describe the destination or result instead of repeating vague words such as “click here”.
Form labels and feedback
Connect labels to inputs, communicate validation errors in text and keep important interactions accessible by keyboard.
Try an example yourself
Explore a related developer utility and apply what you learned.
Open related tool ↗