Semantic HTML
Definition
Using HTML elements for their intended purpose, conveying meaning and structure rather than just visual appearance.
What is Semantic HTML?
Semantic HTML means using HTML elements according to their meaning, not just their appearance. A heading should use <h1> through <h6>, not a styled <div>. A navigation menu should use <nav>, not just a list of links.
Semantic code conveys structure and meaning to browsers, screen readers, and search engines.
Why Semantic HTML Matters
Accessibility
Screen readers use semantic elements to understand page structure. They announce headings as headings, navigation as navigation, and buttons as buttons. Without semantics, users hear meaningless content.
SEO
Search engines parse semantic structure to understand content hierarchy and importance.
Maintainability
Semantic code is easier to understand and maintain. Element names describe their purpose.
Built-In Functionality
Semantic elements come with built-in behaviours – buttons are clickable, forms submit, links navigate.
Key Semantic Elements
Document Structure
<header>– Introductory content or navigation<nav>– Navigation sections<main>– Primary content<section>– Thematic grouping<article>– Self-contained content<aside>– Secondary content<footer>– Footer information
Content Elements
<h1>to<h6>– Headings<p>– Paragraphs<ul>,<ol>,<li>– Lists<blockquote>– Quotations<figure>,<figcaption>– Images with captions
Interactive Elements
<button>– Clickable buttons<a>– Links<form>,<input>,<label>– Form elements
Non-Semantic vs Semantic
Non-Semantic (Avoid)
<div class="nav">
<div class="nav-item">Home</div>
</div>
<div class="heading-big">Welcome</div>
Semantic (Prefer)
<nav>
Home
</nav>
<h1>Welcome</h1>
Common Semantic Mistakes
Divs for Everything
Using <div> when semantic elements exist. Divs should be for grouping when no semantic element applies.
Wrong Heading Levels
Choosing heading levels for size rather than structure. Use CSS for sizing, HTML for hierarchy.
Links as Buttons
Using links for actions that don't navigate. If it triggers an action on the same page, use <button>.
Skipping Heading Levels
Going from <h2> to <h4> breaks document outline. Use all levels in order.
Benefits Summary
| Aspect | Semantic Benefit |
|---|---|
| Accessibility | Screen readers understand structure |
| SEO | Search engines parse meaning |
| Maintenance | Code is self-documenting |
| Functionality | Built-in behaviours work |