0
# HTML Elements
1

2
Complete set of HTML element constructors for building user interfaces declaratively. ReactPy provides functions for all standard HTML elements that return VDOM dictionaries representing the virtual DOM structure.
3

4
## Capabilities
5

6
### Element Constructor Pattern
7

8
All HTML elements follow the same constructor pattern:
9

10
```python { .api }
11
def element_name(*children, **attributes) -> VdomDict: ...
12
```
13

14
**Parameters:**
15
- `*children`: Child elements (strings, other VDOM elements, or Component instances)
16
- `**attributes`: HTML attributes as keyword arguments (use `className` for `class`)
17

18
**Returns:** VdomDict representing the element
19

20
### Document Structure Elements
21

22
Elements for document structure and metadata:
23

24
```python { .api }
25
def html(*children, **attributes) -> VdomDict: ...
26
def head(*children, **attributes) -> VdomDict: ...
27
def body(*children, **attributes) -> VdomDict: ...
28
def title(*children, **attributes) -> VdomDict: ...
29
def meta(**attributes) -> VdomDict: ...
30
def link(**attributes) -> VdomDict: ...
31
def base(**attributes) -> VdomDict: ...
32
def style(*children, **attributes) -> VdomDict: ...
33
```
34

35
**Usage Examples:**
36

37
```python
38
from reactpy import html
39

40
# Document structure
41
document = html.html(
42
    html.head(
43
        html.title("My App"),
44
        html.meta(charset="utf-8"),
45
        html.link(rel="stylesheet", href="styles.css")
46
    ),
47
    html.body(
48
        html.h1("Welcome to My App")
49
    )
50
)
51
```
52

53
### Content Sectioning Elements
54

55
Elements for organizing content into logical sections:
56

57
```python { .api }
58
def header(*children, **attributes) -> VdomDict: ...
59
def nav(*children, **attributes) -> VdomDict: ...
60
def main(*children, **attributes) -> VdomDict: ...
61
def section(*children, **attributes) -> VdomDict: ...
62
def article(*children, **attributes) -> VdomDict: ...
63
def aside(*children, **attributes) -> VdomDict: ...
64
def footer(*children, **attributes) -> VdomDict: ...
65
def h1(*children, **attributes) -> VdomDict: ...
66
def h2(*children, **attributes) -> VdomDict: ...
67
def h3(*children, **attributes) -> VdomDict: ...
68
def h4(*children, **attributes) -> VdomDict: ...
69
def h5(*children, **attributes) -> VdomDict: ...
70
def h6(*children, **attributes) -> VdomDict: ...
71
def address(*children, **attributes) -> VdomDict: ...
72
```
73

74
**Usage Examples:**
75

76
```python
77
page_layout = html.div(
78
    html.header(
79
        html.nav(
80
            html.ul(
81
                html.li(html.a({"href": "/"}, "Home")),
82
                html.li(html.a({"href": "/about"}, "About"))
83
            )
84
        )
85
    ),
86
    html.main(
87
        html.article(
88
            html.h1("Article Title"),
89
            html.p("Article content here...")
90
        ),
91
        html.aside(
92
            html.h3("Related Links"),
93
            html.ul(
94
                html.li(html.a({"href": "/related"}, "Related Page"))
95
            )
96
        )
97
    ),
98
    html.footer(
99
        html.p("© 2024 My Website")
100
    )
101
)
102
```
103

104
### Text Content Elements
105

106
Elements for text content and structure:
107

108
```python { .api }
109
def div(*children, **attributes) -> VdomDict: ...
110
def p(*children, **attributes) -> VdomDict: ...
111
def pre(*children, **attributes) -> VdomDict: ...
112
def blockquote(*children, **attributes) -> VdomDict: ...
113
def ol(*children, **attributes) -> VdomDict: ...
114
def ul(*children, **attributes) -> VdomDict: ...
115
def li(*children, **attributes) -> VdomDict: ...
116
def dl(*children, **attributes) -> VdomDict: ...
117
def dt(*children, **attributes) -> VdomDict: ...
118
def dd(*children, **attributes) -> VdomDict: ...
119
def figure(*children, **attributes) -> VdomDict: ...
120
def figcaption(*children, **attributes) -> VdomDict: ...
121
def hr(**attributes) -> VdomDict: ...
122
```
123

124
**Usage Examples:**
125

126
```python
127
content = html.div(
128
    html.h2("Lists Example"),
129
    html.ul(
130
        html.li("First item"),
131
        html.li("Second item"),
132
        html.li("Third item")
133
    ),
134
    html.ol(
135
        html.li("Step one"),
136
        html.li("Step two"),
137
        html.li("Step three")
138
    ),
139
    html.dl(
140
        html.dt("Term"),
141
        html.dd("Definition of the term")
142
    ),
143
    html.figure(
144
        html.img({"src": "image.jpg", "alt": "Description"}),
145
        html.figcaption("Image caption")
146
    )
147
)
148
```
149

150
### Inline Text Semantics
151

152
Elements for inline text formatting and semantics:
153

154
```python { .api }
155
def a(*children, **attributes) -> VdomDict: ...
156
def em(*children, **attributes) -> VdomDict: ...
157
def strong(*children, **attributes) -> VdomDict: ...
158
def small(*children, **attributes) -> VdomDict: ...
159
def s(*children, **attributes) -> VdomDict: ...
160
def cite(*children, **attributes) -> VdomDict: ...
161
def q(*children, **attributes) -> VdomDict: ...
162
def dfn(*children, **attributes) -> VdomDict: ...
163
def abbr(*children, **attributes) -> VdomDict: ...
164
def code(*children, **attributes) -> VdomDict: ...
165
def var(*children, **attributes) -> VdomDict: ...
166
def samp(*children, **attributes) -> VdomDict: ...
167
def kbd(*children, **attributes) -> VdomDict: ...
168
def sub(*children, **attributes) -> VdomDict: ...
169
def sup(*children, **attributes) -> VdomDict: ...
170
def i(*children, **attributes) -> VdomDict: ...
171
def b(*children, **attributes) -> VdomDict: ...
172
def u(*children, **attributes) -> VdomDict: ...
173
def mark(*children, **attributes) -> VdomDict: ...
174
def span(*children, **attributes) -> VdomDict: ...
175
def br(**attributes) -> VdomDict: ...
176
def wbr(**attributes) -> VdomDict: ...
177
```
178

179
**Usage Examples:**
180

181
```python
182
text_content = html.p(
183
    "This is ",
184
    html.strong("important"),
185
    " text with ",
186
    html.em("emphasis"),
187
    " and a ",
188
    html.a({"href": "https://example.com"}, "link"),
189
    ". Here's some ",
190
    html.code("inline code"),
191
    " and a ",
192
    html.kbd("Ctrl+C"),
193
    " keyboard shortcut."
194
)
195
```
196

197
### Form Elements
198

199
Elements for creating interactive forms:
200

201
```python { .api }
202
def form(*children, **attributes) -> VdomDict: ...
203
def label(*children, **attributes) -> VdomDict: ...
204
def input(**attributes) -> VdomDict: ...
205
def button(*children, **attributes) -> VdomDict: ...
206
def select(*children, **attributes) -> VdomDict: ...
207
def datalist(*children, **attributes) -> VdomDict: ...
208
def optgroup(*children, **attributes) -> VdomDict: ...
209
def option(*children, **attributes) -> VdomDict: ...
210
def textarea(*children, **attributes) -> VdomDict: ...
211
def output(*children, **attributes) -> VdomDict: ...
212
def progress(*children, **attributes) -> VdomDict: ...
213
def meter(*children, **attributes) -> VdomDict: ...
214
def fieldset(*children, **attributes) -> VdomDict: ...
215
def legend(*children, **attributes) -> VdomDict: ...
216
```
217

218
**Usage Examples:**
219

220
```python
221
form_example = html.form(
222
    html.fieldset(
223
        html.legend("User Information"),
224
        html.div(
225
            html.label({"htmlFor": "name"}, "Name:"),
226
            html.input({"id": "name", "type": "text", "required": True})
227
        ),
228
        html.div(
229
            html.label({"htmlFor": "email"}, "Email:"),
230
            html.input({"id": "email", "type": "email", "required": True})
231
        ),
232
        html.div(
233
            html.label({"htmlFor": "country"}, "Country:"),
234
            html.select(
235
                {"id": "country"},
236
                html.option({"value": "us"}, "United States"),
237
                html.option({"value": "ca"}, "Canada"),
238
                html.option({"value": "uk"}, "United Kingdom")
239
            )
240
        ),
241
        html.div(
242
            html.label({"htmlFor": "message"}, "Message:"),
243
            html.textarea({"id": "message", "rows": 4})
244
        ),
245
        html.button({"type": "submit"}, "Submit")
246
    )
247
)
248
```
249

250
### Table Elements
251

252
Elements for creating data tables:
253

254
```python { .api }
255
def table(*children, **attributes) -> VdomDict: ...
256
def caption(*children, **attributes) -> VdomDict: ...
257
def colgroup(*children, **attributes) -> VdomDict: ...
258
def col(**attributes) -> VdomDict: ...
259
def tbody(*children, **attributes) -> VdomDict: ...
260
def thead(*children, **attributes) -> VdomDict: ...
261
def tfoot(*children, **attributes) -> VdomDict: ...
262
def tr(*children, **attributes) -> VdomDict: ...
263
def td(*children, **attributes) -> VdomDict: ...
264
def th(*children, **attributes) -> VdomDict: ...
265
```
266

267
**Usage Examples:**
268

269
```python
270
data_table = html.table(
271
    html.caption("Sales Data"),
272
    html.thead(
273
        html.tr(
274
            html.th("Product"),
275
            html.th("Q1"),
276
            html.th("Q2"),
277
            html.th("Total")
278
        )
279
    ),
280
    html.tbody(
281
        html.tr(
282
            html.td("Widget A"),
283
            html.td("100"),
284
            html.td("150"),
285
            html.td("250")
286
        ),
287
        html.tr(
288
            html.td("Widget B"),
289
            html.td("75"),
290
            html.td("125"),
291
            html.td("200")
292
        )
293
    )
294
)
295
```
296

297
### Multimedia Elements
298

299
Elements for images, audio, video, and embedded content:
300

301
```python { .api }
302
def img(**attributes) -> VdomDict: ...
303
def iframe(**attributes) -> VdomDict: ...
304
def embed(**attributes) -> VdomDict: ...
305
def object(*children, **attributes) -> VdomDict: ...
306
def param(**attributes) -> VdomDict: ...
307
def video(*children, **attributes) -> VdomDict: ...
308
def audio(*children, **attributes) -> VdomDict: ...
309
def source(**attributes) -> VdomDict: ...
310
def track(**attributes) -> VdomDict: ...
311
def map(*children, **attributes) -> VdomDict: ...
312
def area(**attributes) -> VdomDict: ...
313
def canvas(*children, **attributes) -> VdomDict: ...
314
```
315

316
**Usage Examples:**
317

318
```python
319
media_content = html.div(
320
    html.img({"src": "image.jpg", "alt": "Description", "width": 300}),
321
    html.video(
322
        {"controls": True, "width": 500},
323
        html.source({"src": "movie.mp4", "type": "video/mp4"}),
324
        html.source({"src": "movie.ogg", "type": "video/ogg"}),
325
        "Your browser does not support the video tag."
326
    ),
327
    html.audio(
328
        {"controls": True},
329
        html.source({"src": "audio.mp3", "type": "audio/mpeg"}),
330
        "Your browser does not support the audio tag."
331
    )
332
)
333
```
334

335
### Interactive Elements
336

337
Elements for user interaction:
338

339
```python { .api }
340
def details(*children, **attributes) -> VdomDict: ...
341
def summary(*children, **attributes) -> VdomDict: ...
342
def dialog(*children, **attributes) -> VdomDict: ...
343
```
344

345
**Usage Examples:**
346

347
```python
348
interactive = html.div(
349
    html.details(
350
        html.summary("Click to expand"),
351
        html.p("This content is hidden by default")
352
    ),
353
    html.dialog(
354
        {"open": False, "id": "myDialog"},
355
        html.p("This is a dialog"),
356
        html.button({"onclick": "closeDialog()"}, "Close")
357
    )
358
)
359
```
360

361
### Fragment Element
362

363
Special element for grouping without wrapper:
364

365
```python { .api }
366
def _(*children, **attributes) -> VdomDict: ...
367
```
368

369
**Usage Examples:**
370

371
```python
372
# Fragment allows multiple top-level elements without wrapper
373
fragment_example = html._(
374
    html.h1("Title"),
375
    html.p("Paragraph"),
376
    html.div("Content")
377
)
378
```
379

380
### Attribute Handling
381

382
Special handling for certain attributes:
383

384
```python
385
# className for CSS classes (not 'class' which is Python keyword)
386
element = html.div({"className": "my-class"})
387

388
# Boolean attributes
389
input_elem = html.input({"type": "checkbox", "checked": True, "disabled": False})
390

391
# Data attributes
392
custom_elem = html.div({"data-id": "123", "data-name": "example"})
393

394
# Event handlers
395
button = html.button(
396
    {"onClick": handle_click, "onSubmit": handle_submit},
397
    "Click me"
398
)
399
```