<?xml version="1.0" encoding="utf-8"?>

Semantic markup principles

Semantic markup principles Bad Practice
Semantic markup principles Best Practice

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:

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]

Improve your UX & Product skills with interactive courses that actually work