HTML Tags

• Dec 21, 2021
• 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.

Sample HTML

<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.

Sample HTML

<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.

Sample HTML

<h1>Header h1</h1>

Run Demo

<p> Tag

A paragraph.

Sample HTML

<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.

Sample HTML

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

Run Demo

Links and Images

<a> Tag

A hyperlink.

Sample HTML

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

Run Demo

Attributes

href

The URL of the page the link goes to.

<img> Tag

An image.

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.

  HTML

  <img src="photo1" class="avatar">
  

  C#

  svgImageCollection1.Add("photo1", "image://svgimages/icon builder/business_businesswoman.svg");
  htmlContentControl1.HtmlImages = svgImageCollection1;
  

  VB.NET

  SvgImageCollection1.Add("photo1", "image://svgimages/icon builder/business_businesswoman.svg")
  HtmlContentControl1.HtmlImages = SvgImageCollection1
  

• A binding expression that defines a field in a control’s data source that stores image data. This expression has the following syntax: ${FieldName}.

  Sample HTML

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

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.

Sample HTML

<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.

Sample HTML

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

Run Demo

<i> Tag

Italicized text.

Sample HTML

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

Run Demo

<u> Tag

Text with an underline.

Sample HTML

<u>Underline</u><br>

Run Demo

<s> Tag

Strikethrough text.

Sample HTML

<s>Strikethrough</s><br>

Run Demo

<ol> Tag

An ordered list.

Sample HTML

<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.

Sample HTML

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

Run Demo

<li> Tag

A list item.

Sample HTML

<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.

Sample HTML

<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.

Sample HTML

<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.

Sample HTML

<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.

Sample HTML

<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.

Sample HTML

<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.

Sample HTML

<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.

Sample HTML

<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