# HTML Component Documentation

The `html` module provides utilities for rendering HTML content within the `deephaven.ui`. This allows users to embed custom HTML elements into their applications.

## Example

```python
from deephaven import ui

basic_html_example = ui.html.div("basic html example")
```

## UI recommendations

**Avoid using `html` components unless necessary**: This is an advanced feature that should only be used when creating an HTML component not covered by other `deephaven.ui` components. HTML components are not themed and may respond incorrectly to different user layouts.

## HTML Element

The `html_element` method allows you to specify any html `tag` along with any `children` and `attributes`.

```python order=simple_html,nested_html
from deephaven import ui

simple_html = ui.html.html_element("div", "Welcome to Deephaven", id="simple")

nested_html = ui.html.html_element(
    "div",
    ui.html.html_element("h1", "Welcome to Deephaven"),
    ui.html.html_element("p", "This is a custom HTML component."),
    id="nested",
)
```

## Common Tags

`ui.html` also provides methods for common tags.

```python order=simple_html,nested_html
from deephaven import ui

simple_html = ui.html.div("Welcome to Deephaven", id="simple")

nested_html = ui.html.div(
    ui.html.h1("Welcome to Deephaven"),
    ui.html.p("This is a custom HTML component."),
    id="nested",
)
```

For a full list of methods, see the API reference below.

## Use with `deephaven.ui`

The `ui.html` component can be nested inside other `deephaven.ui` components and vice versa.

```python order=component,html
from deephaven import ui

component = ui.view(
    ui.heading("HTML inside a component"), ui.html.label("this is html")
)

html = ui.html.div(ui.html.h1("Component inside html"), ui.text("this is a component"))
```

## API reference

Create a new HTML element. Render just returns the children that are passed in.

**Returns:** `BaseElement` A new HTML element.

<ParamTable param={{"module_name": "deephaven.ui.html.", "name": "html_element", "parameters": [{"name": "tag", "type": "str", "description": "The HTML tag for this element."}, {"name": "*children", "type": "Any", "description": "The children of the element."}, {"name": "**attributes", "type": "Any", "description": "Attributes to set on the element"}]}} />
Creates an HTML "a" element with the specified children and attributes.

**Returns:** `BaseElement` An HTML element representing a "a" with the specified children and attributes.

<ParamTable param={{"module_name": "deephaven.ui.html.", "name": "a", "parameters": [{"name": "*children", "type": "Any", "description": "The children of the element."}, {"name": "**attributes", "type": "Any", "description": "Attributes to set on the element"}]}} />
Creates an HTML "button" element with the specified children and attributes.

**Returns:** `BaseElement` An HTML element representing a "button" with the specified children and attributes.

<ParamTable param={{"module_name": "deephaven.ui.html.", "name": "button", "parameters": [{"name": "*children", "type": "Any", "description": "The children of the element."}, {"name": "**attributes", "type": "Any", "description": "Attributes to set on the element"}]}} />
Creates an HTML "code" element with the specified children and attributes.

**Returns:** `BaseElement` An HTML element representing a "code" with the specified children and attributes.

<ParamTable param={{"module_name": "deephaven.ui.html.", "name": "code", "parameters": [{"name": "*children", "type": "Any", "description": "The children of the element."}, {"name": "**attributes", "type": "Any", "description": "Attributes to set on the element"}]}} />
Creates an HTML "div" element with the specified children and attributes.

**Returns:** `BaseElement` An HTML element representing a "div" with the specified children and attributes.

<ParamTable param={{"module_name": "deephaven.ui.html.", "name": "div", "parameters": [{"name": "*children", "type": "Any", "description": "The children of the element."}, {"name": "**attributes", "type": "Any", "description": "Attributes to set on the element"}]}} />
Creates an HTML "form" element with the specified children and attributes.

**Returns:** `BaseElement` An HTML element representing a "form" with the specified children and attributes.

<ParamTable param={{"module_name": "deephaven.ui.html.", "name": "form", "parameters": [{"name": "*children", "type": "Any", "description": "The children of the element."}, {"name": "**attributes", "type": "Any", "description": "Attributes to set on the element"}]}} />
Creates an HTML "h1" element with the specified children and attributes.

**Returns:** `BaseElement` An HTML element representing a "h1" with the specified children and attributes.

<ParamTable param={{"module_name": "deephaven.ui.html.", "name": "h1", "parameters": [{"name": "*children", "type": "Any", "description": "The children of the element."}, {"name": "**attributes", "type": "Any", "description": "Attributes to set on the element"}]}} />
Creates an HTML "h2" element with the specified children and attributes.

**Returns:** `BaseElement` An HTML element representing a "h2" with the specified children and attributes.

<ParamTable param={{"module_name": "deephaven.ui.html.", "name": "h2", "parameters": [{"name": "*children", "type": "Any", "description": "The children of the element."}, {"name": "**attributes", "type": "Any", "description": "Attributes to set on the element"}]}} />
Creates an HTML "h3" element with the specified children and attributes.

**Returns:** `BaseElement` An HTML element representing a "h3" with the specified children and attributes.

<ParamTable param={{"module_name": "deephaven.ui.html.", "name": "h3", "parameters": [{"name": "*children", "type": "Any", "description": "The children of the element."}, {"name": "**attributes", "type": "Any", "description": "Attributes to set on the element"}]}} />
Creates an HTML "h4" element with the specified children and attributes.

**Returns:** `BaseElement` An HTML element representing a "h4" with the specified children and attributes.

<ParamTable param={{"module_name": "deephaven.ui.html.", "name": "h4", "parameters": [{"name": "*children", "type": "Any", "description": "The children of the element."}, {"name": "**attributes", "type": "Any", "description": "Attributes to set on the element"}]}} />
Creates an HTML "h5" element with the specified children and attributes.

**Returns:** `BaseElement` An HTML element representing a "h5" with the specified children and attributes.

<ParamTable param={{"module_name": "deephaven.ui.html.", "name": "h5", "parameters": [{"name": "*children", "type": "Any", "description": "The children of the element."}, {"name": "**attributes", "type": "Any", "description": "Attributes to set on the element"}]}} />
Creates an HTML "h6" element with the specified children and attributes.

**Returns:** `BaseElement` An HTML element representing a "h6" with the specified children and attributes.

<ParamTable param={{"module_name": "deephaven.ui.html.", "name": "h6", "parameters": [{"name": "*children", "type": "Any", "description": "The children of the element."}, {"name": "**attributes", "type": "Any", "description": "Attributes to set on the element"}]}} />
Creates an HTML "i" element with the specified children and attributes.

**Returns:** `BaseElement` An HTML element representing a "i" with the specified children and attributes.

<ParamTable param={{"module_name": "deephaven.ui.html.", "name": "i", "parameters": [{"name": "*children", "type": "Any", "description": "The children of the element."}, {"name": "**attributes", "type": "Any", "description": "Attributes to set on the element"}]}} />
Creates an HTML "img" element with the specified children and attributes.

**Returns:** `BaseElement` An HTML element representing a "img" with the specified children and attributes.

<ParamTable param={{"module_name": "deephaven.ui.html.", "name": "img", "parameters": [{"name": "*children", "type": "Any", "description": "The children of the element."}, {"name": "**attributes", "type": "Any", "description": "Attributes to set on the element"}]}} />
Creates an HTML "input" element with the specified children and attributes.

**Returns:** `BaseElement` An HTML element representing a "input" with the specified children and attributes.

<ParamTable param={{"module_name": "deephaven.ui.html.", "name": "input", "parameters": [{"name": "*children", "type": "Any", "description": "The children of the element."}, {"name": "**attributes", "type": "Any", "description": "Attributes to set on the element"}]}} />
Creates an HTML "label" element with the specified children and attributes.

**Returns:** `BaseElement` An HTML element representing a "label" with the specified children and attributes.

<ParamTable param={{"module_name": "deephaven.ui.html.", "name": "label", "parameters": [{"name": "*children", "type": "Any", "description": "The children of the element."}, {"name": "**attributes", "type": "Any", "description": "Attributes to set on the element"}]}} />
Creates an HTML "li" element with the specified children and attributes.

**Returns:** `BaseElement` An HTML element representing a "li" with the specified children and attributes.

<ParamTable param={{"module_name": "deephaven.ui.html.", "name": "li", "parameters": [{"name": "*children", "type": "Any", "description": "The children of the element."}, {"name": "**attributes", "type": "Any", "description": "Attributes to set on the element"}]}} />
Creates an HTML "ol" element with the specified children and attributes.

**Returns:** `BaseElement` An HTML element representing a "ol" with the specified children and attributes.

<ParamTable param={{"module_name": "deephaven.ui.html.", "name": "ol", "parameters": [{"name": "*children", "type": "Any", "description": "The children of the element."}, {"name": "**attributes", "type": "Any", "description": "Attributes to set on the element"}]}} />
Creates an HTML "option" element with the specified children and attributes.

**Returns:** `BaseElement` An HTML element representing a "option" with the specified children and attributes.

<ParamTable param={{"module_name": "deephaven.ui.html.", "name": "option", "parameters": [{"name": "*children", "type": "Any", "description": "The children of the element."}, {"name": "**attributes", "type": "Any", "description": "Attributes to set on the element"}]}} />
Creates an HTML "p" element with the specified children and attributes.

**Returns:** `BaseElement` An HTML element representing a "p" with the specified children and attributes.

<ParamTable param={{"module_name": "deephaven.ui.html.", "name": "p", "parameters": [{"name": "*children", "type": "Any", "description": "The children of the element."}, {"name": "**attributes", "type": "Any", "description": "Attributes to set on the element"}]}} />
Creates an HTML "pre" element with the specified children and attributes.

**Returns:** `BaseElement` An HTML element representing a "pre" with the specified children and attributes.

<ParamTable param={{"module_name": "deephaven.ui.html.", "name": "pre", "parameters": [{"name": "*children", "type": "Any", "description": "The children of the element."}, {"name": "**attributes", "type": "Any", "description": "Attributes to set on the element"}]}} />
Creates an HTML "select" element with the specified children and attributes.

**Returns:** `BaseElement` An HTML element representing a "select" with the specified children and attributes.

<ParamTable param={{"module_name": "deephaven.ui.html.", "name": "select", "parameters": [{"name": "*children", "type": "Any", "description": "The children of the element."}, {"name": "**attributes", "type": "Any", "description": "Attributes to set on the element"}]}} />
Creates an HTML "span" element with the specified children and attributes.

**Returns:** `BaseElement` An HTML element representing a "span" with the specified children and attributes.

<ParamTable param={{"module_name": "deephaven.ui.html.", "name": "span", "parameters": [{"name": "*children", "type": "Any", "description": "The children of the element."}, {"name": "**attributes", "type": "Any", "description": "Attributes to set on the element"}]}} />
Creates an HTML "table" element with the specified children and attributes.

**Returns:** `BaseElement` An HTML element representing a "table" with the specified children and attributes.

<ParamTable param={{"module_name": "deephaven.ui.html.", "name": "table", "parameters": [{"name": "*children", "type": "Any", "description": "The children of the element."}, {"name": "**attributes", "type": "Any", "description": "Attributes to set on the element"}]}} />
Creates an HTML "tbody" element with the specified children and attributes.

**Returns:** `BaseElement` An HTML element representing a "tbody" with the specified children and attributes.

<ParamTable param={{"module_name": "deephaven.ui.html.", "name": "tbody", "parameters": [{"name": "*children", "type": "Any", "description": "The children of the element."}, {"name": "**attributes", "type": "Any", "description": "Attributes to set on the element"}]}} />
Creates an HTML "td" element with the specified children and attributes.

**Returns:** `BaseElement` An HTML element representing a "td" with the specified children and attributes.

<ParamTable param={{"module_name": "deephaven.ui.html.", "name": "td", "parameters": [{"name": "*children", "type": "Any", "description": "The children of the element."}, {"name": "**attributes", "type": "Any", "description": "Attributes to set on the element"}]}} />
Creates an HTML "textarea" element with the specified children and attributes.

**Returns:** `BaseElement` An HTML element representing a "textarea" with the specified children and attributes.

<ParamTable param={{"module_name": "deephaven.ui.html.", "name": "textarea", "parameters": [{"name": "*children", "type": "Any", "description": "The children of the element."}, {"name": "**attributes", "type": "Any", "description": "Attributes to set on the element"}]}} />
Creates an HTML "th" element with the specified children and attributes.

**Returns:** `BaseElement` An HTML element representing a "th" with the specified children and attributes.

<ParamTable param={{"module_name": "deephaven.ui.html.", "name": "th", "parameters": [{"name": "*children", "type": "Any", "description": "The children of the element."}, {"name": "**attributes", "type": "Any", "description": "Attributes to set on the element"}]}} />
Creates an HTML "thead" element with the specified children and attributes.

**Returns:** `BaseElement` An HTML element representing a "thead" with the specified children and attributes.

<ParamTable param={{"module_name": "deephaven.ui.html.", "name": "thead", "parameters": [{"name": "*children", "type": "Any", "description": "The children of the element."}, {"name": "**attributes", "type": "Any", "description": "Attributes to set on the element"}]}} />
Creates an HTML "tr" element with the specified children and attributes.

**Returns:** `BaseElement` An HTML element representing a "tr" with the specified children and attributes.

<ParamTable param={{"module_name": "deephaven.ui.html.", "name": "tr", "parameters": [{"name": "*children", "type": "Any", "description": "The children of the element."}, {"name": "**attributes", "type": "Any", "description": "Attributes to set on the element"}]}} />
Creates an HTML "ul" element with the specified children and attributes.

**Returns:** `BaseElement` An HTML element representing a "ul" with the specified children and attributes.

<ParamTable param={{"module_name": "deephaven.ui.html.", "name": "ul", "parameters": [{"name": "*children", "type": "Any", "description": "The children of the element."}, {"name": "**attributes", "type": "Any", "description": "Attributes to set on the element"}]}} />