🧱 Module 5: Semantic HTML and Accessibility

 

Lesson 5.1: Semantic HTML Elements

🔹 Overview:

Semantic HTML uses tags that describe their meaning. This improves accessibility, SEO, and code readability.

🔹 Common Semantic Tags:

• <header>: Top section (logo, nav)
• <nav>: Navigation menu
• <main>: Main content
• <section>: Thematic grouping
• <article>: Independent content
• <aside>: Sidebar or related info
• <footer>: Bottom section

🔹 Example:

<article>
  <header>
    <h2>Blog Title</h2>
    <p>By John Doe</p>
  </header>
  <p>This is the blog content...</p>
</article>
        

📝 Assignment:

• Structure a blog post using semantic tags
• Include header, nav, main, article, and footer

Lesson 5.2: Accessibility and Best Practices

🔹 Overview:

Accessibility ensures that websites are usable by all people, including those with disabilities.

🔹 Tips:

• Use alt text on images
• Use correct heading hierarchy (<h1> to <h6>)
• Use labels with form elements
• Use aria-* attributes when needed
• Avoid auto-playing media

🔹 Example:

<label> for="name">Name:</label>
<input type="text" id="name" aria-label="Name">
        

📝 Assignment:

• Add accessible labels and alt text to an existing page
• Use at least one ARIA attribute