Master generic HTML containers for styling, layout, and JavaScript without compromising semantic meaning
While semantic HTML elements are preferred for meaningful content structure, sometimes you need generic containers purely for styling, layout, or JavaScript functionality. The <div> and <span> elements serve this purpose without adding semantic meaning to your content.
Think of these elements as the "utility boxes" of HTML - they're neutral containers that help you organize and style your content without interfering with its meaning. However, they should be used thoughtfully and only when semantic elements don't fit the purpose.
The <div> element is a generic block-level container with no semantic meaning:
Characteristics:
When to Use Div:
When NOT to Use Div:
Example:
<div class="hero-section">
<div class="container">
<h1>Welcome</h1>
<p>Content here</p>
</div>
</div>
The outer div creates a section wrapper, inner div provides layout container - neither adds semantic meaning.
The <span> element is a generic inline container with no semantic meaning:
Characteristics:
When to Use Span:
When NOT to Use Span:
Example:
<p>The price is <span class="highlight">$29.99</span> today only!</p>
The span allows styling the price without adding semantic emphasis (unlike <strong> or <em>).
Follow these guidelines for using div and span effectively:
Semantic First Approach:
Naming and Organization:
Accessibility Considerations:
Performance Tips:
Good Example:
<article>
<header>
<h1>Article Title</h1>
</header>
<div class="article-content">
<p>Content with <span class="keyword">highlighted terms</span>.</p>
</div>
</article>
Bad Example:
<div class="article">
<div class="header">
<div class="title">Article Title</div>
</div>
<div class="content">
<div class="paragraph">Content here</div>
</div>
</div>
The semantic version is more meaningful and accessible.
Build a comprehensive dashboard showing proper use of div and span containers alongside semantic elements for layout, styling, and functionality.
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>CloudDash Analytics - Business Intelligence Dashboard</title>
7 <style>
8 * {
9 margin: 0;
10 padding: 0;
11 box-sizing: border-box;
12 }
13
14 body {
15 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
16 line-height: 1.6;
17 color: #333;
18 background: #f5f7fa;
19 }
20
21 /* Layout Containers */
22 .app-container {
23 display: grid;
24 grid-template-columns: 280px 1fr;
25 grid-template-rows: 60px 1fr;
26 grid-template-areas:
27 "sidebar header"
28 "sidebar main";
29 min-height: 100vh;
30 }
31
32 .content-wrapper {
33 grid-area: main;
34 padding: 2rem;
35 overflow-y: auto;
36 }
37
38 .dashboard-grid {
39 display: grid;
40 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
41 gap: 2rem;
42 margin-bottom: 2rem;
43 }
44
45 .two-column-grid {
46 display: grid;
47 grid-template-columns: 2fr 1fr;
48 gap: 2rem;
49 margin-bottom: 2rem;
50 }
51
52 /* Header Styles */
53 header {
54 grid-area: header;
55 background: white;
56 border-bottom: 1px solid #e2e8f0;
57 display: flex;
58 align-items: center;
59 justify-content: space-between;
60 padding: 0 2rem;
61 box-shadow: 0 1px 3px rgba(0,0,0,0.1);
62 z-index: 100;
63 }
64
65 .header-left {
66 display: flex;
67 align-items: center;
68 gap: 1rem;
69 }
70
71 .page-title {
72 font-size: 1.25rem;
73 font-weight: 600;
74 color: #1a202c;
75 }
76
77 .breadcrumb-divider {
78 color: #a0aec0;
79 font-weight: normal;
80 }
81
82 .header-actions {
83 display: flex;
84 align-items: center;
85 gap: 1rem;
86 }
87
88 .search-container {
89 position: relative;
90 }
91
92 .search-input {
93 padding: 0.5rem 1rem 0.5rem 2.5rem;
94 border: 1px solid #e2e8f0;
95 border-radius: 6px;
96 background: #f7fafc;
97 font-size: 0.875rem;
98 width: 250px;
99 transition: all 0.2s;
100 }
101
102 .search-input:focus {
103 outline: none;
104 border-color: #4299e1;
105 background: white;
106 box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
107 }
108
109 .search-icon {
110 position: absolute;
111 left: 0.75rem;
112 top: 50%;
113 transform: translateY(-50%);
114 color: #a0aec0;
115 pointer-events: none;
116 }
117
118 .notification-badge {
119 position: relative;
120 }
121
122 .notification-count {
123 position: absolute;
124 top: -8px;
125 right: -8px;
126 background: #f56565;
127 color: white;
128 border-radius: 50%;
129 width: 18px;
130 height: 18px;
131 display: flex;
132 align-items: center;
133 justify-content: center;
134 font-size: 0.7rem;
135 font-weight: bold;
136 }
137
138 .user-avatar {
139 width: 32px;
140 height: 32px;
141 border-radius: 50%;
142 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
143 display: flex;
144 align-items: center;
145 justify-content: center;
146 color: white;
147 font-weight: 600;
148 cursor: pointer;
149 }
150
151 /* Sidebar Styles */
152 .sidebar {
153 grid-area: sidebar;
154 background: #1a202c;
155 color: white;
156 padding: 1.5rem 0;
157 }
158
159 .logo-container {
160 padding: 0 1.5rem 2rem;
161 border-bottom: 1px solid #2d3748;
162 margin-bottom: 2rem;
163 }
164
165 .logo {
166 font-size: 1.5rem;
167 font-weight: bold;
168 color: white;
169 text-decoration: none;
170 }
171
172 .nav-section {
173 margin-bottom: 2rem;
174 }
175
176 .nav-section-title {
177 padding: 0 1.5rem;
178 font-size: 0.75rem;
179 font-weight: 600;
180 text-transform: uppercase;
181 color: #a0aec0;
182 margin-bottom: 1rem;
183 letter-spacing: 0.1em;
184 }
185
186 .nav-list {
187 list-style: none;
188 }
189
190 .nav-item {
191 margin-bottom: 0.25rem;
192 }
193
194 .nav-link {
195 display: flex;
196 align-items: center;
197 padding: 0.75rem 1.5rem;
198 color: #e2e8f0;
199 text-decoration: none;
200 transition: all 0.2s;
201 border-left: 3px solid transparent;
202 }
203
204 .nav-link:hover {
205 background: #2d3748;
206 color: white;
207 }
208
209 .nav-link.active {
210 background: #2d3748;
211 color: #4299e1;
212 border-left-color: #4299e1;
213 }
214
215 .nav-icon {
216 margin-right: 0.75rem;
217 font-size: 1.1rem;
218 }
219
220 /* Card Components */
221 .card {
222 background: white;
223 border-radius: 8px;
224 padding: 1.5rem;
225 box-shadow: 0 1px 3px rgba(0,0,0,0.1);
226 transition: transform 0.2s, box-shadow 0.2s;
227 }
228
229 .card:hover {
230 transform: translateY(-1px);
231 box-shadow: 0 4px 12px rgba(0,0,0,0.15);
232 }
233
234 .card-header {
235 display: flex;
236 align-items: center;
237 justify-content: space-between;
238 margin-bottom: 1rem;
239 }
240
241 .card-title {
242 font-size: 1rem;
243 font-weight: 600;
244 color: #2d3748;
245 }
246
247 .card-actions {
248 display: flex;
249 gap: 0.5rem;
250 }
251
252 .icon-button {
253 padding: 0.5rem;
254 border: none;
255 background: #f7fafc;
256 border-radius: 4px;
257 cursor: pointer;
258 transition: background 0.2s;
259 color: #718096;
260 }
261
262 .icon-button:hover {
263 background: #edf2f7;
264 color: #4a5568;
265 }
266
267 /* Metric Cards */
268 .metric-card {
269 text-align: center;
270 }
271
272 .metric-value {
273 font-size: 2.5rem;
274 font-weight: bold;
275 color: #2d3748;
276 margin-bottom: 0.5rem;
277 }
278
279 .metric-label {
280 font-size: 0.875rem;
281 color: #718096;
282 margin-bottom: 0.75rem;
283 }
284
285 .metric-trend {
286 display: inline-flex;
287 align-items: center;
288 gap: 0.25rem;
289 padding: 0.25rem 0.5rem;
290 border-radius: 12px;
291 font-size: 0.75rem;
292 font-weight: 600;
293 }
294
295 .trend-positive {
296 background: #f0fff4;
297 color: #38a169;
298 }
299
300 .trend-negative {
301 background: #fffaf0;
302 color: #dd6b20;
303 }
304
305 .trend-neutral {
306 background: #f7fafc;
307 color: #718096;
308 }
309
310 /* Progress Bars */
311 .progress-container {
312 margin: 1rem 0;
313 }
314
315 .progress-header {
316 display: flex;
317 justify-content: space-between;
318 align-items: center;
319 margin-bottom: 0.5rem;
320 }
321
322 .progress-label {
323 font-size: 0.875rem;
324 color: #4a5568;
325 font-weight: 500;
326 }
327
328 .progress-value {
329 font-size: 0.875rem;
330 color: #2d3748;
331 font-weight: 600;
332 }
333
334 .progress-bar {
335 width: 100%;
336 height: 8px;
337 background: #edf2f7;
338 border-radius: 4px;
339 overflow: hidden;
340 }
341
342 .progress-fill {
343 height: 100%;
344 border-radius: 4px;
345 transition: width 0.5s ease;
346 }
347
348 .progress-primary {
349 background: linear-gradient(90deg, #4299e1, #3182ce);
350 }
351
352 .progress-success {
353 background: linear-gradient(90deg, #48bb78, #38a169);
354 }
355
356 .progress-warning {
357 background: linear-gradient(90deg, #ed8936, #dd6b20);
358 }
359
360 /* Activity Feed */
361 .activity-list {
362 list-style: none;
363 }
364
365 .activity-item {
366 display: flex;
367 align-items: start;
368 gap: 1rem;
369 padding: 1rem 0;
370 border-bottom: 1px solid #f7fafc;
371 }
372
373 .activity-item:last-child {
374 border-bottom: none;
375 }
376
377 .activity-icon {
378 width: 32px;
379 height: 32px;
380 border-radius: 50%;
381 display: flex;
382 align-items: center;
383 justify-content: center;
384 font-size: 0.875rem;
385 color: white;
386 flex-shrink: 0;
387 }
388
389 .activity-icon.success {
390 background: #48bb78;
391 }
392
393 .activity-icon.warning {
394 background: #ed8936;
395 }
396
397 .activity-icon.info {
398 background: #4299e1;
399 }
400
401 .activity-content {
402 flex: 1;
403 }
404
405 .activity-title {
406 font-weight: 500;
407 color: #2d3748;
408 margin-bottom: 0.25rem;
409 }
410
411 .activity-description {
412 font-size: 0.875rem;
413 color: #718096;
414 margin-bottom: 0.25rem;
415 }
416
417 .activity-time {
418 font-size: 0.75rem;
419 color: #a0aec0;
420 }
421
422 /* Status Indicators */
423 .status-indicator {
424 display: inline-flex;
425 align-items: center;
426 gap: 0.5rem;
427 padding: 0.25rem 0.75rem;
428 border-radius: 12px;
429 font-size: 0.75rem;
430 font-weight: 600;
431 text-transform: uppercase;
432 }
433
434 .status-online {
435 background: #f0fff4;
436 color: #38a169;
437 }
438
439 .status-offline {
440 background: #fffaf0;
441 color: #dd6b20;
442 }
443
444 .status-warning {
445 background: #fffbeb;
446 color: #d69e2e;
447 }
448
449 .status-dot {
450 width: 6px;
451 height: 6px;
452 border-radius: 50%;
453 background: currentColor;
454 }
455
456 /* Table Styles */
457 .data-table {
458 width: 100%;
459 border-collapse: collapse;
460 }
461
462 .data-table th,
463 .data-table td {
464 padding: 0.75rem;
465 text-align: left;
466 border-bottom: 1px solid #f7fafc;
467 }
468
469 .data-table th {
470 font-weight: 600;
471 color: #4a5568;
472 font-size: 0.875rem;
473 background: #f7fafc;
474 }
475
476 .data-table td {
477 color: #2d3748;
478 }
479
480 .data-table tbody tr:hover {
481 background: #f7fafc;
482 }
483
484 /* Tags */
485 .tag {
486 display: inline-block;
487 padding: 0.25rem 0.5rem;
488 background: #edf2f7;
489 color: #4a5568;
490 border-radius: 4px;
491 font-size: 0.75rem;
492 font-weight: 500;
493 }
494
495 .tag.primary {
496 background: #ebf8ff;
497 color: #3182ce;
498 }
499
500 .tag.success {
501 background: #f0fff4;
502 color: #38a169;
503 }
504
505 .tag.warning {
506 background: #fffbeb;
507 color: #d69e2e;
508 }
509
510 /* Responsive Design */
511 @media (max-width: 768px) {
512 .app-container {
513 grid-template-columns: 1fr;
514 grid-template-rows: 60px auto 1fr;
515 grid-template-areas:
516 "header"
517 "sidebar"
518 "main";
519 }
520
521 .sidebar {
522 position: static;
523 padding: 1rem;
524 }
525
526 .two-column-grid {
527 grid-template-columns: 1fr;
528 }
529
530 .dashboard-grid {
531 grid-template-columns: 1fr;
532 }
533
534 .search-input {
535 width: 200px;
536 }
537 }
538
539 @media (max-width: 480px) {
540 .content-wrapper {
541 padding: 1rem;
542 }
543
544 .search-input {
545 width: 150px;
546 }
547
548 .header-actions {
549 gap: 0.5rem;
550 }
551 }
552 </style>
553</head>
554<body>
555 <!-- Main Application Container -->
556 <div class="app-container">
557
558 <!-- Application Header -->
559 <header>
560 <div class="header-left">
561 <h1 class="page-title">
562 Dashboard <span class="breadcrumb-divider">/</span> Analytics
563 </h1>
564 </div>
565
566 <div class="header-actions">
567 <!-- Search Container -->
568 <div class="search-container">
569 <span class="search-icon">🔍</span>
570 <input type="search"
571 class="search-input"
572 placeholder="Search projects, users, data..."
573 aria-label="Search dashboard">
574 </div>
575
576 <!-- Notifications -->
577 <div class="notification-badge">
578 <button class="icon-button" aria-label="Notifications">🔔</button>
579 <span class="notification-count">3</span>
580 </div>
581
582 <!-- User Menu -->
583 <div class="user-avatar" title="User Menu">
584 SC
585 </div>
586 </div>
587 </header>
588
589 <!-- Sidebar Navigation -->
590 <aside class="sidebar">
591 <!-- Logo Section -->
592 <div class="logo-container">
593 <a href="/" class="logo">☁️ CloudDash</a>
594 </div>
595
596 <!-- Main Navigation -->
597 <nav>
598 <div class="nav-section">
599 <div class="nav-section-title">Main</div>
600 <ul class="nav-list">
601 <li class="nav-item">
602 <a href="/dashboard" class="nav-link active">
603 <span class="nav-icon">📊</span>
604 Dashboard
605 </a>
606 </li>
607 <li class="nav-item">
608 <a href="/analytics" class="nav-link">
609 <span class="nav-icon">📈</span>
610 Analytics
611 </a>
612 </li>
613 <li class="nav-item">
614 <a href="/projects" class="nav-link">
615 <span class="nav-icon">📋</span>
616 Projects
617 </a>
618 </li>
619 <li class="nav-item">
620 <a href="/users" class="nav-link">
621 <span class="nav-icon">👥</span>
622 Users
623 </a>
624 </li>
625 </ul>
626 </div>
627
628 <div class="nav-section">
629 <div class="nav-section-title">Tools</div>
630 <ul class="nav-list">
631 <li class="nav-item">
632 <a href="/reports" class="nav-link">
633 <span class="nav-icon">📄</span>
634 Reports
635 </a>
636 </li>
637 <li class="nav-item">
638 <a href="/settings" class="nav-link">
639 <span class="nav-icon">⚙️</span>
640 Settings
641 </a>
642 </li>
643 <li class="nav-item">
644 <a href="/integrations" class="nav-link">
645 <span class="nav-icon">🔗</span>
646 Integrations
647 </a>
648 </li>
649 </ul>
650 </div>
651
652 <div class="nav-section">
653 <div class="nav-section-title">Support</div>
654 <ul class="nav-list">
655 <li class="nav-item">
656 <a href="/help" class="nav-link">
657 <span class="nav-icon">❓</span>
658 Help Center
659 </a>
660 </li>
661 <li class="nav-item">
662 <a href="/feedback" class="nav-link">
663 <span class="nav-icon">💬</span>
664 Feedback
665 </a>
666 </li>
667 </ul>
668 </div>
669 </nav>
670 </aside>
671
672 <!-- Main Content Area -->
673 <main class="content-wrapper">
674
675 <!-- Key Metrics Grid -->
676 <section class="dashboard-grid">
677 <!-- Total Users Card -->
678 <article class="card metric-card">
679 <div class="card-header">
680 <h2 class="card-title">Total Users</h2>
681 <div class="card-actions">
682 <button class="icon-button" aria-label="More options">⋯</button>
683 </div>
684 </div>
685 <div class="metric-value">24,567</div>
686 <div class="metric-label">Active Users</div>
687 <div class="metric-trend trend-positive">
688 <span>↗️</span>
689 <span>+12.5%</span>
690 </div>
691 </article>
692
693 <!-- Revenue Card -->
694 <article class="card metric-card">
695 <div class="card-header">
696 <h2 class="card-title">Monthly Revenue</h2>
697 <div class="card-actions">
698 <button class="icon-button" aria-label="More options">⋯</button>
699 </div>
700 </div>
701 <div class="metric-value">$89,432</div>
702 <div class="metric-label">This Month</div>
703 <div class="metric-trend trend-positive">
704 <span>📈</span>
705 <span>+8.2%</span>
706 </div>
707 </article>
708
709 <!-- Conversion Rate Card -->
710 <article class="card metric-card">
711 <div class="card-header">
712 <h2 class="card-title">Conversion Rate</h2>
713 <div class="card-actions">
714 <button class="icon-button" aria-label="More options">⋯</button>
715 </div>
716 </div>
717 <div class="metric-value">3.8%</div>
718 <div class="metric-label">Average Rate</div>
719 <div class="metric-trend trend-negative">
720 <span>📉</span>
721 <span>-2.1%</span>
722 </div>
723 </article>
724
725 <!-- Server Uptime Card -->
726 <article class="card metric-card">
727 <div class="card-header">
728 <h2 class="card-title">Server Uptime</h2>
729 <div class="card-actions">
730 <button class="icon-button" aria-label="More options">⋯</button>
731 </div>
732 </div>
733 <div class="metric-value">99.9%</div>
734 <div class="metric-label">Last 30 Days</div>
735 <div class="metric-trend trend-neutral">
736 <span>⚡</span>
737 <span>Stable</span>
738 </div>
739 </article>
740 </section>
741
742 <!-- Two Column Layout -->
743 <div class="two-column-grid">
744
745 <!-- Project Progress Section -->
746 <section class="card">
747 <div class="card-header">
748 <h2 class="card-title">Project Progress</h2>
749 <div class="card-actions">
750 <button class="icon-button" aria-label="View all projects">📊</button>
751 <button class="icon-button" aria-label="Add new project">➕</button>
752 </div>
753 </div>
754
755 <!-- Progress Items -->
756 <div class="progress-container">
757 <div class="progress-header">
758 <span class="progress-label">
759 Website Redesign
760 <span class="tag primary">High Priority</span>
761 </span>
762 <span class="progress-value">85%</span>
763 </div>
764 <div class="progress-bar">
765 <div class="progress-fill progress-primary" style="width: 85%"></div>
766 </div>
767 </div>
768
769 <div class="progress-container">
770 <div class="progress-header">
771 <span class="progress-label">
772 Mobile App Development
773 <span class="tag success">On Track</span>
774 </span>
775 <span class="progress-value">62%</span>
776 </div>
777 <div class="progress-bar">
778 <div class="progress-fill progress-success" style="width: 62%"></div>
779 </div>
780 </div>
781
782 <div class="progress-container">
783 <div class="progress-header">
784 <span class="progress-label">
785 API Integration
786 <span class="tag warning">Delayed</span>
787 </span>
788 <span class="progress-value">34%</span>
789 </div>
790 <div class="progress-bar">
791 <div class="progress-fill progress-warning" style="width: 34%"></div>
792 </div>
793 </div>
794
795 <div class="progress-container">
796 <div class="progress-header">
797 <span class="progress-label">
798 Security Audit
799 <span class="tag">Planning</span>
800 </span>
801 <span class="progress-value">15%</span>
802 </div>
803 <div class="progress-bar">
804 <div class="progress-fill progress-primary" style="width: 15%"></div>
805 </div>
806 </div>
807 </section>
808
809 <!-- Recent Activity -->
810 <section class="card">
811 <div class="card-header">
812 <h2 class="card-title">Recent Activity</h2>
813 <div class="card-actions">
814 <button class="icon-button" aria-label="View all activity">📋</button>
815 </div>
816 </div>
817
818 <ul class="activity-list">
819 <li class="activity-item">
820 <div class="activity-icon success">✅</div>
821 <div class="activity-content">
822 <div class="activity-title">
823 Website deployment <span class="tag success">completed</span>
824 </div>
825 <div class="activity-description">
826 Production deployment successful for v2.4.1
827 </div>
828 <div class="activity-time">2 minutes ago</div>
829 </div>
830 </li>
831
832 <li class="activity-item">
833 <div class="activity-icon info">👤</div>
834 <div class="activity-content">
835 <div class="activity-title">
836 New user registration
837 </div>
838 <div class="activity-description">
839 <span class="tag primary">Premium</span> account created by [email protected]
840 </div>
841 <div class="activity-time">15 minutes ago</div>
842 </div>
843 </li>
844
845 <li class="activity-item">
846 <div class="activity-icon warning">⚠️</div>
847 <div class="activity-content">
848 <div class="activity-title">
849 API rate limit <span class="tag warning">approaching</span>
850 </div>
851 <div class="activity-description">
852 Current usage at 85% of monthly quota
853 </div>
854 <div class="activity-time">1 hour ago</div>
855 </div>
856 </li>
857
858 <li class="activity-item">
859 <div class="activity-icon success">📊</div>
860 <div class="activity-content">
861 <div class="activity-title">
862 Monthly report generated
863 </div>
864 <div class="activity-description">
865 Analytics report for March 2024 is ready for review
866 </div>
867 <div class="activity-time">3 hours ago</div>
868 </div>
869 </li>
870
871 <li class="activity-item">
872 <div class="activity-icon info">🔄</div>
873 <div class="activity-content">
874 <div class="activity-title">
875 Database backup completed
876 </div>
877 <div class="activity-description">
878 Scheduled backup completed successfully (2.3 GB)
879 </div>
880 <div class="activity-time">6 hours ago</div>
881 </div>
882 </li>
883 </ul>
884 </section>
885 </div>
886
887 <!-- System Status Table -->
888 <section class="card">
889 <div class="card-header">
890 <h2 class="card-title">System Status</h2>
891 <div class="card-actions">
892 <button class="icon-button" aria-label="Refresh status">🔄</button>
893 <button class="icon-button" aria-label="Export data">📥</button>
894 </div>
895 </div>
896
897 <div style="overflow-x: auto;">
898 <table class="data-table">
899 <thead>
900 <tr>
901 <th>Service</th>
902 <th>Status</th>
903 <th>Response Time</th>
904 <th>Uptime</th>
905 <th>Last Check</th>
906 <th>Actions</th>
907 </tr>
908 </thead>
909 <tbody>
910 <tr>
911 <td>
912 <div style="display: flex; align-items: center; gap: 0.5rem;">
913 🌐 <strong>Web Application</strong>
914 </div>
915 </td>
916 <td>
917 <span class="status-indicator status-online">
918 <span class="status-dot"></span>
919 Online
920 </span>
921 </td>
922 <td><span style="color: #38a169; font-weight: 600;">243ms</span></td>
923 <td>99.98%</td>
924 <td><span style="color: #718096;">2 minutes ago</span></td>
925 <td>
926 <div style="display: flex; gap: 0.5rem;">
927 <button class="icon-button" aria-label="View details">👁️</button>
928 <button class="icon-button" aria-label="Configure">⚙️</button>
929 </div>
930 </td>
931 </tr>
932 <tr>
933 <td>
934 <div style="display: flex; align-items: center; gap: 0.5rem;">
935 🗄️ <strong>Database</strong>
936 </div>
937 </td>
938 <td>
939 <span class="status-indicator status-online">
940 <span class="status-dot"></span>
941 Online
942 </span>
943 </td>
944 <td><span style="color: #38a169; font-weight: 600;">89ms</span></td>
945 <td>99.95%</td>
946 <td><span style="color: #718096;">1 minute ago</span></td>
947 <td>
948 <div style="display: flex; gap: 0.5rem;">
949 <button class="icon-button" aria-label="View details">👁️</button>
950 <button class="icon-button" aria-label="Configure">⚙️</button>
951 </div>
952 </td>
953 </tr>
954 <tr>
955 <td>
956 <div style="display: flex; align-items: center; gap: 0.5rem;">
957 🔗 <strong>API Gateway</strong>
958 </div>
959 </td>
960 <td>
961 <span class="status-indicator status-warning">
962 <span class="status-dot"></span>
963 Warning
964 </span>
965 </td>
966 <td><span style="color: #d69e2e; font-weight: 600;">1.2s</span></td>
967 <td>98.76%</td>
968 <td><span style="color: #718096;">30 seconds ago</span></td>
969 <td>
970 <div style="display: flex; gap: 0.5rem;">
971 <button class="icon-button" aria-label="View details">👁️</button>
972 <button class="icon-button" aria-label="Configure">⚙️</button>
973 </div>
974 </td>
975 </tr>
976 <tr>
977 <td>
978 <div style="display: flex; align-items: center; gap: 0.5rem;">
979 📧 <strong>Email Service</strong>
980 </div>
981 </td>
982 <td>
983 <span class="status-indicator status-offline">
984 <span class="status-dot"></span>
985 Offline
986 </span>
987 </td>
988 <td><span style="color: #dd6b20; font-weight: 600;">Timeout</span></td>
989 <td>97.23%</td>
990 <td><span style="color: #718096;">5 minutes ago</span></td>
991 <td>
992 <div style="display: flex; gap: 0.5rem;">
993 <button class="icon-button" aria-label="View details">👁️</button>
994 <button class="icon-button" aria-label="Configure">⚙️</button>
995 </div>
996 </td>
997 </tr>
998 </tbody>
999 </table>
1000 </div>
1001 </section>
1002 </main>
1003 </div>
1004
1005 <!-- JavaScript for Enhanced UX -->
1006 <script>
1007 // Simulate real-time updates for metrics
1008 function updateMetrics() {
1009 const metricValues = document.querySelectorAll('.metric-value');
1010 const trends = document.querySelectorAll('.metric-trend');
1011
1012 // This would typically fetch real data from an API
1013 // For demo purposes, we'll simulate small changes
1014 console.log('Metrics updated (simulated)');
1015 }
1016
1017 // Simulate progress bar animations on load
1018 function animateProgressBars() {
1019 const progressBars = document.querySelectorAll('.progress-fill');
1020 progressBars.forEach((bar, index) => {
1021 // Reset width
1022 bar.style.width = '0%';
1023
1024 // Animate to target width
1025 setTimeout(() => {
1026 bar.style.transition = 'width 1s ease-in-out';
1027 bar.style.width = bar.getAttribute('style').match(/width:s*(d+%)/)[1];
1028 }, index * 200);
1029 });
1030 }
1031
1032 // Search functionality
1033 const searchInput = document.querySelector('.search-input');
1034 searchInput.addEventListener('input', function(e) {
1035 const query = e.target.value.toLowerCase();
1036 console.log('Search query:', query);
1037 // In a real app, this would filter dashboard content
1038 });
1039
1040 // Navigation active state
1041 const navLinks = document.querySelectorAll('.nav-link');
1042 navLinks.forEach(link => {
1043 link.addEventListener('click', function(e) {
1044 // Remove active class from all links
1045 navLinks.forEach(l => l.classList.remove('active'));
1046 // Add active class to clicked link
1047 this.classList.add('active');
1048 });
1049 });
1050
1051 // Initialize dashboard
1052 document.addEventListener('DOMContentLoaded', function() {
1053 animateProgressBars();
1054
1055 // Update metrics every 30 seconds
1056 setInterval(updateMetrics, 30000);
1057 });
1058
1059 // Card hover effects (already handled in CSS, but could add JS enhancements)
1060 const cards = document.querySelectorAll('.card');
1061 cards.forEach(card => {
1062 card.addEventListener('mouseenter', function() {
1063 // Could add additional hover effects here
1064 });
1065 });
1066
1067 // Handle icon button clicks
1068 const iconButtons = document.querySelectorAll('.icon-button');
1069 iconButtons.forEach(button => {
1070 button.addEventListener('click', function(e) {
1071 e.preventDefault();
1072 const action = this.getAttribute('aria-label');
1073 console.log('Action clicked:', action);
1074 // In a real app, this would trigger specific actions
1075 });
1076 });
1077 </script>
1078</body>
1079</html>This comprehensive dashboard demonstrates proper use of div and span containers alongside semantic HTML elements. Notice how divs are used for layout containers (.app-container, .dashboard-grid, .two-column-grid) and styling wrappers without adding semantic meaning, while spans are used for inline styling (status indicators, tags, metric trends). The structure maintains semantic meaning through proper use of header, nav, main, section, and article elements, with divs and spans serving purely functional purposes for layout and styling.
Great work understanding generic HTML containers! You now know when and how to use div and span elements appropriately while maintaining semantic document structure. Next, we'll explore attributes and classes to learn how to add metadata, styling hooks, and functionality to your HTML elements.
Your progress is saved in this browser, on this device only.