What is HTML Semantic Markup?

HTML semantic markup means using HTML tags that carry clear, meaningful descriptions of the content they contain, rather than relying solely on non-semantic tags like <div> or <span>.

Semantic vs Non-Semantic

<!-- Non-semantic -->
<div class="header">
  <div class="nav">...</div>
</div>
<div class="main">
  <div class="article">...</div>
</div>

<!-- Semantic -->
<header>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
</main>

Common Semantic Tags

Tag	Purpose
`<header>`	Page or section header
`<nav>`	Navigation links
`<main>`	Main content of the page
`<article>`	Self-contained content unit (post, article)
`<section>`	Thematic grouping of content
`<aside>`	Supplementary content (sidebar)
`<footer>`	Page or section footer

Benefits of Semantic HTML

SEO: Search engines can better understand page structure and key content
Accessibility: Screen readers correctly interpret content, improving user experience
Maintainability: Code is easier to read and maintain
Default browser styles: Some semantic tags come with appropriate default styles and behaviors