Day 6: Semantic HTML & Accessibility

Goal

Learn how to write modern, structured, and accessible HTML using semantic tags and proper labeling.

Topics

• Semantic HTML tags: <header>, <footer>, <main>, <section>, <article>, <nav>
• Accessibility: alt for images, aria-label, proper form labeling

Semantic HTML

Semantic tags give meaning to the content, making it easier to read for humans, search engines, and assistive technologies.

Examples

<header>
  <h1>My Website</h1>
</header>

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<main>
  <section>
    <h2>About Me</h2>
    <p>This is a section about myself.</p>
  </section>

  <article>
    <h2>Blog Post</h2>
    <p>This is an article about HTML.</p>
  </article>
</main>

<footer>
  <p>© 2026 My Website</p>
</footer>

Accessibility

Accessibility ensures everyone can use your site, including users with disabilities.

• Always add alt attributes for images:

<img src="photo.jpg" alt="Description of the photo">

• Use aria-label for custom controls or icons:

<button aria-label="Close menu"></button>

• Properly associate <label> with form inputs using for attribute.

Practice

Convert a simple HTML page to use semantic tags and improve accessibility:

• Add <header>, <footer>, <main>, and <section> where appropriate.
• Ensure all images have descriptive alt text.
• Add a navigation bar using <nav> with links to different sections/pages.

Example

<header>
  <h1>My Portfolio</h1>
</header>

<nav>
  <ul>
    <li><a href="#about">About</a></li>
    <li><a href="#projects">Projects</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

<main>
  <section id="about">
    <h2>About Me</h2>
    <p>I am learning semantic HTML to make my pages structured and accessible.</p>
    <img src="myphoto.jpg" alt="Photo of me">
  </section>

  <section id="projects">
    <h2>My Projects</h2>
    <article>
      <h3>Project 1</h3>
      <p>Description of project 1.</p>
    </article>
  </section>
</main>

<footer>
  <p>© 2026 My Portfolio</p>
</footer>