Modern HTML5 & Native Document Primitives

Master exclusive details accordions, the native search landmark, and interaction-driven CSS constraint validation with zero JavaScript runtime.

<details name="arch-group" open>
  <summary class="font-bold cursor-pointer">
    01. Semantic Layout
  </summary>
  <p class="mt-2 text-xs">Main document structure...</p>
</details>

<details name="arch-group">
  <summary class="font-bold cursor-pointer">
    02. Accessible Primitives
  </summary>
  <p class="mt-2 text-xs">Auto-closes sibling...</p>
</details>

<search role="search">
  <form action="/query">
    <input type="search" placeholder="Search API..." />
  </form>
</search>

<input 
  type="email" 
  required 
  class="border valid:border-emerald-500 invalid:border-rose-500" 
/>

Core Specifications

• Exclusive Accordions (<details name="...">): Multiple <details> sharing a name attribute create an exclusive accordion with zero JavaScript listeners.
• The <search> Landmark: Replaces non-semantic <div role="search"> with an accessible, screen-reader discoverable document landmark.
• :user-valid & :user-invalid: CSS pseudo-classes that display validation feedback only after user interaction and blur, eliminating initial load error flashes.