Semantic HTML should look good by default

Semantic HTML exists for a reason. Elements like <article>, <nav>, <header>, and <section> carry meaning. They help screen readers, search engines, and developers understand your content.

But here is the problem: most CSS frameworks ignore semantic elements entirely. A <nav> looks exactly like a <div> until you add classes.

Why semantic markup matters

Accessibility. Screen readers use semantic elements to navigate pages. A properly structured document with <main>, <nav>, and <article> is navigable without any visual rendering.

SEO. Search engines use document structure to understand content hierarchy. An <h1> inside an <article> carries more weight than a styled <div>.

Maintainability. When markup describes content, the code is self-documenting. <nav> means navigation. <aside> means sidebar. No class name needed.

How defaults reduce UI debt

When your CSS library styles semantic elements with good defaults, you get:

This means less custom CSS to write, fewer classes to maintain, and less divergence between projects.

<article>
  <h1>This looks good</h1>
  <p>No extra classes needed.</p>
</article>

Practical examples

With The New CSS, semantic HTML is styled by default. You write standard HTML and it looks professional:

<header>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>
<main>
  <article>
    <h1>Article title</h1>
    <p>Content with readable defaults.</p>
  </article>
</main>

Utility classes are available when you need precise control, but the baseline is already good.

Learn more about semantic CSS or get started.