Skip to main content

Client Area

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 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.