@@ -1,3 +1,599 @@
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;}.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
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
2259 @el [padding 12, background blue]
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>
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>