> Markdown version of [HTML Elements](https://vaadin.com/docs/next/components/html-elements). Section index: [llms.txt](https://vaadin.com/docs/next/components/llms.txt)

# Components for Standard HTML Elements

Vaadin Flow comes with a set of components for standard HTML elements. Standard HTML components have an API that allows you to set most typical properties and attributes. You can also use the Element API to set any property or attribute, if the component API doesn’t have an appropriate method.

Components that can contain other components thereby implement the `HtmlContainer` interface to create a hierarchical structure. The Element API allows you to create any standard HTML element using the `Element` constructor. The `ElementFactory` class contains factory methods for many standard HTML elements.

The module `flow-html-components` contains the following components:

| Component                 | HTML Element           | Comments                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| ------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `Anchor`                  | `a`                    | The [anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a) defines a hyperlink to a resource. It can link to many kinds of targets, such as web pages, files, email addresses, or specific locations in the same page.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `Article`                 | `article`              | The [article element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/article) is independent, self-contained content, such as a forum post, a blog entry, or a comment. For creating hyperlinks that navigate to a different route in your application, see [RouterLink](https://vaadin.com/docs/next/flow/routing/navigation.md#using-the-routerlink-component) component.                                                                                                                                                                                                                                                                                                                                                               |
| `Aside`                   | `aside`                | The [aside element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/aside) represents content that is indirectly related to the document’s main content, such as a sidebar.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| `DescriptionList`         | `dl`                   | The [description list element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dl) represents a description list, commonly used to implement a glossary or to display metadata (a list of key-value pairs).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| `Div`                     | `div`                  | The [div element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/div) is a generic container for content.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| `Emphasis`                | `em`                   | The [emphasis element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/em) is for words that have a stressed emphasis compared to the surrounding text.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `FieldSet`                | `fieldset`             | The [field set element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/fieldset) is used to organize and group related inputs and their labels in a form.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| `FlexLayout`              | `div` + `display:flex` | `Div` with the `display` property set to `flex`. Includes "Flexbox" specific Flow API. See the [Flex Layout](#flex-layout-component) section for more information.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| `Footer`                  | `footer`               | The [footer element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/footer) represents a footer for a document or a section, often containing content such as copyright notices, contact information, or links to related documents.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| `H1`, .., `H6`            | `h1`, .., `h6`         | The [h1 to h6 elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements) represent six levels of section headings, with `h1` being the highest level and `h6` the lowest, commonly used for page or section titles.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `Header`                  | `header`               | The [header element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/header) represents a container for introductory content, usually containing a logo, a search form, and a heading element.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| `Hr`                      | `hr`                   | The [horizontal rule element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/hr) represents a thematic break between paragraph-level content, typically rendered as a horizontal rule separating sections of text.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `Html`                    | any                    | Wrapper for raw HTML content. See the [HTML Component](#html-component) section for more information.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| `HtmlObject`              | `object`               | The [object element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/object) defines a container for an external resource, such as a web page, a picture, a media player or a resource to be handled by a plugin.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| `IFrame`                  | `iframe`               | The [iframe element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe) represents a nested browsing context, used for embedding another HTML page into the current one.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| `Image`                   | `img`                  | The [image element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img) is used to display an image within the web page.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `Input`                   | `input`                | The [input element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input) defines a field where the user can enter data. For most use cases, there is a dedicated [Vaadin component](https://vaadin.com/docs/next/components.md) that provides more advanced functionality.                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `ListItem`                | `li`                   | The [list item element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/li) represents an item within a list. It is typically used inside an `OrderedList` or `UnorderedList`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| `Main`                    | `main`                 | The [main element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/main) represents the dominant content of a document’s `<body>`. Its content should be unique to the document and should not include material repeated across multiple pages, such as navigation links or footers.                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `NativeButton`            | `button`               | The [button element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button) defines a clickable button. For most use cases, prefer the more advanced [Vaadin Button](https://vaadin.com/docs/next/components/button.md) component.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `NativeDetails`           | `details`              | The [details element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details) is often used to create an interactive widget that the user can open and close. Give several `NativeDetails` instances the same name through `setName(String)` to group them into a native accordion, where opening one closes the others. For most use cases, prefer the more advanced [Vaadin Details](https://vaadin.com/docs/next/components/details.md) component.                                                                                                                                                                                                                                                                                     |
| `NativeLabel`             | `label`                | The [label element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label) represents a caption for a form control, typically an `input`. Since most [Vaadin field components](https://vaadin.com/docs/next/components.md) provide a `setLabel(String)` method, using a `NativeLabel` is generally unnecessary.                                                                                                                                                                                                                                                                                                                                                                                                                            |
| `NativeTable`             | `table`                | The [table element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/table) represents data presented in a two-dimensional table comprised of rows and columns of cells containing data. **Deprecated:** use [`Table`](https://vaadin.com/docs/next/components/html-elements/table.md) and the rest of its family instead. See [Migrating from Native Table](https://vaadin.com/docs/next/components/html-elements/table.md#migrating-from-native-table) for the child components and their replacements.                                                                                                                                                                                                                                   |
| `Nav`                     | `nav`                  | The [navigation element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/nav) defines a set of navigation links, typically used for menus, tables of contents, or indexes. Navigation is also supported by the more advanced [Vaadin Side Nav](https://vaadin.com/docs/next/components/side-nav.md) component. For menu implementations, see the [Vaadin Menu Bar](https://vaadin.com/docs/next/components/menu-bar.md) component.                                                                                                                                                                                                                                                                                                         |
| `OrderedList`             | `ol`                   | The [ordered list element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ol) represents an ordered list of items (`ListItem`), typically rendered as a numbered list.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `Paragraph`               | `p`                    | The [paragraph element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/p) represents a block of text, commonly known as a paragraph.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| `Param`                   | `param`                | The [object parameter element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/param) defines parameters for an \<object> element. Usage is not recommended, as it has been deprecated in HTML.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| `Pre`                     | `pre`                  | The [pre-formatted text element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/pre) represents pre-formatted text which is to be presented exactly as written in the HTML file, thus preserving both spaces and line breaks.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| `RangeInput`              | `input`                | The range input element is an [input element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input) with its `type` attribute set to `"range"`. It provides a dedicated API for slider-style inputs and is typically used to represent numeric values on a slider.                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `Section`                 | `section`              | The [section element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/section) represents a generic standalone section of a document. A section should typically include a heading (`H1`,…​`H6`).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| `Span`                    | `span`                 | The [span element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/span) is a generic inline container for phrasing content, which does not inherently represent anything. It is typically used to style a specific portion of text or as a placeholder for dynamic content.                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `Table` (since undefined) | `table`                | The [table element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/table) represents data presented in a two-dimensional table comprised of rows and columns of cells containing data. It comes with a family of components for the caption, column groups, sections, rows, and cells; see the [Table](https://vaadin.com/docs/next/components/html-elements/table.md) page. `Table` is low-level and flexible, which suits smaller data sets that are part of the page. For lazy loading, large data sets, sorting, and filtering, prefer [Grid](https://vaadin.com/docs/next/components/grid.md), [Grid Pro](https://vaadin.com/docs/next/components/grid-pro.md) or [Tree Grid](https://vaadin.com/docs/next/components/tree-grid.md). |
| `UnorderedList`           | `ul`                   | The [unordered list element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ul) represents an unordered list of items (`ListItem`), typically rendered as a bulleted list.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |

## <a id="html-component"></a>HTML Component

The `Html` class in Vaadin Flow allows developers to encapsulate and manage raw HTML fragments in server-side Java applications. This component is particularly useful when you have an HTML snippet — either as a string or loaded from a file — that you want to insert directly into your application’s layout or routes.

The `Html` class ensures that the HTML fragment is treated as a single unit with exactly one root element, which can be accessed and managed through the server-side code.

### <a id="important-considerations"></a>Important Considerations

Regarding the `Html` Component, there are a few things to consider. First, remember that developers are responsible for sanitizing the HTML content passed to the `Html` component. Failure to do so may lead to cross-site scripting (XSS) vulnerabilities, as the raw HTML is sent directly to the client. The component can also do the sanitization itself (since V25.2): the constructors that take a `SerializableSupplier<Safelist>` clean the content with the supplied jsoup `Safelist`, for example `new Html(untrustedHtml, Safelist::relaxed)`. Pass a method reference or a lambda that builds the `Safelist`, rather than capturing a pre-built instance, because `Safelist` isn’t serializable. Note that the safelist must permit the root element of the fragment. See [Cross-Site Scripting](https://vaadin.com/docs/next/flow/security/advanced-topics/vulnerabilities.md#xss) for more information.

Once an `Html` object is created, the encapsulated HTML fragment cannot be modified. To change the content, a new `Html` instance must be created.

You also need to know that the `Html` component doesn’t expand the HTML into a server-side DOM tree. This means that while the root element can be accessed via `getElement()`, and the inner content via `getInnerHtml()`, you can’t traverse or manipulate the DOM structure on the server side.

Also, the HTML fragment must have exactly one root element. If the fragment contains multiple root elements, an `IllegalArgumentException` is thrown.

Last thing to consider is that the `Html` component doesn’t support SVG elements as a root node. For SVG content, the `Svg` component should be used instead.

## <a id="flex-layout-component"></a>Flex Layout Component

Flex Layout arranges components in a row or a column. Each item can expand to fill the available space or shrink to fit smaller containers.

It leverages the [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox) layout model to provide flexible and responsive positioning of child components.

On the client side, Flex Layout is represented by a simple `div` element with `display: flex`.

The Flow API provides convenient constants and methods that make Flex Layout configuration straightforward and intuitive.

> **Caution:** It is generally recommended to use the [Horizontal Layout](https://vaadin.com/docs/next/components/horizontal-layout.md) or the [Vertical Layout](https://vaadin.com/docs/next/components/vertical-layout.md) component instead. They offer nearly all the same features as Flex Layout, but with better default styling (such as gaps and padding) and a more intuitive API. Flex Layout remains available in the Vaadin API primarily for backward compatibility. However, it is not recommended for use going forward.

`6774751B-921E-4B79-941E-830D9C3532B4`