Semantic HTML — UI Element Compendium

Semantic HTML

HTML conveying meaning through element choice.

<header>Dashboard

<nav>Overview · Reports · Settings

<main>Page content

<div class="header">Dashboard

<div class="nav">Overview · Reports · Settings

<div class="main">Page content

html

<div class="sh-demo" style="--accent:#BFD9F2;">
  
  <header class="sh-demo__block"><code class="sh-demo__tag">&lt;header&gt;</code>Dashboard</header>
  <nav class="sh-demo__block"><code class="sh-demo__tag">&lt;nav&gt;</code>Overview &middot; Reports &middot; Settings</nav>
  <main class="sh-demo__block sh-demo__block--main"><code class="sh-demo__tag">&lt;main&gt;</code>Page content</main>
  
  {{unless semantic}}
  <div class="sh-demo__block"><code class="sh-demo__tag">&lt;div class="header"&gt;</code>Dashboard</div>
  <div class="sh-demo__block"><code class="sh-demo__tag">&lt;div class="nav"&gt;</code>Overview &middot; Reports &middot; Settings</div>
  <div class="sh-demo__block sh-demo__block--main"><code class="sh-demo__tag">&lt;div class="main"&gt;</code>Page content</div>

tailwind

<div class="flex flex-col gap-1.5" style="width:320px;font-family:system-ui,sans-serif;color:#241430">
  
  <header class="px-3 py-2.5 rounded-lg bg-[#24143010] border-l-[3px]" style="border-color:#BFD9F2"><code class="block text-[11px] font-mono mb-0.5" style="color:#BFD9F2">&lt;header&gt;</code>Dashboard</header>
  <nav class="px-3 py-2.5 rounded-lg bg-[#24143010] border-l-[3px]" style="border-color:#BFD9F2"><code class="block text-[11px] font-mono mb-0.5" style="color:#BFD9F2">&lt;nav&gt;</code>Overview &middot; Reports &middot; Settings</nav>
  <main class="px-3 py-2.5 rounded-lg bg-[#24143010] border-l-[3px] min-h-[40px]" style="border-color:#BFD9F2"><code class="block text-[11px] font-mono mb-0.5" style="color:#BFD9F2">&lt;main&gt;</code>Page content</main>
  
  {{unless semantic}}
  <div class="px-3 py-2.5 rounded-lg bg-[#24143010] border-l-[3px]" style="border-color:#BFD9F2"><code class="block text-[11px] font-mono mb-0.5" style="color:#BFD9F2">&lt;div class="header"&gt;</code>Dashboard</div>
  <div class="px-3 py-2.5 rounded-lg bg-[#24143010] border-l-[3px]" style="border-color:#BFD9F2"><code class="block text-[11px] font-mono mb-0.5" style="color:#BFD9F2">&lt;div class="nav"&gt;</code>Overview &middot; Reports &middot; Settings</div>
  <div class="px-3 py-2.5 rounded-lg bg-[#24143010] border-l-[3px] min-h-[40px]" style="border-color:#BFD9F2"><code class="block text-[11px] font-mono mb-0.5" style="color:#BFD9F2">&lt;div class="main"&gt;</code>Page content</div>

react

export function SemanticHtml({
  semantic = true,
  title = "Dashboard",
  showTagNames = true,
  accent = "#BFD9F2",
}) {
  const block = { padding: "10px 12px", borderRadius: 8, background: "#24143010", borderLeft: "3px solid " + accent };
  const tag = { display: "block", fontFamily: "ui-monospace, monospace", fontSize: 11, color: accent, marginBottom: 3 };
  const Header = semantic ? "header" : "div";
  const Nav = semantic ? "nav" : "div";
  const Main = semantic ? "main" : "div";
  return (
    <div style={{ width: 320, display: "flex", flexDirection: "column", gap: 6, fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430" }}>
      <Header style={block}>{showTagNames && <code style={tag}>{semantic ? "<header>" : '<div class="header">'}</code>}{title}</Header>
      <Nav style={block}>{showTagNames && <code style={tag}>{semantic ? "<nav>" : '<div class="nav">'}</code>}Overview &middot; Reports &middot; Settings</Nav>
      <Main style={{ ...block, minHeight: 40 }}>{showTagNames && <code style={tag}>{semantic ? "<main>" : '<div class="main">'}</code>}Page content</Main>
    </div>
  );
}