Text Tags
-
<b>Your text here</b>
Creates bold text.
-
<i>Your text here</i>
Creates italic text.
-
<pre>Your text here</pre>
Creates preformatted text.
-
<h?>Your text here</h?>
Creates a headline, with "?" replaced by a number ranging from 1 to 6. "1" creates the largest headline, "6" the smallest.
-
<tt>Your text here</tt>
Creates teletype, or typewriter-style text.
-
<cite>Your text here</cite>
Denotes a citation (usually with italics).
-
<em>Your text here</em>
Denotes an emphasized word or phrase (with italics or bold).
-
<strong>Your text here</strong>
Denotes an strongly emphasized word or phrase (with italics or bold).
-
<span style="font-size: ?;">Your text here</span>
Set text size, with "?" replaced by the size and an appropriate size unit (pt, px, em, or %). For example, "17pt" or "11px". Do not use the tag to change text size as it is not an official HTML tag, and may invalidate your document's HTML.
-
<span style="color: ?;">Your text here</span>
Set text color, with "?" replaced by a hex value or color name. For example, "#CC0000" or "red". Do not use the tag to change text color as it is not an official HTML tag, and may invalidate your document's HTML.
Link Tags
-
<a href="URL">Your text here</a>
Creates a link to another website. Replace "URL" with a valid web address (URL).
-
<a href="URL" target="_blank">Your text here</a>
Creates a link that will open up in a new browser window.
-
<a href="mailto:EMAIL">Your text here</a>
Creates a link to an e-mail address. Will open the user's default e-mail application.
-
<a name="NAME">Your text here</a>
Creates a target location within a document.
-
<a href="#NAME">Your text here</a>
Links to that target location from elsewhere in the document.
Formatting Tags
-
<div>Your text here</div>
A generic tag used to format large blocks of HTML.
-
<span>Your text here</span>
A generic tag used to format smaller blocks of HTML.
-
<p>Your text here</p>
Denotes a paragraph of text.
-
<p style="text-align: ?;">Your text here</p>
Sets the horizontal alignment for that particular paragraph, with "?" replaced by "left", "right", "center", or "justify".
-
<blockquote>Your text here</blockquote>
Denotes a lengthy section of quoted text (usually by indenting the text on both sides).
-
<hr />
Inserts a horizontal rule.
-
<hr size="?" />
Sets the height of the horizontal rule, with "?" set to either a unit or a percentage.
-
<hr width="?" />
Sets the width of the horizontal rule, with "?" set to either a unit or a percentage.
-
<hr noshade="noshade" />
Creates a horizontal rule without a shadow.
-
<dl></dl>
Creates a definition list.
-
<dt></dt>
Denotes a definition term.
-
<dd></dd>
Denotes a definition.
-
<ol></ol>
Creates a numbered list.
-
<ul></ul>
Creates a bulleted list.
-
<li></li>
Denotes an individual list item.
Images
-
<img src="URL" />
Adds an image to your page. "URL" should be replaced with the URL that points to the image.
-
<img src="URL" align="?" />
Sets the alignment of the image, with "?" replaced by "left", "right", "center", "top", "middle" or "bottom".
-
<img src="URL" border="?" />
Sets the width of the image's border, with "?" replaced by a specific unit.
Table Tags
-
<table></table>
Creates a table.
-
<tr></tr>
Creates each row in the table.
-
<td></td>
Creates each cell in the row.
-
<th></th>
Creates the header for each cell (usually with bold, centered text).
Table Attributes
-
<table border="?"></table>
Sets the width of the border around the table and its cells, with "?" set to a unit.
-
<table cellspacing="?"></table>
Sets the amount of space between individual cells, with "?" set to a unit.
-
<table cellpadding="?"></table>
Sets the amount of space between each cell's border and its contents, with "?" set to a unit.
-
<table width="?"></table>
Sets the width of the table, with "?" set to either a unit or a percentage.
-
<tr align="?"></tr>
Sets the horizontal alignment of all of the cells within that row, with "?" replaced by "left", "right", "center", or "justify".
-
<td align="?"></td>
Sets the horizontal alignment for that particular cell, with "?" replaced by "left", "right", "center", or "justify".
-
<tr valign="?"></tr>
Sets the vertical alignment of all of the cells within that row, with "?" replaced by "top", "middle", "bottom", or "baseline".
-
<td valign="?"></td>
Sets the vertical alignment for that particular cell, with "?" replaced by "top", "middle", "bottom", or "baseline".
-
<td colspan="?"></td>
Sets the number of columns the cell should span, with "?" replaced by the number of columns.
-
<td rowspan="?"></td>
Sets the number of rows the cell should span, with "?" replaced by the number of rows.
-
<td nowrap="nowrap"></td>
Prevents the text and other contents of the cell from wrapping onto the next line to fit.
Additional HTML Tips
- Use the right tag for the job. For example, if you're bolding text in order to emphasize it, don't use the <b> tag. Rather, use the <em> or <strong> tag. A paragraph of text should be enclosed between <p> tags, a list should be enclosed within the appropriate list tags, and so on.
- Make sure that your HTML tags are nested properly. For example, <b><i>Some Text</i></b> is correct, whereas <i><b>Some Text</i></b> is not.
- With a few exceptions, all HTML tags consist of a pair of tags; an opening tag and a closing tag (the one with the forward slash). Make sure that all of your HTML that require closing tags have them.
- If a tag is self-closing (doesn't have a closing tag), make sure that it ends with a forward slash. For example, <hr> should be typed as <hr />.
- All HTML tags should be lowercase.
- All HTML tag attribute values should be in quotes. For example, <table border="10"> is correct, whereas <table border=10> is not.
- Avoid using non-standard or deprecated tags such as <font>, <blink>, and <center>.
- It is very important that all HTML is valid and well-formed. Validating your HTML helps you find errors in your code that may prevent it from displaying correctly in different web browsers. Many HTML editors have built-in validation capabilities (consult your software's documentation). Otherwise, you can use this online HTML validator.
- For additional information, check out W3School's comprehensive tutorials on HTML and XHTML.
