Group headings, controls, graphs, and other components into a layout section.
Page structure
Plotly · Class
html.Div
html.Div is Dash's component wrapper for the HTML5 <div> element. Use it to group text or nested components in an app layout, with properties such as children, id, className, and style.
How it works
html.Div represents an HTML <div> and acts as a general-purpose container in a Dash layout. Pass displayed content or child components through children, then use component properties such as id, className, and style to identify the container and control its presentation.
Syntax
html.Div(children=None, id=None, className=None, style=None, **kwargs)Parameters
| Name | Type | Description |
|---|---|---|
children | Any | Content rendered inside the div; may be a component, string, number, or list of supported children. |
id | string | Optional HTML element identifier, useful for referencing the component. |
className | string | Optional CSS class name assigned to the rendered element. |
style | dict | Optional inline CSS declarations. |
Returns
A Dash HTML component representing an HTML5 <div> element.
Key points
- The class renders a standard HTML5
<div>wrapper. - Its
childrenproperty supplies the content rendered inside the container. - Common configuration includes styling, CSS-class assignment, and an identifier for the component.
Example: Container with nested HTML components
from dash import Dash, html
app = Dash(__name__)
app.layout = html.Div(
[
html.H1("Sales dashboard"),
html.P("Updated today", className="status"),
],
id="dashboard",
)
if __name__ == "__main__":
app.run(debug=True)Creates a Dash app whose layout uses a Div as the page container, with nested heading and paragraph components.
When to use it
Apply inline CSS with `style` or connect the element to a stylesheet with `className`.
Styling
Assign an `id` so callbacks can read or update properties such as `children`.
Callbacks
Interview questions
QWhat is html.Div, and what role does it play in a Dash layout?
html.Div is Dash's Python component for the HTML5 <div> element. It is commonly used as a layout container and can hold text, other components, or lists of children.
Follow-up: How can the container be targeted by a callback? Give it an id, then reference that component ID and a property such as children in callback inputs or outputs.
QHow are positional and keyword arguments handled by html.Div?
The first positional argument maps to children, so html.Div('Hello') is equivalent to html.Div(children='Hello'). Other properties should be passed by keyword, such as id, className, or style.
Follow-up: Why prefer keyword arguments for properties other than children? They make the intended property explicit and avoid confusion when a component has multiple configurable properties.
QHow do you identify and style an html.Div?
Use style for inline CSS declarations, className to assign a CSS class, and id to reference the component. These properties are supplied as keyword arguments when constructing the component.
Follow-up: How would you apply the same styling to several Divs? Assign a shared className and define the styling in an external stylesheet rather than duplicating inline dictionaries.
Related
htmlhtml.H1html.Pdcc.GraphDash