What Is Semantic HTML?
Semantic HTML involves using specific HTML5 elements to structure your content based on its meaning or purpose, rather than just its visual presentation.
Instead of writing everything inside generic containers like <div> and <span>, you use elements that clearly communicate the role of the content they wrap.
Structural Elements
These elements describe the big sections of a page. They make it easier to understand how content is grouped and how the layout is organized.
- header – The intro or top area of a page or section.
- nav – A group of navigation links.
- main – The main unique content of the page.
- section – A grouped block of related content.
- article – Self-contained content that could stand alone.
- aside – Extra or side content related to the main content.
- footer – The bottom area with extra info or links.
When these are used correctly, the page outline makes sense even without seeing the visual design.
Heading Levels and Page Outline
Headings (h1 through h6) help create the outline of your page. Most pages should have one h1 for the main title, and then use h2, h3, and the rest for section and subsection titles.
A clear outline makes it easy for people to skim the page and find what they need quickly. It also helps screen readers jump between sections, so users don’t have to listen to the whole page in order.
A common mistake is to pick heading levels based only on how big they look. Instead, you should style headings with CSS and keep the levels meaningful for the structure.
Inline Semantic Elements
Semantic HTML is not just about sections and layout. Inline elements can also carry meaning that tools and users can understand.
- strong — marks important text.
- em — emphasizes text with stress.
- mark — highlights key text.
- abbr — labels an abbreviation and lets you add its full meaning.
- time — marks a date or time for browsers and tools.
Using these correctly gives extra context while still looking like normal styled text visually.
Semantic HTML vs. “Div Soup”
A page built only with <div> and
<span> tags is often called “div soup.” It might look
okay visually, but it gives almost no information about what each part of
the page means.
Semantic HTML reduces “div soup” and replaces it with meaningful tags. This is one of the easiest ways to improve accessibility and maintainable code without adding extra libraries.