HTML Quick Reference
The HTML for an example page with all the tags shown here is provided below this list.
Common HTML Tags
Note: "CSS" in the attributes column indicates: id, class, style and title attributes.
| Tag |
Attributes |
Description |
Example |
| Structural Tags |
| <html> </html> |
CSS |
HTML: Encompasses (opens and closes) the entire web page |
<html>
<head>
<title>Structural Tags Example</title>
</head>
<body>
(content of web page here)
</body>
</html>
|
| <head> </head> |
CSS |
Head: Contains the web page's title and other items not displayed directly on the page |
| <title> </title> |
CSS |
Title: Contains the web page's title as seen in the blue bar at the very top of the browser window |
| <body> </body> |
CSS |
Body: Contains the web page's content (e.g. all the items displayed on the page) |
| <br /> |
(none) |
Line Break: Inserts a line break |
Some text above the break <br /> Some text below the break |
| Block Tags |
| <h1> </h1> to <h6> </h6> |
CSS |
Heading: Displays text as a heading on the page on its own line |
<h1>A Heading</h1> |
| <p> </p> |
CSS |
Paragraph: Used for most text on the page. Displays blocks of standard text separated by a line break |
<p>This is a paragraph. It can comprise several sentences.</p> |
| <ul> </ul> |
CSS |
Unordered List: Used with <li> ... </li> to display a bulleted list |
<ul>
<li>Unordered item 1</li>
<li>Unordered item 2</li>
</ul>
<ol>
<li>Ordered item 1</li>
<li>Ordered item 2</li>
</ol>
|
| <ol> </ol> |
CSS |
Ordered List: Used with <li> ... </li> to display a numbered list |
| <li> </li> |
CSS |
List Item: Defines each bullet in an Unordered or Ordered List |
| <div> </div> |
CSS |
Division: Used to divide sections of the web page into logical groups |
<div>(almost any HTML here)</div> |
| <table> </table> |
border, cellpadding, cellspacing, width, CSS |
Table: Used with <tr> ... </tr> and <td> ... </td> to display a table |
<table border="1">
<tr>
<td>Text in the table cell</td>
<td>Another table cell</td>
</tr>
</table>
|
| <tr> </tr> |
href, CSS |
Table Row: Used with <td> ... </td>, creates a new row in a table |
| <td> </td> |
rowspan, colspan, CSS |
Table Data (cell): Creates a new table cell |
| <hr /> |
CSS |
Horizontal Rule: Places a horizontal line across the page |
Text above rule <hr /> Text below rule |
| Inline Tags |
| <b> </b> |
CSS |
Bold: Makes text bold |
<b>Bold text</b> |
| <i> </i> |
CSS |
Italics: Makes text italicized |
<i>Italicized text</i> |
| <img /> |
src, alt, height, width, CSS |
Image: Places an image on the web page from the location specified in the src attribute |
<img src="images/logo.jpg" alt="Our Logo" /> |
| <a> </a> |
href, CSS |
Anchor (Link): Creates a link to another web page specified in the href attribute |
<a href="page2.html">Link to Page 2</a> |
| <span> </span> |
CSS |
Span: A container that groups inline elements (e.g. text). Typically used to apply CSS styles |
Text outside span <span>Text inside span</span> |
Example HTML Page
This example HTML page uses all of the tags shown in Common HTML Tags, above.
The HTML
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<h1>Welcome to the HTML Example Page</h1>
<p>This page demonstrates common <b>HTML</b> tags:</p>
<p>HTML tags consist of:</p>
<ul>
<li>A starting tag</li>
<li>A closing tag</li>
<li>Attributes</li>
</ul>
<p>HTML tag notes:</p>
<ol>
<li>Some tags close themselves</li>
<li>Not all tags have attributes, <i>but</i></li>
<li>Some tags have attributes that are required</li>
</ol>
<p>Tables display tabular data:</p>
<table border="1">
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
</table>
<div>
<p>Divs allow the logical grouping of HTML. The image and the link below are all grouped together with this paragraph by this div.</p>
<img src="http://www.bionex.ca/images/cat.gif" alt="Bionex Multimedia Cat" />
<br />
<a href="http://www.bionex.ca">Link to Bionex Multimedia</a>
<div>
<hr />
</body>
</html>
The Result
This is the result of the above HTML displayed in a browser (you can copy and paste the HTML to try for yourself):
