HTML Semantic Elements
Semantic elements are elements that have a clear meaning about the content they wrap.
Semantics vs Non-Semantics
Non-Semantic
<div class="header">
<div class="nav">...</div>
</div>
<div class="content">
<div class="article">...</div>
</div>
<div class="footer">...</div>
Semantic
<header>
<nav>...</nav>
</header>
<main>
<article>...</article>
</main>
<footer>...</footer>
Main Semantic Elements
header
<header>
<h1>Website Name</h1>
<p>Website tagline</p>
</header>
main
<main>
<h2>Main Content</h2>
<p>This is the main content of the page.</p>
</main>
article
<article>
<header>
<h2>Article Title</h2>
<time datetime="2024-01-10">January 10, 2024</time>
</header>
<p>Article content...</p>
<footer>
<p>Written by: John Smith</p>
</footer>
</article>
section
<section>
<h2>Chapter 1: Introduction</h2>
<p>Introduction chapter content...</p>
</section>
aside
<aside>
<h3>Widget Sidebar</h3>
<p>Supplementary content related to the main content.</p>
</aside>
footer
<footer>
<p>© 2024 Website Name</p>
<nav>
<a href="privacy.html">Privacy</a>
</nav>
</footer>
figure & figcaption
<figure>
<img src="chart.png" alt="Sales chart">
<figcaption>Q4 2024 sales chart</figcaption>
</figure>
Case Study: Online News Portal
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Campus News Portal</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Georgia', serif;
line-height: 1.8;
color: #2c3e50;
background: #f5f6fa;
}
header {
background: #2c3e50;
color: white;
padding: 1rem 2rem;
}
.header-top {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(255,255,255,0.2);
}
.logo {
font-size: 1.8rem;
font-weight: bold;
}
nav ul {
list-style: none;
display: flex;
gap: 1.5rem;
}
nav a {
color: white;
text-decoration: none;
font-weight: 500;
}
nav a:hover {
color: #d4af37;
}
.container {
max-width: 1200px;
margin: 2rem auto;
padding: 0 2rem;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
}
main {
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
article {
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid #eee;
}
article:last-child {
border-bottom: none;
}
article h2 {
color: #2c3e50;
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
article time {
color: #7f8c8d;
font-size: 0.9rem;
}
article p {
margin-top: 1rem;
}
article figure {
margin: 1rem 0;
}
article img {
width: 100%;
border-radius: 4px;
}
article figcaption {
font-size: 0.85rem;
color: #7f8c8d;
margin-top: 0.5rem;
}
aside {
background: white;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
height: fit-content;
}
aside h3 {
color: #2c3e50;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid #d4af37;
}
aside ul {
list-style: none;
}
aside li {
margin-bottom: 0.8rem;
padding-bottom: 0.8rem;
border-bottom: 1px solid #eee;
}
aside li:last-child {
border-bottom: none;
}
aside a {
color: #2c3e50;
text-decoration: none;
}
aside a:hover {
color: #d4af37;
}
footer {
background: #2c3e50;
color: white;
padding: 2rem;
margin-top: 2rem;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
footer h4 {
color: #d4af37;
margin-bottom: 1rem;
}
footer nav a {
color: white;
text-decoration: none;
display: block;
margin-bottom: 0.5rem;
}
footer nav a:hover {
color: #d4af37;
}
.copyright {
text-align: center;
padding-top: 2rem;
margin-top: 2rem;
border-top: 1px solid rgba(255,255,255,0.2);
}
</style>
</head>
<body>
<header>
<div class="header-top">
<div class="logo">Campus News</div>
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="academic.html">Academic</a></li>
<li><a href="kestudentan.html">Kestudentan</a></li>
<li><a href="research.html">Research</a></li>
</ul>
</nav>
</div>
</header>
<div class="container">
<main>
<article>
<header>
<h2>2024 New Student Admissions</h2>
<time datetime="2024-01-10">January 10, 2024</time>
</header>
<figure>
<img src="campus.jpg" alt="Campus of the Technology University">
<figcaption>Main Building - Technology University</figcaption>
</figure>
<p>The Technology University is opening registration for new students for the 2024/2025 academic year with a quota of 1000 students.</p>
<footer>
<p>Oleh: <strong>Tim Humas</strong></p>
</footer>
</article>
<article>
<header>
<h2>IT Workshop</h2>
<time datetime="2024-01-08">January 8, 2024</time>
</header>
<p>The Engineering Department is holding a workshop on the latest technological advances.</p>
<footer>
<p>Oleh: <strong>Academic Division</strong></p>
</footer>
</article>
</main>
<aside>
<h3>Latest News</h3>
<ul>
<li><a href="news1.html">New Faculty Hiring</a></li>
<li><a href="news2.html">National Research Grant</a></li>
<li><a href="news3.html">Industry Partnership</a></li>
</ul>
<h3>Agenda</h3>
<ul>
<li><a href="event1.html">Even Semester Graduation</a></li>
<li><a href="event2.html">Seminar Nasional</a></li>
</ul>
</aside>
</div>
<footer>
<div class="footer-content">
<section>
<h4>Tentang Kami</h4>
<p>Official news portal of Technology University.</p>
</section>
<section>
<h4>Menu</h4>
<nav>
<a href="beranda.html">Home</a>
<a href="academic.html">Academic</a>
<a href="kontak.html">Kontak</a>
</nav>
</section>
<section>
<h4>Kontak</h4>
<address>
123 Tech St.<br>
Chicago, IL<br>
[email protected]
</address>
</section>
</div>
<div class="copyright">
<p>© 2024 Technology University. All rights reserved.</p>
</div>
</footer>
</body>
</html>
Benefits of Semantic Elements
- SEO: Search engines understand the content structure
- Accessibility: Screen readers read it correctly
- Maintainability: Code is easier to understand
- Standards: Follows modern web standards
Best Practices
- Use header: For the top of content
- Use main: Only one per page
- Use article: For self-contained content
- Use section: For logical grouping
- Use aside: For supplementary content
Summary
Semantic elements make HTML structure more meaningful and easier to understand for browsers, developers, and assistive technology.