SEO & Search
What Is Semantic HTML?
Using HTML elements for what they mean rather than how they look, which is what makes a page legible to assistive technology, crawlers and language models alike.
Definition
Semantic HTML is the practice of choosing elements according to the meaning of the content they contain. A navigation block uses the nav element, a self contained article uses article, a heading uses the heading level that reflects its place in the outline. The alternative, using generic div and span elements with styling, carries no meaning for software.
Why the element choice matters
Browsers build an accessibility tree from the markup, and screen readers navigate it. Landmarks such as header, nav, main and footer let a person jump directly to a region. Headings in order let them skim an outline. When every element is a div, that structure does not exist and the page becomes a flat run of text.
The same structure helps machine readers
Extraction systems, including those behind AI answer engines, rely on structure to decide what a passage is about and where it begins and ends. A correct heading hierarchy, real lists, real tables with header cells and captioned figures all make a page easier to segment and quote accurately.
A short checklist
- One h1 per page, then h2 and h3 in order without skipping levels
- Landmarks: header, nav, main, aside and footer used once each where appropriate
- Lists marked up as ul, ol and li rather than styled paragraphs
- Tables with th elements and a scope attribute for data, never for layout
- Buttons for actions and anchors for navigation, not divs with click handlers
- Descriptive alt text on images that carry meaning, empty alt on decorative ones
Semantic HTML makes web pages more informative and adaptable, allowing browsers and search engines to better interpret content.