july-2025-introduction-to-html-5-abdirehim/index.html at main · PLP-WebTechnologies/july-2025-introduction-to-html-5-abdirehim · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="A beginner-friendly HTML5 web page with accessibility and SEO best practices." />
  <meta name="author" content="Your Name" />
  <title>Welcome to Accessible Web</title>
</head>
<body>

  <!-- Header Section -->
  <header role="banner">
    <h1>Accessible Web Design with HTML5</h1>
    <p>Creating semantic, accessible, and SEO-friendly pages with modern HTML</p>
  </header>

  <!-- Navigation Section -->
  <nav role="navigation" aria-label="Main navigation">
    <ul>
      <li><a href="#about">About</a></li>
      <li><a href="#benefits">Benefits</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>

  <!-- Main Content Section -->
  <main role="main">
    <!-- About Section -->
    <section id="about">
      <h2>What is HTML5?</h2>
      <p>HTML5 is the latest version of the Hypertext Markup Language used to structure content on the web. It introduces semantic elements that make content easier to understand for both users and search engines.</p>
    </section>

    <!-- Benefits Section -->
    <section id="benefits">
      <h2>Why Accessibility & SEO Matter</h2>
      <article>
        <h3>Accessibility for Everyone</h3>
        <p>Accessibility ensures that websites are usable by people with disabilities. Using semantic HTML5 tags helps assistive technologies, such as screen readers, interpret your content correctly.</p>
      </article>

      <article>
        <h3>SEO for Discoverability</h3>
        <p>Search engines rely on structured, readable content to rank pages. Proper use of heading tags, descriptive content, and semantic layout improves your site's visibility.</p>
      </article>
    </section>

    <!-- Contact Section -->
    <section id="contact">
      <h2>Contact Us</h2>
      <p>Have questions or feedback? Reach out via <a href="mailto:contact@example.com">email</a>.</p>
    </section>
  </main>

  <!-- Footer Section -->
  <footer role="contentinfo">
    <p>&copy; 2025 Accessible Web Design Project. All rights reserved.</p>
  </footer>

</body>
</html>