Content revised 20 October 2026.
Semantic HTML describes the purpose of content. Clear headings, navigation, links and buttons help people and software understand how a page is organised.
Choose elements by purpose
A heading introduces a section. A link takes someone to another destination. A button performs an action such as opening a menu or submitting a form. Choosing the right element gives browsers and assistive technology useful information and avoids rebuilding native behaviour unnecessarily.
Build a clear heading structure
Use a main heading that describes the page, then organise the detail under sensible section headings. Do not choose a heading level only because of its default size. CSS can control the appearance while the HTML keeps the document’s structure. A list is useful for parallel items; a table is useful for actual tabular information.
Semantic HTML and schema are different
HTML describes the structure of the page. Structured data describes entities and facts using a supported vocabulary, often in JSON-LD. They can work together, but adding schema does not repair confusing headings, inaccessible controls or missing information. Marked-up facts should agree with visible content.
Test the experience, not just the source
Use the page with a keyboard and inspect labels, focus states and mobile navigation. Check that a screen reader can identify important controls and that meaningful images have appropriate alternatives. Automated checks help find some issues; they do not replace reviewing the actual journey.
Avoid percentage promises
Neither semantic HTML nor schema gives every site a fixed increase in clicks or rankings. The useful outcome is a page that is easier to interpret and use. When planning a redesign, review these foundations alongside responsive web development, content and technical SEO.
Further reading: official documentation.