Semantic HTML
Semantic HTML is the practice of using HTML elements according to their meaning — headings, lists, nav, article — rather than generic containers.
Semantic markup makes a page easier for browsers, assistive technology, search engines, and AI engines to understand. It is a foundation of both accessibility and machine-readability, and it costs nothing beyond the discipline to use the right element.
How it works
Browsers and assistive technology build an accessibility tree from the HTML, and search and AI crawlers read the same structure. Elements such as <header>, <nav>, <main>, <article>, a single <h1> followed by ordered headings, <button> and <a> tell them what each part of the page is and what it does, with no extra code.
A generic <div> tells them nothing; making it behave like a button then needs roles, keyboard handling and focus management added by hand.
Example
A "Read more" control built as a <div> with a click handler cannot be reached by keyboard and is invisible to crawlers as a link. The same control written as <a href="/insights/…"> works for keyboards, screen readers and search engines at once.
Common mistakes
- Choosing heading levels for their size instead of their place in the outline.
- Using buttons for navigation and links for actions.
- Rendering key content only with JavaScript, so crawlers that do not run it see an empty page.
