HTML/semantic-tags.html at main · Qasim-Rokeeb/HTML · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Semantic Tags</title>
</head>
<body>

   <header>
    <h1>Welcome to Semantic Tags Page</h1>
    <p>This page demonstrates the use of semantic HTML5 tags.</p>
   </header>

    <nav>
     <ul>
          <li><a href="#section1">Section 1</a></li>
          <li><a href="#section2">Section 2</a></li>
          <li><a href="#section3">Section 3</a></li>
     </ul>
    </nav>

    <section id="section1">
      <h2>Section 1: Introduction to Semantic Tags</h2>
      <p>Semantic tags provide meaning to the web page structure. Examples include &lt;header&gt;, &lt;nav&gt;, &lt;section&gt;, &lt;article&gt;, &lt;aside&gt;, and &lt;footer&gt;.</p>
    </section>
    <section id="section2">
      <h2>Section 2: Benefits of Using Semantic Tags</h2>
      <p>Using semantic tags improves accessibility, SEO, and code readability. It helps browsers and assistive technologies understand the content better.</p>
    </section>
    <section id="section3">
      <h2>Section 3: Examples of Semantic Tags</h2>
      <article>
        <h3>Article Title</h3>
        <p>This is an example of an article within a section. Articles are used for self-contained content that can be distributed independently.</p>
      </article>
      <aside>
        <h3>Related Information</h3>
        <p>This aside contains related information that complements the main content of the article.</p>
      </aside>
    </section>
    <footer>
      <p>&copy; 2024 Semantic Tags Example. All rights reserved.</p>

    </footer>

</body>
</html>