webdev-html-css-patterns

HTML & CSS Patterns

Core Principles

1. Semantic HTML First -- Use elements that convey meaning (<article>, <nav>, <aside>) rather than generic <div> and <span>. Semantic markup improves accessibility, SEO, and maintainability.
2. Responsive by Default -- Design for all viewports from the start using fluid units, modern layout systems, and progressive enhancement rather than retrofitting breakpoints.
3. Accessibility as a Requirement -- Every interface must be navigable by keyboard, screen reader, and assistive technology. ARIA supplements semantic HTML; it does not replace it.
4. CSS Layout over Hacks -- Use Grid and Flexbox for layout. Avoid floats, negative margins, and absolute positioning for page-level structure.
5. Progressive Enhancement -- Build a functional baseline with HTML, layer on styling with CSS, and enhance with JavaScript only when necessary.

---

Semantic HTML5 Structure

Use landmark elements to define page regions. Screen readers and search engines rely on this hierarchy.

<body>
  <header role="banner">
    <nav aria-label="Primary navigation">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </header>

  <main id="main-content">
    <article>
      <h1>Article Heading</h1>
      <section aria-labelledby="section-title">
        <h2 id="section-title">Section Title</h2>
        <p>Content goes here.</p>
      </section>
    </article>
    <aside aria-label="Related content">
      <h2>Related Links</h2>
    </aside>
  </main>

  <footer role="contentinfo">
    <p>&copy; 2026 Company Name</p>
  </footer>
</body>

See semantic-html-patterns for: form patterns, table markup, meta tags, SEO elements, and content sectioning rules.

---

CSS Grid Layout

Grid is the primary tool for two-dimensional layouts. Define explicit tracks or let the browser auto-place items.

/* Responsive card grid with auto-fit */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1.5rem;
  padding: 1.5rem;
}

/* Named grid areas for page layout */
.page-layout {
  display: grid;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
}

.page-layout > header  { grid-area: header; }
.page-layout > aside   { grid-area: sidebar; }
.page-layout > main    { grid-area: main; }
.page-layout > footer  { grid-area: footer; }