html-series/07-Semantic HTML.html at main · jdcodebase/html-series · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>7-Semantic HTML</title>
  </head>

  <body>
    <!-- ========================= HEADER ========================= -->
    <!-- Header contains website title, logo, top introduction -->
    <header>
      <h1>My Website</h1>
      <p>Welcome to my Semantic HTML demo</p>
    </header>

    <!-- ========================= NAVIGATION ========================= -->
    <!-- nav stores all important navigation links -->
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </nav>

    <!-- ========================= MAIN CONTENT ========================= -->
    <!-- Main contains the primary content of the webpage -->
    <main>
      <!-- ========== SECTION ========== -->
      <!-- Section groups related content (here: about section) -->
      <section>
        <h2>About This Website</h2>
        <p>This website is just a demo to understand Semantic HTML.</p>
      </section>

      <!-- ========== ARTICLE ========== -->
      <!-- Article is self-contained content (like a blog post) -->
      <article>
        <h2>Latest Article</h2>
        <p>This is some article content that can stand on its own.</p>
      </article>

      <!-- ========== ASIDE ========== -->
      <!-- Aside holds additional side content like ads, related posts -->
      <aside>
        <h3>Related Links</h3>
        <ul>
          <li><a href="#">Semantic HTML Guide</a></li>
          <li><a href="#">Accessibility Tips</a></li>
        </ul>
      </aside>

      <!-- ========== FIGURE + FIGCAPTION ========== -->
      <!-- Figure holds an image or diagram with a caption -->
      <figure>
        <img src="assets/car.webp" alt="Car Image" />
        <figcaption>This is a sample Car Image</figcaption>
      </figure>
    </main>

    <!-- ========================= FOOTER ========================= -->
    <!-- Footer stores the bottom information of the webpage -->
    <footer>
      <p>Copyright 2025 | JDCodebase</p>

      <!-- Address stores contact information -->
      <address>
        Email: contact@jdcodebase.com <br />
        Phone: 987456310
      </address>
    </footer>

    <!-- ========================= TIME TAG ========================= -->
    <!-- Time tag with machine-readable datetime format -->
    <p>
      Published on:
      <time datetime="2025-12-02">02-Dec-2025</time>
    </p>
  </body>
</html>