0
# HTML Elements
1

2
Python classes for all HTML5 elements with attribute management, styling, and event handling capabilities. Each HTML element is represented as a Python class that can be instantiated, configured, and manipulated using standard Python syntax.
3

4
## Capabilities
5

6
### Element Creation
7

8
All standard HTML5 elements are available as Python classes that can be instantiated with content and attributes.
9

10
```python { .api }
11
class Element:
12
    """Base class for all HTML elements."""
13
    def __init__(self, content: str = "", **attrs): 
14
        """
15
        Create HTML element.
16
        
17
        Args:
18
            content: Text content or child elements
19
            **attrs: HTML attributes as keyword arguments
20
        """
21
    
22
    # Content manipulation
23
    def __le__(self, other) -> Element: ...  # element <= content
24
    def __lt__(self, other) -> Element: ...  # element < content  
25
    def clear(self) -> Element: ...
26
    
27
    # Styling and attributes
28
    def bind(self, event: str, callback: Callable) -> Element: ...
29
    def unbind(self, event: str, callback: Callable = None) -> Element: ...
30
    
31
    # Properties
32
    text: str           # Text content
33
    html: str          # HTML content  
34
    style: CSSStyle    # CSS styling
35
    classList: ClassList  # CSS class management
36
```
37

38
### Text and Content Elements
39

40
Elements for text content, headings, and content organization.
41

42
```python { .api }
43
class P(Element):
44
    """Paragraph element."""
45
    def __init__(self, text: str = "", **attrs): ...
46

47
class DIV(Element):  
48
    """Division/container element."""
49
    def __init__(self, content: str = "", **attrs): ...
50

51
class SPAN(Element):
52
    """Inline span element."""  
53
    def __init__(self, text: str = "", **attrs): ...
54

55
class H1(Element):
56
    """Main heading element."""
57
    def __init__(self, text: str = "", **attrs): ...
58

59
class H2(Element):
60
    """Secondary heading element.""" 
61
    def __init__(self, text: str = "", **attrs): ...
62

63
class H3(Element):
64
    """Tertiary heading element."""
65
    def __init__(self, text: str = "", **attrs): ...
66

67
class H4(Element):
68
    """Fourth-level heading element."""
69
    def __init__(self, text: str = "", **attrs): ...
70

71
class H5(Element):
72
    """Fifth-level heading element."""
73
    def __init__(self, text: str = "", **attrs): ...
74

75
class H6(Element):
76
    """Sixth-level heading element."""
77
    def __init__(self, text: str = "", **attrs): ...
78
```
79

80
**Usage:**
81
```python
82
from browser.html import DIV, P, H1, SPAN
83

84
# Create elements with content
85
title = H1("Welcome to My Site")
86
paragraph = P("This is some paragraph text.")
87
container = DIV()
88

89
# Add content to container
90
container <= title
91
container <= paragraph
92
container <= SPAN("Additional info", Class="highlight")
93
```
94

95
### Interactive Elements
96

97
Elements for user interaction including buttons, inputs, and forms.
98

99
```python { .api }
100
class BUTTON(Element):
101
    """Button element."""
102
    def __init__(self, text: str = "", **attrs): ...
103

104
class INPUT(Element):
105
    """Input form element."""
106
    def __init__(self, type: str = "text", **attrs): ...
107
    
108
    # Properties
109
    value: str         # Current input value
110
    checked: bool      # For checkboxes/radio buttons
111
    disabled: bool     # Disabled state
112

113
class TEXTAREA(Element):
114
    """Multi-line text area."""
115
    def __init__(self, content: str = "", **attrs): ...
116
    
117
    value: str         # Current text content
118

119
class SELECT(Element):
120
    """Select dropdown element."""
121
    def __init__(self, **attrs): ...
122
    
123
    selectedIndex: int # Selected option index
124
    value: str         # Selected option value
125

126
class OPTION(Element):
127
    """Option element for SELECT."""
128
    def __init__(self, text: str = "", value: str = None, **attrs): ...
129
    
130
    selected: bool     # Selection state
131
    value: str         # Option value
132

133
class FORM(Element):
134
    """Form element."""
135
    def __init__(self, **attrs): ...
136
    
137
    def submit(self) -> None: ...
138
    def reset(self) -> None: ...
139
```
140

141
**Usage:**
142
```python
143
from browser.html import FORM, INPUT, BUTTON, SELECT, OPTION
144
from browser import bind
145

146
# Create form
147
form = FORM(action="/submit", method="post")
148

149
# Add form controls
150
name_input = INPUT(type="text", name="name", placeholder="Enter name")
151
email_input = INPUT(type="email", name="email", required=True)
152

153
# Select dropdown
154
country_select = SELECT(name="country")
155
country_select <= OPTION("USA", value="us")
156
country_select <= OPTION("Canada", value="ca")
157

158
submit_btn = BUTTON("Submit", type="submit")
159

160
# Assemble form
161
form <= name_input
162
form <= email_input  
163
form <= country_select
164
form <= submit_btn
165

166
# Handle form submission
167
@bind(form, "submit")
168
def handle_submit(event):
169
    event.preventDefault()
170
    name = name_input.value
171
    email = email_input.value
172
    print(f"Submitted: {name}, {email}")
173
```
174

175
### Navigation and Links
176

177
Elements for navigation, links, and document structure.
178

179
```python { .api }
180
class A(Element):
181
    """Anchor/link element."""
182
    def __init__(self, text: str = "", href: str = "#", **attrs): ...
183
    
184
    href: str          # Link target
185
    target: str        # Link target window
186

187
class NAV(Element):
188
    """Navigation section element."""
189
    def __init__(self, **attrs): ...
190

191
class UL(Element):
192
    """Unordered list element."""
193
    def __init__(self, **attrs): ...
194

195
class OL(Element):
196
    """Ordered list element."""  
197
    def __init__(self, **attrs): ...
198

199
class LI(Element):
200
    """List item element."""
201
    def __init__(self, content: str = "", **attrs): ...
202
```
203

204
**Usage:**
205
```python
206
from browser.html import NAV, UL, LI, A
207

208
# Create navigation menu
209
nav = NAV()
210
menu = UL()
211

212
menu <= LI(A("Home", href="/"))
213
menu <= LI(A("About", href="/about"))  
214
menu <= LI(A("Contact", href="/contact"))
215

216
nav <= menu
217
```
218

219
### Media Elements
220

221
Elements for images, audio, video, and other media content.
222

223
```python { .api }
224
class IMG(Element):
225
    """Image element."""
226
    def __init__(self, src: str = "", alt: str = "", **attrs): ...
227
    
228
    src: str           # Image source URL
229
    alt: str           # Alternative text
230
    width: int         # Image width
231
    height: int        # Image height
232

233
class VIDEO(Element):
234
    """Video element."""
235
    def __init__(self, **attrs): ...
236
    
237
    src: str           # Video source
238
    controls: bool     # Show controls
239
    autoplay: bool     # Auto-play video
240
    
241
    def play(self) -> None: ...
242
    def pause(self) -> None: ...
243

244
class AUDIO(Element):
245
    """Audio element."""
246
    def __init__(self, **attrs): ...
247
    
248
    src: str           # Audio source
249
    controls: bool     # Show controls
250
    
251
    def play(self) -> None: ...
252
    def pause(self) -> None: ...
253

254
class CANVAS(Element):
255
    """Canvas element for graphics."""
256
    def __init__(self, width: int = 300, height: int = 150, **attrs): ...
257
    
258
    width: int         # Canvas width
259
    height: int        # Canvas height
260
    
261
    def getContext(self, type: str) -> CanvasContext: ...
262
```
263

264
**Usage:**
265
```python  
266
from browser.html import IMG, VIDEO, CANVAS
267

268
# Image with error handling
269
img = IMG(src="photo.jpg", alt="Profile photo")
270

271
@bind(img, "error")
272
def handle_error(event):
273
    img.src = "placeholder.jpg"
274

275
# Video player
276
video = VIDEO(controls=True, width=640, height=480)
277
video.src = "movie.mp4"
278

279
# Canvas for drawing
280
canvas = CANVAS(width=800, height=600)
281
ctx = canvas.getContext("2d")
282
```
283

284
### Table Elements
285

286
Elements for creating data tables with proper semantic structure.
287

288
```python { .api }
289
class TABLE(Element):
290
    """Table element."""
291
    def __init__(self, **attrs): ...
292

293
class THEAD(Element):
294
    """Table header section."""
295
    def __init__(self, **attrs): ...
296

297
class TBODY(Element):
298
    """Table body section."""
299
    def __init__(self, **attrs): ...
300

301
class TFOOT(Element):
302
    """Table footer section."""
303
    def __init__(self, **attrs): ...
304

305
class TR(Element):
306
    """Table row."""
307
    def __init__(self, **attrs): ...
308

309
class TH(Element):
310
    """Table header cell."""
311
    def __init__(self, text: str = "", **attrs): ...
312

313
class TD(Element):
314
    """Table data cell."""  
315
    def __init__(self, content: str = "", **attrs): ...
316
```
317

318
**Usage:**
319
```python
320
from browser.html import TABLE, THEAD, TBODY, TR, TH, TD
321

322
# Create data table
323
table = TABLE()
324
thead = THEAD()
325
tbody = TBODY()
326

327
# Header row
328
header_row = TR()
329
header_row <= TH("Name")
330
header_row <= TH("Age") 
331
header_row <= TH("City")
332
thead <= header_row
333

334
# Data rows
335
data_row = TR()
336
data_row <= TD("John")
337
data_row <= TD("25")
338
data_row <= TD("New York")
339
tbody <= data_row
340

341
table <= thead
342
table <= tbody
343
```
344

345
### Semantic Elements
346

347
HTML5 semantic elements for better document structure and accessibility.
348

349
```python { .api }
350
class HEADER(Element):
351
    """Header section element."""
352
    def __init__(self, **attrs): ...
353

354
class FOOTER(Element):
355
    """Footer section element."""
356
    def __init__(self, **attrs): ...
357

358
class MAIN(Element):
359
    """Main content element."""
360
    def __init__(self, **attrs): ...
361

362
class ARTICLE(Element):
363
    """Article element."""
364
    def __init__(self, **attrs): ...
365

366
class SECTION(Element):
367
    """Section element."""
368
    def __init__(self, **attrs): ...
369

370
class ASIDE(Element):
371
    """Aside/sidebar element."""
372
    def __init__(self, **attrs): ...
373
```
374

375
## Element Manipulation
376

377
### Content Operations
378

379
```python
380
# Add content (multiple ways)
381
element <= "Text content"           # Add text
382
element <= other_element           # Add child element
383
element < "Replace content"        # Replace content
384

385
# Clear content
386
element.clear()
387

388
# Set HTML content
389
element.html = "<strong>Bold text</strong>"
390

391
# Set text content
392
element.text = "Plain text"
393
```
394

395
### Styling and Classes
396

397
```python
398
# CSS styling
399
element.style.color = "red"
400
element.style.backgroundColor = "yellow"
401
element.style.fontSize = "16px"
402

403
# CSS classes
404
element.classList.add("highlight")
405
element.classList.remove("hidden")
406
element.classList.toggle("active")
407

408
# Check classes
409
if "active" in element.classList:
410
    print("Element is active")
411
```
412

413
### Attributes
414

415
```python
416
# Set attributes during creation
417
img = IMG(src="photo.jpg", alt="Photo", Class="thumbnail")
418

419
# Set attributes after creation  
420
img.src = "new-photo.jpg"
421
img.setAttribute("data-id", "123")
422

423
# Get attributes
424
src = img.getAttribute("src")
425
```
426

427
### Event Handling
428

429
```python
430
# Bind events
431
@bind(button, "click")
432
def handle_click(event):
433
    print("Clicked!")
434

435
# Multiple events
436
@bind(input_field, "focus blur")
437
def handle_focus_change(event):
438
    if event.type == "focus":
439
        input_field.classList.add("focused")
440
    else:
441
        input_field.classList.remove("focused")
442
```
443

444
This comprehensive HTML element system provides a complete Python interface to HTML5, enabling developers to create complex web interfaces using familiar Python syntax while maintaining full access to all HTML capabilities.