---
title: "HTML in Vision"
---

# HTML in Vision

> HTML stands for HyperText Markup Language. It is commonly used to style text within web pages. The features that HTML brings to style web pages can be applied to many components within Ignition to style the text within components.

## Using HTML in Components

Many Vision components display a text string. By default, a component's text is displayed in a single font and color and will not wrap when its content exceeds the space the component has made available to the text. However, you can use HTML if you want to mix fonts or colors within the text or if you want formatting such as multiple lines. HTML formatting can be used in Vision components such as buttons, labels, and tables. It can be used in common properties such as the mouse over text property.

To specify that a component's text has HTML formatting, just put the `<html>` element at the beginning of the text, then use any valid HTML element in the remainder.
 
:::note
Closing the HTML element is optional. In other words, there is no need to place a `</html>` at the end of your stylized text. Also, the HTML elements are not case sensitive.
:::

## Common HTML Elements

HTML Tags are the special characters that instruct text to become stylized differently than other text within the same text. The following table describes the most common HTML elements that you can use within Ignition.

HTML Element | Name | Description
------- | ------- | -------
`<html>...</html>` | HTML | Initiates an html formatting. In most cases closing the html with `</html>` is optional.
`<b>...</b>` | Bold | Applies a bold style to the contents of these elements.
`<u>...</u>` | Underline | Underlines the text contained within the elements.
`<s>...</s>` | Strikethrough | Draws a line through the text contained within the elements.
`<br>` | Break | Applies a line break at this specific location.
`<ol>...</ol>` | Ordered List | Places the text into an ordered list. Text inside list items are ordered by number.
`<ul>...</ul>` | Unordered List | Places the text into an unordered list. Text inside list items are ordered by bullets.
`<li>...</li>` | List Item | Used to represent a list item. Should be contained in an order list (`<ol>`) or unordered list (`<ul>`).
`<center>` | Center | Centers the contents of the text. Used directly after the HTML Tag (that is, `<html><center>...`)
`<font color="red">...</font>` | Font | Colors the contents red. Works with standard color names, hex numbers, or RGB numbers.

## Applying HTML to Components

In Vision, you can add HTML to the text property of any component such as, a label, button, or table. These examples aren't unique to their specific components, but can be used on any component that has a Text or Mouseover Text property.

:::tip
A good rule of thumb for what can be html formatted is text on components that is used for display, not for input. So while the Label components have a Text property that accepts html formatting, the Text Field component's Text property does not accept html formatting, as a user may type into the component.
:::

For example, individual words or phrases within the text can be made bold:

```html
<html>This is a <b>bold</b> word
```

You can also create a list, such as instructions in the Mouseover Text on a component:

```html title="HTML in mouseover property"
<html>
These are the instructions:
<ol>
<li>Stop the process.</li>
<li>Check on this.</li>
<li>Remove that.</li>
</ol>
```