Html

@# HTML elements

In order to avoid conflicts with other stylesheets, Blueprint does not style most HTML elements directly. Instead, we provide several ways to style basic elements:

1. Use Blueprint React components: <H1>.
2. Apply the Blueprint Classes constant to an HTML tag: <h1 className={Classes.HEADING}>.
3. Nest HTML tags inside a container with Classes.RUNNING_TEXT (see below).

The following elements should be used in this manner:

Component	HTML tag	Classes constant
H1 - H6	h1 - h6	HEADING
Blockquote	blockquote	BLOCKQUOTE
Code	code	CODE
Label	label	LABEL - see Labels
Pre	pre	CODE_BLOCK
OL	ol	LIST
UL	ul	LIST
HTMLTable	table	HTML_TABLE - see HTML Table

The React components listed above each support the full set of relevant HTML attributes and an optional ref prop (via React.forwardRef) to access the instance of the HTML element itself (not the React component).

@## Nested usage

Applying Classes.RUNNING_TEXT to a container element allows the above HTML elements to be used directly without additional CSS classes. This is very useful for rendering generated markup where you cannot control the exact HTML elements, such as a Markdown document.

See the Running text documentation for more information.

@## Linting

The @blueprintjs/eslint-config NPM package provides advanced configuration for ESLint. The @blueprintjs/eslint-plugin package includes a custom blueprint-html-components rule that will warn on usages of JSX intrinsic elements (<h1>) that have a Blueprint alternative (<H1>). See the package's README for usage instructions.