HTML Reference Sheet

Comments

!

Precedes a tag name or attribute to temporarily keep it from displaying in the browser; e.g.,

<!hr width="50%"> or <hr !width="50%">

Top

Comments

<!-- -->

Encloses one or lines of text commentary to identify or provide explanation about the XHTML code. Comments are not displayed in the browser.

Top

XML Declaration

<?xml ...?>
  version="version"
  encoding="Unicode coding system"

Indicates that the page is an XML document and gives the XML version and Unicode coding system used for encoding the document. Must appear as the first line in the document.

<?xml version="1.0" encoding="UTF-8"?>

Top

DocType Declarations (DTDs)

<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Gives the Document Type Definition against which the page is validated. Optional if document is not to be validated against XHTML standards published by the World Wide Web Consortium (W3C).

Top

Page Structure

The HTML Tag

<html>...</html>

  xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"

Encloses all HTML code. The xmlns attribute is the URL for the XML namespace upon which the code is based, along with the language in which the page is written.

Top

The HEAD Tag

<head>...</head>
  <title>...</title>
  <link/>
  <style type="text/css">...</style>
  <meta/>

Container for other HTML elements not directly displayed on the page. Typically enclosed tags to provide a document title, to link to or define style sheets, or to automatically redirect to other pages.

Top

The TITLE Tag

<title>...</title>

Gives the document a title that appears in the browser's title bar.

Top

The BODY Tag

<body>...</body>
  [Deprecated Attributes]
  background="image url"
  bgcolor="color"
  text="color"
  link="color"
  alink="color"
  vlink="color"

Encloses all XHTML and content that appears in the browser window. Attributes set the background image (background) or background color (bgcolor) for the page, along with the color of text (text), unvisited links (link), visited links (vlink), and active, or clicked, links (alink). The color is given as:

color name	A color name.
#rrggbb	A hexadecimal value (00 to FF) for red, green, and blue hues.
rgb(r g b) rgb(r% g% b%)	Decimal values (0 to 255) or percentages (0% to 100%) for red, green, and blue hues.

Top

Break Tags

<br/>

Creates a line break with following text appearing on the immediate next line.

Top

Horizontal Rules

<hr/>
  id="id"
  [Deprecated Attributes]
  align="left|center|right"
  width="n|n%"
  size="n"

Draws a horizontal rule across the page, blocked at the left or right margin, or centered. Width of rule is given as pixels or percentage of the width of the browser window; size, or height, of rule is given in pixels.

Top

Containers

Paragraph Tags

<p>...</p>
  id="id"
  [Deprecated Attributes]
  align="left|center|right|justify"

Surrounds text to format as a paragraph with single blank lines before and after. Alignment specifies if lines are blocked left, centered, blocked right, or expanded between the margins of the page.

<p [align="right"]>Text paragraph.</p>

Top

Block Quotes

<blockquote>...</blockquote>
  id="id"

Surrounds text to format as an indented paragraph with single blank lines before and after. Blockquotes can be nested for further offset and indention.

<blockquote>Text paragraph.</blockquote>

Top

Span Tags

<span>...</span>
  id="id"

Encloses text and other HTML elements, normally to apply style specification; an in-line element that does not cause a line break.

<span style="font-family:impact">Text string</span>

Top

Divison DIV Tags

<div>...</div>
  id="id"

Encloses text and other HTML elements, normally to apply style specifications; a block-level element that causes a line break before and after. Alignment of elements inside the division can be given by the align attribute.

<div style="font-family:arial; margin-left:25px; text-align:left">
  Text
  Images
  XHTML tags
</div>

Top

The PRE Tag

<pre>...</pre>
  id="id"

Encloses text for display in a monospace font with character and line spacing rendered as it appears in a text editor.

Top

Text Styles

Logical Styles

<abbr>abbreviation</abbr>	abbreviation
<acronym>acronym</acronym>	acronym
<cite>citation</cite>	citation
<code>code</code>	`code`
<dfn>definition</dfn>	definition
<em>emphasis</em>	emphasis
<strong>strong</strong>	strong
<kbd>keyboard</kbd>	`keyboard`
<samp>sample</samp>	`sample`
<var>variable</var>	`variable`

Top

Physical Styles

<big>big</big>	big
<b>bold</b>	bold
<i>italic</i>	italic
<small>small</small>	small
<tt>typewriter</tt>	`typewriter`
<sub>subscript</sub>	_subscript
<sup>superscript</sup>	^superscript
<s>strikeout</s> (deprecated)	~~strikeout~~
<u>underscore</u> (deprecated)	underscore

Top

Heading Tags

<hn>...</hn>
  id="id"
  [Deprecated Attributes]
  align="left|center|right|justify"

Predefined heading styles (1 to 6). Inserts blank lines before and after the heading line. Can be aligned to the left or right page margin or centered horizontally.

<h1>This is Heading Level 1</h1>
<h2>This is Heading Level 2</h2>
<h3>This is Heading Level 3</h3>
<h4>This is Heading Level 4</h4>
<h5>This is Heading Level 5</h5>
<h6>This is Heading Level 6</h6>

Top

FONT Tag (deprecated)

<font>...</font> [Deprecated Tag]
  [Deprecated Attributes]
  face="font names"
  size="n"
  color="color"

Sets font face, size, and/or color of enclosed text. Up to three system font face names can be supplied, separated with commas. First encountered face is applied. Size of font can range from 1 (smallest) to 7 (largest). The color is given as:

color name	A color name.
#rrggbb	A hexadecimal value (00 to FF) for red, green, and blue hues.
rgb(r g b) rgb(r% g% b%)	Decimal values (0 to 255) or percentages (0% to 100%) for red, green, and blue hues.

Top

STYLE Tag

<style type="text/css"> 
  selector {property:value [; property:value] ...}
</style>

Defines an embedded style sheet for the page, usually appearing in the <head> section of the page. Tag encloses style specifications where selectors identify simple tags, multiple tags, tag IDs, contextual tags, or style classes; properties and values supply styling characteristics to the selectors. Properties and values are separated by semicolons and enclosed within braces.

Tag selectors are tag names without enclosing "<" or ">" characters. Multiple tags to which the style applies are separated by commas. ID selectors apply to tags with id identifications. Contextual selectors are separated by spaces and apply to tags within tags. Class selectors are in the format .classname. Classes are applied to tags by coding class="classname" inside the opening tag.

<style type="text/css">
  h1     {font-family:impact; font-size:18pt; color:#0000FF}
  h2, h3 {font-family:impact; color:#0000FF}
  h1#ID  {font-family:impact; font-size:12pt; color:#FF0000}
  ul li  {list-item-style:circle}
  .code  {font-family:courier new; font-size:9pt}
</style>

Top

Lists

Unordered Lists

<ul>
  id="id"
  [Deprecated Attributes]
  type="disc|square|circle"
  <li>list item</li>
    id="id"
</ul>

An "unordered" list of bulleted items marked with a disc, square, or circle for each nested level or as given by the type attribute. Items in the list are identified by enclosing <li> tags.

Item 1
Item 2
Item 3

Top

Ordered Lists

<ol>
  id="id"
  [Deprecated Attributes]
  start="n"
  type="1|A|a|I|i"
  <li>list item</li>
    id="id"
</ol>

An "ordered" list of sequentially numbered items marked with Arabic numerals (1), upper-case alpabetic characters (A), lower-case alphabetic characters (a), upper-case Roman numerals (I), or lower-case Roman numerals (i). The beginning number in the sequence can be specified with the start attribute. Items in the list are identified by enclosing <li> tags.

Item 1
Item 2
Item 3

Top

Description Lists (aka Definition Lists)

<dl>
  id="id"
  <dt>term</dt>
    id="id"
    <ddgt;definition</dd>
      id="id"
</dl>

A "definition" list of terms <dt> and definitions <dd>. Definitions are indented and wrapped beneath the terms.

<dl>
<dt>Term 1</dt>
  <dd>This is an indented paragraph
      containing the definition for
      Term 1.</dd>
<dt>Term 2</dt>
  <dd>This is an indented paragraph
      containing the definition for
      Term 2.</dd>
</dl>

Term 1: This is an indented paragraph containing the definition for Term 1.
Term 2: This is an indented paragraph containing the definition for Term 2.

Top

Images and Image Maps

The IMG Tag

<img/>
  id="id"
  src="url"
  alt="text"
  [Deprecated Attributes]
  width="n"
  height="n"
  align="top|middle|bottom|absmiddle|left|right"
  border="n"
  hspace="n"
  vspace="n"

Defines a graphic image in GIF or JPG format. The src gives the URL of the image; alt provides alternative text for the graphic. Image is sized with width and height pixel settings; align determines how accompanying text aligns with or wraps around the image. Horizontal and vertical pixel spacing around the image is give by hspace and vspace attribute.

<img src="image.gif" alt="Image description" 
  [align="right" hspace="10" vspace="10"]/>

Top

Using Image Maps

<img id="id" src="url" usemap="mapname"/>
<img src="url" usemap="#mapname"/> [Deprecated Tag]


<map id="mapname" [name="mapname"]>
  <area/>
    shape="rect|circle|poly"
    coords="x,y coordinates"
    href="url"
    alt="text"
    [Deprecated Attributes]
    target="_blank|_self|_parent|_top|frame name"
</map>

A graphic image can be used as an image map by associating the <img> tag with a <map> tag through a usemap name. The <map> tag encloses one or more <area> tags defining the clickable areas.

rect	coords="x1,y1 x2,y2"	The two coordinates are the top-left (x1,y1) and bottom-right (x2,y2) horizontal and vertical coordinates of the rectangle, measured from the top-left corner of the image.
circle	coords="x,y r"	The two coordinates are the center coordinates (x,y) of the circle, measured from the top-left corner of the image, along with the radius (r) in pixels.
poly	coords="x1,y1 x2,y2 ..."	Coordinates are the horizontal (x) and vertical (y)coordinates of the points of the shape, moving clockwise or counter-clockwise around the shape, for as many points as defines the polygon.

The linked page can be targeted to the same window or frame (_self), in a different frame (frame name), in the next higher frame (_parent), in the full browser window (_top), or in a new browser window (_blank).

Top

Links

The LINK Tag

<link/>
  id="id"
  href="url"
  type="text/css"
  rel="stylesheet"

Links to an external style sheet. Tag appears in the <head> section of the document. The href attribute gives the relative or absolute URL of the style sheet document; type is "text/css", and rel (relationship) is "stylesheet".

Top

The A Tag

<a>text</a>
<a><img/></a>  
  id="id"
  href="url"
  href="mailto:email address"
  [Deprecated Attributes]
  target="_blank|_self|_parent|_top|frame name"

The href attributes is a required URL for the page to which a link is made; or it can be a mailto: email address for which the user's email program opens. Page links can be targeted to the same window or frame ( _self), a different frame (frame name), the next higher frame ( _parent), the full browser window ( _top), or a new browser window ( _blank).

Top

Tables

The TABLE Tag

<table>...</table>
  id="id"
  cellspacing="n"
  [Deprecated Attributes]
  width="n|n%"
  border="n"
  width="n|n%"
  cellpadding="n"
  align="left|center|right"
  bgcolor="color"
  background="image url"
  frame="above|below|lhs|rhs|hsides|vsides|box|border|void"
  rules="all|none|groups|rows|cols"

Defines a table structure of rows and columns (cells). Tags enclose all other table-related tags. Attributes set the width of the table (width) if other than default width, the width of the table border (border), the amount of spacing around cell contents (cellpadding), the amount of spacing between cells (cellspacing), alignment of the table (align) to the left or right with word wrap or in the horizontal center of the page, the background color of the table (bgcolor), the URL for a background image for the table (background), where borders are displayed around the table (frame), and how borders around the cells are displayed (rules).

Colors are specified as:

color name	A color name.
#rrggbb	A hexadecimal value (00 to FF) for red, green, and blue hues.
rgb(r g b) rgb(r% g% b%)	Decimal values (0 to 255) or percentages (0% to 100%) for red, green, and blue hues.

Top

The CAPTION Tag

<caption>caption text</caption>
  id="id"
  [Deprecated Attributes]
  align="top|left|right|bottom"

Gives a caption, or title, to a table. By default, the caption is aligned at the top-center of the table; left places it at the top-left of the table; right places it at the top-right of the table. Specifying bottom centers the caption at the bottom of the table.

<table [border="1"]>
<caption [align="left"]>Caption</caption>
...
</table>

Table 1.
Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

Top

Table Rows

<tr>...</tr>
  id="id"
  [Deprecated Attributes]
  align="left|center|right"
  valign="top|middle|bottom|baseline"
  bgcolor="color"

Identifies and formats a data row of a table. A <tr> tag encloses one or more <td> (table cell) tags defining the row. See the <table> tag for color specifications.

Top

Table Headings

<th>...</th>
  id="id"
  colspan="n"
  rowspan="n"
  [Deprecated Attributes]
  align="left|center|right"
  valign="top|middle|bottom|baseline"
  bgcolor="color"

Defines and formats a column heading cell. Cell text is bold and centered. The cell can span multiple columns (colspan) and/or multiple rows (rowspan ). See the <table> tag for color specifications.

<table [border="1"]>
<tr [bgcolor="#E0E0E0"]>
  <th>Column 1</th>
  <th>Column 2</th>
</tr>
  ...
</table>

Column 1	Column 2
Cell 1	Cell 2
Cell 5	Cell 6

Top

Table Data Cells

<td>...</td>
  id="id"
  colspan="n"
  rowspan="n"
  [Deprecated Attributes]
  align="left|center|right"
  valign="top|middle|bottom|baseline"
  bgcolor="color"

Identifies and formats a data cell within a table. A cell can span multiple rows (rowspan) and/or multiple columns (colspan). See the <table> tag for color specifications.

Top

Column Groupings

<colgroup>...</colgroup>
  id="id"
  span="n"
  [Deprecated Attributes]
  width="n|n%"
  align="left|center|right|justify"
  valign="top|middle|bottom|baseline"

Defines a grouping of table columns for collective application of attributes or styles. Columns in the grouping can be given size along with horizontal and vertical alignment settings.

Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

Top

The COL Tag

<col/> or <col>...</col>
  id="id"
  span="n"
  [Deprecated Attributes]
  align="left|center|right|justify"
  width="n|n%"
  valign="top|middle|bottom|baseline"

Identifies a table column within a <colgroup> for special formatting. In the absence of a <col> specification a column inherits attributes given in the <colgroup> to which it belongs. The span attribute extends a cell across two or more cells.

Cell 1	Cell 2	Cell 3	Cell 4
Cell 5	Cell 6	Cell 7	Cell 8

Top

Table Heading Section

<thead>...</thead>
  id="id"
  [Deprecated Attributes]
  align="left|center|right"
  valign="top|middle|bottom|baseline"

Encloses rows at the head of a table and assigns formatting.

<table [border="1"]>
<thead [bgcolor="#E0E0E0"]>
<tr [align="center"]>
<td colspan="2">Header</td>
</tr>
</thead>
...
</table>

Header
Cell 1	Cell 2
Cell 5	Cell 6

Top

Table Footing Section

<tfoot>...</tfoot>
  id="id"
  [Deprecated Attributes]
  align="left|center|right"
  valign="top|middle|bottom|baseline"

Encloses rows at the bottom of a table and assigns formatting.

<table [border="1"]>
...
<tfoot [bgcolor="#E0E0E0"]>
<tr [align="right"]>
<td colspan="2">Footer</td>
</tfoot>
</table>

Cell 1	Cell 2
Cell 5	Cell 6
Footer

Top

The Table Body Section

<tbody>...</tbody>
  id="id"
  [Deprecated Attributes]
  align="left|center|right"
  valign="top|middle|bottom|baseline"

Identifies the set of repeating data rows in a table and applies formatting to all cells in those rows.

Cell 1	Cell 2
Cell 5	Cell 6

Top

Frames

The FRAMESET Tag

<frameset>...</frameset> [Deprecated Tag]
  cols="n|n%|*"
  rows="n|n%|*"

Defines a set of frames appearing inside the browser window. The number of vertical frames is given by cols attribute. The number of horizontal frames is given by rows attribute. Widths and heights of frames are specified as pixels or percentages of the browser window. Value "*" permits browser to calculate frame size based on remaining space.

Top

The FRAME Tag

<frame/> [Deprecated Tag]
  src="url"
  name="name"
  scrolling="yes|no|auto"
  noresize="noresize"
  frameborder="0|1
  [Deprecated Attributes]
  marginheight="n"
  marginwidth="n"

Defines the contents and characteristics of a frame within a frameset. The src attribute gives URL of page to initially load into the frame; name identifies the frame as the target name for a link. Frame can have scroll bars (scrolling) or not; or permits user resizing or not (noresize). Margin sizes surrounding the document and borders around the frame can be set.

Top

The IFRAME Tag

<iframe></iframe> [Deprecated Tag]
  name="name"
  src="url"
  align="left|right"
  scrolling="yes|no|auto"
  noresize="noresize"
  frameborder="0|1
  [Deprecated Attributes]
  marginheight="n"
  marginwidth="n"

Defines an in-line, or floating, frame. Text can be wrapped around the frame by floating it to the left or right of the page. The src attribute gives URL of page to initially load into the frame; name identifies the frame as the target name for a link. Frame can have scroll bars (scrolling) or not; or permits user resizing or not (noresize). Margin sizes surrounding the document and borders around the frame can be set.

Top

Forms

The FORM Tag

<form>...</form>
  name="name"
  action="url"
  method="get|post"

Encloses all controls that comprise a form. Can be supplied with a form name; action is the URL of the page to which form information is sent on submission; method is get (default) in which names and values of controls are appended to the action URL; post transmits control names and values in a separate data stream.

Top

The BUTTON Tag

<button>...</button>
  id="id"
  name="name"
  type="button|submit|reset"
  value="value"
  tabindex="n"

Defines a button control. Text, graphics, and other XHTML elements can be included between the tags and appear on the face of the button. Button can be given an id or name for browser or server processing identification; type specifies a normal button, a form submission button, or a form reset button (clears form fields); value is a value that can be tested by a processing script. The tab-key order for the control is set with tabindex.

<button type="submit">
<img src="image.gif" alt="Image description"/><br/>
<b>Click this button!</b><br/>
</button>

Top

The INPUT Tag

<input/>
  id="id"
  name="name"
  type="text|password|checkbox|image|radio|submit|reset|hidden"
  tabindex="n"

Defines one of several types of form controls. An id may be required for browser processing; a name may be required for server processing. The tab-key order for a control is set with tabindex.

<input type="text"/> size="n" maxlength="n" value="value"		Text box can have pre-entered text by supplying value attribute. Set width of box with size attribute for approximate number of characters. Set maximum number of entered characters with maxlength attribute.
<input type="password"/> size="n" maxlength="n"		Entered text echoed in box as bullet characters. Set width of box with size attribute for approximate number of characters. Set maximum number of entered characters with maxlength attribute.
<input type="radio"/> value="value" checked="checked"	Radio Button	Can be prechecked with checked attribute. Value of checked button is given by value attribute. Text label can be coded to the left or right of the button.
<input type="checkbox"/> value="value" checked="checked"	Checkbox	Can be prechecked with checked attribute. Value of checked box is given by value attribute. Text label can be coded to the left or right of the checkbox.
<input type="submit"/> value="label"		Submits form names and values to URL given in form's action URL. Label for button is given by value attribute.
<input type="reset"/> value="label"		Resets (clears) form fields.
<input type="image"/> src="url" alt="text"	Any graphic image.	src attribute is required to supply a URL for graphic used as submit button. alt attribute supplies text alternative to graphic.

Top

The FIELDSET Tag

<fieldset>
<legend>text</legend>
  ...form control
</fieldset>

Creates a labeled box surrounding a form control

<fieldset>
<legend>Radio Buttons:</legend>
  <input type="radio"/>First Button
  <input type="radio"/>Second Button
  <input type="radio"/>Third Button
</fieldset>

Radio Buttons: First Button
Second Button
Third Button

Top

The SELECT Tag

<select>
  id="id"
  name="name"
  <option>text</option>
    value="value"
    selected="selected"
</select>

Creates a drop-down list of items. A name is required for server processing.

<select name="Menu">
  <option value="1">Label 1</option>
  <option value="2">Label 2</option>
  <option value="3">Label 3</option>
</select>

Each item appearing in the list is defined with an <option> tag. If a value is not supplied, the text label associated with the option is its value. An item is pre-selected by coding selected in the associated <option> tag.

Top

The TEXTAREA Tag

<textarea>text</textarea>
  id="id"
  name="name"
  cols="n"
  rows="n"

Creates a multi-line text input area. A name is required for server processing. Size of the text area is given by the number of cols (width--approximate number of characters) and number of rows (height). Pre-entered text appears between the tags.

<textarea name="Text" cols="20" rows="5">
Pre-entered text
</textarea>

Top

Multimedia

Link to File

<a>text</a>
  href="url"
  id="id"

Links to an audio or video media file for opening in a external player.

<a href="media.avi">Media Link</a>

Top

The EMBED Tag

<embed/> [Deprecated Tag]
  src="url"
  autostart="true|false"

Embed media player within a page. The src attribute is the relative or absolute URL to the media file; autostart controls whether the media begins playing on page load.

<embed src="media.wav" autostart="false"/>

Top

The OBJECT Tag

<object>
  id="id"
  classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
  width="n"
  height="n"
  <param name="URL" value="url"/>
  <param name="autoStart" value=true|false"/>
  <param name="uiMode" value="none|minifull"/>
</object>

Embed media player within a page. Must supply the classid of the player. Optionally can set the width and height of the screen area in pixels.

<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
  <param name="URL" value="media.wmv"/>
  <param name="autoStart" value="true"/>
  <param name="uiMode" value="full"/>
</object>

The param (parameter) tags give the URL of the media file or stream, whether to begin immediate playback on page load (autostart), and the type and size of the player's controls area (uiMode).

Top

Redirection

The META Tag

<meta/>
  http-equiv="refresh"
  content="seconds; url="url"

Refreshes or reloads a Web page after a given number of seconds. The url can reference the current page or a different page. The tag appears in the <head> section of the page.

<head>
  <meta http-equiv="refresh" content="5; url=Page.htm"/>
</head>

Top

HTML Reference Sheet

Comments

!

Comments

XML Declaration

DocType Declarations (DTDs)

Page Structure

The HTML Tag

The HEAD Tag

The TITLE Tag

The BODY Tag

Break Tags

Horizontal Rules

Containers

Paragraph Tags

Block Quotes

Span Tags

Divison DIV Tags

The PRE Tag

Text Styles

Logical Styles

Physical Styles

Heading Tags

FONT Tag (deprecated)

STYLE Tag

Lists

Unordered Lists

Ordered Lists

Description Lists (aka Definition Lists)

Images and Image Maps

The IMG Tag

Using Image Maps

Links

The LINK Tag

The A Tag

Tables

The TABLE Tag

The CAPTION Tag

Table Rows

Table Headings

Table Data Cells

Column Groupings

The COL Tag

Table Heading Section

Table Footing Section

The Table Body Section

Frames

The FRAMESET Tag

The FRAME Tag

The IFRAME Tag

Forms

The FORM Tag

The BUTTON Tag

The INPUT Tag

The FIELDSET Tag

The SELECT Tag

The TEXTAREA Tag

Multimedia

Link to File

The EMBED Tag

The OBJECT Tag

Redirection

The META Tag

TOP | NEXT: CSS Reference