HTML Lesson #2
"Common HTML Tags"
This is a list of the most common tags and how to use them (with examples!). It's divided into types for easy understanding. This page will be a little long but I'll try to keep the text down. Many of these tags are being phased out or it is recommended that you use CSS (Cascading StyleSheets) instead. Since CSS is a little advanced, I recommend that you use these tags if you're just starting out. All tags that have been depreciated will be marked with an asterisk (*) while tags/attributes that have been depreciated and replaced by CSS will be marked by two asterisks (**).

The indented text that is started by (-) are attributes of the tag it's indented under. This means that these attributes are to be used with the tag. The settings of these attributes don't need to be enclosed in quotes in HTML but it's considered good formatting if you do so. The "=" is required. (width="200" vs. width=200)

Font Formatting - Page Formatting - Tables - Lists - Forms - Miscellaneous
Font Formatting: Basically a font is how the words look in a webpage. It's made up of the letter style, the size, whether it's bold or italic, etc.

<font> **: This tells the browser how you want your text to look. Professionals frown upon using this tag instead of CSS.
<font face="Times New Roman" size="3" color="yellow">My text is in the Times New Roman style and is yellow!</font>
My text is in the Times New Roman style and is yellow!

<b>: Makes the font bold. An alternate <strong> exists.

<i>: Italicizes the font. An alternate <em> exists.

<u> *: Underlines the font. Has been depreciated because underlined text resembles links.

<h1> - <h6>: Defines a page header. H1 is the largest while H6 is the smallest.
back to the top

Page Formatting: These tags assist you with the organization of your webpage.

<br>: This adds a linebreak to your text. It has no closing tag so add a backslash before >.

<center>: This centers your text.

<hr>: This draws a horizontal rule across the page like the one above this section. <p>: Defines a paragraph. These are automatically double-spaced.

<pre>: Defines preformatted text that displays exactly how you type it in a monospaced font. The examples are making use of the <pre> tag. <span>: Defines a section of text that will have special formatting. CSS must be used with this tag, otherwise it's pointless to use it. <style>: Defines CSS properties that will be used in your webpage. This goes between <head></head>.

back to the top

Tables: These are actually meant to organize information in a spreadsheet style but have been used since the dawn of the World Wide Web for webpage layouts. A word of warning, however. If you eventually want to move onto tableless (CSS) layouts, this method is difficult to unlearn.

<table>: Defines a table. Without at least <tr> and <td> inside it's useless.
<table border="1" align="center"><tr><td>This is my table with one cell.</td></tr></table>
This is my table with one cell.

<th>: Defines the header in a table. The text is usually made bold. Align **, bgcolor **, and width ** can be used in addition to what's listed below.
<table border="1" align="center"><tr><th>Header</th></tr><tr><td>Table cell.</td></tr></table>
Table cell.

<tr>: Defines a table row. Align **, bgcolor **, and valign can be used with this.

<td>: Defines a table cell. Align **, bgcolor **, colspan, height **, rowspan, valign, and width ** can be used with this.

<caption>: Defines the table's caption. Must be used right after <table>.
<table border="1" align="center"><caption>This is my caption.</caption><tr><td>Table cell.</td></tr></table>
This is my caption.
Table cell.

back to the top

Lists: Ordered and unordered lists are used all over the Internet for various reasons.

<ul>: Defines an unordered list. This list's items will have bullets. <ol>: Defines an ordered list. This list's items will have a character. <li>: Defines a list item. You can use the type attribute ** with this (bullet or character).

back to the top

Forms: These are used to process data. Some sort of server-side script (such as CGI or PHP) must be used to process the information most of the time.

<form>: Defines a form for user input. <input>: Defines an input field that may be a textbox, a submit button, a checkbox, or a group of radio buttons. There is no closing tag.
<input type="button" value="Hello!" />
<input type="radio" name="radiotest" value="radio1"> -
<input type="radio" name="radiotest" value="radio2"> -
<input type="radio" name="radiotest" value="radio3">
- -

<select>: Defines a dropdown list. <option>: Defines an option in a dropdown list.
<option selected="selected">Red</option>

<textarea>: Defines a multi-line text input field. You can have text display in the textarea by default by placing it between the tags.
<textarea cols="30" rows="7"></textarea>

<label>: Defines a label for an element. Clicking on it will cause the element to be triggered.
<label for="clickme">Click Me:</label><input type="checkbox" id="clickme" />

back to the top

Miscellaneous: Tags that don't fit anywhere else.

<!DOCTYPE>: Defines the document type. This goes before <html> There is no closing tag, but it's not valid to use a forward slash. <!--...-->: Defines webpage comments that won't be seen by your visitors unless they view your source code. There is no closing tag. Replace the periods with your text.

<a>: Defines an anchor. This can be used to link to another webpage or website or to create a bookmark in a long document. To create an e-mail link, add "mailto:" before the e-mail address. To link to a sub-directory, add the name of the directory followed by a forward slash "/" before the filename (/dir/file.jpg). To link from a sub-directory to the another directory, use "../" for each level you want to go back to. This is called the "relative path". The "absolute path" is the full one: <div>: Defines a division/section (also known as a layer). This is used most often with tableless CSS designs. Most browsers place a line break before and after this tag.

<frame>: Defines a frame. This must be used with <frameset> and there is no closing tag. See <frameset> for an example. <frameset>: Defines a frameset used to group together multiple webpages. Cannot use the <body> tag. Generally the frameset is on the index page of a website (index.html). Set the title of this frameset as you would an ordinary webpage.
<frameset cols="120, *">
<frame src="left.html" />
<frame src="index2.html" />
<img>: Defines an image. There is no closing tag. <meta>: Defines webpage information. This tag goes between <head></head> There is no closing tag. It's mainly used by search engines.
<meta name="description" content="This is Goku Girl's HTML tutorial #2." />
<meta name="keywords" content="HTML, tutorial, beginners" />
<meta http-equiv="refresh" content="10" url="" />
<link>: Defines a relationship between two documents. It has no closing tag.
<link rel="stylesheet" type="text/css" href="style.css" />
<noframes>: Sends a message to browsers that don't support frames. If you use this, you must use the <body> tag or else your message won't display in the web browser. Browsers that do support frames will ignore the message and execute the frame set.
<frameset cols="120, *">
<body>Your browser cannot display frames.</body>
<frame src="left.html" />
<frame src="index2.html" />
<script>: Defines a script. This must go between <head></head> See the example in <noscript>. <noscript>: Tells a browser that doesn't support scripting (JavaScript, VBScript) to ignore it and give an alternate message. Comments (<!--...-->) should also be used with this.

<script type="text/javascript">
document.write("Hi everybody!")
<noscript>Sorry, your browser doesn't support JavaScript.</noscript>
<applet> *: Defines an embedded applet. It's now preferred that a web designer use <object> instead.
back to the top

This page was last updated on: