0
# HTML Elements
1
2
All HTML5 elements as Python classes with full attribute support, context manager integration, and proper rendering. Each element supports the complete DOM API with Python-friendly attribute naming.
3
4
## Capabilities
5
6
### Base HTML Tag Class
7
8
Foundation class for all HTML elements providing common functionality and attribute handling.
9
10
```python { .api }
11
class html_tag(dom_tag):
12
def __init__(self, *args, **kwargs):
13
"""
14
Create an HTML element.
15
16
Parameters:
17
- *args: Child elements or text content
18
- **kwargs: HTML attributes (class_, fr, data_* become class, for, data-*)
19
"""
20
```
21
22
### Document Structure Elements
23
24
Core document structure and metadata elements.
25
26
```python { .api }
27
def html(*args, **kwargs): ... # Root HTML element
28
def head(*args, **kwargs): ... # Document metadata container
29
def body(*args, **kwargs): ... # Document body content
30
def title(*args, **kwargs): ... # Document title
31
def meta(*args, **kwargs): ... # Metadata (self-closing)
32
def link(*args, **kwargs): ... # External resource links (self-closing)
33
def base(*args, **kwargs): ... # Base URL (self-closing)
34
def style(*args, **kwargs): ... # CSS styles (no pretty printing)
35
def script(*args, **kwargs): ... # JavaScript (no pretty printing)
36
def noscript(*args, **kwargs): ... # No-script fallback
37
```
38
39
#### Usage Example
40
41
```python
42
from dominate.tags import *
43
44
# Complete document structure
45
page = html(
46
head(
47
title('My Page'),
48
meta(charset='utf-8'),
49
meta(name='viewport', content='width=device-width, initial-scale=1'),
50
link(rel='stylesheet', href='styles.css'),
51
style('body { margin: 0; }'),
52
script(src='script.js'),
53
script('console.log("inline script");')
54
),
55
body(
56
h1('Welcome'),
57
p('Content here')
58
)
59
)
60
```
61
62
### Sectioning Elements
63
64
Semantic document structure and content organization.
65
66
```python { .api }
67
def main(*args, **kwargs): ... # Main content area
68
def section(*args, **kwargs): ... # Generic sections
69
def nav(*args, **kwargs): ... # Navigation links
70
def article(*args, **kwargs): ... # Self-contained content
71
def aside(*args, **kwargs): ... # Sidebar content
72
def header(*args, **kwargs): ... # Introductory content
73
def footer(*args, **kwargs): ... # Footer content
74
def address(*args, **kwargs): ... # Contact information
75
76
# Headings
77
def h1(*args, **kwargs): ... # Primary heading
78
def h2(*args, **kwargs): ... # Secondary heading
79
def h3(*args, **kwargs): ... # Tertiary heading
80
def h4(*args, **kwargs): ... # Fourth-level heading
81
def h5(*args, **kwargs): ... # Fifth-level heading
82
def h6(*args, **kwargs): ... # Sixth-level heading
83
def hgroup(*args, **kwargs): ... # Heading group
84
```
85
86
#### Usage Example
87
88
```python
89
# Semantic page structure
90
page_content = main(
91
header(
92
h1('Article Title'),
93
p('Published on January 1, 2023')
94
),
95
section(
96
h2('Introduction'),
97
p('This is the introduction section.')
98
),
99
article(
100
h2('Main Article'),
101
p('Article content goes here.'),
102
aside('Related sidebar information')
103
),
104
footer(
105
address('Contact: author@example.com')
106
)
107
)
108
```
109
110
### Content Grouping Elements
111
112
Elements for organizing and grouping content.
113
114
```python { .api }
115
def div(*args, **kwargs): ... # Generic container
116
def p(*args, **kwargs): ... # Paragraph
117
def hr(*args, **kwargs): ... # Thematic break (self-closing)
118
def pre(*args, **kwargs): ... # Preformatted text (no pretty printing)
119
def blockquote(*args, **kwargs): ... # Quoted content
120
def figure(*args, **kwargs): ... # Self-contained content
121
def figcaption(*args, **kwargs): ... # Figure caption
122
123
# Lists
124
def ol(*args, **kwargs): ... # Ordered list
125
def ul(*args, **kwargs): ... # Unordered list
126
def li(*args, **kwargs): ... # List item
127
def dl(*args, **kwargs): ... # Description list
128
def dt(*args, **kwargs): ... # Description term
129
def dd(*args, **kwargs): ... # Description definition
130
```
131
132
#### Usage Example
133
134
```python
135
# Content grouping
136
content = div(
137
p('This is a paragraph with some text.'),
138
hr(), # Horizontal rule
139
blockquote(
140
p('This is a quoted passage.'),
141
cite='https://example.com'
142
),
143
figure(
144
pre('def example():\n return "code"'),
145
figcaption('Code example')
146
),
147
ul(
148
li('First item'),
149
li('Second item'),
150
li('Third item')
151
),
152
dl(
153
dt('Term 1'), dd('Definition 1'),
154
dt('Term 2'), dd('Definition 2')
155
)
156
)
157
```
158
159
### Text Semantics Elements
160
161
Inline text formatting and semantic markup.
162
163
```python { .api }
164
def a(*args, **kwargs): ... # Links/anchors
165
def em(*args, **kwargs): ... # Emphasis
166
def strong(*args, **kwargs): ... # Strong importance
167
def small(*args, **kwargs): ... # Fine print
168
def s(*args, **kwargs): ... # Strikethrough
169
def cite(*args, **kwargs): ... # Citations
170
def q(*args, **kwargs): ... # Inline quotes
171
def dfn(*args, **kwargs): ... # Definitions
172
def abbr(*args, **kwargs): ... # Abbreviations
173
def time_(*args, **kwargs): ... # Time/dates (also available as _time)
174
def code(*args, **kwargs): ... # Code
175
def var(*args, **kwargs): ... # Variables
176
def samp(*args, **kwargs): ... # Sample output
177
def kbd(*args, **kwargs): ... # Keyboard input
178
def sub(*args, **kwargs): ... # Subscript
179
def sup(*args, **kwargs): ... # Superscript
180
def i(*args, **kwargs): ... # Italic (inline)
181
def b(*args, **kwargs): ... # Bold
182
def u(*args, **kwargs): ... # Underline
183
def mark(*args, **kwargs): ... # Highlighted text
184
def span(*args, **kwargs): ... # Generic inline
185
def br(*args, **kwargs): ... # Line break (self-closing, inline)
186
def wbr(*args, **kwargs): ... # Word break opportunity (self-closing, inline)
187
188
# Ruby annotations
189
def ruby(*args, **kwargs): ... # Ruby annotation
190
def rt(*args, **kwargs): ... # Ruby text
191
def rp(*args, **kwargs): ... # Ruby parentheses
192
193
# Bidirectional text
194
def bdi(*args, **kwargs): ... # Bidirectional isolation
195
def bdo(*args, **kwargs): ... # Bidirectional override
196
```
197
198
#### Usage Example
199
200
```python
201
# Text semantics
202
text_content = p(
203
'This is ', em('emphasized'), ' text with ', strong('strong'), ' importance. ',
204
'Here is a ', a('link', href='https://example.com'), ' and some ',
205
code('inline code'), '. The price is ', small('$19.99'), '.',
206
br(),
207
'Published on ', time_('2023-01-01', datetime='2023-01-01'), '.',
208
br(),
209
'Chemical formula: H', sub('2'), 'O and E=mc', sup('2'), '.'
210
)
211
```
212
213
### Edit Elements
214
215
Elements for indicating content changes.
216
217
```python { .api }
218
def ins(*args, **kwargs): ... # Inserted content
219
def del_(*args, **kwargs): ... # Deleted content (also available as _del)
220
```
221
222
#### Usage Example
223
224
```python
225
# Edit tracking
226
edited_text = p(
227
'The price is ',
228
del_('$29.99', title='Old price'),
229
' ',
230
ins('$19.99', title='New price')
231
)
232
```
233
234
### Embedded Content Elements
235
236
Media and external content embedding.
237
238
```python { .api }
239
def img(*args, **kwargs): ... # Images (self-closing)
240
def iframe(*args, **kwargs): ... # Nested browsing context
241
def embed(*args, **kwargs): ... # External application (self-closing)
242
def object_(*args, **kwargs): ... # External resource (also available as _object)
243
def param(*args, **kwargs): ... # Object parameters (self-closing)
244
def video(*args, **kwargs): ... # Video content
245
def audio(*args, **kwargs): ... # Audio content
246
def source(*args, **kwargs): ... # Media sources (self-closing)
247
def track(*args, **kwargs): ... # Text tracks (self-closing)
248
def canvas(*args, **kwargs): ... # Drawing canvas
249
def map_(*args, **kwargs): ... # Image map (also available as _map)
250
def area(*args, **kwargs): ... # Image map area (self-closing)
251
```
252
253
#### Usage Example
254
255
```python
256
# Embedded content
257
media_content = div(
258
img(src='photo.jpg', alt='A beautiful photo', width='400'),
259
video(
260
source(src='video.mp4', type='video/mp4'),
261
source(src='video.webm', type='video/webm'),
262
track(src='captions.vtt', kind='captions', srclang='en'),
263
'Your browser does not support video.',
264
controls=True
265
),
266
audio(
267
source(src='audio.mp3', type='audio/mpeg'),
268
'Your browser does not support audio.',
269
controls=True
270
),
271
canvas(id='myCanvas', width='300', height='200')
272
)
273
```
274
275
### Table Elements
276
277
Tabular data presentation.
278
279
```python { .api }
280
def table(*args, **kwargs): ... # Table container
281
def caption(*args, **kwargs): ... # Table caption
282
def colgroup(*args, **kwargs): ... # Column group
283
def col(*args, **kwargs): ... # Column (self-closing)
284
def thead(*args, **kwargs): ... # Table header
285
def tbody(*args, **kwargs): ... # Table body
286
def tfoot(*args, **kwargs): ... # Table footer
287
def tr(*args, **kwargs): ... # Table row
288
def th(*args, **kwargs): ... # Header cell
289
def td(*args, **kwargs): ... # Data cell
290
```
291
292
#### Usage Example
293
294
```python
295
# Data table
296
data_table = table(
297
caption('Sales Report'),
298
colgroup(
299
col(span='2', style='background-color: #f0f0f0'),
300
col(style='background-color: #e0e0e0')
301
),
302
thead(
303
tr(
304
th('Product', scope='col'),
305
th('Quantity', scope='col'),
306
th('Price', scope='col')
307
)
308
),
309
tbody(
310
tr(
311
td('Widget A'),
312
td('10'),
313
td('$100')
314
),
315
tr(
316
td('Widget B'),
317
td('5'),
318
td('$50')
319
)
320
),
321
tfoot(
322
tr(
323
th('Total', scope='row', colspan='2'),
324
td('$150')
325
)
326
)
327
)
328
```
329
330
### Form Elements
331
332
Interactive forms and input controls.
333
334
```python { .api }
335
def form(*args, **kwargs): ... # Form container
336
def fieldset(*args, **kwargs): ... # Form control group
337
def legend(*args, **kwargs): ... # Fieldset caption
338
def label(*args, **kwargs): ... # Input label
339
def input_(*args, **kwargs): ... # Form input (self-closing, also available as _input)
340
def button(*args, **kwargs): ... # Button
341
def select(*args, **kwargs): ... # Select dropdown
342
def datalist(*args, **kwargs): ... # Input suggestions
343
def optgroup(*args, **kwargs): ... # Option group
344
def option(*args, **kwargs): ... # Select option
345
def textarea(*args, **kwargs): ... # Multi-line text input
346
def output(*args, **kwargs): ... # Calculation result
347
def progress(*args, **kwargs): ... # Progress indicator
348
def meter(*args, **kwargs): ... # Scalar measurement
349
def keygen(*args, **kwargs): ... # Key generator (self-closing)
350
```
351
352
#### Usage Example
353
354
```python
355
# Contact form
356
contact_form = form(
357
fieldset(
358
legend('Personal Information'),
359
label(
360
'Name: ',
361
input_(type='text', name='name', required=True)
362
),
363
label(
364
'Email: ',
365
input_(type='email', name='email', required=True)
366
)
367
),
368
fieldset(
369
legend('Message'),
370
label(
371
'Subject: ',
372
select(
373
option('General Inquiry'),
374
option('Support Request'),
375
option('Feedback'),
376
name='subject'
377
)
378
),
379
label(
380
'Message: ',
381
textarea(name='message', rows='5', cols='40', required=True)
382
)
383
),
384
button('Send Message', type='submit'),
385
method='post',
386
action='/contact'
387
)
388
```
389
390
### Interactive Elements
391
392
User interaction and disclosure widgets.
393
394
```python { .api }
395
def details(*args, **kwargs): ... # Disclosure widget
396
def summary(*args, **kwargs): ... # Details summary
397
def menu(*args, **kwargs): ... # Command menu
398
def command(*args, **kwargs): ... # User command (self-closing)
399
```
400
401
#### Usage Example
402
403
```python
404
# Interactive disclosure
405
disclosure = details(
406
summary('Click to expand'),
407
p('This content is hidden by default.'),
408
p('It becomes visible when the summary is clicked.')
409
)
410
```
411
412
### Legacy and Special Elements
413
414
Legacy elements and special-purpose elements.
415
416
```python { .api }
417
def font(*args, **kwargs): ... # Font styling (legacy)
418
def comment(*args, **kwargs): ... # HTML comments
419
```
420
421
#### Special Comment Features
422
423
The comment element supports conditional comments for Internet Explorer:
424
425
```python
426
# Regular comment
427
regular_comment = comment('This is a regular HTML comment')
428
429
# IE conditional comment
430
ie_comment = comment(
431
p('Please upgrade your browser'),
432
condition='lt IE9'
433
)
434
435
# Downlevel conditional comment
436
downlevel_comment = comment(
437
p('You are using a downlevel browser'),
438
condition='false',
439
downlevel='revealed'
440
)
441
```
442
443
## Attribute Handling
444
445
All HTML elements support Python-friendly attribute naming with automatic conversion:
446
447
```python
448
# Attribute shortcuts and conversions
449
element = div(
450
cls='my-class', # becomes class="my-class"
451
class_name='other-class', # becomes class="other-class"
452
fr='input-id', # becomes for="input-id"
453
html_for='input-id', # becomes for="input-id"
454
data_value='123', # becomes data-value="123"
455
aria_label='Description' # becomes aria-label="Description"
456
)
457
458
# Boolean attributes
459
checkbox = input_(type='checkbox', checked=True) # becomes checked="checked"
460
disabled_button = button('Click', disabled=True) # becomes disabled="disabled"
461
```