Building a Better Web

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>

Accessibility Audit: Key Fixes

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

1. Missing Image Alt Texts: My image lacked alt attributes, leaving screen reader users without context. I added descriptive text to the image.
2. 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]