HTML Reference
The basics
| 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
| 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
| 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
| 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
| 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
| 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 |
| Multi-line text-wrap | <textarea wrap="off, hard,
soft"></textarea> |
Soft works best! |
Tables
| 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
| 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
| 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 |