Semantic HTML

Semantic HTML means using code elements that describe what content actually is — a heading, a list, a button, an article — rather than generic, meaningless containers styled to merely look that way, so that a browser, a screen reader or a search engine can correctly understand a page’s structure.

Semantic HTML code and CSS: why “looks right” is not the same as “is correct”

A heading styled with large, bold text using only CSS, without the underlying heading element, looks identical to a genuine heading to a sighted visitor. But a screen reader has no way to recognise it as a heading. A visitor navigating a page by jumping between headings will skip straight past it as if it were not there at all. This is one of the most common and hardest-to-notice accessibility failures, precisely because it is invisible to anyone not using assistive technology.

Why it matters to more than accessibility

Search engines and other automated tools also rely on semantic structure to understand what a page is about and how its content is organised — a correctly marked-up heading hierarchy, list and article structure gives these tools a genuine signal about content organisation that generic, undifferentiated markup does not provide.

What it looks like in practice

Using an actual heading element for a heading rather than styled plain text, a genuine list element for a list of items, a button element for something that triggers an action rather than navigates, and a clear, logical heading hierarchy without skipped levels are the practical, checkable core of semantic HTML.

The semantic HTML elements themselves — header, nav, main, article, section, aside, footer — and what div and span tags they replace

HTML5 added a specific set of semantic elements precisely so a page did not have to be built entirely out of generic <div> and <span> tags with no meaning of their own: <header> for introductory content, <nav> for a block of navigation links, <main> for the primary content of the page, <article> for a self-contained piece of content such as a blog post, <section> for a thematic grouping within the page, <aside> for tangential content such as a sidebar, and <footer> for closing content. A <div> or <span> still has a legitimate job — wrapping something purely for styling, with no meaning to convey — but a page built entirely from <div> tags, where a <header>, <nav> or <article> element would have been accurate, is the generic-container failure this whole concept exists to name. The code itself, not just the semantic HTML tags in isolation, is what a screen reader or search engine actually reads.

What to do next

For where this foundational build discipline sits in a project, web development services covers where it is typically scoped as part of the underlying code quality of a build.