All docs
V21.2
21.2
21.1
The page you are viewing does not exist in version 21.1. This link will take you to the root page.
20.2
The page you are viewing does not exist in version 20.2. This link will take you to the root page.
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

HTML Tags

  • 4 minutes to read

This document describes HTML tags supported by DevExpress WinForms controls for HTML and CSS-based UI design.

Sections and Headings

<div> Tag

A container for other elements.

<div class='view'>
    <b>Lorem ipsum</b><br>
    <i>dolor sit amet</i><br>
</div>

Run Demo

<span> Tag

An inline container for other elements.

<div class="container">
    This is an example of the <span class="SpanExample">span tag</span> inside simple text.
</div>

Run Demo

<h1><h6> Tags

Headings.

<h1>Header h1</h1>

Run Demo

<p> Tag

A paragraph.

<p><i>Lorem ipsum</i> is the most popular filler text in history.</p>

Run Demo

Attributes

align
The alignment of paragraph text content. Available values include: left, right, center, justify.

Example: <p align="right">Right-aligned paragraph</p>.

<br> Tag

A line break.

<p>To force<br> line breaks<br>,use the br<br> element.</p>

Run Demo

<a> Tag

A hyperlink.

<a href='devexpress.com'>Hyperlink</a><br>

Run Demo

Attributes

href
The URL of the page the link goes to.

<img> Tag

An image.

<img src="${LargePhoto}" width="100" height="100">

Run Demo

Attributes

src
Specifies the image source. It can be set to the following values:
  • The name or index of an image in a control’s dedicated image collection. Use the control’s HtmlImages property (for example, HtmlContentControl.HtmlImages or ItemsView.HtmlImages) to assign this collection.
  • A binding expression that defines a field in a control’s data source that stores image data. This expression has the following syntax: ${FieldName}.
width
The image’s display width, in pixels.
height
The image’s display height, in pixels.

Input

<input> Tag

A placeholder for an external control you want to display within a layout.

<input name="textEdit"/>

Run Demo

Attributes

name

Specifies the name of an external control that you want to display instead of the input HTML element.

To display an external control within a layout, do the following:

  • Place an external control (for example, a TextEdit) onto the HTML-based UI control (for example, HtmlContentControl).
  • Define the input tag in HTML code.
  • Set the name attribute of the input tag to the name of the added control.

Formatting

<b> Tag

Bold text.

<b>Bold text</b><br>

Run Demo

<i> Tag

Italicized text.

<i>Italic Text</i><br>

Run Demo

<u> Tag

Text with an underline.

<u>Underline</u><br>

Run Demo

<s> Tag

Strikethrough text.

<s>Strikethrough</s><br>

Run Demo

<ol> Tag

An ordered list.

<ol>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
</ol>

Run Demo

Attributes

reversed
Items are displayed in reversed order. Example: <ol reversed>.
start
The start value of an ordered list. Example: <ol start="10">.
type

The kind of marker to use in the list. Available values include:

  • 1 — Default. Decimal numbers (1, 2, 3, 4).

  • a — Alphabetically ordered list, lowercase (a, b, c, d).

  • A — Alphabetically ordered list, uppercase (A, B, C, D).

  • i — Roman numbers, lowercase (i, ii, iii, iv).

  • I — Roman numbers, uppercase (I, II, III, IV).

Example: <ol type="I">.

<ul> Tag

An unordered list.

<ul>
    <li>Item1</li>
    <li>Item2</li>
</ul>

Run Demo

<li> Tag

A list item.

<ol>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
</ol>

Run Demo

Attributes

value
Applies to ol lists. Specifies the item’s value. The following list items will increment from that number. Example: <ol> <li value="7">Apple</li> </ol>

Tables

<table> Tag

A table.

<table>
    <thead>
        <tr>
            <th>Company</th>
            <th>Country</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Germany</td>
        </tr>
        <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Mexico</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>footer cell</td>
            <td>footer cell</td>
        </tr>
    </tfoot>
</table>

Run Demo

<th> Tag

A header cell in a table.

<table>
    <thead>
        <tr>
            <th>Company</th>
            <th>Country</th>
        </tr>
    </thead>
    ...
</table>

Run Demo

Attributes

colspan
The number of columns a cell should span.
rowspan
The number of rows a cell should span.

<tr> Tag

A row in a table.

<table>
    <tbody>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Germany</td>
        </tr>
        <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Mexico</td>
        </tr>
    </tbody>
</table>

Run Demo

<td> Tag

A cell in a table.

<table>
    <tbody>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Germany</td>
        </tr>
        <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Mexico</td>
        </tr>
    </tbody>
</table>

Run Demo

Attributes

colspan
The number of columns a cell should span.
rowspan
The number of rows a cell should span.

<thead> Tag

Groups the header content in a table.

<table>
    <thead>
        <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Country</th>
        </tr>
</table>

Run Demo

<tbody> Tag

Groups the body content in a table.

<table>
    <tbody>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
        </tr>
        <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
        </tr>
    </tbody>
</table>

Run Demo

<tfoot> Tag

Groups the footer content in a table.

<table>
    <thead>
        <tr>
            <th>Company</th>
            <th>Country</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Germany</td>
        </tr>
        <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Mexico</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>footer cell</td>
            <td>footer cell</td>
        </tr>
    </tfoot>
</table>

Run Demo

See Also