Why I Stopped Ignoring Semantic HTML in My React Projects

I've been writing React for a while now. Components, hooks, state management—that's where my head was. HTML? I figured it was just the boring glue. Then two things happened. A Lighthouse audit flagged my accessibility score at 62. And a friend who uses a screen reader tried my app and couldn't navigate past the header. That stung.

So I started digging. Turns out, the elements you choose in JSX aren't just for styling. They're the skeleton that assistive tech and search engines rely on. MDN puts it plainly: using the correct HTML element is a core part of making content accessible. And that's not just about being nice—it's about reaching people. The WHO says around 285 million people have visual impairments. That's a lot of potential users.

The Dashboard That Made Me Rethink Everything

At work, we were building a customer dashboard. The backend was solid—Node, Mongo, all good. The frontend? A sea of divs. Every row in the transactions list was a <div> with a class. It looked fine in Chrome. But when I ran a quick accessibility check, it was a mess. The screen reader announced "div, div, div"—no context. That's when I realized: I'd been treating markup like it was decorative, but it's structural.

What Semantic HTML Actually Does

Using the right element isn't about following rules for their own sake. It's about giving meaning. A <nav> tells a screen reader "this is navigation." A <main> says "the good stuff lives here." And a <button> announces itself as clickable—something a div never does. This matters for accessibility, sure. But it also helps SEO. Search engines parse your HTML to figure out what's important. A clear structure with proper headings and landmarks is easier to index. So you get better rankings without extra work.

And here's the thing I didn't expect: performance. Semantic HTML is native. The browser renders it without JavaScript. That means less client-side work, faster initial render. On a slow 3G connection—which is still reality for many users—that's a big deal. I saw our Time to Interactive drop by about 200ms on a test page just by swapping divs for semantic elements. Not huge, but free.

How I Fixed My Markup (And You Can Too)

It's not about throwing out React. It's about checking your JSX before you write another div. Ask: "Is there a better element for this?" For clickable things, use <button>. For lists, use <ul> and <li>. For navigation, <nav>. For the main content, <main>. For self-contained pieces like a comment or a product, <article>.

One pattern that helped me: when I build a profile component, I use <article> as the wrapper, <h1> for the name, <p> for the bio, and <time> for the join date. That's meaningful structure—not just styling hooks.

But I also hit a snag. Sometimes I need a div for layout because the semantic element doesn't have the right display properties. And that's okay. The goal isn't zero divs. It's being intentional. If a div is just a wrapper for a CSS grid, fine. But if it's acting as a button, that's a problem.

Another thing that threw me: form fields. I used to put placeholders and skip labels. Then I learned that labels are critical—not just for accessibility, but for usability. A label tells everyone what the field is for. Placeholders disappear when you type, so they're not a substitute.

And don't assume your framework handles this. React doesn't enforce semantic HTML. It just renders what you write. Next.js gives you routing and SSR, but it won't fix your div soup. That's on you.

So here's my suggestion: before you reach for another state library, look at your markup. Run an audit. Listen to your page with a screen reader for 30 seconds. It might be uncomfortable, but it's worth it.

The bottom line: semantic HTML isn't a checkbox. It's the difference between a page that works for everyone and one that leaves people out. And if you're a full-stack dev, that's your responsibility.

Sources

• MDN Web Docs (Accessibility) - https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Accessibility
• MDN Web Docs (Accessibility overview) - https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Accessibility/What_is_accessibility
• MDN Web Docs (Web performance) - https://developer.mozilla.org/en-US/docs/Web/Performance
• React official documentation - https://react.dev/