Firespring - Minuteman Website Solution
Account Login

Basic HTML Primer

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 <font> 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 <font> 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. For example, <hr size="200" /> or <hr size="50%" />.
<hr width="?" />
Sets the width of the horizontal rule, with "?" set to either a unit or a percentage. For example, <hr width="200" /> or <hr width="50%" />.
<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.

Here is an example of a list:

<ul>
<li>An item in the list</li>
<li>Another item in the list</li>
</ul>

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. For example, <table border="5"></table>.
<table cellspacing="?"></table>
Sets the amount of space between individual cells, with "?" set to a unit. For example, <table cellspacing="5"></table>.
<table cellpadding="?"></table>
Sets the amount of space between each cell's border and its contents, with "?" set to a unit. For example, <table cellpadding="5"></table>.
<table width="?"></table>
Sets the width of the table, with "?" set to either a unit or a percentage. For example, <table width="10"></table> or <table width="75%"></table>.
<tr align="?"></tr>
Sets the horizontal alignment of all of the cells within that row, with "?" replaced by "left", "right", "center", or "justify". For example, <tr align="left"></tr>.
<td align="?"></td>
Sets the horizontal alignment for that particular cell, with "?" replaced by "left", "right", "center", or "justify". For example, <td align="left"></td>.
<tr valign="?"></tr>
Sets the vertical alignment of all of the cells within that row, with "?" replaced by "top", "middle", "bottom", or "baseline". For example, <tr valign="top"></tr>.
<td valign="?"></td>
Sets the vertical alignment for that particular cell, with "?" replaced by "top", "middle", "bottom", or "baseline". For example, <td valign="top"></td>.
<td colspan="?"></td>
Sets the number of columns the cell should span, with "?" replaced by the number of columns. For example, <td colspan="3"></td>.
<td rowspan="?"></td>
Sets the number of rows the cell should span, with "?" replaced by the number of rows. For example, <td rowspan="3"></td>.
<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.