Semantic markup principles
Semantic HTML provides the foundation for accessible government digital services. Proper markup ensures content is understandable to both assistive technologies and web browsers.
Key semantic elements include:
- Navigation landmarks
- Heading structure
- List organization
- Button roles
- Form labels
- Table headers
- Article sections
Each HTML element has a specific meaning and purpose. For example, using real heading tags (<h1> to <h6>) creates a clear document structure that screen readers can navigate.[1] Semantic elements like <footer>, <nav>, and <main> define clear page regions.
Proper semantic markup improves both accessibility and SEO. When content uses the right HTML elements, assistive technologies can better communicate page structure and relationships to users. This creates a better experience for everyone.[2]