Learn how to write accessible, SEO-friendly HTML using meaningful tags.
1. What Does "Semantic" Mean?
Semantic means "relating to meaning."
Semantic HTML is HTML where the tag name itself describes the meaning and role of the content.
div vs. Semantic Tags
<!-- Non-semantic approach (bad example) -->
<div id="header">...</div>
<div id="nav">...</div>
<div id="main">...</div>
<div id="sidebar">...</div>
<div id="footer">...</div>
<!-- Semantic approach (good example) -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>
Both versions may look identical in the browser,
but the semantic version makes the meaning of the code far clearer.
2. Why Should We Use Semantic HTML?
1) SEO (Search Engine Optimization)
- Search engines (Google, Bing, and others) can understand the page content better.
- Tags such as
<h1>–<h6>,<article>, and<section>influence search rankings.
2) Accessibility
- Screen readers used by visually impaired users guide through the page structure correctly.
- For example, they automatically announce things like "jump to header," "navigation menu," and "start of main content."
3) Code Readability
- Developers can immediately understand the role of each part when reading the code.
- Maintenance and collaboration become much easier.
3. Key Semantic Tags
header - page or section header
The introductory/header area of a page or section.
<!-- Header for the entire page -->
<header>
<h1>Site Name</h1>
<p>Site description or slogan</p>
<nav>...</nav>
</header>
<!-- Headers for specific sections work too -->
<article>
<header>
<h2>Post Title</h2>
<p>Published: May 10, 2026</p>
</header>
<p>Post content...</p>
</article>
nav - navigation
Represents a collection of the site's main links (menus).
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
Use
<nav>only for the site's main navigation.
Do not use it for ordinary links in the middle of the body text.
main - main content
The area that holds the core content of the page. Use it only once per page.
<main>
<!-- The page's main content goes here -->
<h1>Today's News</h1>
<article>...</article>
<article>...</article>
</main>
section - section
Represents an independent section (division) of a document.
Including a heading (<h2>–<h6>) is recommended.
<main>
<section>
<h2>Latest News</h2>
<article>...</article>
<article>...</article>
</section>
<section>
<h2>Popular Articles</h2>
<article>...</article>
</section>
</main>
article - independent content
Content that stands on its own and can be distributed or reused independently.
It suits blog posts, news articles, comments, product cards, and so on.
<article>
<header>
<h2>What Is HTML?</h2>
<p>Author: John Doe | May 10, 2026</p>
</header>
<p>HTML is the language that defines the structure of a web page...</p>
<footer>
<p>Tags: HTML, Web Basics</p>
</footer>
</article>
section vs. article
| Tag | Independence | Use Cases |
|---|---|---|
<section> |
A division that is related to other sections | Chapters, tab panels, groups of news categories |
<article> |
Content that makes sense entirely on its own | A blog post, a news article, a single comment |
aside - supplementary content
Represents supplementary information indirectly related to the main content.
Used for sidebars, advertisements, lists of related posts, and so on.
<div>
<main>
<article>
<h1>Article Title</h1>
<p>Article content...</p>
</article>
</main>
<aside>
<h2>Related Articles</h2>
<ul>
<li><a href="#">Related article 1</a></li>
<li><a href="#">Related article 2</a></li>
</ul>
<h2>Advertisement</h2>
<p>Ad content...</p>
</aside>
</div>
footer - footer
The footer area of a page or section.
It contains copyright information, contact details, a sitemap, and so on.
<footer>
<p>© 2026 John Doe. All rights reserved.</p>
<nav>
<a href="/terms">Terms of Service</a>
<a href="/privacy">Privacy Policy</a>
<a href="/contact">Contact Us</a>
</nav>
<address>
123 Teheran-ro, Gangnam-gu, Seoul | Email: [email protected]
</address>
</footer>
figure and figcaption (review)
<figure>
<img src="chart.png" alt="Graph showing revenue growth in 2026">
<figcaption>Figure 1: Q1 2026 revenue overview (unit: hundred million KRW)</figcaption>
</figure>
time - date/time
Represents a date/time in a machine-readable format.
<!-- Write the datetime attribute in machine-readable ISO format -->
<time datetime="2026-05-10">May 10, 2026</time>
<time datetime="2026-05-10T14:30">2:30 PM</time>
<time datetime="PT2H30M">2 hours 30 minutes</time>
<!-- Usage example -->
<article>
<h2>Latest News</h2>
<p>Published: <time datetime="2026-05-10">May 10, 2026</time></p>
</article>
address - contact information
<address>
<!-- Contact information for the author or organization -->
Author: <a href="mailto:[email protected]">John Doe</a><br>
123 Teheran-ro, Gangnam-gu, Seoul
</address>
4. Full Page Layout Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blog</title>
</head>
<body>
<!-- Page header: logo, site name, main menu -->
<header>
<h1>My Web Development Blog</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/html">HTML</a></li>
<li><a href="/css">CSS</a></li>
<li><a href="/js">JavaScript</a></li>
</ul>
</nav>
</header>
<!-- Page main content -->
<main>
<!-- Latest posts section -->
<section>
<h2>Latest Posts</h2>
<!-- Individual blog post -->
<article>
<header>
<h3>A Complete Guide to HTML Basics</h3>
<time datetime="2026-05-10">May 10, 2026</time>
</header>
<p>Let's look at the basic structure of HTML and its main tags...</p>
<footer>
<p>Tags: HTML, Basics</p>
</footer>
</article>
<article>
<header>
<h3>The Complete Guide to CSS Selectors</h3>
<time datetime="2026-05-08">May 8, 2026</time>
</header>
<p>Everything you need to know about CSS selectors, all in one place...</p>
<footer>
<p>Tags: CSS, Selectors</p>
</footer>
</article>
</section>
</main>
<!-- Sidebar: supplementary information -->
<aside>
<section>
<h2>Categories</h2>
<ul>
<li><a href="/html">HTML (6 posts)</a></li>
<li><a href="/css">CSS (4 posts)</a></li>
<li><a href="/js">JavaScript (2 posts)</a></li>
</ul>
</section>
<section>
<h2>Recent Comments</h2>
<p>Great read, thanks! - Chris Kim</p>
</section>
</aside>
<!-- Page footer -->
<footer>
<p>© 2026 John Doe's Web Development Blog</p>
<address>
Contact: <a href="mailto:[email protected]">[email protected]</a>
</address>
</footer>
</body>
</html>
5. When Do We Use div and span?
Use <div> and <span> when no semantic tag can replace them.
<!-- Grouping for styling (no semantic role) -->
<div class="card-grid">
<article>...</article>
<article>...</article>
<article>...</article>
</div>
<!-- Applying a style to part of a text -->
<p>Price: <span class="price">35,000 KRW</span> (VAT included)</p>
Summary
| Tag | Role | Quantity Limit |
|---|---|---|
<header> |
Page/section header | Multiple allowed |
<nav> |
Main navigation | Multiple allowed |
<main> |
Page main content | One per page |
<section> |
Group of related content | Multiple allowed |
<article> |
Independent content unit | Multiple allowed |
<aside> |
Supplementary related content | Multiple allowed |
<footer> |
Page/section footer | Multiple allowed |
<figure> |
Image/media plus caption group | Multiple allowed |
<figcaption> |
Description of a figure | One per figure |
<time> |
Date/time | Multiple allowed |
<address> |
Contact information | Multiple allowed |
Next Steps
- See the Example file - a blog layout built with semantic tags
- Check the Assignment - structuring a portfolio page semantically
- HTML course complete! Next up, learn CSS and add beautiful styles!