Webpage Workshop: Home » HTML reference sheet

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.

PDF Document 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