Components for Standard HTML Elements

Standard HTML elements that have direct counterparts in Vaadin Flow.

HTML Component

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

Component	HTML Element	Comments
`Anchor`	`a`	The anchor element 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 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 component.
`Aside`	`aside`	The aside element represents content that is indirectly related to the document’s main content, such as a sidebar.
`DescriptionList`	`dl`	The description list element 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 is a generic container for content.
`Emphasis`	`em`	The emphasis element is for words that have a stressed emphasis compared to surrounding text.
`FieldSet`	`fieldset`	The field set element is used to organize and group related inputs and their labels in a form.
`Footer`	`footer`	The footer element 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 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 represents a container for introductory content, usually containing a logo, a search form, and a heading element.
`Hr`	`hr`	The horizontal rule element 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 section for more information.
`HtmlObject`	`object`	The object element 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 represents a nested browsing context, used for embedding another HTML page into the current one.
`Image`	`img`	The image element is used to display an image within the web page.
`Input`	`input`	The input element defines a field where the user can enter data. For most use cases, there is a dedicated Vaadin component that provides more advanced functionality.
`ListItem`	`li`	The list item element represents an item within a list. It is typically used inside an `OrderedList` or `UnorderedList`.
`Main`	`main`	The main element 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 defines a clickable button. For most use cases, prefer the more advanced Vaadin Button component.
`NativeDetails`	`details`	The details element is often used to create an interactive widget that the user can open and close. For most use cases, prefer the more advanced Vaadin Details component.
`NativeLabel`	`label`	The label element represents a caption for a form control, typically an `input`. Since most Vaadin field components provide a `setLabel(String)` method, using a `NativeLabel` is generally unnecessary.
`NativeTable`	`table`	The table element represents data presented in a two-dimensional table comprised of rows and columns of cells containing data. For most use cases, prefer the more advanced Vaadin Grid, Grid Pro or Tree Grid.
`NativeTableBody`	`tbody`	The table body element encapsulates a set of table rows (`NativeTableRow`).
`NativeTableCaption`	`caption`	The caption element specifies the caption (or title) of a table, providing the table an accessible description.
`NativeTableCell`	`td`	The table data cell element defines a cell of a table that contains data and may be used as a child of the `NativeTableRow`.
`NativeTableFooter`	`tfoot`	The table footer element encapsulates a set of table rows (`NativeTableRow`), typically used to provide a summary for the columns.
`NativeTableHeader`	`thead`	The table head element encapsulates a set of table rows (`NativeTableRow`), indicating that they comprise the head of a table with information about the table’s columns.
`NativeTableHeaderCell`	`th`	The table header element defines a header cell, which can be used inside a `NativeTableRow`, typically within a `NativeTableHeader`.
`NativeTableRow`	`tr`	The table row element defines a row of cells in a table. The row can contain either `NativeTableHeaderCell` or `NativeTableCell` elements.
`Nav`	`nav`	The navigation element 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 component. For menu implementations, see the Vaadin Menu Bar component.
`OrderedList`	`ol`	The ordered list element represents an ordered list of items (`ListItem`), typically rendered as a numbered list.
`Paragraph`	`p`	The paragraph element represents a block of text, commonly known as a paragraph.
`Param`	`param`	The object parameter element defines parameters for an <object> element. Usage is not recommended, as it has been deprecated in HTML.
`Pre`	`pre`	The pre-formatted text element 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 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 represents a generic standalone section of a document. A section should typically include a heading (`H1`,…`H6`).
`Span`	`span`	The span element 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.
`UnorderedList`	`ul`	The unordered list element represents an unordered list of items (`ListItem`), typically rendered as a bulleted list.

Anchor

a

The anchor element 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 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 component.

Aside

aside

The aside element represents content that is indirectly related to the document’s main content, such as a sidebar.

DescriptionList

dl

The description list element 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 is a generic container for content.

Emphasis

em

The emphasis element is for words that have a stressed emphasis compared to surrounding text.

FieldSet

fieldset

The field set element is used to organize and group related inputs and their labels in a form.

Footer

footer

The footer element 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 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 represents a container for introductory content, usually containing a logo, a search form, and a heading element.

Hr

hr

The horizontal rule element 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 section for more information.

HtmlObject

object

The object element 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 represents a nested browsing context, used for embedding another HTML page into the current one.

Image

img

The image element is used to display an image within the web page.

Input

input

The input element defines a field where the user can enter data. For most use cases, there is a dedicated Vaadin component that provides more advanced functionality.

ListItem

li

The list item element represents an item within a list. It is typically used inside an OrderedList or UnorderedList.

Main

main

The main element 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 defines a clickable button. For most use cases, prefer the more advanced Vaadin Button component.

NativeDetails

details

The details element is often used to create an interactive widget that the user can open and close. For most use cases, prefer the more advanced Vaadin Details component.

NativeLabel

label

The label element represents a caption for a form control, typically an input. Since most Vaadin field components provide a setLabel(String) method, using a NativeLabel is generally unnecessary.

NativeTable

table

The table element represents data presented in a two-dimensional table comprised of rows and columns of cells containing data. For most use cases, prefer the more advanced Vaadin Grid, Grid Pro or Tree Grid.

NativeTableBody

tbody

The table body element encapsulates a set of table rows (NativeTableRow).

NativeTableCaption

caption

The caption element specifies the caption (or title) of a table, providing the table an accessible description.

NativeTableCell

td

The table data cell element defines a cell of a table that contains data and may be used as a child of the NativeTableRow.

NativeTableFooter

tfoot

The table footer element encapsulates a set of table rows (NativeTableRow), typically used to provide a summary for the columns.

NativeTableHeader

thead

The table head element encapsulates a set of table rows (NativeTableRow), indicating that they comprise the head of a table with information about the table’s columns.

NativeTableHeaderCell

th

The table header element defines a header cell, which can be used inside a NativeTableRow, typically within a NativeTableHeader.

NativeTableRow

tr

The table row element defines a row of cells in a table. The row can contain either NativeTableHeaderCell or NativeTableCell elements.

Nav

nav

The navigation element 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 component. For menu implementations, see the Vaadin Menu Bar component.

OrderedList

ol

The ordered list element represents an ordered list of items (ListItem), typically rendered as a numbered list.

Paragraph

p

The paragraph element represents a block of text, commonly known as a paragraph.

Param

param

The object parameter element defines parameters for an <object> element. Usage is not recommended, as it has been deprecated in HTML.

Pre

pre

The pre-formatted text element 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 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 represents a generic standalone section of a document. A section should typically include a heading (H1,…H6).

Span

span

The span element 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.

UnorderedList

ul

The unordered list element represents an unordered list of items (ListItem), typically rendered as a bulleted list.

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.

Important Considerations

Regarding the Html Component, there are a few things to consider. First, remember that developers are responsible for sanitizing the HTML content before passing it 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.

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.

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

Docs

Docs

Components for Standard HTML Elements

HTML Component

Important Considerations