HTML Cheat Sheet

HTML Cheat Sheet

This page is a quick reference to all the HTML tags that are supported in the most popular World Wide Web browsers. This page requires that your browser support tables, or it will look terrible. I will try to indicate which browsers support which tags, where possible. Please send me comments on missing tags, incorrect documentation, etc... This page created by Steve Tibbett. You are visitor #9554 since 17-Oct-95.

Quick Reference (Links don't work in some browsers)
<a> <address> <area> <b> <base> <bgsound>
<big> <body> <cite> <code> <dd> <dl>
<dfn> <dir> <dt> <em> <form> <head>
<html> <hr> <i> <img> <input> <isindex>
<kbd> <li> <lt> <map> <marquee> <menu>
<ol> <option> <p> <samp> <select> <small>
<strong> <sub> <sup> <table> <td> <textarea>
<th> <title> <tr> <tt> <u> <ul>
<var> <frame> <frameset> <noframes> <h1> <blockquote>
<center> <!--> <blink> <embed>

Quick Reference (Links don't work in some browsers)
`<a>`	`<address>`	`<area>`	`<b>`	`<base>`	`<bgsound>`
`<big>`	`<body>`	`<cite>`	`<code>`	`<dd>`	`<dl>`
`<dfn>`	`<dir>`	`<dt>`	`<em>`	`<form>`	`<head>`
`<html>`	`<hr>`	`<i>`	`<img>`	`<input>`	`<isindex>`
`<kbd>`	`<li>`	`<lt>`	`<map>`	`<marquee>`	`<menu>`
`<ol>`	`<option>`	`<p>`	`<samp>`	`<select>`	`<small>`
`<strong>`	`<sub>`	`<sup>`	`<table>`	`<td>`	`<textarea>`
`<th>`	`<title>`	`<tr>`	`<tt>`	`<u>`	`<ul>`
`<var>`	`<frame>`	`<frameset>`	`<noframes>`	`<h1>`	`<blockquote>`
`<center>`	`<!-->`	`<blink>`	`<embed>`

Tag Description Example Output Level

<html> Surrounds the entire HTML document. Browsers don't always require this. <html> ... </html> None 1

 1

Header Elements

<head> Surrounds document header section. <head> ... </head> None 1

<title> Specifies the document title. Typically displayed in the browser window title bar. <title> ... </title> None 1

<isindex> Specifies that the current document is a searchable index. The browser will use a mechanism of it's choice to let the user start a search. <isindex> None 1

<base> Specifies the URL of the current document, for relative links. <base href="basename"> None 1

<body> Contains the body of the page. One per page. <body> ... </body> None 1

Text Elements

<a> Begins text anchor or hypertext link. <a href="cheat.html"> Cheat </a> Cheat 1

<p> Begins a new paragraph. Contains a paragraph in HTML 3.0 (ie, you should include </p>). One<p>Two One
Two
1

<center> Centers text horizontally. This is a Netscape tag; see <p align=> <center>Test</center> Test NS

<br> Inserts a line break. This may or may not be less space than inserted by the <p> tag. One<br>Two One
Two 1

<hr> Inserts a horizontal line across the browser window. One<hr>Two One
Two 1

<img> Inserts a graphic image or the alternate text if the browser can't show the graphic. <img src=badurl alt="Text"> Text 1

Logical Text Styles

<h1> Header. Sizes range from 1 through 6 Use for headers, not just for big text. <h1>Big</h1> <h6>Small</h6>
Big
Small
1

<blockquote> Block quote. Quoted text from some source. Usually indented. <blockquote> Now is the time. </blockquote>
Now is the time
1

<em> Emphasize text. Most browsers use italics. <em>Hello</em> Hello 1

<strong> Strong text emphasis. Typically boldface. <strong>Hello</strong> Hello 1

<code> Code sample - uses monospaced font <code>Hello</code> Hello 1

<kbd> Keyboard key - for indicating that a user should press a specific key <kbd>Hello</kbd> Hello 1

<samp> Sample program output. <samp>Hello</samp> Hello 1

<var> Program variable. <var>Hello</var> Hello 1

<dfn> Definition. <dfn>Hello</dfn> Hello 1

<cite> Citation. <cite>Hello</cite> Hello 1

<address> Address - typically a mailing address. <address>Hello</address>
Hello
1

Physical Text Styles

<b> Bold face text. <b>Hello</b> Hello 1

<i> Italicize the text. <i>Hello</i> Hello 1

<u> Underline the text. <u>Hello</u> Hello 1

<big> Makes text big, relative to the current font. <big>Hello</big> Hello 3

<small> Makes text small, relative to the current font. <small>Hello</small> Hello 3

<sup> Displays superscript (small, raised) text. <sup>Hello</sup> ^Hello 3

<sub> Displays subscript (small, lowered) text. <sub>Hello</sub> _Hello 3

<tt> Use a typewriter-style monospaced font, typically Courier if available. <tt>Hello</tt> Hello 1

<blink> Makes text flash. Hated by all. See URL about:mozilla if using Netscape. <blink>Yikes!</blink> Yikes! NS

Definition Lists

<dl> Begin a definition list. A definition list is a list of header/body pairs. The header is left-aligned, the body text is indented and word wrapped. <dl> <dt>Header <dd>Body <dt>Header <dd>Body </dl> Example 1

<dt> Definition term. Left-aligned text - doesn't need to be terminated. See <dl> See <dl> 1

<dd> Definition body. Indented text displayed below the definition term. Doesn't need to be terminated. See <dl> See <dl> 1

Other Lists

<ul> Begin an unordered list. An unordered list is just a list of items with bullets. <ul> <li>First <li>Second <li>Third </ul> Example 1

<ol> Begin an ordered list. An ordered list is a list of items, with a counter of some sort. <ol> <li>First <li>Second <li>Third </ol> Example 1

<menu> Begins an "interactive menu". Most browsers display this the same as an unordered list. <menu> <li>First <li>Second <li>Third </menu> Example 1

<dir> Begins a "directory". Most browsers display this the same as an unordered list. <dir> <li>First <li>Second <li>Third </dir> Example 1

<li> List Item. This is an item in an ordered or unordered list. Doesn't need to be terminated. See <ul> or <ol> See <ul> or <ol> 1

Forms

<form> This tag contains a form. <form [action=URL] [method=(post|get)]> ... </form> Example 2

<input> This tag marks a text box, password box, checkbox, radio button, submit or reset button on a form. Type type field can be any of these. <input name="name" type=text value="default" size=32 maxlength=64> ... </input> Example 2

<textarea> This tag marks a rectangular text input area on the form. <textarea name="name" [rows=1] [cols=1]> Default Text </textarea> Example 2

<select> Lets the user select an item from a list. The list items follow this tag prefaced by <option> tags. <select name="name" size=2 multiple> <option>Cheese <option>Beans </select> Example 2

<option> This tag is an option on a <select> menu. See <select>. Example 2

Tables

<table> This tag contains a table. <table> ... </table> Example 3

<tr> Table row. Each row of a table is contained in this tag. <tr> ... </tr> Example 3

<td> Table data. The data in this tag will be contained in one cell on a table. <td>Data</td> Example 3

<th> Table header. Generally like the <td> tag but centers the text. <th>Header</th> Example 3

Client Side Image Maps

<map> Client side image map. <map name="map"> <area shape=rect coords="0,0,64,64" href="_URL_"> </map> <img usemap="map" src="some.bmp"> Example 3

<area> Client side mage map area. See <map> See <map> 3

Frames

<frameset> This tag replaces the <body> tag for pages using frames. <frameset rows=*,*> <frame src=this.html> <frame src=that.html> </frameset> Example NS

<frame> Specifies the source for one of the cells in a frame. <frame src=this.html> Example NS

<noframes> Browsers with frames hide this text; others show it. Used to tell users to get a better browser. <noframes> Ha ha ha </noframes> Example NS

Microsoft-Specific Tags

<marquee> This tag creates an animated piece of text sliding across your browser window. <marquee>Hello</marquee> Example MS

<bgsound> Loads up and plays a sound when the user enters the page. <bgsound src="start.wav"> None MS

Miscellaneous Tags

<embed> Embeds foreign content in an HTML document. <embed src=cmx.cmx>Only visible if you have the Corel CMX Plugin for Netscape installed. NS

Tag	Description	Example	Output	Level
`<html>`	Surrounds the entire HTML document. Browsers don't always require this.	`<html> ... </html>`	None	1
`<!-->`	Inserts a comment into an HTML document. Not displayed.	`<!-- Steve Was Here -->`		1
Header Elements
`<head>`	Surrounds document header section.	`<head> ... </head>`	None	1
`<title>`	Specifies the document title. Typically displayed in the browser window title bar.	`<title> ... </title>`	None	1
`<isindex>`	Specifies that the current document is a searchable index. The browser will use a mechanism of it's choice to let the user start a search.	`<isindex>`	None	1
`<base>`	Specifies the URL of the current document, for relative links.	`<base href="basename">`	None	1
`<body>`	Contains the body of the page. One per page.	`<body> ... </body>`	None	1
Text Elements
`<a>`	Begins text anchor or hypertext link.	`<a href="cheat.html"> Cheat </a>`	Cheat	1
`<p>`	Begins a new paragraph. Contains a paragraph in HTML 3.0 (ie, you should include </p>).	`One<p>Two`	One Two	1
`<center>`	Centers text horizontally. This is a Netscape tag; see `<p align=>`	`<center>Test</center>`	Test	NS
`<br>`	Inserts a line break. This may or may not be less space than inserted by the `<p>` tag.	`One<br>Two`	One Two	1
`<hr>`	Inserts a horizontal line across the browser window.	`One<hr>Two`	One Two	1
`<img>`	Inserts a graphic image or the alternate text if the browser can't show the graphic.	`<img src=badurl alt="Text">`		1
Logical Text Styles
`<h1>`	Header. Sizes range from 1 through 6 Use for headers, not just for big text.	`<h1>Big</h1> <h6>Small</h6>`	Big Small	1
`<blockquote>`	Block quote. Quoted text from some source. Usually indented.	`<blockquote> Now is the time. </blockquote>`	Now is the time	1
`<em>`	Emphasize text. Most browsers use italics.	`<em>Hello</em>`	Hello	1
`<strong>`	Strong text emphasis. Typically boldface.	`<strong>Hello</strong>`	Hello	1
`<code>`	Code sample - uses monospaced font	`<code>Hello</code>`	`Hello`	1
`<kbd>`	Keyboard key - for indicating that a user should press a specific key	`<kbd>Hello</kbd>`	`Hello`	1
`<samp>`	Sample program output.	`<samp>Hello</samp>`	`Hello`	1
`<var>`	Program variable.	`<var>Hello</var>`	`Hello`	1
`<dfn>`	Definition.	`<dfn>Hello</dfn>`	Hello	1
`<cite>`	Citation.	`<cite>Hello</cite>`	Hello	1
`<address>`	Address - typically a mailing address.	`<address>Hello</address>`	Hello	1
Physical Text Styles
`<b>`	Bold face text.	`<b>Hello</b>`	Hello	1
`<i>`	Italicize the text.	`<i>Hello</i>`	Hello	1
`<u>`	Underline the text.	`<u>Hello</u>`	Hello	1
`<big>`	Makes text big, relative to the current font.	`<big>Hello</big>`	Hello	3
`<small>`	Makes text small, relative to the current font.	`<small>Hello</small>`	Hello	3
`<sup>`	Displays superscript (small, raised) text.	`<sup>Hello</sup>`	^Hello	3
`<sub>`	Displays subscript (small, lowered) text.	`<sub>Hello</sub>`	_Hello	3
`<tt>`	Use a typewriter-style monospaced font, typically Courier if available.	`<tt>Hello</tt>`	`Hello`	1
`<blink>`	Makes text flash. Hated by all. See URL about:mozilla if using Netscape.	`<blink>Yikes!</blink>`	Yikes!	NS
Definition Lists
`<dl>`	Begin a definition list. A definition list is a list of header/body pairs. The header is left-aligned, the body text is indented and word wrapped.	`<dl> <dt>Header <dd>Body <dt>Header <dd>Body </dl>`	Example	1
`<dt>`	Definition term. Left-aligned text - doesn't need to be terminated.	See `<dl>`	See `<dl>`	1
`<dd>`	Definition body. Indented text displayed below the definition term. Doesn't need to be terminated.	See `<dl>`	See `<dl>`	1
Other Lists
`<ul>`	Begin an unordered list. An unordered list is just a list of items with bullets.	`<ul> <li>First <li>Second <li>Third </ul>`	Example	1
`<ol>`	Begin an ordered list. An ordered list is a list of items, with a counter of some sort.	`<ol> <li>First <li>Second <li>Third </ol>`	Example	1
`<menu>`	Begins an "interactive menu". Most browsers display this the same as an unordered list.	`<menu> <li>First <li>Second <li>Third </menu>`	Example	1
`<dir>`	Begins a "directory". Most browsers display this the same as an unordered list.	`<dir> <li>First <li>Second <li>Third </dir>`	Example	1
`<li>`	List Item. This is an item in an ordered or unordered list. Doesn't need to be terminated.	See `<ul>` or `<ol>`	See `<ul>` or `<ol>`	1
Forms
`<form>`	This tag contains a form.	`<form [action=URL] [method=(post\|get)]> ... </form>`	Example	2
`<input>`	This tag marks a text box, password box, checkbox, radio button, submit or reset button on a form. Type type field can be any of these.	`<input name="name" type=text value="default" size=32 maxlength=64> ... </input>`	Example	2
`<textarea>`	This tag marks a rectangular text input area on the form.	`<textarea name="name" [rows=1] [cols=1]> Default Text </textarea>`	Example	2
`<select>`	Lets the user select an item from a list. The list items follow this tag prefaced by <option> tags.	`<select name="name" size=2 multiple> <option>Cheese <option>Beans </select>`	Example	2
`<option>`	This tag is an option on a <select> menu.	See `<select>`.	Example	2
Tables
`<table>`	This tag contains a table.	`<table> ... </table>`	Example	3
`<tr>`	Table row. Each row of a table is contained in this tag.	`<tr> ... </tr>`	Example	3
`<td>`	Table data. The data in this tag will be contained in one cell on a table.	`<td>Data</td>`	Example	3
`<th>`	Table header. Generally like the `<td>` tag but centers the text.	`<th>Header</th>`	Example	3
Client Side Image Maps
`<map>`	Client side image map.	`<map name="map"> <area shape=rect coords="0,0,64,64" href="_URL_"> </map> <img usemap="map" src="some.bmp">`	Example	3
`<area>`	Client side mage map area.	See `<map>`	See `<map>`	3
Frames
`<frameset>`	This tag replaces the `<body>` tag for pages using frames.	`<frameset rows=,> <frame src=this.html> <frame src=that.html> </frameset>`	Example	NS
`<frame>`	Specifies the source for one of the cells in a frame.	`<frame src=this.html>`	Example	NS
`<noframes>`	Browsers with frames hide this text; others show it. Used to tell users to get a better browser.	`<noframes> Ha ha ha </noframes>`	Example	NS
Microsoft-Specific Tags
`<marquee>`	This tag creates an animated piece of text sliding across your browser window.	`<marquee>Hello</marquee>`	Example	MS
`<bgsound>`	Loads up and plays a sound when the user enters the page.	`<bgsound src="start.wav">`	None	MS
Miscellaneous Tags
`<embed>`	Embeds foreign content in an HTML document.	`<embed src=cmx.cmx>`Only visible if you have the Corel CMX Plugin for Netscape installed.		NS