Master semantic elements like header, nav, main, section, article, and footer for meaningful markup
Semantic HTML5 elements provide meaning to your markup, making websites more accessible, SEO-friendly, and maintainable. These elements tell browsers, screen readers, and search engines exactly what each part of your content represents.
Think of semantic HTML as a way to communicate structure and meaning, not just visual layout. When you use <header>, <nav>, <main>, and <footer>, you're creating landmarks that assistive technologies can understand and navigate.
Elements like header, nav, main, and footer create landmarks that assistive technologies use for navigation. Screen reader users can jump directly to main content or navigation menus using these landmarks.
Key landmark elements:
Section and article elements help organize your content into logical groups:
<section> - Represents a thematic grouping of content, typically with a heading. Use it to divide content into distinct sections.
<article> - Represents a complete, independent piece of content that could stand alone. Think blog posts, news articles, or user comments.
Rule of thumb: If content makes sense on its own (like in an RSS feed), use <article>. If it's just a thematic grouping, use <section>.
Using semantic HTML provides multiple benefits:
SEO: Search engines better understand your content structure and can index it more effectively.
Accessibility: Screen readers can navigate your site more efficiently using semantic landmarks.
Maintainability: Code is more self-documenting and easier to understand.
Future-proofing: Semantic markup adapts better to new technologies and devices.
Build a complete news website layout using proper semantic HTML5 elements for maximum accessibility and SEO benefit.
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Semantic News - Breaking Stories</title>
7 <style>
8 /* Modern, accessible styling */
9 * { margin: 0; padding: 0; box-sizing: border-box; }
10 body {
11 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
12 line-height: 1.6;
13 color: #333;
14 background: #f8f9fa;
15 }
16
17 header {
18 background: #2c3e50;
19 color: white;
20 padding: 1rem;
21 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
22 }
23
24 header h1 {
25 font-size: 2rem;
26 margin-bottom: 0.5rem;
27 }
28
29 nav ul {
30 list-style: none;
31 display: flex;
32 gap: 2rem;
33 flex-wrap: wrap;
34 }
35
36 nav a {
37 color: white;
38 text-decoration: none;
39 padding: 0.5rem 1rem;
40 border-radius: 4px;
41 transition: background-color 0.2s;
42 }
43
44 nav a:hover, nav a:focus {
45 background: rgba(255,255,255,0.2);
46 outline: 2px solid #fff;
47 outline-offset: 2px;
48 }
49
50 main {
51 max-width: 1200px;
52 margin: 2rem auto;
53 padding: 0 1rem;
54 display: grid;
55 grid-template-columns: 2fr 1fr;
56 gap: 2rem;
57 }
58
59 @media (max-width: 768px) {
60 main {
61 grid-template-columns: 1fr;
62 margin: 1rem auto;
63 }
64 nav ul {
65 gap: 1rem;
66 }
67 }
68
69 .news-content {
70 background: white;
71 border-radius: 8px;
72 padding: 1.5rem;
73 box-shadow: 0 1px 3px rgba(0,0,0,0.1);
74 }
75
76 article {
77 margin-bottom: 2rem;
78 padding-bottom: 2rem;
79 border-bottom: 1px solid #eee;
80 }
81
82 article:last-child {
83 border-bottom: none;
84 margin-bottom: 0;
85 }
86
87 article header h2 {
88 color: #2c3e50;
89 margin-bottom: 0.5rem;
90 font-size: 1.5rem;
91 }
92
93 .article-meta {
94 color: #666;
95 font-size: 0.9rem;
96 margin-bottom: 1rem;
97 display: flex;
98 gap: 1rem;
99 flex-wrap: wrap;
100 }
101
102 .article-meta time {
103 font-weight: 500;
104 }
105
106 .article-meta address {
107 font-style: normal;
108 }
109
110 .article-meta a {
111 color: #3498db;
112 text-decoration: none;
113 }
114
115 .article-meta a:hover {
116 text-decoration: underline;
117 }
118
119 article p {
120 margin-bottom: 1rem;
121 }
122
123 article section h3 {
124 color: #34495e;
125 margin: 1.5rem 0 0.5rem 0;
126 }
127
128 article ul {
129 margin: 0.5rem 0 1rem 1.5rem;
130 }
131
132 article li {
133 margin-bottom: 0.25rem;
134 }
135
136 figure {
137 margin: 1.5rem 0;
138 padding: 1rem;
139 background: #f8f9fa;
140 border-left: 4px solid #3498db;
141 border-radius: 4px;
142 }
143
144 blockquote {
145 font-style: italic;
146 font-size: 1.1rem;
147 margin-bottom: 0.5rem;
148 }
149
150 figcaption {
151 font-size: 0.9rem;
152 color: #666;
153 text-align: right;
154 }
155
156 article footer {
157 margin-top: 1rem;
158 padding-top: 1rem;
159 border-top: 1px solid #eee;
160 font-size: 0.9rem;
161 }
162
163 article footer a {
164 background: #e3f2fd;
165 color: #1976d2;
166 padding: 0.25rem 0.5rem;
167 border-radius: 3px;
168 text-decoration: none;
169 margin-right: 0.5rem;
170 font-size: 0.8rem;
171 }
172
173 aside {
174 background: white;
175 border-radius: 8px;
176 padding: 1.5rem;
177 height: fit-content;
178 box-shadow: 0 1px 3px rgba(0,0,0,0.1);
179 }
180
181 aside section {
182 margin-bottom: 2rem;
183 }
184
185 aside section:last-child {
186 margin-bottom: 0;
187 }
188
189 aside h3 {
190 color: #2c3e50;
191 margin-bottom: 1rem;
192 font-size: 1.1rem;
193 }
194
195 aside ul {
196 list-style: none;
197 }
198
199 aside li {
200 margin-bottom: 0.5rem;
201 }
202
203 aside a {
204 color: #3498db;
205 text-decoration: none;
206 padding: 0.25rem 0;
207 display: block;
208 border-radius: 3px;
209 transition: color 0.2s;
210 }
211
212 aside a:hover, aside a:focus {
213 color: #2980b9;
214 text-decoration: underline;
215 }
216
217 body > footer {
218 background: #34495e;
219 color: white;
220 text-align: center;
221 padding: 2rem;
222 margin-top: 2rem;
223 }
224
225 body > footer nav {
226 margin-top: 1rem;
227 }
228
229 body > footer nav a {
230 color: #bdc3c7;
231 text-decoration: none;
232 margin: 0 0.5rem;
233 }
234
235 body > footer nav a:hover {
236 color: white;
237 text-decoration: underline;
238 }
239 </style>
240</head>
241<body>
242 <!-- Site Header with Navigation -->
243 <header>
244 <h1>📰 Semantic News</h1>
245 <nav aria-label="Main navigation">
246 <ul>
247 <li><a href="#home">Home</a></li>
248 <li><a href="#world">World News</a></li>
249 <li><a href="#tech">Technology</a></li>
250 <li><a href="#sports">Sports</a></li>
251 <li><a href="#opinion">Opinion</a></li>
252 </ul>
253 </nav>
254 </header>
255
256 <!-- Main Content Area -->
257 <main>
258 <!-- Primary News Content -->
259 <section class="news-content" aria-label="Latest news articles">
260 <h2 class="visually-hidden">Latest News</h2>
261
262 <!-- Individual News Article -->
263 <article>
264 <header>
265 <h2>Revolutionary Web Accessibility Standards Approved</h2>
266 <div class="article-meta">
267 <time datetime="2024-01-15T10:00:00Z">January 15, 2024 at 10:00 AM</time>
268 <address>By <a href="mailto:[email protected]" rel="author">Sarah Johnson</a>, Technology Reporter</address>
269 </div>
270 </header>
271
272 <p>The World Wide Web Consortium (W3C) has officially approved groundbreaking new web accessibility standards that promise to make the internet more inclusive for users with disabilities. These comprehensive guidelines represent the most significant update to web accessibility in over a decade.</p>
273
274 <section>
275 <h3>Key Improvements Include:</h3>
276 <ul>
277 <li>Enhanced semantic elements for better screen reader compatibility</li>
278 <li>Improved ARIA attribute specifications for complex interfaces</li>
279 <li>New guidelines for cognitive accessibility and learning disabilities</li>
280 <li>Mobile-first accessibility requirements</li>
281 <li>Advanced color contrast and visual design standards</li>
282 </ul>
283 </section>
284
285 <p>The new standards are expected to be adopted by major browsers within the next six months, with full implementation anticipated by early 2025.</p>
286
287 <figure>
288 <blockquote cite="https://w3c.org/accessibility/2024">
289 "These standards represent a fundamental shift toward universal design principles. Every person, regardless of ability, should have equal access to information and functionality on the web."
290 </blockquote>
291 <figcaption>— Dr. Michael Chen, W3C Accessibility Working Group Chair</figcaption>
292 </figure>
293
294 <footer>
295 <p>Tags: <a href="#web-standards">#WebStandards</a> <a href="#accessibility">#Accessibility</a> <a href="#w3c">#W3C</a> <a href="#inclusion">#DigitalInclusion</a></p>
296 </footer>
297 </article>
298
299 <!-- Second News Article -->
300 <article>
301 <header>
302 <h2>Major Tech Companies Commit to Accessibility-First Development</h2>
303 <div class="article-meta">
304 <time datetime="2024-01-14T15:30:00Z">January 14, 2024 at 3:30 PM</time>
305 <address>By <a href="mailto:[email protected]" rel="author">Alex Rivera</a>, Business Reporter</address>
306 </div>
307 </header>
308
309 <p>Following the announcement of new accessibility standards, five major technology companies have pledged to adopt accessibility-first development practices across all their web properties and applications.</p>
310
311 <section>
312 <h3>Industry Response</h3>
313 <p>The commitment includes mandatory accessibility training for all developers, automated accessibility testing in CI/CD pipelines, and regular audits by third-party accessibility experts.</p>
314 </section>
315
316 <footer>
317 <p>Tags: <a href="#tech-industry">#TechIndustry</a> <a href="#corporate-responsibility">#CorporateResponsibility</a> <a href="#accessibility">#Accessibility</a></footer>
318 </article>
319 </section>
320
321 <!-- Sidebar with Related Content -->
322 <aside aria-label="Related content and navigation">
323 <section>
324 <h3>🔥 Trending Topics</h3>
325 <ul>
326 <li><a href="#web-accessibility">Web Accessibility Guidelines</a></li>
327 <li><a href="#semantic-html">Semantic HTML Best Practices</a></li>
328 <li><a href="#aria-patterns">ARIA Design Patterns</a></li>
329 <li><a href="#inclusive-design">Inclusive Design Principles</a></li>
330 <li><a href="#screen-readers">Screen Reader Technology</a></li>
331 </ul>
332 </section>
333
334 <section>
335 <h3>📚 Learning Resources</h3>
336 <ul>
337 <li><a href="#wcag-guidelines">WCAG 2.2 Guidelines</a></li>
338 <li><a href="#mdn-accessibility">MDN Accessibility Docs</a></li>
339 <li><a href="#webaim-resources">WebAIM Training Materials</a></li>
340 <li><a href="#a11y-project">The A11Y Project</a></li>
341 </ul>
342 </section>
343
344 <section>
345 <h3>🛠️ Testing Tools</h3>
346 <ul>
347 <li><a href="#axe-devtools">axe DevTools</a></li>
348 <li><a href="#lighthouse">Lighthouse Accessibility Audit</a></li>
349 <li><a href="#wave-tool">WAVE Web Accessibility Evaluator</a></li>
350 <li><a href="#color-contrast">Color Contrast Analyzers</a></li>
351 </ul>
352 </section>
353 </aside>
354 </main>
355
356 <!-- Site Footer -->
357 <footer>
358 <p>© 2024 Semantic News. Built with semantic HTML5 elements for maximum accessibility and SEO performance.</p>
359 <nav aria-label="Footer navigation">
360 <a href="#about">About Us</a> |
361 <a href="#contact">Contact</a> |
362 <a href="#privacy">Privacy Policy</a> |
363 <a href="#accessibility">Accessibility Statement</a>
364 </nav>
365 </footer>
366</body>
367</html>This example demonstrates proper semantic structure with clear document landmarks (header, nav, main, aside, footer), meaningful content sectioning (article, section), and accessibility features like ARIA labels, proper heading hierarchy, and focus management.
Outstanding work with semantic HTML5 elements! You now understand how to structure documents with meaningful markup that benefits all users. Next, we'll dive deep into ARIA labels and accessibility attributes to enhance your markup even further for users with disabilities.
Key Skills Mastered:
Coming Next: ARIA Labels & Accessibility - Learn how to enhance your semantic HTML with ARIA attributes for even better accessibility support.
Your progress is saved in this browser, on this device only.