HTML Reference with Examples

This is a list of HTML (HyperText Markup Language) codes with examples. It was originally written by Earle Goodman (goodman@ucdavis.edu) who gathered information from a variety of sources, but a lot came directly from the U Kansas HTML Quick Reference. I added examples and cross references and updated it to be more XHTML compatible. There are also a Table Sampler and a reference for special HTML characters like √, ⇒, Θ, ç, and è along with links to even more codes.

The specification for the latest version of HTML 4 is at the W3C Home Page. The new specification is HTML 5, and here is the latest editor's draft.

Browsers let you see what HTML codes are used with something like View Page Source.

Comment out any text, including HTML codes. Note that there must be a space after .

will appear in some browsers, but
will not.

<a ATTRIBUTE> picture/text </a>;

Adds an anchor to picture/text. Possible ATTRIBUTEs are:

href="#anchor_name": Link this to anchor_name within this document.
href="URL": Link this to URL.
href="URL#anchor_name": Link this to anchor_name within URL.
href="URL?search_string": Link this to search for search_string within URL.
METHODS
name="anchor_name": Make an anchor at this spot that is called anchor_name.
REL
REV
target="_blank": Open the link in a new window or tab.
TITLE
URN

<address>address</address>

Present address information. Causes a line break.

George Washington, Virginia

<base href="URL">

Specify the location in which the current document is stored. This is in the head of the document.

<blockquote> . . . </blockquote>

Defines a section as being quoted from another source. For instance,

No power or authority can or ought to be maintained by virtue of [an office]

In my browser, it causes paragraph breaks.

<body> . . . </body>

Defines the body of an HTML document. Also see <head>.

<br />

Force a line break, (use two for a blank line).
This line is preceded by one break, while

this line is preceded by two.

<cite> . . . </cite>

Cite some material.

<code> . . . </code>

Display this as HTML code, only changing the font.

<dd> definition </dd>

Display a definition in a definition list or glossary. See <dl> and <dt>.

<dfn>definition</dfn>

Display a definition.

<del>text</del>

Indicate that ~~text~~ is deleted, usually by a "strike through" font. Also see <ins>.

<div> . . . </div>

Define this area as a division or block. Also see <p>. Example: there is a

centered division

embedded in this sentence.

<dl> . . . </dl>

Make a definition list or glossary. Also see <dt>, <dd>, <ol>, and <ul>. Often used to make lists without bullets (<ul>) or numbers (<ol>). Example:

This is item begins with <dt>. Later lines of <dt>'s line up with this lefthand side.: This item begins with <dd>. If the entry is too long, it is indented on additional lines. We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness. That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed, ... (United States Declaration of Independence); This is the second <dd> item and is enclosed by <p> </p> to stand out.; This is the third <dd> item. It is not preceeded by anything.
This is the second <dt> item.: <dt>'s should always be followed by at least one <dd>.

<dt> term</dt>

Display a term in a definition list or glossary. See <dl> and <dd>.

<em>text</em>

Emphasizes text. Also see <strong>.

<font ATTRIBUTE>text</font>

Change font attributes of enclosed text. Some browsers support a C O L O R attribute. For more possibilities, see the Color Samples Page.
"Font" is not supported in HTML 5. Instead, use CSS.

<form ATTRIBUTE> . . . </form>

Define an online form. The information is sent to a query server to search for or collect information from a database. Forms may have <input> (for buttons or single lines of text), <select> (for menus), or <textarea> (for text rectangles) tags. Some attributes are:

action="URL": The URL of the query server.
method=method: The method should be post.
For more information about designing forms, for instance, having a box only accept numbers, go to this forms tutorial.

<h1>text</h1>

Make text header style 1, the most prominent. May have ALIGN attribute. Example (align=center):

Header 1

<h2>text</h2>

Make text header style 2. Example (align=right):

Header 2

<h3>Header 3</h3> <h4>Header 4</h4> <h5>Header 5</h5> <h6>Header 6</h6>

Examples of header 3 through 6:

Header 3

Header 4

Header 5

Header 6

<head> . . . </head>

Defines the head of an HTML document. Also see <body>.

<hr />

Place a horizontal rule, or separator between sections of text. Example:

Many browsers allow size, align, and width attributes. Example:

<html> . . . </html>

Defines an HTML document. Also see <head> and <body>.

<img src="URL" ATTRIBUTES />

Show an inline image, like this orange ball:

Some possible ATTRIBUTESs are:

align=alignment: How to align the picture with the text, possible alignments are top, middle, or bottom.
alt="text": Alternative text that is displayed if browser does not support images, or image cannot be loaded.
border="pixels": Thickness of border in pixels. Default is 0 for no border.
height="pixels": height of the image in pixels.
width="pixels": width of the image in pixels. Height and width allows the browser to display the page before the image is downloaded or show the image in a different size.

<ins>text</ins>

Indicate that text is inserted, usually by an underlined font. Also see <del>.

<li> item</li>

Display item in a list. See <ol> and <ul>.

<link ATTRIBUTE>

Specify relationships to other documents. This is usually placed in the head of the document. Possible ATTRIBUTEs are:

REV=relationship: The relationship of this file to the other one. The relevant relationship is made.
href="URL": The URL of the file pointed to by the link.

<ol ATTRIBUTE> . . . </ol>

Display an ordered list or glossary. (Headed by numbers, letters, or roman numerals.) See <li>, <dl>, and <ul>. Example:

This item begins with <li>. It is indented and numbered. Wrapped lines are indented to line up with the beginning.
This is the second <li> item.

ATTRIBUTES are:

start="number"

The first number in the list. Example:

This the "fourth" item. (Where did item 3 go? I don't know.)
This attribute is useful when you want to continue numbering from a previous list.

type="type"

The type of indexes in the list. Valid values are

1 (numbers, default)
a (lowercase latin letters)
A (uppercase latin letters)
i (lowercase roman numerals)
I (uppercase roman numerals)

Example:

This the "seventh" item.
This attribute is useful when you want to continue numbering from a previous list.
Nested ordered lists don't work

<p> . . . </p>

Define this area as a paragraph, and format accordingly. Also see <div>.

<pre> . . . </pre>

Define this area as preformatted text, and display as is. May include some tags.

     This may include links, for example, to strong
	  but	it	doesn't left justify
or fill   and  may			handle tags

<strong>text</strong>

Give strong emphasis to text. Also see <em>.

<sub>text</sub>

Display text in subscript position and font. Example:

x_j < x_j+1

<sup>text</sup>

Display text in superscript position and font. Example:

A quadratic equation is ax² + bx + c

There are special sequences for superscript 2 and 3, which are easier to render and look better. Example:

The answer is zy³ + ax² + bx + c

<table>, <td>, <th>, and <tr>

Find out about tables from this table quick reference.

<title>title</title>

Define the title of the document. Note this is not a header. This is usually placed in the head of the document.

<tt>text</tt>

Display text in a typewriter font.

<ul> . . . </ul>

Display an unordered list or glossary. Usually headed by bullets. See <li>, <dl>, and <ol>. Example:

This item begins with <li>. It is indented and begins with a "bullet." As you can see, wrapped lines are indented.
This is the second <li> item.

Codes for a Few Special Characters

&: ampersand (&)
>: greater than (>)
<: less than (<)
": double quote (")
 : non-breaking space ( ). A bunch of non-breaking spaces → ← aren't displayed as one space like spaces → ← are.

A complete list of codes is on a separate page for special HTML characters.

Updated Tue Nov 24 10:12:05 2020

by Paul E. Black (paul.black@nist.gov)