When building for the web, it is easy to focus entirely on visual aesthetics. However, clean code under the hood is what truly separates good websites from great ones. During my recent portfolio review, i took a deep dive into semantic HTML and web accessibility (a11y).
Semantic HTML refers to using markup tags that inherently describe the meaning and purpose of the content enclosed within them. Rather than relying on generic containers like div or span for everything semantic code utilizes dedicated tags such as header, nav, main and footer. This practice matters profoundly because it structures data so search engines can index pages effectively, boosting SEO. More importantly, it creates an essential structural map for screen readers, allowing visually impaired users to seamlessly navigate a website.
Before vs After : Writing Meaning
<!-- Before: Non semantic markup -->
<div class="navigation-bar">
