Headings Are for Structure, Not Style
Why separating content structure from design makes your codebase more maintainable, accessible, and flexible.
When building websites, it’s common to see developers attach default styles directly to HTML heading elements like <h1>, <h2>, and <h3>. At first, this feels convenient: you know that any <h2> will have the same font size and margin applied across your project. But this approach creates a subtle problem — it ties semantic meaning to design choices, making both harder to manage in the long run.
The Role of Headings: Structure, Not Style
HTML heading tags exist to create a semantic structure for your content. They tell browsers, screen readers, and search engines about the hierarchy of information on the page. An <h1> signals the most important heading, <h2> marks subsections, and so on. Their purpose is not visual presentation but information architecture.
When you lock styles directly to those tags (e.g., h2 { font-size: 2rem }), you begin to confuse semantics with presentation. What if in one place an <h2> needs to look smaller, or styled differently for a sidebar component? Suddenly, you’re overriding defaults, adding exceptions, and complicating your CSS.
Utilities Keep Styles Flexible
Frameworks like Tailwind CSS or UnoCSS offer utility classes that let you apply styles directly in your markup:
<h2 class="text-xl font-bold mb-4">
Section Title
</h2><h2 class="text-base font-semibold">
Sidebar Heading
</h2>Both are <h2> elements, which preserves the semantic hierarchy, but each is styled appropriately for its context. The heading’s meaning is consistent, but its design adapts to the layout. This separation keeps your code more expressive and avoids the pitfalls of one-size-fits-all heading styles.
Accessibility and SEO Benefits
Screen readers don’t care about font size — they care about semantic tags. By ensuring your <h1> through <h6> elements are used strictly for hierarchy and not for “big text,” you help assistive technologies read your site more accurately. Search engines also reward clear document structure, which improves SEO.
A More Maintainable Approach
By embracing utility-first CSS for design, you keep your semantic HTML clean and meaningful. You gain flexibility to restyle components without redefining global heading rules. And when a rebrand happens, you’ll thank yourself for not hardcoding styles into semantic elements.