{"id":2912,"library":"dash-html-components","title":"Dash HTML Components","description":"Dash HTML Components is a Python library that provides pure Python abstractions around all HTML5 tags, enabling developers to compose layouts for Dash web applications using Python classes instead of writing raw HTML. As of Dash 2.0, the development of this library has been integrated into the main Dash repository, and `dash-html-components` now primarily exists for backward compatibility. It is currently at version 2.0.0 and aligns its release cadence with the core Dash framework.","status":"maintenance","version":"2.0.0","language":"en","source_language":"en","source_url":"https://github.com/plotly/dash-html-components","tags":["dash","html","web-framework","frontend","components"],"install":[{"cmd":"pip install dash-html-components","lang":"bash","label":"Install `dash-html-components`"}],"dependencies":[{"reason":"Core dependency for building Dash applications.","package":"dash","optional":false}],"imports":[{"note":"The direct import from `dash` is recommended for Dash 2.0+ applications. The separate `dash_html_components` package is deprecated but still works for backward compatibility.","wrong":"import dash_html_components as html","symbol":"html","correct":"from dash import html"}],"quickstart":{"code":"from dash import Dash, html\n\napp = Dash(__name__)\n\napp.layout = html.Div([\n    html.H1(\"Hello Dash\"),\n    html.Div([\n        html.P(\"Dash converts Python classes into HTML elements.\"),\n        html.P(\"This is a simple Dash app using html components.\")\n    ], style={'color': '#7FDBFF'})\n])\n\nif __name__ == '__main__':\n    app.run_server(debug=True)","lang":"python","description":"This minimal Dash application demonstrates how to create a basic layout using `dash.html` components. It defines a main `Div` containing a `H1` heading and another `Div` with two `P` paragraphs, applying inline styling to the inner `Div`."},"warnings":[{"fix":"Replace `import dash_html_components as html` with `from dash import html`.","message":"The import statement `import dash_html_components as html` is deprecated in Dash 2.0 and later versions. While it still functions for backward compatibility, new applications should use `from dash import html` for consistency with the integrated component architecture.","severity":"deprecated","affected_versions":"Dash >= 2.0"},{"fix":"Use `html.Div(className='my-class')` instead of `html.Div(class='my-class')` or `html.Div(class_='my-class')`.","message":"When setting HTML class attributes in `dash.html` components, use `className` (camelCase) instead of `class_` or `class`. `class` is a reserved keyword in Python.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Use `html.Div(style={'backgroundColor': 'blue', 'paddingLeft': 10})`.","message":"The `style` property for HTML components expects a Python dictionary, not a CSS string. CSS property names within this dictionary should be camelCased (e.g., `textAlign` instead of `text-align`). Pixel units can often be specified as numbers without the 'px' suffix.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Migrate your Python environment and codebase to Python 3.x.","message":"Dash 2.0 and subsequent versions have dropped official support for Python 2.x. Applications using `dash-html-components` 2.0.0 or higher require Python 3.x.","severity":"breaking","affected_versions":"Dash >= 2.0, dash-html-components >= 2.0.0"},{"fix":"Ensure components that require `n_clicks` have an `id`. For others, explicitly set `disable_n_clicks=True` if an `id` is present but clicks are not needed.","message":"As of Dash 2.8 and later, the `n_clicks` event listener is no longer added to an HTML component by default if it does not have an `id`. If a component has an `id` but you do not need its `n_clicks` property, set `disable_n_clicks=True` to improve accessibility by preventing screen readers from incorrectly interpreting the element as clickable.","severity":"gotcha","affected_versions":"Dash >= 2.8"}],"env_vars":null,"last_verified":"2026-04-11T00:00:00.000Z","next_check":"2026-07-10T00:00:00.000Z"}