html

Root HTML document element.

Document outline — <html lang="en"> is the root, wrapping everything else

<html lang="en">
<head>Studio — Work
<body>visible page content

html

<div class="diagram">
  <p class="diagram__caption">Document outline — <code>&lt;html lang="en"&gt;</code> is the root, wrapping everything else</p>
  <div class="diagram__box diagram__box--root" style="--accent:#E8A020;">
    <span class="diagram__tag">&lt;html lang="en"&gt;</span>
    
    <div class="diagram__row">
      <div class="diagram__box diagram__box--dim"><span class="diagram__tag diagram__tag--dim">&lt;head&gt;</span><span class="diagram__note">Studio — Work</span></div>
      <div class="diagram__box diagram__box--dim"><span class="diagram__tag diagram__tag--dim">&lt;body&gt;</span><span class="diagram__note">visible page content</span></div>
    </div>
    
  </div>
</div>
<style>
.diagram { width: 460px; box-sizing: border-box; font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; }
.diagram__caption { margin: 0 0 14px; font-size: 13px; color: #241430aa; }
.diagram__caption code { background: #24143012; padding: 1px 5px; border-radius: 4px; }
.diagram__box { border-radius: 8px; padding: 12px; box-sizing: border-box; }
.diagram__box--root { border: 2.5px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, #FAF7F2); }
.diagram__box--dim { flex: 1; border: 1.5px dashed #24143035; background: #FAF7F200; }
.diagram__row { display: flex; gap: 10px; margin-top: 10px; }
.diagram__tag { display: block; font: 700 12px/1 ui-monospace, monospace; color: var(--accent); margin-bottom: 4px; }
.diagram__tag--dim { color: #24143070; }
.diagram__note { display: block; font-size: 11px; color: #241430aa; }
</style>

tailwind

<div class="w-[460px] box-border font-sans text-sm text-[#241430] bg-[#FAF7F2] p-5 rounded-xl">
  <p class="m-0 mb-3.5 text-[13px] text-[#241430]/65">Document outline — <code class="bg-[#24143012] px-1.5 py-0.5 rounded">&lt;html lang="en"&gt;</code> is the root, wrapping everything else</p>
  <div class="rounded-lg p-3 box-border border-[2.5px]" style="border-color:#E8A020;background:color-mix(in srgb, #E8A020 10%, #FAF7F2);">
    <span class="block font-mono text-xs font-bold mb-1" style="color:#E8A020">&lt;html lang="en"&gt;</span>
    
    <div class="flex gap-2.5 mt-2.5">
      <div class="flex-1 rounded-lg border-[1.5px] border-dashed border-[#24143035] p-3"><span class="block font-mono text-xs font-bold mb-1 text-[#24143070]">&lt;head&gt;</span><span class="block text-[11px] text-[#241430]/65">Studio — Work</span></div>
      <div class="flex-1 rounded-lg border-[1.5px] border-dashed border-[#24143035] p-3"><span class="block font-mono text-xs font-bold mb-1 text-[#24143070]">&lt;body&gt;</span><span class="block text-[11px] text-[#241430]/65">visible page content</span></div>
    </div>
    
  </div>
</div>

react

export function HtmlElement({
  pageTitle = "Studio — Work",
  lang = "en",
  accent = "#E8A020",
  showChildren = true,
}) {
  return (
    <div style={{ width: 460, boxSizing: "border-box", font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 20, borderRadius: 12 }}>
      <p style={{ margin: "0 0 14px", fontSize: 13, color: "#241430aa" }}>
        Document outline — <code style={{ background: "#24143012", padding: "1px 5px", borderRadius: 4 }}>{`<html lang="${lang}">`}</code> is the root, wrapping everything else
      </p>
      <div style={{ borderRadius: 8, padding: 12, boxSizing: "border-box", border: `2.5px solid ${accent}`, background: `color-mix(in srgb, ${accent} 10%, #FAF7F2)` }}>
        <span style={{ display: "block", font: "700 12px/1 ui-monospace, monospace", color: accent, marginBottom: 4 }}>{`<html lang="${lang}">`}</span>
        {showChildren && (
          <div style={{ display: "flex", gap: 10, marginTop: 10 }}>
            <div style={{ flex: 1, border: "1.5px dashed #24143035", borderRadius: 8, padding: 12 }}>
              <span style={{ display: "block", font: "700 12px/1 ui-monospace, monospace", color: "#24143070", marginBottom: 4 }}>&lt;head&gt;</span>
              <span style={{ display: "block", fontSize: 11, color: "#241430aa" }}>{pageTitle}</span>
            </div>
            <div style={{ flex: 1, border: "1.5px dashed #24143035", borderRadius: 8, padding: 12 }}>
              <span style={{ display: "block", font: "700 12px/1 ui-monospace, monospace", color: "#24143070", marginBottom: 4 }}>&lt;body&gt;</span>
              <span style={{ display: "block", fontSize: 11, color: "#241430aa" }}>visible page content</span>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}