Semantic HTML and Accessibility

When I started learning web development, I discovered that creating a webpage is more than making it look good. It is also important to make websites accessible and easy for everyone to use. Two concepts that helped me improve my website were semantic HTML and web accessibility.

Semantic HTML means using HTML elements according to their purpose instead of using generic

elements for everything. Semantic elements such as , , , , , and make the structure of a webpage clear. They improve readability, help search engines understand the content, and make websites easier for people using screen readers.

Before (Non-Semantic HTML)

My Website



Welcome to my website.

After (Semantic HTML)

<h1>My Website</h1>

Welcome to my website.

The semantic version is much easier to understand because each element clearly describes its purpose.

During my accessibility audit, I found several improvements that made my website more user-friendly.

The first issue was that images needed descriptive alternative text. I added meaningful alt attributes so screen readers can describe the images to users who cannot see them.

The second improvement was the heading hierarchy. I used one

for the page title and organized the remaining sections with

headings. This creates a logical structure that is easier to navigate.

The third improvement involved descriptive links. Instead of using vague text, I changed links to clearly describe where they lead. For example, I used "Visit GitHub" instead of a generic phrase.

I also ensured that the HTML document included the lang="en" attribute and that all form fields had properly associated elements. These small changes improve accessibility and usability for everyone.

Working with semantic HTML and accessibility has shown me that building websites is not only about appearance but also about creating experiences that everyone can use. As I continue learning web development, I will continue applying these best practices in all my projects.

My Portfolio

Portfolio Website:

https://priestrivers.github.io/iyf-s11-week-01-priestrivers/