HTML reference sheet
This is a quick guide to all of the HTML codes that are commonly used, this is not intended to be a tutorial - these can be found on the HTML tutorials page.
Download the PDF version of this reference guide [41.3KB].
The basics
Description: HTML basic elements
| Name |
Element |
Comments |
| HTML content |
<html></html> |
The start and end of a file |
| Header |
<head></head> |
Contains hidden page information |
| Title |
<title></title> |
Contained in the header |
| Body |
<body></body> |
Contains visible page elements |
| Background image |
<body background="url"> |
|
| Background color |
<body bgcolor="#rrggbb"> |
Uses HEX code color |
| Text color |
<body text="#rrggbb"> |
Sets default color of text |
| Link color |
<body link="#rrggbb"> |
Sets default link color |
| Visited link color |
<body vlink="#rrggbb"> |
Sets color of visited links |
| Active link color |
<body alink="#rrggbb"> |
Sets color of active links |
Links
Description: HTML link elements
| Name |
Element |
Comments |
| Link to another page |
<a href="url"></a> |
Relative or absolute URL to page, text between
tags is link text |
| Set a location |
<a name="location"></a> |
|
| Link to location |
<a href="#location"></a> or
<a href="page.html#location"></a> |
Within the same page/On a different page |
| Link with target |
<a href="page.html" target="value"></a> |
Target value is frame name |
| E-mail link |
<a href="mailto: you@domain.com"></a> |
Not widely supported |
Formatting text
Description: HTML text formatting elements
| Name |
Element |
Comments |
| Bold |
<b></b> |
Specifically bold text |
| Strong emphasis |
<strong></strong> |
Generally displayed as bold |
| Italics |
<i></i> |
Specifically italic text |
| Emphasis |
<em></em> |
Generally displayed as italic |
| Bigger text |
<big></big> |
Makes text one size bigger |
| Smaller text |
<small></small> |
Makes text one size smaller |
| Headings |
<h#></h#> |
Replace # with number 1-6 |
| Font style |
<font face="font_name"></font> |
Deprecated. Name of the font e.g. arial |
| Font color |
<font color="#rrggbb"></font> |
Deprecated |
| Font size |
<font size="#"></font> |
Deprecated. Replace # with a number (default is 3) or +/- a number for relative size |
| Paragraph |
<p align="left, right, center"></p> |
Align attribute optional, default alignment is left. Closing tag optional |
| Centered |
<center></center> |
Deprecated. Text between tags is centered |
Images
Description: HTML image elements
| Name |
Element |
Comments |
| Image |
<img src="url"> |
Simple image tag |
| Image with width and Height |
<img src="url" width="#" height="#"> |
Width and height in pixels |
| Image with alternative text |
<img src="url" alt="alternative text"> |
Text alternative for the image |
| Image without borders |
<img src="url" border="0"> |
When using an image as a link |
| Image alignment |
<img src="url" align="left, right"> |
Used when wrapping text around images |
Lists
Description: HTML list elements
| Name |
Element |
Comments |
| Unordered list |
<ul type="disc, circle, square"></ul> |
Bullet point list, with different bullets |
| Ordered list |
<ol type="A, a, I, i, 1"></ol> |
Numbered list with different number styles |
| Start number |
<ol start="#"></ol> |
Defines first number in ordered list |
| List item |
<li>Item text</li> |
Optional closing tag |
Forms
Description: HTML form elements
| Name |
Element |
Comments |
| Form content |
<form action="script_url" method="POST, GET"></form> |
Url is CGI location or JavaScript, most forms use POST |
| Form input |
<input type="text, password, checkbox, radio, image, hidden, submit, reset"> |
|
| Input name |
<input name="value"> |
Identifies the input field |
| Input value |
<input value="value"> |
Default value, not required |
| Default selection |
<input checked> |
Checkboxes and radio buttons only |
| Input size |
<input size="#"> |
Size in characters, IE and NS differ in display |
| Maximum input length |
<input maxlength="#"> |
In characters |
| Selection list |
<select name="value"></select> |
Items go in between tags |
| No. options shown |
<select size="#"></select> |
How many options shown at once |
| Multiple choices |
<select multiple></select> |
Allows more than one choice |
| Select options |
<option value="value"></option> |
Displayed text follows tag. Optional closing tag |
| Selected option |
<option selected></option> |
Default option |
| Option group |
<optgroup label="value"></optgroup> |
Groups options together |
| Multiple line text input |
<textarea name="value"></textarea> |
Text between tags is default text |
| Multi-line size |
<textarea rows="#" cols="#"></textarea> |
Rows in lines, cols in characters |
Tables
Description: HTML table elements
| Name |
Element |
Comments |
| Table content |
<table></table> |
Cells and rows go between tags |
| Table border |
<table border="#"></table> |
Size of border in pixels |
| Cell spacing |
<table cellspacing="#"></table> |
Space between cells |
| Cell padding |
<table cellpadding="#"></table> |
Space between cell content and edges |
| Table width |
<table width="#, %"></table> |
Width in pixels or % |
| Table color |
<table bgcolor="#rrggbb"></table> |
Netscape (4) colors cells individually |
| Table row |
<tr></tr> |
Table cells go between row tags |
| Table cell |
<td></td> |
|
| Cell with alignment |
<td align="left, right, center" valign="top, middle,
bottom"></td> |
Horizontal alignment, vertical alignment |
| Cell spanning 2+ column |
<td colspan="#"></td> |
Only required for more than one column |
| Cell spanning 2+ rows |
<td rowspan="#"></td> |
Only required for more than one row |
| Cell width |
<td width="#, %"></td> |
Width in pixels, or % of table |
| Cell color |
<td bgcolor="#rrggbb"></td> |
Overrides table bgcolor, not in Netscape (4) |
| Header cells |
<th align="left, right, center"></th> |
Content bold, align optional, default is center |
| Header spanning 2+ columns |
<th colspan="#"></th> |
As td colspan |
| Header spanning 2+ rows |
<th rowspan="#"></th> |
As td rowspan |
| Header width |
<th width="#, %"></th> |
As td width |
| Header background color |
<th bgcolor="#rrggbb"></th> |
As td bgcolor |
Frames
Description: HTML frame elements
| Name |
Element |
Comments |
| Frame document content |
<frameset></frameset> |
Use instead of body tag |
| Rows of frames |
<frameset rows="#, #, #,..."></frameset> |
Frames row sizes in pixels or %, separate rows by commas |
| Row size (relative) |
<frameset rows="*"></frameset> |
Whatever screen is left after other frames |
| Columns of frames |
<frameset cols="#, #, #,..."></frameset> |
Frame column sizes in pixels or %, separate cols by commas |
| Column size (relative) |
<frameset cols="*"></frameset> |
Whatever screen is left after other frames |
| Frame borders |
<frameset border="yes, no"></frameset> |
Borders on or off |
| Border width |
<frameset border="#"></frameset> |
Border width in pixels |
| Border color |
<frameset bordercolor="#rrggbb"></frameset> |
|
| Individual frames |
<frame src="url"></frame> |
Location of document within frame |
| Frame name |
<frame name="value"></frame> |
ID of the frame |
| Frame margins |
<frame marginwidth="#" marginheight="#"></frame> |
Width and height in pixels |
| Scrollbars |
<frame scrolling="yes, no, auto"></frame> |
Scrollbars on, off or "if needed" |
| Non-resizable frames |
<frame noresize></frame> |
Visitors cannot move frame boundaries |
| "No frames" alternative |
<noframes></noframes> |
Shown in non-frames browsers |
Miscellaneous
Description: HTML miscellaneous elements
| Name |
Element |
Comments |
| Comments |
<!-- comments go here --> |
Not displayed in browsers |
| Style sheet |
<style type="text/css"></style> |
For Cascading Stylesheets |
| External style sheet |
<link rel="stylesheet" href="url"> |
|
| Meta information tags |
<meta name="value" content="value"> |
Hidden info within header |
| Horizontal rule |
<hr width="#, %" size="#" noshade> |
Width, thickness, solid line - all optional attributes |
