YouTip LogoYouTip

Home > Plotly Dash > Dash Html Component

Dash Html Component

📅 2026-06-23 | 📂 Plotly Dash
One of the core components of Dash is HTML components, which allow you to embed standard HTML elements in your application. This article will provide a detailed introduction to commonly used HTML components in Dash. ## 1. Importing HTML Components In the latest version of Dash, the way to import HTML components has changed. We can directly import the `html` component from the `dash` module, without having to import it from `dash_html_components` as before. from dash import html ### Common HTML Components | **Component** | **Description** | **Example Code** | | --- | --- | --- | | **`html.Div`** | Creates a container (`
`) to wrap other components | `html.Div(children=[html.H1("Title"), html.P("This is a paragraph.")])` | | **`html.H1`** | Creates a level 1 heading (`

`) | `html.H1("Heading 1")` | | **`html.H2`** | Creates a level 2 heading (`

`) | `html.H2("Heading 2")` | | **`html.H3`** | Creates a level 3 heading (`

`) | `html.H3("Heading 3")` | | **`html.P`** | Creates a paragraph (`

`) | `html.P("This is a paragraph.")` | | **`html.Span`** | Creates an inline container (``) to wrap inline text or elements | `html.Span("This is inline text.")` | | **`html.Br`** | Creates a line break (`
`) | `html.Div(children=[html.P("First line"), html.Br(), html.P("Second line")])` | | **`html.A`** | Creates a hyperlink (``) | `html.A("Click here to visit the official Dash website", href="https://dash.plotly.com")` | | **`html.Img`** | Inserts an image (``) | `html.Img(src="https://plotly.com/assets/images/logo.png", height="50px")` | | **`html.Ul`** | Creates an unordered list (`