5<meta name="viewport" content="width=device-width, initial-scale=1">
6<title>htmlang tour</title>
7<meta name="description" content="A one-page tour of htmlang.">
8<meta property="og:title" content="htmlang tour">
10@layer hl-reset, hl-kind, hl-inside, htmlang;
12*, *::before, *::after { box-sizing: border-box; }
13body { margin: 0; font-family: system-ui, -apple-system, sans-serif; display: flex; flex-direction: column; min-height: 100dvh; }
14:where([class^="hl-"],[class*=" hl-"]):where([hidden]:not([hidden="until-found"]),dialog:not([open]):not(:popover-open),[popover]:not(:popover-open):not(dialog[open])) { display: none !important; }
15:where([class^="hl-"],[class*=" hl-"]):where(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
27 :where(.hl-b,.hl-c,.hl-i,.hl-o,.hl-p,.hl-s,.hl-t,.hl-u,.hl-w,.hl-x,.hl-y,.hl-aa,.hl-ab,.hl-ae,.hl-ak,.hl-ao,.hl-ap,.hl-aq,.hl-ar,.hl-as,.hl-au,.hl-av,.hl-ay,.hl-az,.hl-a0,.hl-a1,.hl-a2,.hl-a3,.hl-a5,.hl-a9,.hl-bb,.hl-bi,.hl-bs,.hl-bw,.hl-bx,.hl-b1) {display:flex;flex-direction:column;}
28 :where(.hl-e,.hl-f,.hl-l,.hl-m,.hl-ah,.hl-bd,.hl-bz) {margin:0;}
29 :where(.hl-h,.hl-aj,.hl-a4) {font-family:ui-monospace,monospace;}
30 :where(.hl-j,.hl-n,.hl-q,.hl-v,.hl-bc,.hl-bg,.hl-bh,.hl-bo,.hl-br,.hl-b2) {display:flex;flex-direction:row;}
31 :where(.hl-z) {display:grid;}
32 :where(.hl-ac) {position:relative;isolation:isolate;display:flex;flex-direction:column;}
33 :where(.hl-ad) {display:flex;flex-direction:column;position:absolute;inset:0;z-index:-1;}
34 :where(.hl-af) {display:flex;flex-direction:column;position:absolute;inset:0;}
35 :where(.hl-al,.hl-b6) {text-decoration:none;color:inherit;}
36 :where(.hl-an,.hl-b3) {display:flex;flex-direction:column;margin:0;}
37 :where(.hl-at) {display:flex;flex-direction:column;margin:0;padding-left:0;}
38 :where(.hl-be) {text-decoration:none;}
39 :where(.hl-b4) {display:block;}
40 :where(.hl-b5) {display:flex;}
44 :scope td,:scope th {padding:8px;}
47& { animation: rise 0.3s ease; }
48.dot { color: var(--brand); }
52 .hl-a {color:var(--ink);background:var(--page);line-height:1.5;}
53 .hl-b {width:100%;max-width:960px;padding:24px;margin-left:auto;margin-right:auto;}
54 .hl-c {gap:8px;padding-block:24px;animation:rise 0.4s ease;}
55 .hl-d {font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;}
56 .hl-e {font-size:44px;line-height:1.1;letter-spacing:-1px;}
57 .hl-f {font-size:18px;color:var(--muted);max-width:620px;}
58 .hl-g {font-weight:700;color:var(--brand);}
59 .hl-i {gap:16px;padding-block:24px;border-top:1px solid var(--line);}
60 .hl-j {gap:8px;align-items:baseline;}
61 .hl-k {color:var(--brand);font-weight:700;}
62 .hl-l {font-size:26px;}
63 .hl-n {gap:8px;flex-wrap:wrap;}
64 .hl-o {padding:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;flex:1;min-width:0;}
65 .hl-p {padding:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;width:160px;}
66 .hl-q {padding:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;gap:8px;align-items:center;}
67 .hl-r {font-weight:700;}
69 .hl-t,.hl-bg {gap:8px;}
70 .hl-u {padding:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;width:100%;}
71 .hl-v {gap:8px;height:120px;}
72 .hl-w {padding:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;margin-bottom:auto;}
73 .hl-x {padding:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;margin-top:auto;margin-bottom:auto;}
74 .hl-y {padding:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;margin-top:auto;}
75 .hl-z {grid-template-columns:repeat(4,1fr);gap:8px;}
76 .hl-aa {padding:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;text-align:center;grid-column:span 2;}
77 .hl-ab {padding:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;text-align:center;}
78 .hl-ac {padding:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;height:120px;overflow:hidden;}
79 .hl-ae {background:linear-gradient(135deg, #dbeafe, #fae8ff);flex:1;min-height:0;justify-content:flex-end;padding:8px;}
80 .hl-ag {padding:8px;font-size:12px;color:var(--muted);margin-left:auto;margin-top:auto;}
81 .hl-ah {max-width:640px;}
82 .hl-ai {color:var(--brand);text-decoration:underline;}
83 .hl-aj {padding:1px 6px;border:1px solid var(--line);border-radius:4px;}
84 .hl-ak {padding:12px 20px;background:var(--brand);border-radius:8px;margin-right:auto;}
85 .hl-am {color:white;font-weight:700;}
86 .hl-an {padding-inline-start:16px;border-left:3px solid var(--brand);color:var(--muted);font-style:italic;}
87 .hl-ao {padding:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.08);transform:rotate(-2deg);}
88 .hl-ap {padding:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;transition:all 0.15s ease;cursor:pointer;}
89 .hl-aq,.hl-as,.hl-av,.hl-bx {padding:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;}
90 .hl-ar {padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:8px;--tone:#a855f7;color:var(--tone);border-color:var(--tone);}
91 .hl-at {padding:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;gap:4px;list-style:disc;padding-inline-start:36px;}
92 .hl-au {border-radius:4px;}
93 .hl-aw {cursor:pointer;}
94 .hl-ax {margin-inline-end:8px;}
95 .hl-ay {padding:16px;border-radius:8px;color:white;background:color-mix(in srgb, var(--brand), black 0%);}
96 .hl-az {padding:16px;border-radius:8px;color:white;background:color-mix(in srgb, var(--brand), black 10%);}
97 .hl-a0 {padding:16px;border-radius:8px;color:white;background:color-mix(in srgb, var(--brand), black 20%);}
98 .hl-a1 {padding:16px;border-radius:8px;color:white;background:color-mix(in srgb, var(--brand), black 30%);}
99 .hl-a2 {padding:16px;border-radius:8px;background:rgb(from var(--brand) r g b / 0.2);}
100 .hl-a3 {padding:16px;border-radius:8px;background:color-mix(in srgb, var(--brand), #f43f5e 50%);}
101 .hl-a4 {padding:1px 6px;border:1px solid var(--line);border-radius:4px;font-size:13px;}
102 .hl-a5 {padding:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;gap:4px;flex:1 1 160px;}
103 .hl-a6 {font-size:32px;font-weight:800;color:var(--brand);}
104 .hl-a7 {color:var(--muted);}
105 .hl-a8 {font-size:32px;font-weight:800;color:#10b981;}
106 .hl-a9 {padding:16px;color:var(--ink);border:1px solid var(--line);border-radius:8px;gap:4px;flex:1 1 160px;background:var(--subtle);}
107 .hl-ba {font-size:32px;font-weight:800;color:#a855f7;}
108 .hl-bb {padding:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;gap:8px;}
109 .hl-bc {align-items:center;}
110 .hl-bd {font-size:18px;}
111 .hl-be {color:var(--brand);font-size:14px;}
112 .hl-bf {font-size:13px;color:var(--muted);}
113 .hl-bh {gap:6px;padding:2px 10px;border-radius:999px;background:var(--subtle);font-size:13px;}
114 .hl-bi {padding:8px 12px;border-radius:8px;background:var(--subtle);}
115 .hl-bj {border-collapse:collapse;width:100%;}
116 .hl-bk {text-align:left;color:var(--muted);font-size:13px;}
117 .hl-bl {border-top:1px solid var(--line);}
118 .hl-bm {font-weight:600;}
119 .hl-bn {color:#10b981;}
120 .hl-bo,.hl-b3 {gap:4px;}
121 .hl-bp {color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:4px 10px;}
122 .hl-bq {color:var(--muted);font-style:italic;}
123 .hl-br {gap:24px;flex-wrap:wrap;align-items:flex-start;}
124 .hl-bs {padding:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;gap:8px;flex:1 1 280px;}
125 .hl-bt {padding:10px;border:1px solid var(--line);border-radius:6px;}
126 .hl-bu {padding:10px;border-radius:6px;}
127 .hl-bv {padding:10px;border:0;border-radius:6px;background:var(--brand);color:white;font-weight:700;cursor:pointer;}
128 .hl-bw {gap:8px;flex:1 1 280px;}
129 .hl-by {font-weight:600;cursor:pointer;}
130 .hl-bz {color:var(--muted);padding-block-start:8px;}
131 .hl-b0 {padding:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;cursor:pointer;}
132 .hl-b1 {padding:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;max-width:320px;}
133 .hl-b2 {gap:8px;align-items:center;font-size:14px;color:var(--muted);}
134 .hl-b4 {border-radius:8px;width:100%;}
135 .hl-b5 {flex-direction:row;gap:8px;padding-block:24px;color:var(--muted);font-size:14px;}
136 .hl-au:first-child {font-weight:700;}
137 .hl-au:nth-child(odd) {background:var(--subtle);}
138 .hl-bt:invalid {border-color:#ef4444;}
139 .hl-av:has(input:checked) {border-color:var(--brand);background:#eff6ff;}
140 .hl-ap:hover {background:#eff6ff;border-color:var(--brand);}
141 .hl-bv:hover {background:color-mix(in srgb, var(--brand), black 10%);}
142 .hl-b6:hover {color:var(--brand);}
143 .hl-bt:focus {outline:2px solid var(--brand);}
144 .hl-as::before {content:"→ ";color:var(--brand);}
145 :where(.hl-at)>* {display:list-item;padding:4px 8px;}
146 :where(.hl-at)>*::marker {color:var(--brand);}
147@media (min-width: 768px) {
148 :where(.hl-t)>.hl-u {width:auto;flex:1;min-width:0;}
149 .hl-t {flex-direction:row;}
150 .hl-aq {background:#ecfdf5;border-color:#10b981;}
152@media (prefers-color-scheme: dark) {
153 .hl-a {--ink:#e5e7eb;--muted:#94a3b8;--line:#1f2937;--subtle:#1e293b;--page:#030712;--surface:#111827;}
154 .hl-ae {background:linear-gradient(135deg, #1e3a8a, #581c87);}
155 .hl-aq {background:#064e3b;}
156 .hl-aq:hover {background:#065f46;}
159 .hl-b5 {display:none;}
163 from { opacity: 0; transform: translateY(6px); }
164 to { opacity: 1; transform: none; }
170<div class="hl-b" data-hl-line="62" data-hl-el="el">
171 <!-- @header line 63 -->
172 <header class="hl-c" data-hl-line="63" data-hl-el="header">
173 <!-- @text line 64 -->
174 <span class="hl-d" data-hl-line="64" data-hl-el="text">
175A one-page tour </span>
177 <h1 class="hl-e" data-hl-line="65" data-hl-el="h1">
178Welcome to htmlang </h1>
179 <!-- @paragraph line 66 -->
180 <p class="hl-f" data-hl-line="66" data-hl-el="paragraph">
181A small layout language that compiles to <!-- @text line 68 -->
182 <span class="hl-g" data-hl-line="68" data-hl-el="text">
183one static HTML file </span>. Structure starts with <!-- @code line 69 -->
184 <code class="hl-h" data-hl-line="69" data-hl-el="code">
185@ </code>, everything else is content. </p>
187 <!-- @section line 72 -->
188 <section class="hl-i" data-hl-line="72" data-hl-el="section">
189 <!-- @row line 72 -->
190 <div class="hl-j" data-hl-line="72" data-hl-el="row">
191 <!-- @text line 72 -->
192 <span class="hl-k" data-hl-line="72" data-hl-el="text">
195 <h2 class="hl-l" data-hl-line="72" data-hl-el="h2">
198 <!-- @paragraph line 73 -->
199 <p class="hl-m" data-hl-line="73" data-hl-el="paragraph">
200 <!-- @code line 74 -->
201 <code class="hl-h" data-hl-line="74" data-hl-el="code">
202@el </code> stacks its children in a column and <!-- @code line 74 -->
203 <code class="hl-h" data-hl-line="74" data-hl-el="code">
204@row </code> lays them out side by side. <!-- @code line 75 -->
205 <code class="hl-h" data-hl-line="75" data-hl-el="code">
206spacing </code> is the gap between children. <!-- @code line 76 -->
207 <code class="hl-h" data-hl-line="76" data-hl-el="code">
208flex-direction row </code> makes any column a row, also from a width up ( <!-- @code line 77 -->
209 <code class="hl-h" data-hl-line="77" data-hl-el="code">
210md:flex-direction row </code>), and the children's <!-- @code line 78 -->
211 <code class="hl-h" data-hl-line="78" data-hl-el="code">
212width fill </code> follows it. </p>
213 <!-- @row line 79 -->
214 <div class="hl-n" data-hl-line="79" data-hl-el="row">
216 <div class="hl-o" data-hl-line="80" data-hl-el="el">
217 <span>width fill</span>
220 <div class="hl-o" data-hl-line="81" data-hl-el="el">
221 <span>shares the row</span>
224 <div class="hl-p" data-hl-line="82" data-hl-el="el">
225 <span>width 160</span>
228 <!-- @row line 83 -->
229 <div class="hl-q" data-hl-line="83" data-hl-el="row">
230 <!-- @text line 84 -->
231 <span class="hl-r" data-hl-line="84" data-hl-el="text">
234 <div class="hl-s" data-hl-line="85" data-hl-el="el">
236 <!-- @text line 86 -->
237 <span data-hl-line="86" data-hl-el="text">
238@spacer pushes this to the end </span>
241 <div class="hl-t" data-hl-line="87" data-hl-el="el">
243 <div class="hl-u" data-hl-line="88" data-hl-el="el">
244 <span>Stacked on a phone</span>
247 <div class="hl-u" data-hl-line="89" data-hl-el="el">
248 <span>side by side from md up</span>
251 <!-- @row line 90 -->
252 <div class="hl-v" data-hl-line="90" data-hl-el="row">
254 <div class="hl-w" data-hl-line="91" data-hl-el="el">
255 <span>align-top</span>
258 <div class="hl-x" data-hl-line="92" data-hl-el="el">
259 <span>center-y</span>
262 <div class="hl-y" data-hl-line="93" data-hl-el="el">
263 <span>align-bottom</span>
266 <!-- @grid line 94 -->
267 <div class="hl-z" data-hl-line="94" data-hl-el="grid">
269 <div class="hl-aa" data-hl-line="96" data-hl-el="el">
273 <div class="hl-ab" data-hl-line="96" data-hl-el="el">
277 <div class="hl-ab" data-hl-line="96" data-hl-el="el">
281 <div class="hl-ab" data-hl-line="96" data-hl-el="el">
285 <div class="hl-ab" data-hl-line="96" data-hl-el="el">
289 <div class="hl-ab" data-hl-line="96" data-hl-el="el">
294 <div class="hl-ac" data-hl-line="97" data-hl-el="el">
295 <!-- @behind line 98 -->
296 <div class="hl-ad" data-hl-line="98" data-hl-el="behind">
298 <div class="hl-ae" data-hl-line="99" data-hl-el="el">
299 <span>(behind)</span>
302 <!-- @text line 100 -->
303 <span class="hl-r" data-hl-line="100" data-hl-el="text">
304@in-front and @behind layer content </span>
305 <!-- @in-front line 101 -->
306 <div class="hl-af" data-hl-line="101" data-hl-el="in-front">
307 <!-- @text line 102 -->
308 <span class="hl-ag" data-hl-line="102" data-hl-el="text">
309painted on top </span>
313 <!-- @section line 105 -->
314 <section class="hl-i" data-hl-line="105" data-hl-el="section">
315 <!-- @row line 105 -->
316 <div class="hl-j" data-hl-line="105" data-hl-el="row">
317 <!-- @text line 105 -->
318 <span class="hl-k" data-hl-line="105" data-hl-el="text">
320 <!-- @h2 line 105 -->
321 <h2 class="hl-l" data-hl-line="105" data-hl-el="h2">
324 <!-- @paragraph line 106 -->
325 <p class="hl-ah" data-hl-line="106" data-hl-el="paragraph">
326Lines without an <!-- @code line 107 -->
327 <code class="hl-h" data-hl-line="107" data-hl-el="code">
328@ </code> are text. Braces put elements inside a line: <!-- @b line 108 -->
329 <b data-hl-line="108" data-hl-el="b">
330bold </b>, <!-- @i line 108 -->
331 <i data-hl-line="108" data-hl-el="i">
332italic </i>, <!-- @strong line 108 -->
333 <strong data-hl-line="108" data-hl-el="strong">
334important </strong>, H <!-- @sub line 108 -->
335 <sub data-hl-line="108" data-hl-el="sub">
3362 </sub>O, <!-- @mark line 109 -->
337 <mark data-hl-line="109" data-hl-el="mark">
338highlighted </mark>, <!-- @link line 109 -->
339 <a href="https://example.com" class="hl-ai" data-hl-line="109" data-hl-el="link">
340a link </a>, and <!-- @kbd line 110 -->
341 <kbd class="hl-aj" data-hl-line="110" data-hl-el="kbd">
343 <!-- @paragraph line 111 -->
344 <p class="hl-m" data-hl-line="111" data-hl-el="paragraph">
345A backslash escapes: @ at the start of a line, $price, and {braces}. </p>
346 <!-- @el line 114 -->
347 <div class="hl-ak" data-hl-line="114" data-hl-el="el">
348 <!-- @link line 114 -->
349 <a href="/start" class="hl-al" data-hl-line="114" data-hl-el="link">
350 <!-- @text line 115 -->
351 <span class="hl-am" data-hl-line="115" data-hl-el="text">
355 <!-- @blockquote line 116 -->
356 <blockquote class="hl-an" data-hl-line="116" data-hl-el="blockquote">
357 <span>Layout is code. Style is code. Everything should compose.</span>
358 <!-- @cite line 118 -->
359 <cite data-hl-line="118" data-hl-el="cite">
363 <!-- @section line 121 -->
364 <section class="hl-i" data-hl-line="121" data-hl-el="section">
365 <!-- @row line 121 -->
366 <div class="hl-j" data-hl-line="121" data-hl-el="row">
367 <!-- @text line 121 -->
368 <span class="hl-k" data-hl-line="121" data-hl-el="text">
370 <!-- @h2 line 121 -->
371 <h2 class="hl-l" data-hl-line="121" data-hl-el="h2">
374 <!-- @paragraph line 122 -->
375 <p class="hl-m" data-hl-line="122" data-hl-el="paragraph">
376Besides the layout attributes, every attribute is a CSS property with its CSS name and value. A bare number in a length, shadows included, is pixels, and \, keeps a comma in a value. A custom property (--name) is one too: set on an element, it holds for everything inside it. Prefixes stack, and one prefix before a [group] applies to each style in it. A selector prefix is a CSS pseudo-class or pseudo-element under its own name: hover:, first-child:, nth-child(odd):, has(...):, marker:. An element prefix styles every such element inside, at any depth: the table in chapter 6 pads all its cells with <!-- @code line 128 -->
377 <code class="hl-h" data-hl-line="128" data-hl-el="code">
378@td:padding 8 </code>. </p>
379 <!-- @row line 129 -->
380 <div class="hl-n" data-hl-line="129" data-hl-el="row">
381 <!-- @el line 130 -->
382 <div class="hl-ao" data-hl-line="130" data-hl-el="el">
383 <span>Any CSS property</span>
385 <!-- @el line 131 -->
386 <div class="hl-ap" data-hl-line="131" data-hl-el="el">
389 <!-- @el line 132 -->
390 <div class="hl-aq" data-hl-line="132" data-hl-el="el">
391 <span>md:[...] and dark:hover:</span>
393 <!-- @el line 133 -->
394 <div class="hl-ar" data-hl-line="133" data-hl-el="el">
395 <span>custom properties</span>
397 <!-- @el line 134 -->
398 <div class="hl-as" data-hl-line="134" data-hl-el="el">
402 <!-- @ul line 135 -->
403 <ul class="hl-at" data-hl-line="135" data-hl-el="ul">
404 <!-- @li line 137 -->
405 <li class="hl-au" data-hl-line="137" data-hl-el="li">
406 <span>first-child: bolds this one</span>
408 <!-- @li line 137 -->
409 <li class="hl-au" data-hl-line="137" data-hl-el="li">
410 <span>nth-child(odd): shades every other row</span>
412 <!-- @li line 137 -->
413 <li class="hl-au" data-hl-line="137" data-hl-el="li">
414 <span>children: pads them all</span>
416 <!-- @li line 137 -->
417 <li class="hl-au" data-hl-line="137" data-hl-el="li">
418 <span>children:marker: colours the bullets</span>
421 <!-- @el line 138 -->
422 <div class="hl-av" data-hl-line="138" data-hl-el="el">
423 <!-- @label line 139 -->
424 <label class="hl-aw" data-hl-line="139" data-hl-el="label">
425 <!-- @input line 140 -->
426 <input class="hl-ax" type="checkbox" data-hl-line="140" data-hl-el="input">
427 Tick the box: has() styles the card around it </label>
429 <!-- @paragraph line 142 -->
430 <p class="hl-m" data-hl-line="142" data-hl-el="paragraph">
431Colour maths is CSS too, so a variant follows its token wherever it is redefined: </p>
432 <!-- @row line 144 -->
433 <div class="hl-n" data-hl-line="144" data-hl-el="row">
434 <!-- @el line 146 -->
435 <div class="hl-ay" data-hl-line="146" data-hl-el="el">
436 <span>color-mix … black 0%</span>
438 <!-- @el line 146 -->
439 <div class="hl-az" data-hl-line="146" data-hl-el="el">
440 <span>color-mix … black 10%</span>
442 <!-- @el line 146 -->
443 <div class="hl-a0" data-hl-line="146" data-hl-el="el">
444 <span>color-mix … black 20%</span>
446 <!-- @el line 146 -->
447 <div class="hl-a1" data-hl-line="146" data-hl-el="el">
448 <span>color-mix … black 30%</span>
450 <!-- @el line 148 -->
451 <div class="hl-a2" data-hl-line="148" data-hl-el="el">
452 <span>rgb(from …) / 0.2</span>
454 <!-- @el line 149 -->
455 <div class="hl-a3" data-hl-line="149" data-hl-el="el">
456 <span>color-mix … 50%</span>
460 <!-- @section line 185 -->
461 <section class="hl-i" data-hl-line="185" data-hl-el="section">
462 <!-- @row line 185 -->
463 <div class="hl-j" data-hl-line="185" data-hl-el="row">
464 <!-- @text line 185 -->
465 <span class="hl-k" data-hl-line="185" data-hl-el="text">
467 <!-- @h2 line 185 -->
468 <h2 class="hl-l" data-hl-line="185" data-hl-el="h2">
471 <!-- @paragraph line 186 -->
472 <p class="hl-m" data-hl-line="186" data-hl-el="paragraph">
473Functions are <!-- @code line 187 -->
474 <code class="hl-h" data-hl-line="187" data-hl-el="code">
475@let @name </code> with a body. Their parameters are listed and passed like attributes, a name alone passes true, and a body can be text like this one. </p>
476 <!-- @paragraph line 188 -->
477 <p class="hl-m" data-hl-line="188" data-hl-el="paragraph">
478A call works wherever an element does, even inside a sentence: press <!-- @kbd line 190 -->
479 <kbd class="hl-a4" data-hl-line="190" data-hl-el="kbd">
480Ctrl </kbd> <!-- @kbd line 190 -->
481 <kbd class="hl-a4" data-hl-line="190" data-hl-el="kbd">
482K </kbd> to search. </p>
483 <!-- @row line 191 -->
484 <div class="hl-n" data-hl-line="191" data-hl-el="row">
485 <!-- @el line 192 -->
486 <div class="hl-a5" data-hl-line="192" data-hl-el="el">
487 <!-- @text line 192 -->
488 <span class="hl-a6" data-hl-line="192" data-hl-el="text">
490 <!-- @text line 192 -->
491 <span class="hl-a7" data-hl-line="192" data-hl-el="text">
494 <!-- @el line 193 -->
495 <div class="hl-a5" data-hl-line="193" data-hl-el="el">
496 <!-- @text line 193 -->
497 <span class="hl-a8" data-hl-line="193" data-hl-el="text">
499 <!-- @text line 193 -->
500 <span class="hl-a7" data-hl-line="193" data-hl-el="text">
501lines of JavaScript </span>
503 <!-- @el line 194 -->
504 <div class="hl-a9" data-hl-line="194" data-hl-el="el">
505 <!-- @text line 194 -->
506 <span class="hl-ba" data-hl-line="194" data-hl-el="text">
508 <!-- @text line 194 -->
509 <span class="hl-a7" data-hl-line="194" data-hl-el="text">
513 <!-- @article line 195 -->
514 <article class="hl-bb" data-hl-line="195" data-hl-el="article">
515 <!-- @row line 195 -->
516 <div class="hl-bc" data-hl-line="195" data-hl-el="row">
517 <!-- @h3 line 195 -->
518 <h3 class="hl-bd" data-hl-line="195" data-hl-el="h3">
520 <!-- @el line 195 -->
521 <div class="hl-s" data-hl-line="195" data-hl-el="el">
523 <!-- @link line 197 -->
524 <a href="/edit" class="hl-be" data-hl-line="197" data-hl-el="link">
527 <!-- @paragraph line 198 -->
528 <p class="hl-m" data-hl-line="198" data-hl-el="paragraph">
529Children fill <!-- @code line 199 -->
530 <code class="hl-h" data-hl-line="199" data-hl-el="code">
531@children </code>; <!-- @code line 199 -->
532 <code class="hl-h" data-hl-line="199" data-hl-el="code">
533@slot </code> blocks fill slots by name, and a slot name the panel doesn't have is an error. </p>
534 <!-- @text line 195 -->
535 <span class="hl-bf" data-hl-line="195" data-hl-el="text">
536Default footer </span>
538 <!-- @row line 201 -->
539 <div class="hl-bg" data-hl-line="201" data-hl-el="row">
540 <!-- @row line 202 -->
541 <div class="hl-bh hl-fn-badge" data-hl-line="202" data-hl-el="row">
542 <!-- @text line 202 -->
543 <span class="dot" data-hl-line="202" data-hl-el="text">
545 <span>scoped style</span>
547 <!-- @row line 203 -->
548 <div class="hl-bh hl-fn-badge" data-hl-line="203" data-hl-el="row">
549 <span>same function</span>
553 <!-- @section line 209 -->
554 <section class="hl-i" data-hl-line="209" data-hl-el="section">
555 <!-- @row line 209 -->
556 <div class="hl-j" data-hl-line="209" data-hl-el="row">
557 <!-- @text line 209 -->
558 <span class="hl-k" data-hl-line="209" data-hl-el="text">
560 <!-- @h2 line 209 -->
561 <h2 class="hl-l" data-hl-line="209" data-hl-el="h2">
564 <!-- @paragraph line 210 -->
565 <p class="hl-m" data-hl-line="210" data-hl-el="paragraph">
566$name inserts a value and ${...} any expression: HTMLANG has 7 letters and 3 tags. </p>
567 <!-- @row line 213 -->
568 <div class="hl-n" data-hl-line="213" data-hl-el="row">
569 <!-- @el line 215 -->
570 <div class="hl-bi" data-hl-line="215" data-hl-el="el">
571 <span>Layout: 6 letters</span>
573 <!-- @el line 215 -->
574 <div class="hl-bi" data-hl-line="215" data-hl-el="el">
575 <span>Css: 3 letters</span>
577 <!-- @el line 215 -->
578 <div class="hl-bi" data-hl-line="215" data-hl-el="el">
579 <span>Static: 6 letters</span>
582 <!-- @text line 218 -->
583 <span class="hl-a7" data-hl-line="218" data-hl-el="text">
584contains($tags, css) is true </span>
586 <!-- @section line 227 -->
587 <section class="hl-i" data-hl-line="227" data-hl-el="section">
588 <!-- @row line 227 -->
589 <div class="hl-j" data-hl-line="227" data-hl-el="row">
590 <!-- @text line 227 -->
591 <span class="hl-k" data-hl-line="227" data-hl-el="text">
593 <!-- @h2 line 227 -->
594 <h2 class="hl-l" data-hl-line="227" data-hl-el="h2">
597 <!-- @table line 228 -->
598 <table class="hl-bj" data-hl-line="228" data-hl-el="table">
599 <!-- @thead line 229 -->
600 <thead data-hl-line="229" data-hl-el="thead">
601 <!-- @tr line 230 -->
602 <tr class="hl-bk" data-hl-line="230" data-hl-el="tr">
603 <!-- @th line 231 -->
604 <th data-hl-line="231" data-hl-el="th">
606 <!-- @th line 232 -->
607 <th data-hl-line="232" data-hl-el="th">
609 <!-- @th line 233 -->
610 <th data-hl-line="233" data-hl-el="th">
612 <!-- @th line 234 -->
613 <th data-hl-line="234" data-hl-el="th">
617 <!-- @tbody line 235 -->
618 <tbody data-hl-line="235" data-hl-el="tbody">
619 <!-- @tr line 237 -->
620 <tr class="hl-bl" data-hl-line="237" data-hl-el="tr">
621 <!-- @td line 238 -->
622 <td data-hl-line="238" data-hl-el="td">
624 <!-- @td line 239 -->
625 <td class="hl-bm" data-hl-line="239" data-hl-el="td">
627 <!-- @td line 240 -->
628 <td data-hl-line="240" data-hl-el="td">
630 <!-- @td line 241 -->
631 <td class="hl-bn" data-hl-line="241" data-hl-el="td">
634 <!-- @tr line 237 -->
635 <tr class="hl-bl" data-hl-line="237" data-hl-el="tr">
636 <!-- @td line 238 -->
637 <td data-hl-line="238" data-hl-el="td">
639 <!-- @td line 239 -->
640 <td class="hl-bm" data-hl-line="239" data-hl-el="td">
642 <!-- @td line 240 -->
643 <td data-hl-line="240" data-hl-el="td">
644Design, research </td>
645 <!-- @td line 241 -->
646 <td class="hl-bn" data-hl-line="241" data-hl-el="td">
649 <!-- @tr line 237 -->
650 <tr class="hl-bl" data-hl-line="237" data-hl-el="tr">
651 <!-- @td line 238 -->
652 <td data-hl-line="238" data-hl-el="td">
654 <!-- @td line 239 -->
655 <td class="hl-bm" data-hl-line="239" data-hl-el="td">
657 <!-- @td line 240 -->
658 <td data-hl-line="240" data-hl-el="td">
660 <!-- @td line 241 -->
661 <td class="hl-a7" data-hl-line="241" data-hl-el="td">
666 <!-- @row line 246 -->
667 <div class="hl-bo" data-hl-line="246" data-hl-el="row">
668 <!-- @text line 248 -->
669 <span class="hl-bp" data-hl-line="248" data-hl-el="text">
671 <!-- @text line 248 -->
672 <span class="hl-bp" data-hl-line="248" data-hl-el="text">
674 <!-- @text line 248 -->
675 <span class="hl-bp" data-hl-line="248" data-hl-el="text">
677 <!-- @text line 248 -->
678 <span class="hl-bp" data-hl-line="248" data-hl-el="text">
680 <!-- @text line 248 -->
681 <span class="hl-bp" data-hl-line="248" data-hl-el="text">
683 <!-- @text line 248 -->
684 <span class="hl-bp" data-hl-line="248" data-hl-el="text">
687 <!-- @text line 252 -->
688 <span class="hl-bq" data-hl-line="252" data-hl-el="text">
689@each … @else shows this for an empty list. </span>
691 <!-- @section line 255 -->
692 <section class="hl-i" data-hl-line="255" data-hl-el="section">
693 <!-- @row line 255 -->
694 <div class="hl-j" data-hl-line="255" data-hl-el="row">
695 <!-- @text line 255 -->
696 <span class="hl-k" data-hl-line="255" data-hl-el="text">
698 <!-- @h2 line 255 -->
699 <h2 class="hl-l" data-hl-line="255" data-hl-el="h2">
702 <!-- @paragraph line 256 -->
703 <p class="hl-m" data-hl-line="256" data-hl-el="paragraph">
704Every other element has its HTML name, and HTML attributes are written <!-- @code line 258 -->
705 <code class="hl-h" data-hl-line="258" data-hl-el="code">
706key=value </code>. <!-- @code line 258 -->
707 <code class="hl-h" data-hl-line="258" data-hl-el="code">
708@page </code> is the root element: its styles go on <!-- @code line 259 -->
709 <code class="hl-h" data-hl-line="259" data-hl-el="code">
710<body> </code>, a column that fills the window, and its <!-- @code line 259 -->
711 <code class="hl-h" data-hl-line="259" data-hl-el="code">
712key=value </code> attributes on <!-- @code line 260 -->
713 <code class="hl-h" data-hl-line="260" data-hl-el="code">
714<html> </code>, like this page's <!-- @code line 260 -->
715 <code class="hl-h" data-hl-line="260" data-hl-el="code">
717 <!-- @row line 261 -->
718 <div class="hl-br" data-hl-line="261" data-hl-el="row">
719 <!-- @form line 262 -->
720 <form action="/subscribe" class="hl-bs" method="post" data-hl-line="262" data-hl-el="form">
721 <!-- @label line 263 -->
722 <label class="hl-bm" for="email" data-hl-line="263" data-hl-el="label">
724 <!-- @input line 264 -->
725 <input class="hl-bt" id="email" type="email" name="email" placeholder="you@example.com" required data-hl-line="264" data-hl-el="input">
726 <!-- @label line 276 -->
727 <label class="hl-bm" for="topic" data-hl-line="276" data-hl-el="label">
729 <!-- @select line 277 -->
730 <select class="hl-bu" id="topic" name="topic" data-hl-line="277" data-hl-el="select">
731 <!-- @option line 278 -->
732 <option value="news" data-hl-line="278" data-hl-el="option">
734 <!-- @option line 279 -->
735 <option value="releases" data-hl-line="279" data-hl-el="option">
738 <!-- @button line 280 -->
739 <button class="hl-bv" type="submit" data-hl-line="280" data-hl-el="button">
742 <!-- @el line 281 -->
743 <div class="hl-bw" data-hl-line="281" data-hl-el="el">
744 <!-- @details line 282 -->
745 <details class="hl-bx" data-hl-line="282" data-hl-el="details">
746 <!-- @summary line 283 -->
747 <summary class="hl-by" data-hl-line="283" data-hl-el="summary">
748What does this compile to? </summary>
749 <!-- @paragraph line 284 -->
750 <p class="hl-bz" data-hl-line="284" data-hl-el="paragraph">
751Flexbox and grid CSS in one <!-- @code line 285 -->
752 <code class="hl-h" data-hl-line="285" data-hl-el="code">
753<style> </code>, and no JavaScript. </p>
755 <!-- @button line 286 -->
756 <button class="hl-b0" type="button" popovertarget="about" data-hl-line="286" data-hl-el="button">
757Open a popover </button>
758 <!-- @el line 287 -->
759 <div class="hl-b1" id="about" popover data-hl-line="287" data-hl-el="el">
760 <span>Native HTML popovers need no script.</span>
762 <!-- @row line 289 -->
763 <div class="hl-b2" data-hl-line="289" data-hl-el="row">
764 <!-- @text line 290 -->
765 <span data-hl-line="290" data-hl-el="text">
767 <!-- @progress line 291 -->
768 <progress value="60" max="100" data-hl-line="291" data-hl-el="progress">
770 <!-- @time line 292 -->
771 <time datetime="2026-09-26" data-hl-line="292" data-hl-el="time">
774 <!-- @figure line 293 -->
775 <figure class="hl-b3" data-hl-line="293" data-hl-el="figure">
776 <!-- @image line 294 -->
777 <img src="https://picsum.photos/640/240" class="hl-b4" alt="A placeholder landscape" data-hl-line="294" data-hl-el="image">
778 <!-- @figcaption line 295 -->
779 <figcaption class="hl-bf" data-hl-line="295" data-hl-el="figcaption">
780@figure and @figcaption </figcaption>
785 <hr style="width: 100%; border: none; border-top: 1px dashed #cbd5e1">
786 <!-- @footer line 300 -->
787 <footer class="hl-b5" data-hl-line="300" data-hl-el="footer">
788 <!-- @text line 301 -->
789 <span data-hl-line="301" data-hl-el="text">
790© 2026 htmlang </span>
791 <!-- @el line 302 -->
792 <div class="hl-s" data-hl-line="302" data-hl-el="el">
794 <!-- @link line 303 -->
795 <a href="https://github.com/iko-soy/htmlang" class="hl-b6" data-hl-line="303" data-hl-el="link">
keysesc to close
- j k
- move down, up
- enter
- open
- esc
- back, or up a level
- 1 2 3 4
- readme, files, commits, refs
- /
- filter
- y
- copy the clone command
- c
- compare the chosen commit with another (or shift-click both)
- ?
- show or hide this list