Building a Better Web

antony juma — Mon, 22 Jun 2026 15:00:11 +0000

Semantic HTML

When learning web development, it is easy to fall into the habit of building everything with and tags. They are highly flexible, but they suffer from a major flaw: they carry absolutely no meaning. To build a modern, accessible web, we need to shift our focus toward Semantic HTML.
Semantic HTML means using tags that describe the meaning of the content they enclose, rather than just how it looks. When we use elements like , and , we provide structural context that benefits both machines and humans. ## Why it matters:
Accessibility: Screen readers use semantic tags to navigate pages efficiently.
SEO: Search engines prioritize well structured semantic content.
Maintainability: It makes code easier for other developers to read and understand. >Non-semantic

<div class="button" onclick="submitForm()">
Click me
</div>

Semantic

<button type="button" onclick="submitForm()">
Click Me
</button>

In my audit of index.html, I identified and resolved the following issues:

Missing Image Alt Texts: My image lacked alt attributes, leaving screen reader users without context. I added descriptive text to the image.
Heading Hierarchy: I found skipped heading levels. I restructured the document to follow a logical h1-h3 flow. ## Conclusion Prioritizing accessibility isn't just a nice feature but a fundamental part of responsible web development. By using semantic elements, we create a more inclusive digital world. You can view my full project in action here [https://github.com/itskaysir/iyf-s11-week-01-itskaysir]