HTML – A Simple Guide
This HTML code quick reference – lists the common HTML tags and their attributes, grouped into relevant sections in an easy-to-read format.
What is html? What are tags?
<html>
<head>
<title>website title</title>
</head>
<body>
content of website ...
</body>
</html>
The Basics
|
| <h?> … </h?> |
Heading (?= 1 for largest to 6 for smallest, eg h1) |
| <p> … </p> |
Paragraph of Text |
| <b> … </b> |
Bold Text |
| <a href=”url“> … </a> |
Basic Link |
| <center> … </center> |
Centre text horizontally |
Text Formatting
|
| <h?> … </h?> |
Heading (?= 1 for largest to 6 for smallest, eg h1) |
| <b> … </b> |
Bold Text |
| <i> … </i> |
Italic Text |
| <u> … </u> |
Underline Text |
| <strike> … </strike> |
Strikeout |
| <sup> … </sup> |
Superscript – Smaller text placed below normal text |
| <sub> … </sub> |
Subscript – Smaller text placed below normal text |
| <small> … </small> |
Small – Fineprint size text |
| <tt> … </tt> |
Typewriter Text |
| <pre> … </pre> |
Pre-formatted Text |
| <blockquote> … </blockquote> |
Text Block Quote |
| <strong> … </strong> |
Strong – Shown as Bold in most browsers |
| <em> … </em> |
Emphasis – Shown as Italics in most browsers |
| <font> … </font> |
Font tag obsolete, use CSS. (*) |
Section Divisions
|
| <div> … </div> |
Division (or Section) of Page Content |
| <p> … </p> |
Paragraph of Text |
| <br> |
Line Break |
| <hr> |
Basic Horizontal Line |
| <hr> Tag Attributes: |
| size=”?” |
Line Thickness in pixels |
| width=”?” |
Line Width in pixels |
| width=”??%” |
Line Width as a percentage |
| color=”#??????” |
Line Colour (*) |
| align=”?” |
Horizontal Alignment: left, center, right (*) |
| noshade |
No 3D cut-out |
| <nobr> … </nobr> |
Line Break |
Images
|
| <img src=”url” alt=”text“> |
Basic Image |
| <img> Tag Attributes: |
| src=”url“ |
URL or filename of image (required!) |
| alt=”text“ |
Alternate Text (required!) |
| align=”?” |
Image alignment within surrounding text (*) |
| width=”??” |
Image width (in pixels or %) |
| height=”??” |
Image height (in pixels or %) |
| border=”??” |
Border thickness (in pixels) (*) |
| vspace=”??” |
Space above and below image (in pixels) (*) |
| hspace=”??” |
Space on either side of image (in pixels) (*) |
Linking Tags
|
| <a href=”url“> link text </a> |
Basic Link |
| <a> Tag Attributes: |
| href=”url“ |
Location (url) of page to link to. |
| name=”??” |
Name of link (name of anchor, or name of bookmark) |
| target=”?” |
Link target location: _self, _blank, _top, _parent. |
| href=”url#bookmark“ |
Link to a bookmark (defined with name attribute). |
| href=”mailto:email“ |
Link which initiates an email (dependant on user’s email client). |
Lists
|
| <ol> … </ol> |
Ordered List |
| <ul> … </ul> |
Un-ordered List |
| <li> … </li> |
List Item (within ordered or unordered) |
| <ol type=”?“> |
Ordered list type: A, a, I, i, 1 |
| <ol start=”??”> |
Ordered list starting value |
| <ul type=”?“> |
Unordered list bullet type: disc, circle, square |
| <li value=”??”> |
List Item Value (changes current and subsequent items) |
| <li type=”??”> |
List Item Type (changes only current item) |
| <dl> … </dl> |
Definition List |
| <dt> … </dt> |
Term or phrase being defined |
| <dd> … </dd> |
Detailed Definition of term |
Tables
|
| <table> … </table> |
Define a Table |
| <table> Tag Attributes: |
| border=”?” |
Thickness of outside border |
| bordercolor=”#??????” |
Border Colour |
| cellspacing=”?” |
Space between cells (pixels) |
| cellpadding=”?” |
Space between cell wall and content |
| align=”??” |
Horizontal Alignment: left, center, right (*) |
| bgcolor=”#??????” |
Background Colour (*) |
| width=”??” |
Table Width (pixels or %) (*) |
| height=”??” |
Table Height (pixels or %) (*) |
| <tr> … </tr> |
Table Row within table |
| <th> … </th> |
Header Cell within table row |
| <td> … </td> |
Table Cell within table row |
| <td> Tag Attributes: |
| colspan=”?” |
Number of columns the cell spans across (cell merge) |
| rowspan=”?” |
Number of row a cell spans across (cell merge) |
| width=”??” |
Cell Width (pixels or %) (*) |
| height=”??” |
Cell Height (pixels or %) (*) |
| bgcolor=”#??????” |
Background Colour (*) |
| align=”??” |
Horizontal Alignment: left, center, right (*) |
| valign=”??” |
Vertical Alignment: top, middle, bottom (*) |
| nowrap |
Force no line breaks in a particular cell |
Frames
|
| <frameset> … </frameset> |
Define the set of Frames |
| <frameset> Tag Attributes: |
| rows=”??,??, …” |
Define row sizes & number of rows (size in pixels or %) |
| cols=”??,??, …” |
Define column sizes & number of columns (size in pixels or %) |
| noresize=”noresize” |
User cannot resize any frames in frameset |
| frameborder=”?” |
Frame Border: (1=yes, 0=no) |
| border=”?” |
Border Thickness (in pixels) (*) |
| bordercolor=”#??????” |
Border Colour (*) |
Forms
|
| <form> … </form> |
Form input group decleration |
| <form> Tag Attributes: |
| action=”url” |
URL of Form Script |
| method=”***” |
Method of Form: get, post |
| enctype=”***” |
For File Upload: enctype="multipart/form-data" |
| <input> … </input> |
Input field within form |
| <input> Tag Attributes: |
| type=”***” |
Input Field Type: text, password, checkbox, submit etc. |
| name=”***” |
Form Field Name (for form processing script) |
| value=”***” |
Value of Input Field |
| size=”***” |
Field Size |
| maxlength=”?” |
Maximum Length of Input Field Data |
| checked |
Mark selected field in radio button group or checkbox |
| <button> Tag Attributes: |
| type=”***” |
Button Type: submit, reset, button |
| name=”***” |
Button Name (for form processing script) |
| value=”***” |
Label on Button |
| size=”?” |
Button Size (width) |
| <select> … </select> |
Select options from drop down list |
| <select> Tag Attributes: |
| name=”***” |
Drop Down Combo-Box Name (for form processing script) |
| size=”?” |
Number of selectable options |
| multiple |
Allow multiple selections |
| <option> … </option> |
Option (item) within drop down list |
| <option> Tag Attributes: |
| value=”***” |
Option Value |
| selected |
Set option as default selected option |
| <textarea> … </textarea> |
Large area for text input |
| <textarea> Tag Attributes: |
| name=”***” |
Text Area Name (for form processing script) |
| rows=”?” |
Number of rows of text shown |
| cols=”?” |
Number of columns (characters per rows) |
| wrap=”***” |
Word Wrapping: off, hard, soft |
Special Characters
|
| < |
< – Less-Than Symbol |
| > |
> – Greater-Than Symbol |
| & |
& – Ampersand, or ‘and’ sign |
| " |
“ – Quotation Mark |
| © |
© – Copyright Symbol |
| ™ |
™ – Trademark Symbol |
| |
– A space (non-breaking space) |
| &#??; |
ISO 8859-1 character – replace ?? with the |
Miscellaneous Tags
|
| <!– … –> |
Comment within HTML source code |
| <!DOCTYPE html … > |
Document Type Definition |
| <meta> … </meta> |
META information tag |
| <meta> Tag Attributes: |
| name=”***” |
Meta name: description, keywords, author |
| http-equiv=”***” |
HTTP Equivalent Info: title, etc. |
| content=”***” |
Information content |
| <link> |
LINK content relationship tag |
| <link> Tag Attributes: |
| rel=”***” |
Type of forward relationship |
| http=”url“ |
Location (URL) of object or file being linked |
| type=”***” |
Type of object or file, eg: text/css |
| title=”***” |
Link title (optional) |
Body Background & Colours
|
| <body> Tag Attributes: |
| background=”url“ |
Background Image (*) |
| bgcolor=”#??????” |
Background Colour (*) |
| text=”#??????” |
Document Text Colour (*) |
| link=”#??????” |
Link Colour (*) |
| vlink=”#??????” |
Visited Link Colour (*) |
| alink=”#??????” |
Active Link Colour (*) |
| bgproperties=”fixed” |
Background Properties – “Fixed” = non-scrolling watermark (*) |
| leftmargin=”?” |
Side Margin Size in Pixels (Internet Explorer) (*) |
| topmargin=”?” |
Top Margin Size in Pixels (Internet Explorer) (*) |
(*) Important Note:
Tags marked with (*) should still work, but have been superseeded by Cascading Style Sheets (CSS), which is now the recommended way to change the font, colour, spacing, border or alignment of HTML elements.
