This cheat sheet - or HTML code quick reference - lists the common HTML tags and their attributes, grouped into relevant sections in an easy-to-read format.
Basic HTML Structure |
|---|
<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 |
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) (*) |
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 |
| <frame> ... </frame> | Define a frame within the frameset |
| <frame> Tag Attributes: | |
| src="url" | Location of HTML File for a frame |
| name="***" | Unique name of frame window |
| marginwidth="?" | Horizontal margin spacing inside frame (pixels) |
| marginheight="?" | Vertical margin spacing inside frame (pixels) |
| noresize="noresize" | Declare all frameset sizes as fixed |
| scrolling="***" | Can the user scroll inside the frame: yes, no, auto |
| frameborder="?" | Frame Border: (1=yes, 2=no) |
| bordercolor="#??????" | Border Colour (*) |
| <noframes> ... </noframes> | Unframed content (for browsers not supporting frames) |
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 iso code |
Miscellaneous Tags | |
|---|---|
| <!-- ... --> | Comment within HTML source code |
| <!DOCTYPE html ... > | Document Type Definition (wiki) |
| <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) (*) |
No comments:
Post a Comment