A Syntax Guide to HTML Tags

Click on any of the following links if you wish to skip to a particular section, or see how the HTML has been implemented in this template. Body Tags
  • <body> body of the html document </body>
  • <body bgcolor="black"> sets background color to black </body>
  • <body background="(filename.jpg or .gif)"> sets background image </body>
  • <body text="blue"> sets text color to blue
  • <body link="blue"> sets the color of unvisited links to blue. Note: Blue is the default color: if the link isn't specifically declared, links will automatically be blue.
  • <body vlink="red"> vlink stands for visited link. Visited links automatically default to red.
  • <body alink="purple"> alink stands for active link, a link currently being visited.
Alignment
  • <center> centered text </center>
Style Changes
  • <b> bold </b>
  • <u> underlined </u>
  • <i> italics </i>
Lists
  • <ul> unordered list (beginning)
    • <li> list item
    • <li> list item
    </ul> (end of) ordered list
  • <ol> ordered list (begins)
    1. <li> list item
    2. <li> list item
    </ol> (end of) ordered list
Font Size and Color Changes
  • <font size="(-6 to 6)"> changes font size (default font size is 3) from -6 (the smallest size) to 6 (the biggest size) </font>
  • <font color="green"> changes font color to green </font>
  • <h(1 to 6)> changes from biggest (1) to smallest (6) font, automatically creates a new paragraph
    (like typing <p>) at the end </h(1 to 6)>
Images
  • <img src="filename.jpg" or "filename.gif" height="100" width="100">
Links
  • <a href=URL or filename.html > click here to go to this site </a>
  • <a href="mailto:(email address)"> click here to send an email to (email address) </a>
  • <a href="(URL or image filename)"> <img src="(image filename)"></a> click on the (image filename) to go to the listed site (URL) or picture (image filename)
  • <a name="middle"> "a name" names the current location within a page "middle," which can be referenced as seen below.
  • <a href="#middle" or "./index.html#middle"> click here! </a> this is a link to the section labeled "middle" (above) within a specified page.
Tables
Code:
<table cellspacing="3" cellpadding="3" border="1">
<td> This is the first cell (TD) in the first row (TR) </td>
<td> This is the second cell (TD) in the first row (TR) </td>
</tr>
<tr>
<td> This is the first cell (TD) in the second row (TR) </td>
<td> This is the second cell (TD) in the second row (TR) </td>
</tr>
</table>

Rendered: How the code appears on a web page:
This is the first cell (TD) in the first row (TR) This is the second cell (TD) in the first row (TR)
This is the first cell (TD) in the second row (TR) This is the second cell (TD) in the second row (TR)

Frames
  • TBA
Miscellaneous
  • <html> tells the browser the file is an html document </html>
  • <hr width="60%" size="3"> creates a horizontal rule (line) with size/thickness of 3 and extending accross 60% of the screen

  • <pre>formats the text as it appears in the html file</pre>
  • <blink> causes the enclosed text to blink </blink> (only works in Netscape)
  • <marquee> causes the enclosed text to scroll across the screen </marquee> (only works in IE4)
  • <!-- this comments out text or code in HTML -->
  • <br> This break puts a line break (or carriage return) in your HTML document. Text wraps automatically unless the code specifies a break (unless using a <H#> font). Break ends the line and begins again on the next line.
  • <p> paragraph breaks are similar to breaks, but this is the same as two carriage returns (hitting enter or return twice): it puts it down to the next line, and then the line after that, leaving a full line blank between paragraphs.