Short definition

Semantic HTML — HTML that uses elements according to the content's meaning and function, such as main, nav, article, headings, buttons, and forms.

Also known as: semantic markup, meaningful HTML.

Semantic HTML means choosing elements for what the content means, not how it looks. A heading introduces a section; a button triggers an action.

How does semantic HTML work?

Browsers, search engines, and assistive technologies can use element names to infer structure and purpose. Screen reader users can navigate by headings and landmarks; search engines can identify the main content. CSS controls presentation, so the same element can look different without losing its meaning.

What does this mean for a small business?

Semantic HTML is largely invisible when it works, but its absence is noticeable: pages that read poorly with a screen reader, forms that behave unexpectedly, and content that search engines may misinterpret. A sound structure makes the site easier to maintain as its content and design evolve.

What should you watch for with semantic HTML?

  • use one clear heading structure per page, without skipped levels;
  • prefer native elements over controls imitated with divs and scripts;
  • label form controls clearly and explain their purpose;
  • keep text selectable and readable without custom scripts;

How it relates to other website choices

Semantic HTML is a foundation of accessibility and supports SEO by helping search engines understand page structure. You can also read the guide to semantics for blog posts.