@@ -1,599 +1,3 @@
1−<!DOCTYPE html>
2−<html lang="en">
3−<head>
4−<meta charset="utf-8">
5−<meta name="viewport" content="width=device-width, initial-scale=1">
6−<title>htmlang Demo</title>
7−<meta name="theme-color" content="#3b82f6">
8−<link rel="preload" href="https://picsum.photos/72" as="image">
9−<link rel="preload" href="https://picsum.photos/640/200" as="image">
10−<link rel="dns-prefetch" href="//github.com">
11−<link rel="dns-prefetch" href="//picsum.photos">
12−<meta name="description" content="A one-page tour of htmlang.">
13−<meta property="og:title" content="htmlang">
14−<meta property="og:type" content="website">
15−<style>
16−*, *::before, *::after { box-sizing: border-box; }
17−body { margin: 0; font-family: system-ui, -apple-system, sans-serif; }
18−img { display: block; }
19−a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
20−:root {
21− --primary: #3b82f6;
22− --ink: #0f172a;
23− --muted: #64748b;
24− --subtle: #f8fafc;
25−}
26−@layer htmlang {
27− .a {display:flex;flex-direction:column;max-width:960px;margin-left:auto;margin-right:auto;padding:32px;gap:24px;background:white;}
28− .b {display:flex;flex-direction:column;gap:8px;}
29− .c {display:flex;flex-direction:column;gap:6px;color:#64748b;font-size:13px;}
30− .d {display:flex;flex-direction:row;gap:6px;align-items:center;}
31− .e {color:#64748b;}
32− .f {color:#0f172a;}
33− .g {display:flex;flex-direction:row;gap:16px;align-items:center;}
34− .h {display:flex;flex-direction:column;flex:1;min-width:0;gap:6px;}
35− .i {font-weight:bold;font-size:40px;color:#0f172a;}
36− .j {margin:0;line-height:1.6;color:#64748b;}
37− .k {font-weight:bold;color:#3b82f6;}
38− .l {color:#3b82f6;text-decoration:underline;}
39− .m {width:72px;height:72px;border-radius:36px;}
40− .n {border-top:1px solid #e5e7eb;}
41− .o {display:flex;flex-direction:column;gap:12px;padding-top:8px;padding-bottom:8px;}
42− .p {font-weight:bold;font-size:22px;color:#0f172a;}
43− .q {display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;}
44− .r {display:flex;flex-direction:column;padding:16px;background:white;border-radius:8px;border:1px solid #e5e7eb;box-shadow:0 1px 3px rgba(0,0,0,0.05);cursor:pointer;transition:all 0.2s ease;animation:fade-up 0.3s ease;}
45− .r:hover {box-shadow:0 4px 12px rgba(0,0,0,0.08);}
46− .s {display:flex;flex-direction:row;gap:10px;align-items:center;}
47− .t {font-size:20px;color:#3b82f6;}
48− .u {font-weight:bold;font-size:16px;color:#0f172a;}
49− .v {margin:0;line-height:1.7;}
50− .w {font-weight:bold;}
51− .x {font-style:italic;}
52− .y {font-family:ui-monospace,monospace;padding:2px 6px;background:#f1f5f9;border-radius:4px;font-family:monospace;font-size:13px;}
53− .z {background:#fef08a;}
54− .aa {display:flex;flex-direction:column;margin:0;padding-inline-start:16px;border-left:3px solid #3b82f6;color:#64748b;font-style:italic;}
55− .ab {margin:0;white-space:pre;font-family:ui-monospace,monospace;background:#0f172a;color:#e2e8f0;padding:16px;border-radius:8px;font-family:monospace;font-size:13px;overflow-x:auto;}
56− .ac {display:flex;flex-direction:column;gap:6px;}
57− .ad {display:flex;flex-direction:row;gap:10px;align-items:baseline;}
58− .ae {font-weight:bold;min-width:80px;}
59− .af {color:#64748b;font-style:italic;}
60− .ag {display:flex;flex-direction:row;gap:6px;}
61− .ah {display:flex;flex-direction:column;width:18px;height:18px;border-radius:9px;background:#3b82f6;opacity:0.4;}
62− .ai {display:flex;flex-direction:row;gap:4px;}
63− .aj {display:flex;flex-direction:column;width:24px;height:24px;border-radius:4px;background:#3b82f6;color:white;text-align:center;font-size:12px;font-weight:bold;line-height:24;}
64− .ak {font-weight:bold;min-width:64px;}
65− .al {color:#3b82f6;font-weight:bold;}
66− .am {color:#10b981;font-weight:bold;}
67− .an {display:flex;flex-direction:column;padding:12px;border-radius:6px;background:#3b82f6;color:white;}
68− .an::before {content:"→ ";font-weight:bold;}
69− .ao {font-family:ui-monospace,monospace;}
70− .ap {display:flex;flex-direction:column;gap:10px;max-width:420px;}
71− .aq {font-weight:bold;font-size:13px;}
72− .ar {padding:10px;border:1px solid #e5e7eb;border-radius:6px;transition:border 0.15s ease;}
73− .ar:focus {border:1px solid #3b82f6;}
74− .ar:valid {border:1px solid #10b981;}
75− .ar:invalid {border:1px solid #ef4444;}
76− .as {padding:10px;border:1px solid #e5e7eb;border-radius:6px;}
77− .at {display:flex;flex-direction:row;gap:8px;}
78− .au {padding:10px 16px;background:#3b82f6;color:white;font-weight:bold;border-radius:6px;border:0 solid currentColor;transition:background 0.15s ease;cursor:pointer;}
79− .au:hover {background:#3575dd;}
80− .au:active {background:#2f68c5;}
81− .av {padding:10px 16px;background:white;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;}
82− .aw {display:flex;flex-direction:row;gap:16px;flex-wrap:wrap;}
83− .ax {display:flex;flex-direction:column;flex:1;min-width:0;gap:8px;min-width:240px;}
84− .ay {margin:0;padding-left:0;list-style:none;gap:4px;list-style:disc;padding-inline-start:20px;}
85− .az {display:flex;flex-direction:column;}
86− .ba {margin:0;padding-left:0;list-style:none;list-style:decimal;padding-inline-start:20px;}
87− .bb {text-align:left;padding:8px;}
88− .bc {text-align:right;padding:8px;}
89− .bd {padding:8px;border-top:1px solid #e5e7eb;}
90− .be {padding:8px;border-top:1px solid #e5e7eb;text-align:right;}
91− .bf {display:flex;flex-direction:column;margin:0;gap:6px;}
92− .bg {border-radius:8px;}
93− .bh {color:#64748b;font-size:13px;text-align:center;}
94− .bi {display:flex;flex-direction:column;padding:12px;border:1px solid #e5e7eb;border-radius:6px;background:#f8fafc;}
95− .bj {font-weight:bold;cursor:pointer;}
96− .bk {margin:0;color:#64748b;line-height:1.6;padding-block-start:6px;}
97− .bl {display:flex;flex-direction:column;display:grid;grid-template-columns:1fr 2fr;grid-template-areas:"h h" "s m" "f f";gap:8px;padding:8px;background:#f8fafc;border-radius:8px;}
98− .bm {display:flex;flex-direction:column;grid-area:h;padding:10px;background:#3b82f6;color:white;border-radius:6px;text-align:center;}
99− .bn {display:flex;flex-direction:column;grid-area:s;padding:10px;background:white;border-radius:6px;border:1px solid #e5e7eb;}
100− .bo {display:flex;flex-direction:column;grid-area:m;padding:10px;background:white;border-radius:6px;border:1px solid #e5e7eb;}
101− .bp {display:flex;flex-direction:column;grid-area:f;padding:10px;background:#0f172a;color:white;border-radius:6px;text-align:center;}
102− .bq {gap:4px;font-style:normal;}
103− .br {color:#3b82f6;}
104− .bs {font-size:13px;color:#64748b;}
105− .bt {font-size:13px;}
106− .bu {display:flex;flex-direction:column;padding-block-start:24px;margin-block-start:24px;border-top:1px solid #e5e7eb;gap:8px;}
107− .bv {display:flex;flex-direction:row;gap:8px;align-items:center;}
108− .bw {display:flex;flex-direction:column;padding:12px 20px;background:#3b82f6;color:white;font-weight:bold;border-radius:8px;transition:all 0.15s ease;cursor:pointer;}
109− .bw:hover {background:#3575dd;}
110− .bw:active {background:#2f68c5;}
111− .bx {color:#3b82f6;}
112− .bx:hover {text-decoration:underline;}
113− .bx:visited {color:#8b5cf6;}
114− .by {display:flex;flex-direction:column;flex:1;min-width:0;}
115− .bz {color:#64748b;font-size:13px;}
116−@media (prefers-color-scheme: dark) {
117− .a {background:#0b1220;color:#e2e8f0;}
118− .i {color:white;}
119−}
120−@media print {
121− .bu {display:none;}
122−}
123−}
124−@keyframes fade-up {
125−from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}
126−}
127−</style>
128−</head>
129−<body>
130−<noscript><style>.needs-js{display:none}</style></noscript>
131−<!-- @column line 61 -->
132−<div class="a" data-hl-line="61" data-hl-el="column">
133− <!-- @header line 72 -->
134− <header class="b" data-hl-line="72" data-hl-el="header">
135− <!-- @nav line 73 -->
136− <nav class="c" data-hl-line="73" data-hl-el="nav">
137− <!-- @row line 74 -->
138− <div class="d" data-hl-line="74" data-hl-el="row">
139− <!-- @link line 75 -->
140− <a href="/" class="e" data-hl-line="75" data-hl-el="link">
141−Home </a>
142− <!-- @text line 76 -->
143− <span data-hl-line="76" data-hl-el="text">
144−/ </span>
145− <!-- @link line 77 -->
146− <a href="/demos" class="e" data-hl-line="77" data-hl-el="link">
147−Demos </a>
148− <!-- @text line 78 -->
149− <span data-hl-line="78" data-hl-el="text">
150−/ </span>
151− <!-- @text line 79 -->
152− <span class="f" data-hl-line="79" data-hl-el="text">
153−htmlang </span>
154− </div>
155− </nav>
156− <!-- @row line 81 -->
157− <div class="g" data-hl-line="81" data-hl-el="row">
158− <!-- @column line 82 -->
159− <div class="h" data-hl-line="82" data-hl-el="column">
160− <!-- @text line 83 -->
161− <span class="i" data-hl-line="83" data-hl-el="text">
162−Welcome to htmlang </span>
163− <!-- @paragraph line 84 -->
164− <p class="j" data-hl-line="84" data-hl-el="paragraph">
165−A minimalist layout language that compiles to <span class="k">
166−static HTML </span> — no JS, no build step. Visit the <a href="https://github.com" rel="noopener noreferrer" target="_blank" class="l">
167−repo </a> for more. </p>
168− </div>
169− <!-- @image line 88 -->
170− <img src="https://picsum.photos/72" class="m" alt=""Avatar"" data-hl-line="88" data-hl-el="image" fetchpriority="high">
171− </div>
172− </header>
173− <!-- @hr line 90 -->
174− <hr class="n" data-hl-line="90" data-hl-el="hr">
175− <!-- @section line 56 -->
176− <section class="o" data-hl-line="56" data-hl-el="section">
177− <!-- @text line 57 -->
178− <span class="p" data-hl-line="57" data-hl-el="text">
179−Features </span>
180− <!-- @row line 94 -->
181− <div class="q" data-hl-line="94" data-hl-el="row">
182− <!-- @article line 48 -->
183− <article class="r" data-hl-line="48" data-hl-el="article">
184− <!-- @row line 49 -->
185− <div class="s" data-hl-line="49" data-hl-el="row">
186− <!-- @text line 50 -->
187− <span class="t" data-hl-line="50" data-hl-el="text">
188−✦ </span>
189− <!-- @text line 51 -->
190− <span class="u" data-hl-line="51" data-hl-el="text">
191−Simple </span>
192− </div>
193− <span>Write layouts without CSS classes.</span>
194− </article>
195− <!-- @article line 48 -->
196− <article class="r" data-hl-line="48" data-hl-el="article">
197− <!-- @row line 49 -->
198− <div class="s" data-hl-line="49" data-hl-el="row">
199− <!-- @text line 50 -->
200− <span class="t" data-hl-line="50" data-hl-el="text">
201−⚡ </span>
202− <!-- @text line 51 -->
203− <span class="u" data-hl-line="51" data-hl-el="text">
204−Fast </span>
205− </div>
206− <span>Compiles to a single self-contained HTML file.</span>
207− </article>
208− <!-- @article line 48 -->
209− <article class="r" data-hl-line="48" data-hl-el="article">
210− <!-- @row line 49 -->
211− <div class="s" data-hl-line="49" data-hl-el="row">
212− <!-- @text line 50 -->
213− <span class="t" data-hl-line="50" data-hl-el="text">
214−○ </span>
215− <!-- @text line 51 -->
216− <span class="u" data-hl-line="51" data-hl-el="text">
217−Minimal </span>
218− </div>
219− <span>Zero runtime JavaScript by default.</span>
220− </article>
221− <!-- @article line 48 -->
222− <article class="r" data-hl-line="48" data-hl-el="article">
223− <!-- @row line 49 -->
224− <div class="s" data-hl-line="49" data-hl-el="row">
225− <!-- @text line 50 -->
226− <span class="t" data-hl-line="50" data-hl-el="text">
227−◆ </span>
228− <!-- @text line 51 -->
229− <span class="u" data-hl-line="51" data-hl-el="text">
230−Typed </span>
231− </div>
232− <span>LSP with diagnostics and go-to-definition.</span>
233− </article>
234− </div>
235− </section>
236− <!-- @section line 56 -->
237− <section class="o" data-hl-line="56" data-hl-el="section">
238− <!-- @text line 57 -->
239− <span class="p" data-hl-line="57" data-hl-el="text">
240−Typography </span>
241− <!-- @paragraph line 106 -->
242− <p class="v" data-hl-line="106" data-hl-el="paragraph">
243−A quick brown fox jumps over <span class="w">
244−the lazy </span> <span class="x">
245−dog </span>. Press <kbd class="y">
246−Ctrl+K </kbd> to search. <mark class="z">
247−Highlighted </mark> uses mark. <abbr title="HyperText Markup Language + language">
248−htmlang </abbr> is an abbreviation. </p>
249− <!-- @blockquote line 114 -->
250− <blockquote class="aa" data-hl-line="114" data-hl-el="blockquote">
251− <span>Layout is code. Style is code. Everything should compose.</span>
252− <!-- @cite line 119 -->
253− <cite data-hl-line="119" data-hl-el="cite">
254−— Anonymous </cite>
255− </blockquote>
256− <!-- @pre line 121 -->
257− <pre class="ab" data-hl-line="121" data-hl-el="pre">
258− @fn button $label
1+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>htmlang Demo</title><meta name="theme-color" content="#3b82f6"><link rel="preload" href="https://picsum.photos/72" as="image"><link rel="preload" href="https://picsum.photos/640/200" as="image"><link rel="dns-prefetch" href="//github.com"><link rel="dns-prefetch" href="//picsum.photos"><meta name="description" content="A one-page tour of htmlang."><meta property="og:title" content="htmlang"><meta property="og:type" content="website"><style>*,*::before,*::after{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,sans-serif}img{display:block}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid currentColor;outline-offset:2px}:root{--primary:#3b82f6;--ink:#0f172a;--muted:#64748b;--subtle:#f8fafc;}@layer htmlang{.a{display:flex;flex-direction:column;max-width:960px;margin-left:auto;margin-right:auto;padding:32px;gap:24px;background:white;}.b{display:flex;flex-direction:column;gap:8px;}.c{display:flex;flex-direction:column;gap:6px;color:#64748b;font-size:13px;}.d{display:flex;flex-direction:row;gap:6px;align-items:center;}.e{color:#64748b;}.f{color:#0f172a;}.g{display:flex;flex-direction:row;gap:16px;align-items:center;}.h{display:flex;flex-direction:column;flex:1;min-width:0;gap:6px;}.i{font-weight:bold;font-size:40px;color:#0f172a;}.j{margin:0;line-height:1.6;color:#64748b;}.k{font-weight:bold;color:#3b82f6;}.l{color:#3b82f6;text-decoration:underline;}.m{width:72px;height:72px;border-radius:36px;}.n{border-top:1px solid #e5e7eb;}.o{display:flex;flex-direction:column;gap:12px;padding-top:8px;padding-bottom:8px;}.p{font-weight:bold;font-size:22px;color:#0f172a;}.q{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;}.r{display:flex;flex-direction:column;padding:16px;background:white;border-radius:8px;border:1px solid #e5e7eb;box-shadow:0 1px 3px rgba(0,0,0,0.05);cursor:pointer;transition:all 0.2s ease;animation:fade-up 0.3s ease;}.r:hover{box-shadow:0 4px 12px rgba(0,0,0,0.08);}.s{display:flex;flex-direction:row;gap:10px;align-items:center;}.t{font-size:20px;color:#3b82f6;}.u{font-weight:bold;font-size:16px;color:#0f172a;}.v{margin:0;line-height:1.7;}.w{font-weight:bold;}.x{font-style:italic;}.y{font-family:ui-monospace,monospace;padding:2px 6px;background:#f1f5f9;border-radius:4px;font-family:monospace;font-size:13px;}.z{background:#fef08a;}.aa{display:flex;flex-direction:column;margin:0;padding-inline-start:16px;border-left:3px solid #3b82f6;color:#64748b;font-style:italic;}.ab{margin:0;white-space:pre;font-family:ui-monospace,monospace;background:#0f172a;color:#e2e8f0;padding:16px;border-radius:8px;font-family:monospace;font-size:13px;overflow-x:auto;}.ac{display:flex;flex-direction:column;gap:6px;}.ad{display:flex;flex-direction:row;gap:10px;align-items:baseline;}.ae{font-weight:bold;min-width:80px;}.af{color:#64748b;font-style:italic;}.ag{display:flex;flex-direction:row;gap:6px;}.ah{display:flex;flex-direction:column;width:18px;height:18px;border-radius:9px;background:#3b82f6;opacity:0.4;}.ai{display:flex;flex-direction:row;gap:4px;}.aj{display:flex;flex-direction:column;width:24px;height:24px;border-radius:4px;background:#3b82f6;color:white;text-align:center;font-size:12px;font-weight:bold;line-height:24;}.ak{font-weight:bold;min-width:64px;}.al{color:#3b82f6;font-weight:bold;}.am{color:#10b981;font-weight:bold;}.an{display:flex;flex-direction:column;padding:12px;border-radius:6px;background:#3b82f6;color:white;}.an::before{content:"→ ";font-weight:bold;}.ao{font-family:ui-monospace,monospace;}.ap{display:flex;flex-direction:column;gap:10px;max-width:420px;}.aq{font-weight:bold;font-size:13px;}.ar{padding:10px;border:1px solid #e5e7eb;border-radius:6px;transition:border 0.15s ease;}.ar:focus{border:1px solid #3b82f6;}.ar:valid{border:1px solid #10b981;}.ar:invalid{border:1px solid #ef4444;}.as{padding:10px;border:1px solid #e5e7eb;border-radius:6px;}.at{display:flex;flex-direction:row;gap:8px;}.au{padding:10px 16px;background:#3b82f6;color:white;font-weight:bold;border-radius:6px;border:0 solid currentColor;transition:background 0.15s ease;cursor:pointer;}.au:hover{background:#3575dd;}.au:active{background:#2f68c5;}.av{padding:10px 16px;background:white;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;}.aw{display:flex;flex-direction:row;gap:16px;flex-wrap:wrap;}.ax{display:flex;flex-direction:column;flex:1;min-width:0;gap:8px;min-width:240px;}.ay{margin:0;padding-left:0;list-style:none;gap:4px;list-style:disc;padding-inline-start:20px;}.az{display:flex;flex-direction:column;display:list-item;}.ba{margin:0;padding-left:0;list-style:none;list-style:decimal;padding-inline-start:20px;}.bb{text-align:left;padding:8px;}.bc{text-align:right;padding:8px;}.bd{padding:8px;border-top:1px solid #e5e7eb;}.be{padding:8px;border-top:1px solid #e5e7eb;text-align:right;}.bf{display:flex;flex-direction:column;margin:0;gap:6px;}.bg{border-radius:8px;}.bh{color:#64748b;font-size:13px;text-align:center;}.bi{display:flex;flex-direction:column;padding:12px;border:1px solid #e5e7eb;border-radius:6px;background:#f8fafc;}.bj{font-weight:bold;cursor:pointer;}.bk{margin:0;color:#64748b;line-height:1.6;padding-block-start:6px;}.bl{display:flex;flex-direction:column;display:grid;grid-template-columns:1fr 2fr;grid-template-areas:"h h" "s m" "f f";gap:8px;padding:8px;background:#f8fafc;border-radius:8px;}.bm{display:flex;flex-direction:column;grid-area:h;padding:10px;background:#3b82f6;color:white;border-radius:6px;text-align:center;}.bn{display:flex;flex-direction:column;grid-area:s;padding:10px;background:white;border-radius:6px;border:1px solid #e5e7eb;}.bo{display:flex;flex-direction:column;grid-area:m;padding:10px;background:white;border-radius:6px;border:1px solid #e5e7eb;}.bp{display:flex;flex-direction:column;grid-area:f;padding:10px;background:#0f172a;color:white;border-radius:6px;text-align:center;}.bq{gap:4px;font-style:normal;}.br{color:#3b82f6;}.bs{font-size:13px;color:#64748b;}.bt{font-size:13px;}.bu{display:flex;flex-direction:column;padding-block-start:24px;margin-block-start:24px;border-top:1px solid #e5e7eb;gap:8px;}.bv{display:flex;flex-direction:row;gap:8px;align-items:center;}.bw{display:flex;flex-direction:column;padding:12px 20px;background:#3b82f6;color:white;font-weight:bold;border-radius:8px;transition:all 0.15s ease;cursor:pointer;}.bw:hover{background:#3575dd;}.bw:active{background:#2f68c5;}.bx{color:#3b82f6;}.bx:hover{text-decoration:underline;}.bx:visited{color:#8b5cf6;}.by{display:flex;flex-direction:column;flex:1;min-width:0;}.bz{color:#64748b;font-size:13px;}@media(prefers-color-scheme:dark){.a{background:#0b1220;color:#e2e8f0;}.i{color:white;}}@media print{.bu{display:none;}}}@keyframes fade-up{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}</style></head><body><noscript><style>.needs-js{display:none}</style></noscript><div class="a"><header class="b"><nav class="c"><div class="d"><a href="/" class="e">Home</a><span>/</span><a href="/demos" class="e">Demos</a><span>/</span><span class="f">htmlang</span></div></nav><div class="g"><div class="h"><span class="i">Welcome to htmlang</span><p class="j">A minimalist layout language that compiles to <span class="k">static HTML</span> — no JS, no build step. Visit the <a href="https://github.com" rel="noopener noreferrer" target="_blank" class="l">repo</a> for more.</p></div><img src="https://picsum.photos/72" class="m" alt=""Avatar"" fetchpriority="high"></div></header><hr class="n"><section class="o"><span class="p">Features</span><div class="q"><article class="r"><div class="s"><span class="t">✦</span><span class="u">Simple</span></div><span>Write layouts without CSS classes.</span></article><article class="r"><div class="s"><span class="t">⚡</span><span class="u">Fast</span></div><span>Compiles to a single self-contained HTML file.</span></article><article class="r"><div class="s"><span class="t">○</span><span class="u">Minimal</span></div><span>Zero runtime JavaScript by default.</span></article><article class="r"><div class="s"><span class="t">◆</span><span class="u">Typed</span></div><span>LSP with diagnostics and go-to-definition.</span></article></div></section><section class="o"><span class="p">Typography</span><p class="v">A quick brown fox jumps over <span class="w">the lazy</span> <span class="x">dog</span>. Press <kbd class="y">Ctrl+K</kbd> to search. <mark class="z">Highlighted</mark> uses mark. <abbr title="HyperText Markup Language + language">htmlang</abbr> is an abbreviation.</p><blockquote class="aa"><span>Layout is code. Style is code. Everything should compose.</span><cite>— Anonymous</cite></blockquote><pre class="ab">@fn button $label
2592 @el [padding 12, background blue]
260− @text $label
261− </pre>
262− </section>
263− <!-- @section line 56 -->
264− <section class="o" data-hl-line="56" data-hl-el="section">
265− <!-- @text line 57 -->
266− <span class="p" data-hl-line="57" data-hl-el="text">
267−Control flow </span>
268− <!-- @column line 134 -->
269− <div class="ac" data-hl-line="134" data-hl-el="column">
270− <!-- @row line 136 -->
271− <div class="ad" data-hl-line="136" data-hl-el="row">
272− <!-- @text line 137 -->
273− <span class="ae" data-hl-line="137" data-hl-el="text">
274−Alice </span>
275− <!-- @text line 138 -->
276− <span class="e" data-hl-line="138" data-hl-el="text">
277−Engineer </span>
278− </div>
279− <!-- @row line 136 -->
280− <div class="ad" data-hl-line="136" data-hl-el="row">
281− <!-- @text line 137 -->
282− <span class="ae" data-hl-line="137" data-hl-el="text">
283−Bob </span>
284− <!-- @text line 138 -->
285− <span class="e" data-hl-line="138" data-hl-el="text">
286−Designer </span>
287− </div>
288− <!-- @row line 136 -->
289− <div class="ad" data-hl-line="136" data-hl-el="row">
290− <!-- @text line 137 -->
291− <span class="ae" data-hl-line="137" data-hl-el="text">
292−Carol </span>
293− <!-- @text line 138 -->
294− <span class="e" data-hl-line="138" data-hl-el="text">
295−PM </span>
296− </div>
297− </div>
298− <!-- @text line 145 -->
299− <span class="af" data-state="" data-hl-line="145" data-hl-el="text">
300−(Nothing — @each ... @else fallback) </span>
301− <!-- @row line 148 -->
302− <div class="ag" data-hl-line="148" data-hl-el="row">
303− <!-- @el line 150 -->
304− <div class="ah" data-hl-line="150" data-hl-el="el">
305− </div>
306− <!-- @el line 150 -->
307− <div class="ah" data-hl-line="150" data-hl-el="el">
308− </div>
309− <!-- @el line 150 -->
310− <div class="ah" data-hl-line="150" data-hl-el="el">
311− </div>
312− <!-- @el line 150 -->
313− <div class="ah" data-hl-line="150" data-hl-el="el">
314− </div>
315− <!-- @el line 150 -->
316− <div class="ah" data-hl-line="150" data-hl-el="el">
317− </div>
318− <!-- @el line 150 -->
319− <div class="ah" data-hl-line="150" data-hl-el="el">
320− </div>
321− </div>
322− <!-- @row line 153 -->
323− <div class="ai" data-hl-line="153" data-hl-el="row">
324− <!-- @el line 155 -->
325− <div class="aj" data-hl-line="155" data-hl-el="el">
326− <span>1</span>
327− </div>
328− <!-- @el line 155 -->
329− <div class="aj" data-hl-line="155" data-hl-el="el">
330− <span>2</span>
331− </div>
332− <!-- @el line 155 -->
333− <div class="aj" data-hl-line="155" data-hl-el="el">
334− <span>3</span>
335− </div>
336− <!-- @el line 155 -->
337− <div class="aj" data-hl-line="155" data-hl-el="el">
338− <span>4</span>
339− </div>
340− <!-- @el line 155 -->
341− <div class="aj" data-hl-line="155" data-hl-el="el">
342− <span>5</span>
343− </div>
344− <!-- @el line 155 -->
345− <div class="aj" data-hl-line="155" data-hl-el="el">
346− <span>6</span>
347− </div>
348− </div>
349− <!-- @row line 165 -->
350− <div class="d" data-hl-line="165" data-hl-el="row">
351− <!-- @text line 166 -->
352− <span class="ak" data-hl-line="166" data-hl-el="text">
353−Count: </span>
354− <!-- @text line 172 -->
355− <span class="al" data-hl-line="172" data-hl-el="text">
356−3 items </span>
357− </div>
358− <!-- @text line 180 -->
359− <span class="am" data-hl-line="180" data-hl-el="text">
360−✓ Ready </span>
361− <!-- @el line 188 -->
362− <div class="an" data-hl-line="188" data-hl-el="el">
363− <span>Conditional styling via <code class="ao">
364−if(cond, a, b) </code>.</span>
365− </div>
366− </section>
367− <!-- @section line 56 -->
368− <section class="o" data-hl-line="56" data-hl-el="section">
369− <!-- @text line 57 -->
370− <span class="p" data-hl-line="57" data-hl-el="text">
371−Forms </span>
372− <!-- @form line 198 -->
373− <form action="/subscribe" class="ap" data-hl-line="198" data-hl-el="form">
374− <!-- @label line 199 -->
375− <label class="aq" for="email" data-hl-line="199" data-hl-el="label">
376−Email </label>
377− <!-- @input line 200 -->
378− <input class="ar" id="email" type="email" name="email" placeholder="you@example.com" required data-hl-line="200" data-hl-el="input">
379− <!-- @label line 209 -->
380− <label class="aq" for="role" data-hl-line="209" data-hl-el="label">
381−Role </label>
382− <!-- @select line 210 -->
383− <select class="as" id="role" name="role" data-hl-line="210" data-hl-el="select">
384− <!-- @option line 211 -->
385− <option value="dev" data-hl-line="211" data-hl-el="option">
386−Developer </option>
387− <!-- @option line 212 -->
388− <option value="designer" data-hl-line="212" data-hl-el="option">
389−Designer </option>
390− <!-- @option line 213 -->
391− <option value="other" data-hl-line="213" data-hl-el="option">
392−Other </option>
393− </select>
394− <!-- @label line 214 -->
395− <label class="aq" for="msg" data-hl-line="214" data-hl-el="label">
396−Message </label>
397− <!-- @textarea line 215 -->
398− <textarea class="as" id="msg" name="msg" rows="3" data-hl-line="215" data-hl-el="textarea">
399− </textarea>
400− <!-- @row line 219 -->
401− <div class="at" data-hl-line="219" data-hl-el="row">
402− <!-- @button line 220 -->
403− <button class="au" type="submit" data-hl-line="220" data-hl-el="button">
404−Subscribe </button>
405− <!-- @button line 229 -->
406− <button class="av" type="reset" data-hl-line="229" data-hl-el="button">
407−Reset </button>
408− </div>
409− <!-- @ line 234 -->
410− <progress value="60" max="100" data-hl-line="234" data-hl-el="">
411− </progress>
412− </form>
413− </section>
414− <!-- @section line 56 -->
415− <section class="o" data-hl-line="56" data-hl-el="section">
416− <!-- @text line 57 -->
417− <span class="p" data-hl-line="57" data-hl-el="text">
418−Data </span>
419− <!-- @row line 238 -->
420− <div class="aw" data-hl-line="238" data-hl-el="row">
421− <!-- @column line 239 -->
422− <div class="ax" data-hl-line="239" data-hl-el="column">
423− <!-- @text line 240 -->
424− <span class="w" data-hl-line="240" data-hl-el="text">
425−Unordered </span>
426− <!-- @list line 241 -->
427− <ul class="ay" data-hl-line="241" data-hl-el="list">
428− <!-- @item line 242 -->
429− <li class="az" data-hl-line="242" data-hl-el="item">
430−Composable with @each </li>
431− <!-- @item line 243 -->
432− <li class="az" data-hl-line="243" data-hl-el="item">
433−Indent to nest children </li>
434− <!-- @item line 244 -->
435− <li class="az" data-hl-line="244" data-hl-el="item">
436−Bold list items work too </li>
437− </ul>
438− <!-- @text line 245 -->
439− <span class="w" data-hl-line="245" data-hl-el="text">
440−Ordered </span>
441− <!-- @list line 246 -->
442− <ol class="ba" data-hl-line="246" data-hl-el="list">
443− <!-- @item line 247 -->
444− <li class="az" data-hl-line="247" data-hl-el="item">
445−First </li>
446− <!-- @item line 248 -->
447− <li class="az" data-hl-line="248" data-hl-el="item">
448−Second </li>
449− <!-- @item line 249 -->
450− <li class="az" data-hl-line="249" data-hl-el="item">
451−Third </li>
452− </ol>
453− </div>
454− <!-- @column line 251 -->
455− <div class="ax" data-hl-line="251" data-hl-el="column">
456− <!-- @text line 252 -->
457− <span class="w" data-hl-line="252" data-hl-el="text">
458−Table </span>
459− <!-- @table line 253 -->
460− <table data-hl-line="253" data-hl-el="table">
461− <!-- @thead line 254 -->
462− <thead data-hl-line="254" data-hl-el="thead">
463− <!-- @tr line 255 -->
464− <tr data-hl-line="255" data-hl-el="tr">
465− <!-- @th line 256 -->
466− <th class="bb" data-hl-line="256" data-hl-el="th">
467−Item </th>
468− <!-- @th line 257 -->
469− <th class="bc" data-hl-line="257" data-hl-el="th">
470−Qty </th>
471− </tr>
472− </thead>
473− <!-- @tbody line 258 -->
474− <tbody data-hl-line="258" data-hl-el="tbody">
475− <!-- @tr line 259 -->
476− <tr data-hl-line="259" data-hl-el="tr">
477− <!-- @td line 260 -->
478− <td class="bd" data-hl-line="260" data-hl-el="td">
479−Widgets </td>
480− <!-- @td line 261 -->
481− <td class="be" data-hl-line="261" data-hl-el="td">
482−12 </td>
483− </tr>
484− <!-- @tr line 262 -->
485− <tr data-hl-line="262" data-hl-el="tr">
486− <!-- @td line 263 -->
487− <td class="bd" data-hl-line="263" data-hl-el="td">
488−Gadgets </td>
489− <!-- @td line 264 -->
490− <td class="be" data-hl-line="264" data-hl-el="td">
491−7 </td>
492− </tr>
493− </tbody>
494− </table>
495− </div>
496− </div>
497− <!-- @figure line 266 -->
498− <figure class="bf" data-hl-line="266" data-hl-el="figure">
499− <!-- @image line 267 -->
500− <img src="https://picsum.photos/640/200" class="bg" alt=""A random placeholder"" data-hl-line="267" data-hl-el="image" fetchpriority="high">
501− <!-- @figcaption line 268 -->
502− <figcaption class="bh" data-hl-line="268" data-hl-el="figcaption">
503−A placeholder image. </figcaption>
504− </figure>
505− </section>
506− <!-- @section line 56 -->
507− <section class="o" data-hl-line="56" data-hl-el="section">
508− <!-- @text line 57 -->
509− <span class="p" data-hl-line="57" data-hl-el="text">
510−Disclosure + grid areas </span>
511− <!-- @details line 273 -->
512− <details class="bi" data-hl-line="273" data-hl-el="details">
513− <!-- @summary line 274 -->
514− <summary class="bj" data-hl-line="274" data-hl-el="summary">
515−What is htmlang? </summary>
516− <!-- @paragraph line 275 -->
517− <p class="bk" data-hl-line="275" data-hl-el="paragraph">
518−htmlang is a layout-first language that compiles to a single, self-contained HTML file with embedded CSS. </p>
519− </details>
520− <!-- @el line 280 -->
521− <div class="bl" data-hl-line="280" data-hl-el="el">
522− <!-- @el line 287 -->
523− <div class="bm" data-hl-line="287" data-hl-el="el">
524− <span>Header</span>
525− </div>
526− <!-- @el line 289 -->
527− <div class="bn" data-hl-line="289" data-hl-el="el">
528− <span>Sidebar</span>
529− </div>
530− <!-- @el line 291 -->
531− <div class="bo" data-hl-line="291" data-hl-el="el">
532− <span>Main</span>
533− </div>
534− <!-- @el line 293 -->
535− <div class="bp" data-hl-line="293" data-hl-el="el">
536− <span>Footer</span>
537− </div>
538− </div>
539− </section>
540− <!-- @section line 56 -->
541− <section class="o" data-hl-line="56" data-hl-el="section">
542− <!-- @text line 57 -->
543− <span class="p" data-hl-line="57" data-hl-el="text">
544−Misc </span>
545− <!-- @address line 298 -->
546− <address class="bq" data-hl-line="298" data-hl-el="address">
547− <!-- @text line 299 -->
548− <span class="w" data-hl-line="299" data-hl-el="text">
549−htmlang HQ </span>
550− <!-- @text line 300 -->
551− <span data-hl-line="300" data-hl-el="text">
552−123 Flexbox Avenue </span>
553− <!-- @link line 301 -->
554− <a href="mailto:hi@htmlang.dev" class="br" data-hl-line="301" data-hl-el="link">
555−hi@htmlang.dev </a>
556− </address>
557− <!-- @row line 302 -->
558− <div class="s" data-hl-line="302" data-hl-el="row">
559− <!-- @text line 303 -->
560− <span class="bs" data-hl-line="303" data-hl-el="text">
561−Published </span>
562− <!-- @time line 304 -->
563− <time datetime="2026-04-16" class="bt" datetime="2026-04-16" data-hl-line="304" data-hl-el="time">
564−April 16 2026 </time>
565− </div>
566− <!-- @row line 305 -->
567− <div class="s" data-hl-line="305" data-hl-el="row">
568− <!-- @text line 306 -->
569− <span class="bs" data-hl-line="306" data-hl-el="text">
570−Confidence </span>
571− <!-- @ line 307 -->
572− <meter value="8" min="0" max="10" low="3" high="7" data-hl-line="307" data-hl-el="">
573− </meter>
574− </div>
575− </section>
576− <!-- @footer line 310 -->
577− <footer class="bu" data-hl-line="310" data-hl-el="footer">
578− <!-- @row line 315 -->
579− <div class="bv" data-hl-line="315" data-hl-el="row">
580− <!-- @el line 316 -->
581− <div class="bw" data-hl-line="316" data-hl-el="el">
582− <!-- @link line 316 -->
583− <a href="https://github.com" rel="noopener noreferrer" target="_blank" data-hl-line="316" data-hl-el="link">
584−Get Started </a>
585− </div>
586− <!-- @link line 324 -->
587− <a href="https://github.com" rel="noopener noreferrer" target="_blank" class="bx" data-hl-line="324" data-hl-el="link">
588−Browse source </a>
589− <!-- @el line 329 -->
590− <div class="by" data-hl-line="329" data-hl-el="el">
591− </div>
592− <!-- @text line 330 -->
593− <span class="bz" data-hl-line="330" data-hl-el="text">
594−© 2026 htmlang </span>
595− </div>
596− </footer>
597−</div>
598−</body>
599−</html>
3+ @text $label</pre></section><section class="o"><span class="p">Control flow</span><div class="ac"><div class="ad"><span class="ae">Alice</span><span class="e">Engineer</span></div><div class="ad"><span class="ae">Bob</span><span class="e">Designer</span></div><div class="ad"><span class="ae">Carol</span><span class="e">PM</span></div></div><span class="af" data-state="">(Nothing — @each ... @else fallback)</span><div class="ag"><div class="ah"></div><div class="ah"></div><div class="ah"></div><div class="ah"></div><div class="ah"></div><div class="ah"></div></div><div class="ai"><div class="aj"><span>1</span></div><div class="aj"><span>2</span></div><div class="aj"><span>3</span></div><div class="aj"><span>4</span></div><div class="aj"><span>5</span></div><div class="aj"><span>6</span></div></div><div class="d"><span class="ak">Count:</span><span class="al">3 items</span></div><span class="am">✓ Ready</span><div class="an"><span>Conditional styling via <code class="ao">if(cond, a, b)</code>.</span></div></section><section class="o"><span class="p">Forms</span><form action="/subscribe" class="ap"><label class="aq" for="email">Email</label><input class="ar" id="email" type="email" name="email" placeholder="you@example.com" required><label class="aq" for="role">Role</label><select class="as" id="role" name="role"><option value="dev">Developer</option><option value="designer">Designer</option><option value="other">Other</option></select><label class="aq" for="msg">Message</label><textarea class="as" id="msg" name="msg" rows="3"></textarea><div class="at"><button class="au" type="submit">Subscribe</button><button class="av" type="reset">Reset</button></div><progress value="60" max="100"></progress></form></section><section class="o"><span class="p">Data</span><div class="aw"><div class="ax"><span class="w">Unordered</span><ul class="ay"><li class="az">Composable with @each</li><li class="az">Indent to nest children</li><li class="az">Bold list items work too</li></ul><span class="w">Ordered</span><ol class="ba"><li class="az">First</li><li class="az">Second</li><li class="az">Third</li></ol></div><div class="ax"><span class="w">Table</span><table><thead><tr><th class="bb">Item</th><th class="bc">Qty</th></tr></thead><tbody><tr><td class="bd">Widgets</td><td class="be">12</td></tr><tr><td class="bd">Gadgets</td><td class="be">7</td></tr></tbody></table></div></div><figure class="bf"><img src="https://picsum.photos/640/200" class="bg" alt=""A random placeholder"" fetchpriority="high"><figcaption class="bh">A placeholder image.</figcaption></figure></section><section class="o"><span class="p">Disclosure + grid areas</span><details class="bi"><summary class="bj">What is htmlang?</summary><p class="bk">htmlang is a layout-first language that compiles to a single, self-contained HTML file with embedded CSS.</p></details><div class="bl"><div class="bm"><span>Header</span></div><div class="bn"><span>Sidebar</span></div><div class="bo"><span>Main</span></div><div class="bp"><span>Footer</span></div></div></section><section class="o"><span class="p">Misc</span><address class="bq"><span class="w">htmlang HQ</span><span>123 Flexbox Avenue</span><a href="mailto:hi@htmlang.dev" class="br">hi@htmlang.dev</a></address><div class="s"><span class="bs">Published</span><time datetime="2026-04-16" class="bt" datetime="2026-04-16">April 16 2026</time></div><div class="s"><span class="bs">Confidence</span><meter value="8" min="0" max="10" low="3" high="7"></meter></div></section><footer class="bu"><div class="bv"><div class="bw"><a href="https://github.com" rel="noopener noreferrer" target="_blank">Get Started</a></div><a href="https://github.com" rel="noopener noreferrer" target="_blank" class="bx">Browse source</a><div class="by"></div><span class="bz">© 2026 htmlang</span></div></footer></div></body></html>