0
# HTML Elements
1

2
Complete set of type-safe HTML element constructors providing composable functions for all standard HTML elements with proper attribute scoping and content builders.
3

4
## Core Imports
5

6
```kotlin
7
import androidx.compose.runtime.*
8
import org.jetbrains.compose.web.dom.*
9
import org.jetbrains.compose.web.attributes.*
10
```
11

12
## Capabilities
13

14
### Text Content
15

16
Core text elements for displaying and structuring textual content.
17

18
```kotlin { .api }
19
/**
20
 * Creates a text node with the specified content
21
 * @param value - The text content to display
22
 */
23
@Composable
24
fun Text(value: String)
25

26
/**
27
 * Paragraph element for text blocks
28
 */
29
@Composable
30
fun P(
31
    attrs: AttrBuilderContext<HTMLParagraphElement>? = null,
32
    content: ContentBuilder<HTMLParagraphElement>? = null
33
)
34

35
/**
36
 * Heading elements H1 through H6
37
 */
38
@Composable
39
fun H1(
40
    attrs: AttrBuilderContext<HTMLHeadingElement>? = null,
41
    content: ContentBuilder<HTMLHeadingElement>? = null
42
)
43

44
@Composable
45
fun H2(
46
    attrs: AttrBuilderContext<HTMLHeadingElement>? = null,
47
    content: ContentBuilder<HTMLHeadingElement>? = null
48
)
49

50
@Composable
51
fun H3(
52
    attrs: AttrBuilderContext<HTMLHeadingElement>? = null,
53
    content: ContentBuilder<HTMLHeadingElement>? = null
54
)
55

56
@Composable
57
fun H4(
58
    attrs: AttrBuilderContext<HTMLHeadingElement>? = null,
59
    content: ContentBuilder<HTMLHeadingElement>? = null
60
)
61

62
@Composable
63
fun H5(
64
    attrs: AttrBuilderContext<HTMLHeadingElement>? = null,
65
    content: ContentBuilder<HTMLHeadingElement>? = null
66
)
67

68
@Composable
69
fun H6(
70
    attrs: AttrBuilderContext<HTMLHeadingElement>? = null,
71
    content: ContentBuilder<HTMLHeadingElement>? = null
72
)
73
```
74

75
**Usage Examples:**
76

77
```kotlin
78
@Composable
79
fun TextContent() {
80
    H1 { Text("Main Title") }
81
    H2 { Text("Subtitle") }
82
    P { Text("This is a paragraph of text content.") }
83
    
84
    P({
85
        style {
86
            fontSize(16.px)
87
            lineHeight(1.5)
88
        }
89
    }) {
90
        Text("Styled paragraph with custom CSS.")
91
    }
92
}
93
```
94

95
### Container Elements
96

97
Structural elements for organizing and containing other elements.
98

99
```kotlin { .api }
100
/**
101
 * Generic container element (div)
102
 */
103
@Composable
104
fun Div(
105
    attrs: AttrBuilderContext<HTMLDivElement>? = null,
106
    content: ContentBuilder<HTMLDivElement>? = null
107
)
108

109
/**
110
 * Inline container element (span)
111
 */
112
@Composable
113
fun Span(
114
    attrs: AttrBuilderContext<HTMLSpanElement>? = null,
115
    content: ContentBuilder<HTMLSpanElement>? = null
116
)
117

118
/**
119
 * Semantic HTML5 structural elements
120
 */
121
@Composable
122
fun Header(
123
    attrs: AttrBuilderContext<HTMLElement>? = null,
124
    content: ContentBuilder<HTMLElement>? = null
125
)
126

127
@Composable
128
fun Footer(
129
    attrs: AttrBuilderContext<HTMLElement>? = null,
130
    content: ContentBuilder<HTMLElement>? = null
131
)
132

133
@Composable
134
fun Nav(
135
    attrs: AttrBuilderContext<HTMLElement>? = null,
136
    content: ContentBuilder<HTMLElement>? = null
137
)
138

139
@Composable
140
fun Main(
141
    attrs: AttrBuilderContext<HTMLElement>? = null,
142
    content: ContentBuilder<HTMLElement>? = null
143
)
144

145
@Composable
146
fun Section(
147
    attrs: AttrBuilderContext<HTMLElement>? = null,
148
    content: ContentBuilder<HTMLElement>? = null
149
)
150

151
@Composable
152
fun Article(
153
    attrs: AttrBuilderContext<HTMLElement>? = null,
154
    content: ContentBuilder<HTMLElement>? = null
155
)
156

157
@Composable
158
fun Aside(
159
    attrs: AttrBuilderContext<HTMLElement>? = null,
160
    content: ContentBuilder<HTMLElement>? = null
161
)
162
```
163

164
**Usage Examples:**
165

166
```kotlin
167
@Composable
168
fun Layout() {
169
    Header({
170
        style {
171
            padding(20.px)
172
            backgroundColor(Color.lightgray)
173
        }
174
    }) {
175
        Nav {
176
            // Navigation content
177
        }
178
    }
179
    
180
    Main {
181
        Article {
182
            H1 { Text("Article Title") }
183
            P { Text("Article content goes here.") }
184
        }
185
        
186
        Aside {
187
            H3 { Text("Sidebar") }
188
            P { Text("Sidebar content.") }
189
        }
190
    }
191
    
192
    Footer {
193
        P { Text("© 2024 My Website") }
194
    }
195
}
196
```
197

198
### Text Formatting
199

200
Elements for styling and emphasizing text content.
201

202
```kotlin { .api }
203
/**
204
 * Bold text formatting
205
 */
206
@Composable
207
fun B(
208
    attrs: AttrBuilderContext<HTMLElement>? = null,
209
    content: ContentBuilder<HTMLElement>? = null
210
)
211

212
/**
213
 * Italic text formatting
214
 */
215
@Composable
216
fun I(
217
    attrs: AttrBuilderContext<HTMLElement>? = null,
218
    content: ContentBuilder<HTMLElement>? = null
219
)
220

221
/**
222
 * Emphasized text (semantic emphasis)
223
 */
224
@Composable
225
fun Em(
226
    attrs: AttrBuilderContext<HTMLElement>? = null,
227
    content: ContentBuilder<HTMLElement>? = null
228
)
229

230
/**
231
 * Small text formatting
232
 */
233
@Composable
234
fun Small(
235
    attrs: AttrBuilderContext<HTMLElement>? = null,
236
    content: ContentBuilder<HTMLElement>? = null
237
)
238

239
/**
240
 * Superscript text
241
 */
242
@Composable
243
fun Sup(
244
    attrs: AttrBuilderContext<HTMLElement>? = null,
245
    content: ContentBuilder<HTMLElement>? = null
246
)
247

248
/**
249
 * Subscript text
250
 */
251
@Composable
252
fun Sub(
253
    attrs: AttrBuilderContext<HTMLElement>? = null,
254
    content: ContentBuilder<HTMLElement>? = null
255
)
256

257
/**
258
 * Block quote element
259
 */
260
@Composable
261
fun Blockquote(
262
    attrs: AttrBuilderContext<HTMLElement>? = null,
263
    content: ContentBuilder<HTMLElement>? = null
264
)
265

266
/**
267
 * Inline code formatting
268
 */
269
@Composable
270
fun Code(
271
    attrs: AttrBuilderContext<HTMLElement>? = null,
272
    content: ContentBuilder<HTMLElement>? = null
273
)
274

275
/**
276
 * Preformatted text block
277
 */
278
@Composable
279
fun Pre(
280
    attrs: AttrBuilderContext<HTMLPreElement>? = null,
281
    content: ContentBuilder<HTMLPreElement>? = null
282
)
283
```
284

285
### Lists
286

287
List elements for organizing content in ordered and unordered structures.
288

289
```kotlin { .api }
290
/**
291
 * Unordered list container
292
 */
293
@Composable
294
fun Ul(
295
    attrs: AttrBuilderContext<HTMLUListElement>? = null,
296
    content: ContentBuilder<HTMLUListElement>? = null
297
)
298

299
/**
300
 * Ordered list container
301
 */
302
@Composable
303
fun Ol(
304
    attrs: AttrBuilderContext<HTMLOListElement>? = null,
305
    content: ContentBuilder<HTMLOListElement>? = null
306
)
307

308
/**
309
 * List item element
310
 */
311
@Composable
312
fun Li(
313
    attrs: AttrBuilderContext<HTMLLIElement>? = null,
314
    content: ContentBuilder<HTMLLIElement>? = null
315
)
316

317
/**
318
 * Definition list container
319
 */
320
@Composable
321
fun DList(
322
    attrs: AttrBuilderContext<HTMLDListElement>? = null,
323
    content: ContentBuilder<HTMLDListElement>? = null
324
)
325

326
/**
327
 * Definition term element
328
 */
329
@Composable
330
fun DTerm(
331
    attrs: AttrBuilderContext<HTMLElement>? = null,
332
    content: ContentBuilder<HTMLElement>? = null
333
)
334

335
/**
336
 * Definition description element
337
 */
338
@Composable
339
fun DDescription(
340
    attrs: AttrBuilderContext<HTMLElement>? = null,
341
    content: ContentBuilder<HTMLElement>? = null
342
)
343
```
344

345
**Usage Examples:**
346

347
```kotlin
348
@Composable
349
fun ListExamples() {
350
    // Unordered list
351
    Ul {
352
        Li { Text("First item") }
353
        Li { Text("Second item") }
354
        Li { Text("Third item") }
355
    }
356
    
357
    // Ordered list
358
    Ol({
359
        style {
360
            listStyleType("decimal")
361
        }
362
    }) {
363
        Li { Text("Step one") }
364
        Li { Text("Step two") }
365
        Li { Text("Step three") }
366
    }
367
    
368
    // Definition list
369
    DList {
370
        DTerm { Text("HTML") }
371
        DDescription { Text("HyperText Markup Language") }
372
        DTerm { Text("CSS") }
373
        DDescription { Text("Cascading Style Sheets") }
374
    }
375
}
376
```
377

378
### Interactive Elements
379

380
Elements for user interaction including links, buttons, and other interactive components.
381

382
```kotlin { .api }
383
/**
384
 * Anchor/link element
385
 */
386
@Composable
387
fun A(
388
    href: String? = null,
389
    attrs: AttrBuilderContext<HTMLAnchorElement>? = null,
390
    content: ContentBuilder<HTMLAnchorElement>? = null
391
)
392

393
/**
394
 * Button element
395
 */
396
@Composable
397
fun Button(
398
    attrs: AttrBuilderContext<HTMLButtonElement>? = null,
399
    content: ContentBuilder<HTMLButtonElement>? = null
400
)
401
```
402

403
**Usage Examples:**
404

405
```kotlin
406
@Composable
407
fun InteractiveElements() {
408
    A(
409
        href = "https://example.com",
410
        attrs = {
411
            target(ATarget.Blank)
412
            style {
413
                color(Color.blue)
414
                textDecoration("underline")
415
            }
416
        }
417
    ) {
418
        Text("Visit Example.com")
419
    }
420
    
421
    Button({
422
        onClick { event ->
423
            console.log("Button clicked!")
424
        }
425
        style {
426
            padding(12.px, 24.px)
427
            backgroundColor(Color.blue)
428
            color(Color.white)
429
            border(0.px)
430
            borderRadius(4.px)
431
        }
432
    }) {
433
        Text("Click Me")
434
    }
435
}
436
```
437

438
### Media Elements
439

440
Elements for embedding media content including images, audio, and video.
441

442
```kotlin { .api }
443
/**
444
 * Image element
445
 */
446
@Composable
447
fun Img(
448
    src: String,
449
    alt: String = "",
450
    attrs: AttrBuilderContext<HTMLImageElement>? = null
451
)
452

453
/**
454
 * Audio element
455
 */
456
@Composable
457
fun Audio(
458
    attrs: AttrBuilderContext<HTMLAudioElement>? = null,
459
    content: ContentBuilder<HTMLAudioElement>? = null
460
)
461

462
/**
463
 * Video element
464
 */
465
@Composable
466
fun Video(
467
    attrs: AttrBuilderContext<HTMLVideoElement>? = null,
468
    content: ContentBuilder<HTMLVideoElement>? = null
469
)
470

471
/**
472
 * Canvas element for graphics
473
 */
474
@Composable
475
fun Canvas(
476
    attrs: AttrBuilderContext<HTMLCanvasElement>? = null,
477
    content: ContentBuilder<HTMLCanvasElement>? = null
478
)
479

480
/**
481
 * Media source element
482
 */
483
@Composable
484
fun Source(
485
    attrs: AttrBuilderContext<HTMLSourceElement>? = null
486
)
487

488
/**
489
 * Media track element
490
 */
491
@Composable
492
fun Track(
493
    attrs: AttrBuilderContext<HTMLTrackElement>? = null
494
)
495

496
/**
497
 * Picture element for responsive images
498
 */
499
@Composable
500
fun Picture(
501
    attrs: AttrBuilderContext<HTMLPictureElement>? = null,
502
    content: ContentBuilder<HTMLPictureElement>? = null
503
)
504
```
505

506
### Table Elements
507

508
Complete set of table elements for displaying tabular data.
509

510
```kotlin { .api }
511
/**
512
 * Table container
513
 */
514
@Composable
515
fun Table(
516
    attrs: AttrBuilderContext<HTMLTableElement>? = null,
517
    content: ContentBuilder<HTMLTableElement>? = null
518
)
519

520
/**
521
 * Table row
522
 */
523
@Composable
524
fun Tr(
525
    attrs: AttrBuilderContext<HTMLTableRowElement>? = null,
526
    content: ContentBuilder<HTMLTableRowElement>? = null
527
)
528

529
/**
530
 * Table data cell
531
 */
532
@Composable
533
fun Td(
534
    attrs: AttrBuilderContext<HTMLTableCellElement>? = null,
535
    content: ContentBuilder<HTMLTableCellElement>? = null
536
)
537

538
/**
539
 * Table header cell
540
 */
541
@Composable
542
fun Th(
543
    attrs: AttrBuilderContext<HTMLTableCellElement>? = null,
544
    content: ContentBuilder<HTMLTableCellElement>? = null
545
)
546

547
/**
548
 * Table head section
549
 */
550
@Composable
551
fun Thead(
552
    attrs: AttrBuilderContext<HTMLTableSectionElement>? = null,
553
    content: ContentBuilder<HTMLTableSectionElement>? = null
554
)
555

556
/**
557
 * Table body section
558
 */
559
@Composable
560
fun Tbody(
561
    attrs: AttrBuilderContext<HTMLTableSectionElement>? = null,
562
    content: ContentBuilder<HTMLTableSectionElement>? = null
563
)
564

565
/**
566
 * Table foot section
567
 */
568
@Composable
569
fun Tfoot(
570
    attrs: AttrBuilderContext<HTMLTableSectionElement>? = null,
571
    content: ContentBuilder<HTMLTableSectionElement>? = null
572
)
573

574
/**
575
 * Table caption
576
 */
577
@Composable
578
fun Caption(
579
    attrs: AttrBuilderContext<HTMLTableCaptionElement>? = null,
580
    content: ContentBuilder<HTMLTableCaptionElement>? = null
581
)
582

583
/**
584
 * Table column
585
 */
586
@Composable
587
fun Col(
588
    attrs: AttrBuilderContext<HTMLTableColElement>? = null
589
)
590

591
/**
592
 * Table column group
593
 */
594
@Composable
595
fun Colgroup(
596
    attrs: AttrBuilderContext<HTMLTableColElement>? = null,
597
    content: ContentBuilder<HTMLTableColElement>? = null
598
)
599
```
600

601
### Self-closing Elements
602

603
Elements that do not contain content and close themselves.
604

605
```kotlin { .api }
606
/**
607
 * Line break element
608
 */
609
@Composable
610
fun Br(
611
    attrs: AttrBuilderContext<HTMLBRElement>? = null
612
)
613

614
/**
615
 * Horizontal rule element
616
 */
617
@Composable
618
fun Hr(
619
    attrs: AttrBuilderContext<HTMLHRElement>? = null
620
)
621
```
622

623
### Embedded Content
624

625
Elements for embedding external content and objects.
626

627
```kotlin { .api }
628
/**
629
 * Embedded content element
630
 */
631
@Composable
632
fun Embed(
633
    attrs: AttrBuilderContext<HTMLEmbedElement>? = null
634
)
635

636
/**
637
 * Embedded object element
638
 */
639
@Composable
640
fun Object(
641
    attrs: AttrBuilderContext<HTMLObjectElement>? = null,
642
    content: ContentBuilder<HTMLObjectElement>? = null
643
)
644

645
/**
646
 * Object parameter element
647
 */
648
@Composable
649
fun Param(
650
    attrs: AttrBuilderContext<HTMLParamElement>? = null
651
)
652

653
/**
654
 * Inline frame element
655
 */
656
@Composable
657
fun Iframe(
658
    attrs: AttrBuilderContext<HTMLIFrameElement>? = null,
659
    content: ContentBuilder<HTMLIFrameElement>? = null
660
)
661

662
/**
663
 * Image map element (renamed to avoid Kotlin keyword conflict)
664
 */
665
@Composable
666
fun HTMLMap(
667
    attrs: AttrBuilderContext<HTMLMapElement>? = null,
668
    content: ContentBuilder<HTMLMapElement>? = null
669
)
670

671
/**
672
 * Image map area element
673
 */
674
@Composable
675
fun Area(
676
    attrs: AttrBuilderContext<HTMLAreaElement>? = null
677
)
678
```
679

680
## Types
681

682
```kotlin { .api }
683
typealias AttrBuilderContext<T> = AttrsScope<T>.() -> Unit
684
typealias ContentBuilder<T> = @Composable ElementScope<T>.() -> Unit
685

686
interface ElementScope<out TElement> {
687
    val scopeElement: TElement
688
}
689
```