HTML Quick-Reference

Tag reference

HTML tag reference
Tag name	Tag pair?	Can contain	Required/recommended attributes
Required tags
Document type	`<!DOCTYPE>`	n/a	document type
HTML document	`<html>...</html>`	HEAD, BODY	`lang="country-code"`
Document head	`<head>...</head>`	TITLE, META, LINK
Document body	`<body>...</body>`	Any block tags
Link	`<link>`	n/a	`href="destination URL" rel/rev="link relationship" type="content-type" media="media types"`
Character set declaration	`<meta>`	n/a	`http-equiv="Content-Type" content="text/html; charset=iso-8859-1"`
Block tags
Paragraph	`<p>...</p>`	Only inline tags
Heading	`<h1>...</h1> <h2>...</h2> ... <h6>...</h6>`	Only inline tags
Preformatted text	`<pre>...</pre>`	Only some inline tags
Definition list	`<dl>...</dl>`	Only <dt>...</dt> and <dd>...</dd>
Ordered list	`<ol>...</ol>`	Only <li>...</li>
Unordered list	`<ul>...</ul>`	Only <li>...</li>
Generic grouping tag	`<div>...</div>`	Block and inline tags
Long (block) quote	`<blockquote>... </blockquote>`	Block tags
Hard-rule	`<hr>`	n/a
General inline tags
Emphasis/italics	`<em>...</em> <i>...</i>`	Only inline tags
Strong/bold	`<strong>...</strong> <b>...</b>`	Only inline tags
Mono-typed (teletype)	`<tt>...</tt>`	Only inline tags
Code	`<code>...</code>`	Only inline tags
Sample output	`<samp>...</samp>`	Only inline tags
Keyboard	`<kbd>...</kbd>`	Only inline tags
Variable/argument	`<var>...</var>`	Only inline tags
Acronym	`<acronym>...</acronym>`	Only inline tags	`title="What the acronym means"`
Generic inline tag	`<span>...</span>`	Only inline tags
Line-break	`<br>`	n/a
Image	`<img>`	n/a	`src="URL of the image" width="width in pixels" height="width in pixels" alt="Alternate text" title="Pop-up caption"`
Anchor (link)	`<a>...</a>`	only inline tags	`href="link destination URL" title="Alternative link description"`
Special tags
List items (only within (un)ordered lists)	`<li>...</li>`	Block or inline tags
Definition-list term	`<dt>...</dt>`	Only inline tags
Definition-list definition	`<dd>...</dd>`	Block or inline tags
Page title (only within head section)	`<title>...</title>`	No HTML

Standard Tag Attributes

These attributes can be attached to virtually any HTML tag:

id="...": Uniquely names the tagged section to provide an anchor for style-sheet layout instructions, and as an internal link pointer.
class="...": Defines the type of the tag as an anchor for style-sheet layout instructions. A little like a repeatable id.
title="...": For annotating a tag. Most graphical browsers show titles as 'tool-tips' that appear when the section is pointed to with a cursor, and text-based browsers show link titles alongside the link text when a list of links is requested.
lang="...": Most often seen on the <html> tag to state which language the document is written in, it can also be used to show that one section of text is in a different language than its surrounding text. For example: The lightly-sparkling wine had a certain <span lang="fr">je ne sais quoi</span>. Language codes are usually two letters.. English is en. A list of 2-letter language codes (as defined by the ISO) can be found on the Unicode site.

Example Doctypes

HTML and XML documents need a document type declaration as the very first line so that the web browser knows which set of HTML rules and styles to apply. The HTML declaration uses the <!DOCTYPE> tag as shown below. These are the two standard document-type declarations for HTML 4.01 (there's a third for frames, but they aren't covered by this tutorial).

Strict HTML 4.01 document:: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Transitional HTML 4.01 document: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Character sets

For a web browser to correctly display all the special (e.g., accented) characters in your documents, you need to specify which character-set the document is written with. The most widely accepted/compatible character set on windows PCs today is called "latin-1" and its character set code is iso-8859-1. Other common codes are us-ascii, and UTF-8 (for unicode, the standard on new macs).

The above statement is wrong, and over time I'll be spanked repeatedly by people who know better than I do, but there you go: in most cases iso-8859-1 will correctly show a document. If you use accented characters instead of their HTML entities (like é for é), then all bets are off.

Common HTML entities

HTML entities are case sensitive. To get the uppercase of any accented character, use the uppercase letter, but keep the rest lowercase, i.e., É. A full list of HTML entities, and their numeric equivalents (which may display on more browsers) is maintained on the Web Design Group's HTML reference site.

Name	Entity	Symbol	Symbol	Entity	Name
Common accented characters
a, grave	à	à	á	á	a, acute
a, circumflex	â	â	è	è	e, grave
e, acute	é	é	ê	ê	e, circumflex
n, tilde	ñ	ñ	ö	ö	o, umlaut
Common symbols
Non-breaking space			—	—	em-dash (long dash)
Ampersand	&	&	"	"	Quotation mark
Less-than	<	<	>	>	Greater-than
Left double-quotes	“	“	”	”	Right double-quotes
Euro currency symbol	€	€	™	™	Trademark symbol
Registered trademark	®	®	£	£	Pound sign
Copyright sign	©	©	¥	¥	Yen sign
Cent sign	¢	¢	°	°	Degree sign
Left angle-quotes	«	«	»	»	Right angle-quotes

Lazycat.org | matt robinson