Home | Services | Mission | Contact

XHTML cheat sheet

The XHTML cheat sheet provides an at-a-glance perspective of common XHTML practices; it's one of the few times when cheating won't ruin your karma.

Document Type Definition (1 of 3 required)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Allows for virtually no elements of presentation (recommended)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Allows for varying degrees of presentation

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Allows for frames layouts; not recommended

Basic (all required)

<html></html>
Creates an (X)HTML page

<head></head>
Creates an area not considered page content

<title></title>
Browser window title (goes in the <head> section)

<body></body>
Creates the visible portion of the page

Character encoding (required)

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
The most common character encoding: ISO-8859-1 (Western Europe)

Style sheet references

<link rel="stylesheet" type="text/css" href="site.css" />
A basic reference to a Cascading Style Sheet (CSS) file titled “site.css” (typically 4.0+ browsers)

<style type="text/css" media="all">@import "doc.css";</style>
A sophistocated reference to a Cascading Style Sheet (CSS) file titled “doc.css” (typically 5.0+ browsers)

Text

<h1></h1>
Creates the most important heading

<h6></h6>
Creates the least important heading

<p></p>
Creates a paragraph

<div></div>
Creates a block-level box (couple div with CSS formatting)

<span></span>
Creates an inline box (couple span with CSS formatting)

<em></em>
Emphasizes text (italics)

<strong></strong>
Strong emphasis for text (bold)

<sub></sub>
Makes text subscript

<sup></sup>
Makes text superscript

<br />
Creates a line break

Lists

<ul></ul>
Creates an unordered list

<ol></ol>
Creates an ordered (numbered) list

<li></li>
Creates a list item (place in a list)

<dl></dl>
Creates a definition list

<dt></dt>
Creates a definition term (place in a definition list)

<dd></dd>
Creates a definition (place in a definition list)

Links

<a href="URL"></a>
Creates a hyperlink (replace URL with link)

<a href="mailto:EMAIL"></a>
Creates an email link (replace EMAIL with email address)

Images

<img src="filename.jpg" width="200" height="100" alt="My 1997 Honda CRV" />
Places an image that is 200 pixels wide by 100 pixels high and has an alternate description (alt) of “My 1997 Honda CRV”

Tables

<table></table>
Creates a table

<tr></tr>
Creates a table row (place in a table)

<td></td>
Creates a table cell (place in a table row)

<th></th>
Creates a table header (place in a table)

Special Characters

&#8211;
EN dash: –

&#8212;
EM dash: —

&#8217;
Apostrophe: ’

&#8220;
Open double quote: “

&#8221;
Close double quote: ”

&#8722;
Hyphen: −

&#8216;
Open single quote: ‘

&#8217;
Close single quote (Apostrophe): ’

&#8230;
Ellipsis: …