/*@jsxRuntime automatic @jsxImportSource react*/ const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = Object.assign({ p: "p", h2: "h2", pre: "pre", code: "code", strong: "strong" }, _provideComponents(), props.components); return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "I see semantic HTML treated as an afterthought in most projects." }), "\n", _jsx(_components.p, { children: "We know it helps SEO, accessibility, and code maintainability.\nBut we treat it as \"nice to have,\" not critical." }), "\n", _jsx(_components.p, { children: "Then you realize your apps are scoring very poorly on SEO and accessibility. Fixing it means reworking entire design systems or components." }), "\n", _jsx(_components.p, { children: "That's when semantic HTML becomes an architectural concern." }), "\n", _jsx(_components.h2, { id: "a-simple-example", children: "A Simple Example" }), "\n", _jsx(_components.p, { children: "A common mistake I see is using divs as buttons for styling reasons:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "

Save

\n" }) }), "\n", _jsx(_components.p, { children: "At first glance, it works. Looks fine." }), "\n", _jsxs(_components.p, { children: ["But when you use a ", _jsx(_components.code, { children: "

" }), " instead, you're ditching some built-in behavior and taking on all that responsibility yourself."] }), "\n", _jsx(_components.p, { children: "And now every place that follows this pattern has to do the same." }), "\n", _jsx(_components.p, { children: "When you write this instead:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n" }) }), "\n", _jsxs(_components.p, { children: ["You're not just choosing an element.\nYou're saying: ", _jsx(_components.strong, { children: "this is interactive, it can receive focus, it works with a keyboard, and assistive technologies know what it is." })] }), "\n", _jsx(_components.h2, { id: "why-semantic-html-matters-at-scale", children: "Why Semantic HTML Matters at Scale" }), "\n", _jsx(_components.p, { children: "In small apps, this doesn't feel like a big deal." }), "\n", _jsx(_components.p, { children: "In larger systems, the pattern repeats. One component copies another. A design system or component library is built that way." }), "\n", _jsxs(_components.p, { children: ["I've seen design systems where the Button component was built on a ", _jsx(_components.code, { children: "

" }), ". Now every button across 200+ components needs to be refactored. Suddenly, entire pages inherit low accessibility and SEO issues."] }), "\n", _jsx(_components.p, { children: "All of a sudden, you find yourself rewriting components, updating interactions, and fixing accessibility across dozens of places — far more costly than doing it right from the start." }), "\n", _jsx(_components.h2, { id: "semantic-html-is-more-than-markup", children: "Semantic HTML Is More Than Markup" }), "\n", _jsx(_components.p, { children: "We have to think about semantic HTML as a tool for good architecture." }), "\n", _jsx(_components.p, { children: "The good thing about HTML is that it provides a lot of constraints and features by default." }), "\n", _jsxs(_components.p, { children: ["A ", _jsx(_components.code, { children: "

Semantic HTML Is an Architectural Decision