HTML Reference Sheet

HTML Reference Sheet

This page is a quick reference to all the HTML tags that are supported in the most popular World Wide Web browsers.

Quick Reference
<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>

Quick Reference
`<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>`

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="htmlref.html"> Cheat </a> URL or Link 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> Defined Lists 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> UnOrdered Lists 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> Oredered Lists 1

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

<dir> Begins a "directory". Most browsers display this the same as an unordered list. <dir> <li>First <li>Second <li>Third </dir> Address Style Columns 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> Collects Information 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> Gathers CGI Input 2

<textarea> This tag marks a rectangular text input area on the form. <textarea name="name" [rows=1] [cols=1]> Default Text </textarea> Text Input Area for CGI 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> DropDown Menu for Forms 2

<option> This tag is an option on a <select> menu. See <select>. Options for Drop Down Menu 2

Tables

<table> This tag contains a table. <table> ... </table> Starts Table Area 3

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

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

<th> Table header. Generally like the <td> tag but centers the text. <th>Header</th> Table Header Info 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"> Starts Map Area 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> Starts Frame Set NS

<frame> Specifies the source for one of the cells in a frame. <frame src=this.html> 1st Frame Page 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> Sets NoFrame Flag NS

Microsoft-Specific Tags

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

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

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="htmlref.html"> Cheat </a>`	URL or Link	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>`	Defined Lists	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>`	UnOrdered Lists	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>`	Oredered Lists	1
`<menu>`	Begins an "interactive menu". Most browsers display this the same as an unordered list.	`<menu> <li>First <li>Second <li>Third </menu>`	Ordered Columns	1
`<dir>`	Begins a "directory". Most browsers display this the same as an unordered list.	`<dir> <li>First <li>Second <li>Third </dir>`	Address Style Columns	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>`	Collects Information	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>`	Gathers CGI Input	2
`<textarea>`	This tag marks a rectangular text input area on the form.	`<textarea name="name" [rows=1] [cols=1]> Default Text </textarea>`	Text Input Area for CGI	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>`	DropDown Menu for Forms	2
`<option>`	This tag is an option on a <select> menu.	See `<select>`.	Options for Drop Down Menu	2
Tables
`<table>`	This tag contains a table.	`<table> ... </table>`	Starts Table Area	3
`<tr>`	Table row. Each row of a table is contained in this tag.	`<tr> ... </tr>`	Table Row	3
`<td>`	Table data. The data in this tag will be contained in one cell on a table.	`<td>Data</td>`	Table Data	3
`<th>`	Table header. Generally like the `<td>` tag but centers the text.	`<th>Header</th>`	Table Header Info	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">`	Starts Map Area	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>`	Starts Frame Set	NS
`<frame>`	Specifies the source for one of the cells in a frame.	`<frame src=this.html>`	1st Frame Page	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>`	Sets NoFrame Flag	NS
Microsoft-Specific Tags
`<marquee>`	This tag creates an animated piece of text sliding across your browser window.	`<marquee>Hello</marquee>`	Scrolling Text	MS
`<bgsound>`	Loads up and plays a sound when the user enters the page.	`<bgsound src="start.wav">`	None	MS

Back to HTML Tutorial Index