Although web pages today can display various forms of visual and auditory content, textual content is the most prevalent. As such there are a number of elements that are used to structure text on the page. Below are a few of the most commonly used ones.

Headings

Heading elements (h1, h2, h3, h4, h5, h6) are rendered by the browser with various size font, with h1 having the largest size and the rest progressively smaller. It can contain any phrasing content (inline elements).

<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>

The above code produces the following:

Heading

Pargraphs

The paragraph element (p) is used to separate a paragraph of text from adjacent blocks with vertical space. It can contain any phrasing content (inline elements).

<p>paragraph 1</p>
some other text
<p>paragraph 2</p>

The above code produces the following HTML:

paragraph 1

some other text

paragraph 2

Line Breaks

The break element (br) produces a line break. It can contain elements itself, and thus must not have an end tag.

one<br>two<br>three

The above code produces the following HTML:

one
two
three

Ordered Lists

The ordered list element (ol) creates an enumerated list of items. Each enumerated item is given by an li element. The li elements can contain any flow element including nested ol and ul elements.

<ol>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ol>

The above code produces the following HTML:

One
Two
Three

Unordered List

The unordered list element (ul) creates a bulleted list of items. Each enumerated item is given by an li element. The li elements can contain any flow element including nested ol and ul elements.

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

The above code produces the following HTML:

One
Two
Three

Description Lists

The description list element (dl) produces a list of items that each have a description term and a description definition indented on the following line.

<dl>
    <dt>One</dt>
    <dd>This is one</dd>
    <dt>Two</dt>
    <dd>This is two</dd>
    <dt>Three</dt>
    <dd>This is three</dd>
</dl>

The above code produces the following HTML:


One: This is one
Two: This is two
Three: This is three

Block Quotations

The block quotation element (blockquote) produces a block that is separated from its adjacent elements with vertical space and is usually indented. A visible representation of the source can be provided with the cite element.

<blockquote cite="http://n0code.net">
    <p>A little nonsense now and then, is cherished by the wisest men.</p>
    <p>-<cite>Anonymous</cite></p>
</blockquote>

The above code produces the following HTML:

A little nonsense now and then, is cherished by the wisest men.

–Anonymous

Characters Entities

The greater than (>) and less than (<) characters, when written in a HTML document, are interpreted as part of element tags and do not render as text. To display these characters as text we need to use their character entities. Character entities begin with the ampersand (&) and end with a semi-colon (;). Between the ampersand and semi-colon are one of the following:

a keyword
# and an octal code
#x and a hexadecimal code

A list of character entities can be found here. For example, < can be written as text in a HTML document using any one of the following:

&lt;
&LT;
&#x0003C;
&#60;

The above code produces the following HTML:

<
<
<
<

White Space

Browsers interpret multiple adjacent white space characters (space, tab, newline) as a single space character. Consider the following HTML code. There are multiple spaces on the first line, a tab at the beginning of the second line, and newline characters after the first and second lines.

one   two   three
        four
five

The above code produces the following HTML:

one two three four five

There are a number of whitespace character entities in the HTML specification. The   character entity produces a non-breaking white space. We can use multiple   characters to render multiple adjacent spaces. Unfortunately the character entities &Tab; and &NewLine; only work within a pre (preformatted) element which render all text as is and usually with additional formatting. For example, all of the gray boxes in this tutorial are created with pre elements. To reproduce a tab element, the best we can do is use the &ensp; element which produces 2 adjacent spaces, and the &emsp; element which produces 3 adjacent spaces. To produce a new line we must use the br element.

1&nbsp;!<br>

2&ensp;!<br>

3&emsp;!<br>

The above code produces the following HTML:

1 !

2 !

3 !

Ampersand

Since the ampersand is reserved to denote the beginning of a special character entity we must use & in order to display an ampersand.

one &amp; two

The above code produces the following HTML:

one & two