The latest articles on DEV Community by GLADWELL MUTHONI (@gladwell_wathuti). https://dev.to/gladwell_wathuti https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4006840%2F89ff238d-e41a-439a-9592-536124a1a628.webp https://dev.to/gladwell_wathuti en GLADWELL MUTHONI Sun, 28 Jun 2026 18:23:54 +0000 https://dev.to/gladwell_wathuti/why-semantic-html-is-a-superpower-for-your-website-1hoh https://dev.to/gladwell_wathuti/why-semantic-html-is-a-superpower-for-your-website-1hoh <p>Why Semantic HTML is a Superpower for Your Website</p> <p>As I’ve been building my personal portfolio during the IYF Season 11 program, I realized that writing code is about more than just making things look "right"—it’s about making them accessible for everyone. The secret is Semantic HTML.</p> <p>What is Semantic HTML?</p> <p>Semantic HTML uses tags that provide meaning to the web page rather than just layout instructions. Tags like </p>, , , , and tell the browser and screen readers exactly what content they are interacting with. <p>If you use </p> for everything, you are handing a screen reader a blank map. Semantic tags act like a GPS, allowing users with visual impairments to navigate your site efficiently. <p>Before vs. After</p> <p>The difference is clear when comparing structure:</p> <p>Before (Non-Semantic):</p> <p>HTML</p> <p>My Portfolio</p> <p>Home | About | Contact</p> <p>Welcome to my site...</p> <p>After (Semantic):</p> <p>HTML</p> <h1>My Portfolio</h1> <ul> <li>Home</li> <li>About</li> <li>Contact</li> </ul> <p>Welcome to my site...</p> <p>Fixing Accessibility Issues</p> <p>During my accessibility audit (Task 2.3), I identified three key areas to improve:</p> <p>Missing alt Attributes: I had images without descriptions. I fixed this by adding context, such as alt="Portrait of Gladwell Muthoni, web development student", ensuring screen readers can describe images to visually impaired users.</p> <p>Lack of Semantic Structure: My initial gallery relied on generic containers. Switching to </p> and tags organized my project list logically, helping assistive technology categorize the content. <p>Heading Hierarchy: I was using </p> <h3> tags for visual styling rather than logical structure. I corrected this to follow a strict </h3> <h1> to </h1> <h2> hierarchy, which helps screen readers outline the page properly.</h2> <p>My portfolios URL</p> <p><a href="https://github.com/gladwellmuthoni/iyf-s11-week-01-gladwellmuthoni.git" rel="noopener noreferrer">https://github.com/gladwellmuthoni/iyf-s11-week-01-gladwellmuthoni.git</a></p> coding css html a11y