Master HTML5 semantic elements to create meaningful, accessible, and SEO-friendly web structures
Semantic HTML elements add meaning to your content beyond just its appearance. They tell browsers, search engines, and assistive technologies what different parts of your page represent and how they relate to each other.
Think of semantic elements as the architectural blueprint of your webpage. Just as a building has clearly defined areas (lobby, offices, conference rooms), your webpage should have clearly defined sections (header, navigation, main content, sidebar, footer) that both humans and machines can understand.
HTML5 provides semantic elements that define the main structural areas of a webpage:
<header> - Contains introductory content or navigation aids
<nav> - Navigation links to other pages or sections
<main> - The primary content of the page
<footer> - Footer content for the page or section
These elements replace generic <div> containers with meaningful structure.
These elements help organize and group related content within your page:
<section> - A distinct section of content
<article> - Self-contained, independent content
<aside> - Content tangentially related to main content
<figure> and <figcaption> - Media with captions
Example:
<article>
<header><h2>Article Title</h2></header>
<section><p>Article content...</p></section>
<aside><p>Related sidebar info</p></aside>
<footer><p>Article metadata</p></footer>
</article>
Using semantic elements provides multiple advantages:
Accessibility Benefits:
SEO Advantages:
Maintenance Benefits:
Future-Proofing:
Example of Poor vs. Good Structure:
Poor:
<div class="header">...</div>
<div class="content">...</div>
Good:
<header>...</header>
<main>...</main>
The semantic version clearly communicates purpose and structure.
Build a comprehensive news website demonstrating all HTML5 semantic elements in a real-world context.
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>TechNews Today - Breaking Technology News and Analysis</title>
7 <meta name="description" content="Stay updated with the latest technology news, in-depth analysis, and expert opinions from the world of tech innovation.">
8 <style>
9 * {
10 margin: 0;
11 padding: 0;
12 box-sizing: border-box;
13 }
14
15 body {
16 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
17 line-height: 1.6;
18 color: #333;
19 background: #f8f9fa;
20 }
21
22 .container {
23 max-width: 1200px;
24 margin: 0 auto;
25 padding: 0 20px;
26 }
27
28 /* Skip to main content link for accessibility */
29 .skip-link {
30 position: absolute;
31 top: -40px;
32 left: 6px;
33 background: #000;
34 color: #fff;
35 padding: 8px;
36 text-decoration: none;
37 border-radius: 4px;
38 transition: top 0.3s;
39 }
40
41 .skip-link:focus {
42 top: 6px;
43 }
44
45 /* Header Styles */
46 header {
47 background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
48 color: white;
49 box-shadow: 0 2px 10px rgba(0,0,0,0.1);
50 position: sticky;
51 top: 0;
52 z-index: 1000;
53 }
54
55 .header-top {
56 border-bottom: 1px solid rgba(255,255,255,0.1);
57 padding: 0.5rem 0;
58 font-size: 0.85rem;
59 }
60
61 .header-top-content {
62 display: flex;
63 justify-content: space-between;
64 align-items: center;
65 }
66
67 .breaking-news {
68 display: flex;
69 align-items: center;
70 gap: 0.5rem;
71 }
72
73 .breaking-badge {
74 background: #e74c3c;
75 padding: 0.2rem 0.5rem;
76 border-radius: 3px;
77 font-size: 0.7rem;
78 font-weight: bold;
79 animation: pulse 2s infinite;
80 }
81
82 @keyframes pulse {
83 0%, 100% { opacity: 1; }
84 50% { opacity: 0.7; }
85 }
86
87 .social-links {
88 display: flex;
89 gap: 1rem;
90 }
91
92 .social-links a {
93 color: rgba(255,255,255,0.8);
94 text-decoration: none;
95 transition: color 0.3s;
96 }
97
98 .social-links a:hover {
99 color: white;
100 }
101
102 .header-main {
103 padding: 1rem 0;
104 }
105
106 .header-content {
107 display: grid;
108 grid-template-columns: auto 1fr auto;
109 gap: 2rem;
110 align-items: center;
111 }
112
113 .logo {
114 font-size: 2rem;
115 font-weight: bold;
116 color: white;
117 text-decoration: none;
118 display: flex;
119 align-items: center;
120 gap: 0.5rem;
121 }
122
123 .search-form {
124 max-width: 400px;
125 display: flex;
126 background: rgba(255,255,255,0.1);
127 border-radius: 25px;
128 overflow: hidden;
129 backdrop-filter: blur(10px);
130 }
131
132 .search-input {
133 flex: 1;
134 padding: 0.7rem 1rem;
135 border: none;
136 background: transparent;
137 color: white;
138 placeholder-color: rgba(255,255,255,0.7);
139 }
140
141 .search-input::placeholder {
142 color: rgba(255,255,255,0.7);
143 }
144
145 .search-button {
146 background: rgba(255,255,255,0.2);
147 border: none;
148 color: white;
149 padding: 0.7rem 1rem;
150 cursor: pointer;
151 transition: background 0.3s;
152 }
153
154 .search-button:hover {
155 background: rgba(255,255,255,0.3);
156 }
157
158 .header-actions {
159 display: flex;
160 gap: 1rem;
161 align-items: center;
162 }
163
164 .btn {
165 padding: 0.5rem 1rem;
166 border: 2px solid white;
167 background: transparent;
168 color: white;
169 text-decoration: none;
170 border-radius: 5px;
171 font-size: 0.9rem;
172 transition: all 0.3s;
173 }
174
175 .btn:hover {
176 background: white;
177 color: #1e3c72;
178 }
179
180 /* Navigation Styles */
181 nav {
182 background: rgba(0,0,0,0.1);
183 backdrop-filter: blur(10px);
184 }
185
186 .nav-menu {
187 display: flex;
188 list-style: none;
189 gap: 0;
190 overflow-x: auto;
191 padding: 0;
192 }
193
194 .nav-menu li {
195 white-space: nowrap;
196 }
197
198 .nav-menu a {
199 display: block;
200 color: rgba(255,255,255,0.9);
201 text-decoration: none;
202 padding: 1rem 1.5rem;
203 transition: all 0.3s;
204 position: relative;
205 }
206
207 .nav-menu a:hover,
208 .nav-menu a:focus {
209 background: rgba(255,255,255,0.1);
210 color: white;
211 }
212
213 .nav-menu a.active {
214 background: rgba(255,255,255,0.2);
215 color: white;
216 font-weight: 600;
217 }
218
219 .nav-menu a.active::after {
220 content: '';
221 position: absolute;
222 bottom: 0;
223 left: 0;
224 right: 0;
225 height: 3px;
226 background: white;
227 }
228
229 /* Main Layout */
230 .main-layout {
231 display: grid;
232 grid-template-columns: 1fr 300px;
233 gap: 2rem;
234 margin: 2rem 0;
235 }
236
237 /* Main Content */
238 main {
239 background: white;
240 border-radius: 12px;
241 overflow: hidden;
242 box-shadow: 0 4px 20px rgba(0,0,0,0.08);
243 }
244
245 /* Hero Article */
246 .hero-article {
247 position: relative;
248 height: 400px;
249 background: linear-gradient(
250 rgba(0,0,0,0.4),
251 rgba(0,0,0,0.6)
252 ), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400"><defs><linearGradient id="bg" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="%23667eea"/><stop offset="100%" stop-color="%23764ba2"/></linearGradient></defs><rect fill="url(%23bg)" width="800" height="400"/><text x="400" y="200" text-anchor="middle" fill="white" font-size="24">Breaking: AI Revolution in Tech</text></svg>');
253 background-size: cover;
254 background-position: center;
255 color: white;
256 display: flex;
257 align-items: end;
258 }
259
260 .hero-content {
261 padding: 2rem;
262 width: 100%;
263 }
264
265 .article-category {
266 background: #e74c3c;
267 color: white;
268 padding: 0.3rem 0.8rem;
269 border-radius: 15px;
270 font-size: 0.8rem;
271 font-weight: 600;
272 text-transform: uppercase;
273 display: inline-block;
274 margin-bottom: 1rem;
275 }
276
277 .hero-article h1 {
278 font-size: 2.2rem;
279 margin-bottom: 0.5rem;
280 text-shadow: 0 2px 4px rgba(0,0,0,0.3);
281 }
282
283 .article-meta {
284 display: flex;
285 gap: 1rem;
286 font-size: 0.9rem;
287 opacity: 0.9;
288 align-items: center;
289 }
290
291 .article-meta time {
292 display: flex;
293 align-items: center;
294 gap: 0.3rem;
295 }
296
297 .article-meta .author {
298 display: flex;
299 align-items: center;
300 gap: 0.3rem;
301 }
302
303 /* Article Grid */
304 .articles-grid {
305 padding: 2rem;
306 }
307
308 .section-title {
309 font-size: 1.5rem;
310 color: #2c3e50;
311 margin-bottom: 1.5rem;
312 padding-bottom: 0.5rem;
313 border-bottom: 2px solid #ecf0f1;
314 }
315
316 .articles-list {
317 display: grid;
318 gap: 2rem;
319 }
320
321 article {
322 border-bottom: 1px solid #ecf0f1;
323 padding-bottom: 1.5rem;
324 }
325
326 article:last-child {
327 border-bottom: none;
328 padding-bottom: 0;
329 }
330
331 article header {
332 margin-bottom: 1rem;
333 }
334
335 article h2 {
336 font-size: 1.3rem;
337 color: #2c3e50;
338 margin-bottom: 0.5rem;
339 line-height: 1.4;
340 }
341
342 article h2 a {
343 color: inherit;
344 text-decoration: none;
345 transition: color 0.3s;
346 }
347
348 article h2 a:hover {
349 color: #3498db;
350 }
351
352 .article-summary {
353 color: #666;
354 margin-bottom: 0.5rem;
355 }
356
357 .read-more {
358 color: #3498db;
359 text-decoration: none;
360 font-weight: 600;
361 font-size: 0.9rem;
362 }
363
364 .read-more:hover {
365 text-decoration: underline;
366 }
367
368 /* Sidebar */
369 aside {
370 display: flex;
371 flex-direction: column;
372 gap: 2rem;
373 }
374
375 .widget {
376 background: white;
377 border-radius: 12px;
378 padding: 1.5rem;
379 box-shadow: 0 4px 20px rgba(0,0,0,0.08);
380 }
381
382 .widget h3 {
383 font-size: 1.2rem;
384 color: #2c3e50;
385 margin-bottom: 1rem;
386 padding-bottom: 0.5rem;
387 border-bottom: 2px solid #ecf0f1;
388 }
389
390 .trending-list {
391 list-style: none;
392 }
393
394 .trending-item {
395 display: flex;
396 align-items: start;
397 gap: 1rem;
398 padding: 0.8rem 0;
399 border-bottom: 1px solid #f8f9fa;
400 }
401
402 .trending-item:last-child {
403 border-bottom: none;
404 }
405
406 .trending-number {
407 background: linear-gradient(135deg, #3498db, #2980b9);
408 color: white;
409 width: 1.8rem;
410 height: 1.8rem;
411 border-radius: 50%;
412 display: flex;
413 align-items: center;
414 justify-content: center;
415 font-size: 0.8rem;
416 font-weight: bold;
417 flex-shrink: 0;
418 }
419
420 .trending-title {
421 font-size: 0.9rem;
422 line-height: 1.4;
423 }
424
425 .trending-title a {
426 color: #2c3e50;
427 text-decoration: none;
428 }
429
430 .trending-title a:hover {
431 color: #3498db;
432 }
433
434 /* Newsletter Widget */
435 .newsletter-form {
436 display: flex;
437 flex-direction: column;
438 gap: 1rem;
439 }
440
441 .newsletter-input {
442 padding: 0.8rem;
443 border: 2px solid #ecf0f1;
444 border-radius: 6px;
445 font-size: 0.9rem;
446 }
447
448 .newsletter-input:focus {
449 outline: none;
450 border-color: #3498db;
451 }
452
453 .newsletter-btn {
454 background: linear-gradient(135deg, #27ae60, #2ecc71);
455 color: white;
456 border: none;
457 padding: 0.8rem;
458 border-radius: 6px;
459 cursor: pointer;
460 font-weight: 600;
461 transition: transform 0.3s;
462 }
463
464 .newsletter-btn:hover {
465 transform: translateY(-1px);
466 }
467
468 /* Footer */
469 footer {
470 background: #2c3e50;
471 color: white;
472 margin-top: 3rem;
473 }
474
475 .footer-content {
476 padding: 3rem 0 1rem;
477 }
478
479 .footer-grid {
480 display: grid;
481 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
482 gap: 2rem;
483 margin-bottom: 2rem;
484 }
485
486 .footer-section h4 {
487 margin-bottom: 1rem;
488 color: #ecf0f1;
489 }
490
491 .footer-links {
492 list-style: none;
493 }
494
495 .footer-links li {
496 margin-bottom: 0.5rem;
497 }
498
499 .footer-links a {
500 color: #bdc3c7;
501 text-decoration: none;
502 transition: color 0.3s;
503 }
504
505 .footer-links a:hover {
506 color: white;
507 }
508
509 .footer-bottom {
510 border-top: 1px solid #34495e;
511 padding: 1.5rem 0;
512 text-align: center;
513 color: #bdc3c7;
514 }
515
516 /* Breadcrumbs */
517 .breadcrumbs {
518 background: #ecf0f1;
519 padding: 0.8rem 0;
520 font-size: 0.9rem;
521 }
522
523 .breadcrumb-list {
524 display: flex;
525 list-style: none;
526 gap: 0.5rem;
527 align-items: center;
528 }
529
530 .breadcrumb-list li:not(:last-child)::after {
531 content: "→";
532 margin-left: 0.5rem;
533 color: #7f8c8d;
534 }
535
536 .breadcrumb-list a {
537 color: #3498db;
538 text-decoration: none;
539 }
540
541 .breadcrumb-list a:hover {
542 text-decoration: underline;
543 }
544
545 .breadcrumb-current {
546 color: #7f8c8d;
547 }
548
549 /* Responsive Design */
550 @media (max-width: 768px) {
551 .header-content {
552 grid-template-columns: 1fr;
553 gap: 1rem;
554 text-align: center;
555 }
556
557 .main-layout {
558 grid-template-columns: 1fr;
559 }
560
561 .hero-article {
562 height: 300px;
563 }
564
565 .hero-article h1 {
566 font-size: 1.6rem;
567 }
568
569 .articles-grid {
570 padding: 1rem;
571 }
572
573 .nav-menu {
574 justify-content: center;
575 }
576
577 .search-form {
578 max-width: none;
579 }
580 }
581
582 @media (max-width: 480px) {
583 .hero-content {
584 padding: 1rem;
585 }
586
587 .article-meta {
588 flex-direction: column;
589 gap: 0.5rem;
590 align-items: start;
591 }
592 }
593 </style>
594</head>
595<body>
596 <!-- Skip to main content for accessibility -->
597 <a href="#main-content" class="skip-link">Skip to main content</a>
598
599 <!-- Page Header -->
600 <header>
601 <!-- Top header with breaking news and social links -->
602 <div class="header-top">
603 <div class="container">
604 <div class="header-top-content">
605 <div class="breaking-news">
606 <span class="breaking-badge">BREAKING</span>
607 <span>New AI breakthrough changes everything in tech industry</span>
608 </div>
609
610 <div class="social-links">
611 <a href="/twitter" aria-label="Follow us on Twitter">🐦 Twitter</a>
612 <a href="/facebook" aria-label="Follow us on Facebook">📘 Facebook</a>
613 <a href="/linkedin" aria-label="Follow us on LinkedIn">💼 LinkedIn</a>
614 </div>
615 </div>
616 </div>
617 </div>
618
619 <!-- Main header with logo, search, and actions -->
620 <div class="header-main">
621 <div class="container">
622 <div class="header-content">
623 <a href="/" class="logo">
624 📰 TechNews Today
625 </a>
626
627 <form class="search-form" role="search">
628 <input type="search"
629 class="search-input"
630 placeholder="Search news, topics, companies..."
631 aria-label="Search articles">
632 <button type="submit" class="search-button" aria-label="Search">🔍</button>
633 </form>
634
635 <div class="header-actions">
636 <a href="/newsletter" class="btn">Newsletter</a>
637 <a href="/subscribe" class="btn">Subscribe</a>
638 </div>
639 </div>
640 </div>
641 </div>
642
643 <!-- Main navigation -->
644 <nav aria-label="Main navigation">
645 <div class="container">
646 <ul class="nav-menu">
647 <li><a href="/" class="active">Home</a></li>
648 <li><a href="/breaking">Breaking News</a></li>
649 <li><a href="/ai">Artificial Intelligence</a></li>
650 <li><a href="/startups">Startups</a></li>
651 <li><a href="/cybersecurity">Cybersecurity</a></li>
652 <li><a href="/mobile">Mobile</a></li>
653 <li><a href="/cloud">Cloud Computing</a></li>
654 <li><a href="/reviews">Reviews</a></li>
655 <li><a href="/opinion">Opinion</a></li>
656 </ul>
657 </div>
658 </nav>
659 </header>
660
661 <!-- Breadcrumb Navigation -->
662 <nav aria-label="Breadcrumb navigation" class="breadcrumbs">
663 <div class="container">
664 <ul class="breadcrumb-list">
665 <li><a href="/">Home</a></li>
666 <li><a href="/breaking">Breaking News</a></li>
667 <li class="breadcrumb-current">AI Revolution in Tech</li>
668 </ul>
669 </div>
670 </nav>
671
672 <div class="container">
673 <div class="main-layout">
674 <!-- Main Content Area -->
675 <main id="main-content">
676 <!-- Hero Article -->
677 <article class="hero-article">
678 <div class="hero-content">
679 <header>
680 <div class="article-category">Breaking News</div>
681 <h1>Revolutionary AI Breakthrough Changes Everything: The Future is Here</h1>
682 <div class="article-meta">
683 <div class="author">
684 👤 <span>Sarah Chen</span>
685 </div>
686 <time datetime="2024-03-15T10:30:00Z">
687 🕒 <span>2 hours ago</span>
688 </time>
689 <div class="read-time">
690 ⏱️ <span>5 min read</span>
691 </div>
692 </div>
693 </header>
694 </div>
695 </article>
696
697 <!-- Latest Articles Section -->
698 <section class="articles-grid">
699 <header>
700 <h2 class="section-title">Latest Technology News</h2>
701 </header>
702
703 <div class="articles-list">
704 <article>
705 <header>
706 <div class="article-category">Startups</div>
707 <h2><a href="/article/startup-funding">Tech Startup Secures $50M Series A Funding</a></h2>
708 <div class="article-meta">
709 <div class="author">👤 Mike Rodriguez</div>
710 <time datetime="2024-03-15T08:15:00Z">🕒 4 hours ago</time>
711 </div>
712 </header>
713 <p class="article-summary">
714 Innovative startup revolutionizing cloud infrastructure receives major funding round
715 led by top-tier venture capital firms, marking a significant milestone...
716 </p>
717 <a href="/article/startup-funding" class="read-more">Continue Reading →</a>
718 </article>
719
720 <article>
721 <header>
722 <div class="article-category">Cybersecurity</div>
723 <h2><a href="/article/security-breach">Major Security Vulnerability Discovered in Popular Framework</a></h2>
724 <div class="article-meta">
725 <div class="author">👤 Lisa Zhang</div>
726 <time datetime="2024-03-15T06:45:00Z">🕒 6 hours ago</time>
727 </div>
728 </header>
729 <p class="article-summary">
730 Security researchers have identified a critical vulnerability affecting millions of websites.
731 Companies are urged to update their systems immediately...
732 </p>
733 <a href="/article/security-breach" class="read-more">Continue Reading →</a>
734 </article>
735
736 <article>
737 <header>
738 <div class="article-category">Mobile</div>
739 <h2><a href="/article/mobile-trends">Mobile App Development Trends Shaping 2024</a></h2>
740 <div class="article-meta">
741 <div class="author">👤 David Kim</div>
742 <time datetime="2024-03-15T05:20:00Z">🕒 8 hours ago</time>
743 </div>
744 </header>
745 <p class="article-summary">
746 From cross-platform frameworks to AI integration, discover the key trends that will
747 define mobile app development this year...
748 </p>
749 <a href="/article/mobile-trends" class="read-more">Continue Reading →</a>
750 </article>
751
752 <article>
753 <header>
754 <div class="article-category">Cloud Computing</div>
755 <h2><a href="/article/cloud-adoption">Enterprise Cloud Adoption Reaches All-Time High</a></h2>
756 <div class="article-meta">
757 <div class="author">👤 Emma Watson</div>
758 <time datetime="2024-03-14T16:30:00Z">🕒 Yesterday</time>
759 </div>
760 </header>
761 <p class="article-summary">
762 New research shows that 95% of enterprises have adopted cloud solutions, with hybrid
763 and multi-cloud strategies becoming the dominant approach...
764 </p>
765 <a href="/article/cloud-adoption" class="read-more">Continue Reading →</a>
766 </article>
767 </div>
768 </section>
769
770 <!-- Featured Analysis Section -->
771 <section class="articles-grid">
772 <header>
773 <h2 class="section-title">In-Depth Analysis</h2>
774 </header>
775
776 <article>
777 <header>
778 <div class="article-category">Analysis</div>
779 <h2><a href="/analysis/tech-market">The Tech Market Outlook: Predictions for the Next Decade</a></h2>
780 <div class="article-meta">
781 <div class="author">👤 Sarah Chen</div>
782 <time datetime="2024-03-14T10:00:00Z">🕒 2 days ago</time>
783 </div>
784 </header>
785 <p class="article-summary">
786 A comprehensive analysis of emerging technologies, market trends, and their potential
787 impact on business and society over the next ten years...
788 </p>
789 <a href="/analysis/tech-market" class="read-more">Continue Reading →</a>
790 </article>
791 </section>
792 </main>
793
794 <!-- Sidebar -->
795 <aside aria-label="Sidebar content">
796 <!-- Trending Stories Widget -->
797 <section class="widget">
798 <header>
799 <h3>🔥 Trending Stories</h3>
800 </header>
801 <ol class="trending-list">
802 <li class="trending-item">
803 <div class="trending-number">1</div>
804 <div class="trending-title">
805 <a href="/trending/ai-breakthrough">AI Breakthrough Revolutionizes Healthcare</a>
806 </div>
807 </li>
808 <li class="trending-item">
809 <div class="trending-number">2</div>
810 <div class="trending-title">
811 <a href="/trending/startup-unicorn">Startup Becomes Newest Unicorn</a>
812 </div>
813 </li>
814 <li class="trending-item">
815 <div class="trending-number">3</div>
816 <div class="trending-title">
817 <a href="/trending/tech-merger">Major Tech Merger Announced</a>
818 </div>
819 </li>
820 <li class="trending-item">
821 <div class="trending-number">4</div>
822 <div class="trending-title">
823 <a href="/trending/privacy-laws">New Privacy Laws Impact Tech Giants</a>
824 </div>
825 </li>
826 <li class="trending-item">
827 <div class="trending-number">5</div>
828 <div class="trending-title">
829 <a href="/trending/quantum-computing">Quantum Computing Milestone Achieved</a>
830 </div>
831 </li>
832 </ol>
833 </section>
834
835 <!-- Newsletter Signup Widget -->
836 <section class="widget">
837 <header>
838 <h3>📧 Stay Updated</h3>
839 </header>
840 <p style="margin-bottom: 1rem; font-size: 0.9rem; color: #666;">
841 Get the latest tech news delivered to your inbox every morning.
842 </p>
843 <form class="newsletter-form">
844 <input type="email"
845 class="newsletter-input"
846 placeholder="Enter your email address"
847 required>
848 <button type="submit" class="newsletter-btn">Subscribe Now</button>
849 </form>
850 </section>
851
852 <!-- Market Data Widget -->
853 <section class="widget">
854 <header>
855 <h3>📈 Tech Stocks</h3>
856 </header>
857 <div style="font-size: 0.9rem; color: #666;">
858 <div style="display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid #f0f0f0;">
859 <span>AAPL</span>
860 <span style="color: #27ae60;">↗ $175.21</span>
861 </div>
862 <div style="display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid #f0f0f0;">
863 <span>GOOGL</span>
864 <span style="color: #27ae60;">↗ $2,847.63</span>
865 </div>
866 <div style="display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid #f0f0f0;">
867 <span>MSFT</span>
868 <span style="color: #e74c3c;">↘ $378.94</span>
869 </div>
870 <div style="display: flex; justify-content: space-between; padding: 0.5rem 0;">
871 <span>TSLA</span>
872 <span style="color: #27ae60;">↗ $695.20</span>
873 </div>
874 </div>
875 </section>
876
877 <!-- Advertisement Space -->
878 <section class="widget">
879 <header>
880 <h3>📢 Sponsored</h3>
881 </header>
882 <div style="text-align: center; padding: 2rem 1rem; background: #f8f9fa; border-radius: 8px; color: #666;">
883 <p>Advertisement Space</p>
884 <small>Partner Content</small>
885 </div>
886 </section>
887 </aside>
888 </div>
889 </div>
890
891 <!-- Page Footer -->
892 <footer>
893 <div class="container">
894 <div class="footer-content">
895 <div class="footer-grid">
896 <!-- Company Info -->
897 <section class="footer-section">
898 <header>
899 <h4>TechNews Today</h4>
900 </header>
901 <p style="color: #bdc3c7; margin-bottom: 1rem; font-size: 0.9rem;">
902 Your trusted source for technology news, analysis, and insights.
903 Covering the latest in AI, startups, cybersecurity, and innovation.
904 </p>
905 <div style="display: flex; gap: 1rem;">
906 <a href="/twitter" style="color: #bdc3c7;">🐦</a>
907 <a href="/facebook" style="color: #bdc3c7;">📘</a>
908 <a href="/linkedin" style="color: #bdc3c7;">💼</a>
909 <a href="/youtube" style="color: #bdc3c7;">📹</a>
910 </div>
911 </section>
912
913 <!-- News Categories -->
914 <section class="footer-section">
915 <header>
916 <h4>News Categories</h4>
917 </header>
918 <ul class="footer-links">
919 <li><a href="/ai">Artificial Intelligence</a></li>
920 <li><a href="/startups">Startups</a></li>
921 <li><a href="/cybersecurity">Cybersecurity</a></li>
922 <li><a href="/mobile">Mobile Technology</a></li>
923 <li><a href="/cloud">Cloud Computing</a></li>
924 <li><a href="/reviews">Product Reviews</a></li>
925 </ul>
926 </section>
927
928 <!-- Company Links -->
929 <section class="footer-section">
930 <header>
931 <h4>Company</h4>
932 </header>
933 <ul class="footer-links">
934 <li><a href="/about">About Us</a></li>
935 <li><a href="/team">Our Team</a></li>
936 <li><a href="/careers">Careers</a></li>
937 <li><a href="/contact">Contact</a></li>
938 <li><a href="/advertise">Advertise</a></li>
939 <li><a href="/press">Press Kit</a></li>
940 </ul>
941 </section>
942
943 <!-- Support Links -->
944 <section class="footer-section">
945 <header>
946 <h4>Support</h4>
947 </header>
948 <ul class="footer-links">
949 <li><a href="/help">Help Center</a></li>
950 <li><a href="/privacy">Privacy Policy</a></li>
951 <li><a href="/terms">Terms of Service</a></li>
952 <li><a href="/cookies">Cookie Policy</a></li>
953 <li><a href="/accessibility">Accessibility</a></li>
954 <li><a href="/sitemap">Sitemap</a></li>
955 </ul>
956 </section>
957 </div>
958 </div>
959
960 <div class="footer-bottom">
961 <div class="container">
962 <p>© 2024 TechNews Today. All rights reserved. |
963 Designed with ❤️ for tech enthusiasts worldwide.</p>
964 </div>
965 </div>
966 </div>
967 </footer>
968</body>
969</html>This comprehensive news website demonstrates all HTML5 semantic elements in their proper context. The structure includes header with navigation, main content area with articles and sections, complementary aside content, and footer information. Each semantic element serves its intended purpose: header for site identity and navigation, main for primary content, article for individual news stories, section for thematic groupings, aside for supplementary content, and footer for site information. This structure is accessible, SEO-friendly, and meaningful to both users and machines.
Excellent work mastering HTML5 semantic elements! You now understand how to create meaningful, accessible web structures that benefit both users and search engines. Next, we'll explore div and span containers to learn when and how to use generic elements for styling and JavaScript purposes.
Your progress is saved in this browser, on this device only.