0
# HTML Elements
1

2
Complete HTML element support for building web user interfaces with type-safe Kotlin DSL. All elements support attributes, styling, and event handling through consistent builder patterns.
3

4
## Capabilities
5

6
### Text Content
7

8
Core text rendering and container elements.
9

10
```kotlin { .api }
11
/**
12
 * Render text content directly in the DOM
13
 * @param value The text content to display
14
 */
15
fun Text(value: String)
16
```
17

18
### Container Elements
19

20
Generic container elements for layout and organization.
21

22
```kotlin { .api }
23
/**
24
 * Division container element for grouping content
25
 * @param attrs Attribute builder for HTMLDivElement
26
 * @param content Composable content builder
27
 */
28
fun Div(
29
    attrs: AttrBuilderContext<HTMLDivElement>? = null,
30
    content: ContentBuilder<HTMLDivElement>? = null
31
)
32

33
/**
34
 * Inline span container for text styling
35
 * @param attrs Attribute builder for HTMLSpanElement
36
 * @param content Composable content builder
37
 */
38
fun Span(
39
    attrs: AttrBuilderContext<HTMLSpanElement>? = null,
40
    content: ContentBuilder<HTMLSpanElement>? = null
41
)
42
```
43

44
### Document Structure Elements
45

46
Semantic elements for document structure and organization.
47

48
```kotlin { .api }
49
/**
50
 * Header section of a document or section
51
 */
52
fun Header(
53
    attrs: AttrBuilderContext<HTMLElement>? = null,
54
    content: ContentBuilder<HTMLElement>? = null
55
)
56

57
/**
58
 * Footer section of a document or section
59
 */
60
fun Footer(
61
    attrs: AttrBuilderContext<HTMLElement>? = null,
62
    content: ContentBuilder<HTMLElement>? = null
63
)
64

65
/**
66
 * Main content area of a document
67
 */
68
fun Main(
69
    attrs: AttrBuilderContext<HTMLElement>? = null,
70
    content: ContentBuilder<HTMLElement>? = null
71
)
72

73
/**
74
 * Generic section of a document
75
 */
76
fun Section(
77
    attrs: AttrBuilderContext<HTMLElement>? = null,
78
    content: ContentBuilder<HTMLElement>? = null
79
)
80

81
/**
82
 * Article content that can stand alone
83
 */
84
fun Article(
85
    attrs: AttrBuilderContext<HTMLElement>? = null,
86
    content: ContentBuilder<HTMLElement>? = null
87
)
88

89
/**
90
 * Sidebar content indirectly related to main content
91
 */
92
fun Aside(
93
    attrs: AttrBuilderContext<HTMLElement>? = null,
94
    content: ContentBuilder<HTMLElement>? = null
95
)
96

97
/**
98
 * Navigation links section
99
 */
100
fun Nav(
101
    attrs: AttrBuilderContext<HTMLElement>? = null,
102
    content: ContentBuilder<HTMLElement>? = null
103
)
104

105
/**
106
 * Contact information for author or owner
107
 */
108
fun Address(
109
    attrs: AttrBuilderContext<HTMLElement>? = null,
110
    content: ContentBuilder<HTMLElement>? = null
111
)
112
```
113

114
### Typography Elements
115

116
Elements for text formatting and typography.
117

118
```kotlin { .api }
119
/**
120
 * Heading elements (h1-h6)
121
 */
122
fun H1(attrs: AttrBuilderContext<HTMLHeadingElement>? = null, content: ContentBuilder<HTMLHeadingElement>? = null)
123
fun H2(attrs: AttrBuilderContext<HTMLHeadingElement>? = null, content: ContentBuilder<HTMLHeadingElement>? = null)
124
fun H3(attrs: AttrBuilderContext<HTMLHeadingElement>? = null, content: ContentBuilder<HTMLHeadingElement>? = null)
125
fun H4(attrs: AttrBuilderContext<HTMLHeadingElement>? = null, content: ContentBuilder<HTMLHeadingElement>? = null)
126
fun H5(attrs: AttrBuilderContext<HTMLHeadingElement>? = null, content: ContentBuilder<HTMLHeadingElement>? = null)
127
fun H6(attrs: AttrBuilderContext<HTMLHeadingElement>? = null, content: ContentBuilder<HTMLHeadingElement>? = null)
128

129
/**
130
 * Paragraph element
131
 */
132
fun P(
133
    attrs: AttrBuilderContext<HTMLParagraphElement>? = null,
134
    content: ContentBuilder<HTMLParagraphElement>? = null
135
)
136

137
/**
138
 * Emphasized text (typically italic)
139
 */
140
fun Em(
141
    attrs: AttrBuilderContext<HTMLElement>? = null,
142
    content: ContentBuilder<HTMLElement>? = null
143
)
144

145
/**
146
 * Italic text
147
 */
148
fun I(
149
    attrs: AttrBuilderContext<HTMLElement>? = null,
150
    content: ContentBuilder<HTMLElement>? = null
151
)
152

153
/**
154
 * Bold text
155
 */
156
fun B(
157
    attrs: AttrBuilderContext<HTMLElement>? = null,
158
    content: ContentBuilder<HTMLElement>? = null
159
)
160

161
/**
162
 * Small text (fine print)
163
 */
164
fun Small(
165
    attrs: AttrBuilderContext<HTMLElement>? = null,
166
    content: ContentBuilder<HTMLElement>? = null
167
)
168

169
/**
170
 * Superscript text
171
 */
172
fun Sup(
173
    attrs: AttrBuilderContext<HTMLElement>? = null,
174
    content: ContentBuilder<HTMLElement>? = null
175
)
176

177
/**
178
 * Subscript text
179
 */
180
fun Sub(
181
    attrs: AttrBuilderContext<HTMLElement>? = null,
182
    content: ContentBuilder<HTMLElement>? = null
183
)
184

185
/**
186
 * Block quotation
187
 */
188
fun Blockquote(
189
    attrs: AttrBuilderContext<HTMLQuoteElement>? = null,
190
    content: ContentBuilder<HTMLQuoteElement>? = null
191
)
192

193
/**
194
 * Preformatted text (preserves whitespace)
195
 */
196
fun Pre(
197
    attrs: AttrBuilderContext<HTMLPreElement>? = null,
198
    content: ContentBuilder<HTMLPreElement>? = null
199
)
200

201
/**
202
 * Code snippet (monospace font)
203
 */
204
fun Code(
205
    attrs: AttrBuilderContext<HTMLElement>? = null,
206
    content: ContentBuilder<HTMLElement>? = null
207
)
208
```
209

210
### List Elements
211

212
Elements for creating ordered and unordered lists.
213

214
```kotlin { .api }
215
/**
216
 * Unordered list (bulleted)
217
 */
218
fun Ul(
219
    attrs: AttrBuilderContext<HTMLUListElement>? = null,
220
    content: ContentBuilder<HTMLUListElement>? = null
221
)
222

223
/**
224
 * Ordered list (numbered)
225
 */
226
fun Ol(
227
    attrs: AttrBuilderContext<HTMLOListElement>? = null,
228
    content: ContentBuilder<HTMLOListElement>? = null
229
)
230

231
/**
232
 * List item (used within Ul or Ol)
233
 */
234
fun Li(
235
    attrs: AttrBuilderContext<HTMLLIElement>? = null,
236
    content: ContentBuilder<HTMLLIElement>? = null
237
)
238

239
/**
240
 * Description list
241
 */
242
fun DList(
243
    attrs: AttrBuilderContext<HTMLDListElement>? = null,
244
    content: ContentBuilder<HTMLDListElement>? = null
245
)
246

247
/**
248
 * Description term (used within DList)
249
 */
250
fun DTerm(
251
    attrs: AttrBuilderContext<HTMLElement>? = null,
252
    content: ContentBuilder<HTMLElement>? = null
253
)
254

255
/**
256
 * Description definition (used within DList)
257
 */
258
fun DDescription(
259
    attrs: AttrBuilderContext<HTMLElement>? = null,
260
    content: ContentBuilder<HTMLElement>? = null
261
)
262
```
263

264
### Link and Media Elements
265

266
Elements for links, images, and multimedia content.
267

268
```kotlin { .api }
269
/**
270
 * Anchor (link) element
271
 * @param href Link URL
272
 * @param attrs Additional attributes
273
 * @param content Link content
274
 */
275
fun A(
276
    href: String? = null,
277
    attrs: AttrBuilderContext<HTMLAnchorElement>? = null,
278
    content: ContentBuilder<HTMLAnchorElement>? = null
279
)
280

281
/**
282
 * Image element
283
 * @param src Image source URL
284
 * @param alt Alternative text for accessibility
285
 * @param attrs Additional attributes
286
 */
287
fun Img(
288
    src: String,
289
    alt: String? = null,
290
    attrs: AttrBuilderContext<HTMLImageElement>? = null
291
)
292

293
/**
294
 * Audio element for audio content
295
 */
296
fun Audio(
297
    attrs: AttrBuilderContext<HTMLAudioElement>? = null,
298
    content: ContentBuilder<HTMLAudioElement>? = null
299
)
300

301
/**
302
 * Video element for video content
303
 */
304
fun Video(
305
    attrs: AttrBuilderContext<HTMLVideoElement>? = null,
306
    content: ContentBuilder<HTMLVideoElement>? = null
307
)
308

309
/**
310
 * Track element for media resources (captions, subtitles)
311
 */
312
fun Track(
313
    attrs: AttrBuilderContext<HTMLTrackElement>? = null,
314
    content: ContentBuilder<HTMLTrackElement>? = null
315
)
316

317
/**
318
 * Source element for media resources
319
 */
320
fun Source(
321
    attrs: AttrBuilderContext<HTMLSourceElement>? = null,
322
    content: ContentBuilder<HTMLSourceElement>? = null
323
)
324
```
325

326
### Table Elements
327

328
Elements for creating data tables.
329

330
```kotlin { .api }
331
/**
332
 * Table container element
333
 */
334
fun Table(
335
    attrs: AttrBuilderContext<HTMLTableElement>? = null,
336
    content: ContentBuilder<HTMLTableElement>? = null
337
)
338

339
/**
340
 * Table caption
341
 */
342
fun Caption(
343
    attrs: AttrBuilderContext<HTMLTableCaptionElement>? = null,
344
    content: ContentBuilder<HTMLTableCaptionElement>? = null
345
)
346

347
/**
348
 * Table header section
349
 */
350
fun Thead(
351
    attrs: AttrBuilderContext<HTMLTableSectionElement>? = null,
352
    content: ContentBuilder<HTMLTableSectionElement>? = null
353
)
354

355
/**
356
 * Table body section
357
 */
358
fun Tbody(
359
    attrs: AttrBuilderContext<HTMLTableSectionElement>? = null,
360
    content: ContentBuilder<HTMLTableSectionElement>? = null
361
)
362

363
/**
364
 * Table footer section
365
 */
366
fun Tfoot(
367
    attrs: AttrBuilderContext<HTMLTableSectionElement>? = null,
368
    content: ContentBuilder<HTMLTableSectionElement>? = null
369
)
370

371
/**
372
 * Table row
373
 */
374
fun Tr(
375
    attrs: AttrBuilderContext<HTMLTableRowElement>? = null,
376
    content: ContentBuilder<HTMLTableRowElement>? = null
377
)
378

379
/**
380
 * Table header cell
381
 */
382
fun Th(
383
    attrs: AttrBuilderContext<HTMLTableCellElement>? = null,
384
    content: ContentBuilder<HTMLTableCellElement>? = null
385
)
386

387
/**
388
 * Table data cell
389
 */
390
fun Td(
391
    attrs: AttrBuilderContext<HTMLTableCellElement>? = null,
392
    content: ContentBuilder<HTMLTableCellElement>? = null
393
)
394

395
/**
396
 * Table column definition
397
 */
398
fun Col(attrs: AttrBuilderContext<HTMLTableColElement>? = null)
399

400
/**
401
 * Table column group
402
 */
403
fun Colgroup(
404
    attrs: AttrBuilderContext<HTMLTableColElement>? = null,
405
    content: ContentBuilder<HTMLTableColElement>? = null
406
)
407
```
408

409
### Embedded Content Elements
410

411
Elements for embedding external content.
412

413
```kotlin { .api }
414
/**
415
 * Canvas element for drawing graphics
416
 */
417
fun Canvas(
418
    attrs: AttrBuilderContext<HTMLCanvasElement>? = null,
419
    content: ContentBuilder<HTMLCanvasElement>? = null
420
)
421

422
/**
423
 * Embedded content element
424
 */
425
fun Embed(
426
    attrs: AttrBuilderContext<HTMLEmbedElement>? = null,
427
    content: ContentBuilder<HTMLEmbedElement>? = null
428
)
429

430
/**
431
 * Inline frame for embedding documents
432
 */
433
fun Iframe(
434
    attrs: AttrBuilderContext<HTMLIFrameElement>? = null,
435
    content: ContentBuilder<HTMLIFrameElement>? = null
436
)
437

438
/**
439
 * Generic object element for embedded content
440
 */
441
fun Object(
442
    attrs: AttrBuilderContext<HTMLObjectElement>? = null,
443
    content: ContentBuilder<HTMLObjectElement>? = null
444
)
445

446
/**
447
 * Parameter for object element
448
 */
449
fun Param(
450
    attrs: AttrBuilderContext<HTMLParamElement>? = null,
451
    content: ContentBuilder<HTMLParamElement>? = null
452
)
453

454
/**
455
 * Responsive image container
456
 */
457
fun Picture(
458
    attrs: AttrBuilderContext<HTMLPictureElement>? = null,
459
    content: ContentBuilder<HTMLPictureElement>? = null
460
)
461

462
/**
463
 * Image map definition
464
 */
465
fun HTMLMap(
466
    attrs: AttrBuilderContext<HTMLMapElement>? = null,
467
    content: ContentBuilder<HTMLMapElement>? = null
468
)
469

470
/**
471
 * Image map area
472
 */
473
fun Area(
474
    attrs: AttrBuilderContext<HTMLAreaElement>? = null,
475
    content: ContentBuilder<HTMLAreaElement>? = null
476
)
477
```
478

479
### Interactive Elements
480

481
Elements for user interaction and data visualization.
482

483
```kotlin { .api }
484
/**
485
 * Data list for input options
486
 */
487
fun Datalist(
488
    attrs: AttrBuilderContext<HTMLDataListElement>? = null,
489
    content: ContentBuilder<HTMLDataListElement>? = null
490
)
491

492
/**
493
 * Scalar measurement indicator
494
 */
495
fun Meter(
496
    attrs: AttrBuilderContext<HTMLMeterElement>? = null,
497
    content: ContentBuilder<HTMLMeterElement>? = null
498
)
499

500
/**
501
 * Output element for calculation results
502
 */
503
fun Output(
504
    attrs: AttrBuilderContext<HTMLOutputElement>? = null,
505
    content: ContentBuilder<HTMLOutputElement>? = null
506
)
507

508
/**
509
 * Progress indicator
510
 */
511
fun Progress(
512
    attrs: AttrBuilderContext<HTMLProgressElement>? = null,
513
    content: ContentBuilder<HTMLProgressElement>? = null
514
)
515
```
516

517
### Utility Elements
518

519
Utility elements for layout and formatting.
520

521
```kotlin { .api }
522
/**
523
 * Line break
524
 */
525
fun Br(attrs: AttrBuilderContext<HTMLBRElement>? = null)
526

527
/**
528
 * Horizontal rule (divider line)
529
 */
530
fun Hr(attrs: AttrBuilderContext<HTMLHRElement>? = null)
531
```
532

533
**Usage Examples:**
534

535
```kotlin
536
import org.jetbrains.compose.web.dom.*
537

538
// Document structure
539
renderComposable(rootElementId = "root") {
540
    Main {
541
        Header {
542
            H1 { Text("My Website") }
543
            Nav {
544
                Ul {
545
                    Li { A(href = "/home") { Text("Home") } }
546
                    Li { A(href = "/about") { Text("About") } }
547
                    Li { A(href = "/contact") { Text("Contact") } }
548
                }
549
            }
550
        }
551
        
552
        Article {
553
            H2 { Text("Article Title") }
554
            P { Text("Article content goes here...") }
555
            
556
            Blockquote {
557
                P { Text("This is an important quote.") }
558
            }
559
            
560
            Pre {
561
                Code { Text("function example() { return 'Hello World'; }") }
562
            }
563
        }
564
        
565
        Footer {
566
            P { Text("© 2024 My Website") }
567
        }
568
    }
569
}
570

571
// Table example
572
Table {
573
    Caption { Text("User Data") }
574
    Thead {
575
        Tr {
576
            Th { Text("Name") }
577
            Th { Text("Age") }
578
            Th { Text("City") }
579
        }
580
    }
581
    Tbody {
582
        Tr {
583
            Td { Text("Alice") }
584
            Td { Text("25") }
585
            Td { Text("New York") }
586
        }
587
        Tr {
588
            Td { Text("Bob") }
589
            Td { Text("30") }
590
            Td { Text("San Francisco") }
591
        }
592
    }
593
}
594
```