Introduction

Building a website involves more than making content appear in a browser. A good website should have a clear structure, communicate meaning through its HTML, and be accessible to different users. While building my personal portfolio, I explored semantic HTML and performed an accessibility audit to understand how these principles improve web development.

What Is Semantic HTML?

Semantic HTML uses elements that describe the purpose of their content. For example, "

Using generic "

Before:

Home About Contact 

After:

<ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> 

The second version gives the navigation a meaningful role, uses a proper list structure, and makes the items actual links.

Accessibility Issues and Improvements

1. Images Without Meaningful Alternatives

Images need appropriate alternative text so that users who cannot see them can understand their purpose. I used the "alt" attribute to provide a text alternative for my image.

1. Unclear Heading Structure

Headings help users understand a page's organization. I used a main "

" heading followed by "

" headings for the major sections, creating a clearer content hierarchy.

1. Form Labels and Input Validation

Forms need labels associated with their inputs. I used "" elements linked through matching "for" and "id" attributes. I also used appropriate input types, required fields, and a minimum message length to provide browser-side validation.

Conclusion

This project helped me understand that semantic HTML and accessibility should be considered from the beginning of development. Meaningful elements make code easier to understand, while accessible labels, image alternatives, and logical headings help more people use a website.

View my portfolio:[https://wairimuevans.github.io/iyf-s12-week-01-WairimuEvans/]

As I continue learning web development, I intend to apply these principles to larger and more interactive projects.