# Improving My Portfolio with Semantic HTML and Accessibility

#a11y #webdev #html #frontend

When I audited my portfolio site for accessibility, I realized how much difference semantic HTML makes. Semantic HTML means using tags that describe the meaning of content — like <header>, <nav>, <main>, and <footer> — instead of relying only on <div>s. This helps browsers, search engines, and assistive technologies understand the structure of a page, making it easier for everyone to use.

Why Semantic HTML Matters

Semantic HTML improves readability for developers, boosts SEO, and makes sites more accessible. Screen readers can announce sections properly, and users navigating with keyboards or assistive tools get a clearer experience. In short, semantic HTML adds meaning to your code, not just style.

Before vs After Example

Here’s a snippet from my site before the audit:

<div class="header">
    <div class="logo">My Site</div>
    <div class="nav">
        <div class="nav-item">Home</div>
        <div class="nav-item">About</div>
        <div class="nav-item">Contact</div>
    </div>
</div>

<!-- After: semantic -->
<header>
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="projects.html">Projects</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
</header>

<main>
  <section>
    <h1>Welcome to my portfolio</h1>
  </section>
</main>

Accessibility fixes i made

During my audit, i found a few issues and fixed them:

Alt text for images: Added descriptive alt attributes so screen readers can explain what each image shows.
Heading hierarchy:Replaced multiple <div>s with proper headings (<h1>, <h2>), which helps users navigate the page structure.
Descriptive links: Changed vague text like “click here” to meaningful phrases such as “View my projects,” so users know exactly where the link goes.