HTML for the complete beginner

Tags List

For examples or more information of each tag, click the desired name to go to the page that mentions it.

A | B | C | D | E | F | H | I | L | M | N | O | P | S | T | U | !

This list is not 100% complete as I have tried to included as much as possible that works on the two main browsers - Internet Explorer and Netscape.

HTML main tags

<html>
<head>
<title> </title>
</head>
<body>

</body>
</html>

Note: All of these tags should be written in lower case.

Start tag	End tag	Description	How used
<acronym	</acronym>	Gives text a alt/title tag	<acronym title="New Zealand">NZ</acronym>
<address>	</address>	Displays in italic	<address>Busy<br />Auckland<br />N.Z.</address>
<a href	</a>	A linking tag or email tag	<a href="http://www.webaddress.com">Link</a> or within your site <a href="nextpage.html">Link</a> or for email: <a href="mailto:someone@theirplace.com">Link</a>
<a name	</a>	Linking within a page	<a name="namehere"></a>, linked to by: <a href="#namehere">Link</a>

Back to the Top

Start tag	End tag	Description	How used
<b>	</b>	makes text bold	<b>bold text</b> Not deprecated but use CSS
<big>	</big>	makes text big	<big>big text</big> Not deprecated but use CSS
<blockquote>	</blockquote>	indents contents left and right	<blockquote>This text will be indented</blockquote>
<body	</body>	holds your pages content	<body> contents here</body> body content tags are deprecated so use CSS, but for zero margins, use topmargin="0" leftmargin="0" marginheight="0" marginwidth="0"
<br />		creates a new line, line break.	starts a new line after this<br /> new line started

Home

Site Map

HTML vs XHTML

The Basics

Adding Text

Backgrounds

Adding Graphics

Clickable Links

Lists

Tables

Frames

Forms

CSS

Tags List

Bad Html

Questions (FAQ)

Spam 101

Contact me

About me

For more help visit the webmaster-forums.net

Back to the Top

Start tag	End tag	Description	How used
<caption>	</caption>	Assigns a caption to a table, above or below. Must come before the <tr>	<table><caption>caption here</caption><tr> ...
<center>	</center>	centers everything between it, use div or p	<center>this would be centered</center>
<cite>	<cite>	same as <i>, makes contents italics Not deprecated but use CSS	<cite>text would be in italics</cite>
<code>	<code>	display mono style computer font	<code>computer code</code>

Back to the Top | A | B | C | D | E | F | H | I | L | M | N | O | P | S | T | U | !

Start tag	End tag	Description	How used
<dd>	</dd>	is a definition description which inserts the list	<dl> <dt> This line is indented</dt> <dd> This line is normal</dd> </dl>
<div>	</div>	Used to align and/or to hold CSS class requirements	<div align="left, center, right or justify">contents here </div>
<dl>	</dl>	is a definition list which steps the first line in while the other is left normal	<dl> <dt> This line is indented</dt> <dd> This line is normal</dd> </dl>
<dt>	</dt>	is a definition term which are part of definition lists	<dl> <dt> This line is indented</dt> <dd> This line is normal</dd> </dl>

Back to the Top | A | B | C | D | E | F | H | I | L | M | N | O | P | S | T | U | !

Start tag	End tag	Description	How used
<em>	</em>	is like <i>, stands for emphasis Not deprecated but use CSS	<em>quote or something</em>
<embed>	</embed>	used to embed sounds into a web page, should be used with bgsound tag	<embed src="??">

Back to the Top | A | B | C | D | E | F | H | I | L | M | N | O | P | S | T | U | !

Start tag	End tag	Description	How used
<fieldset>	</fieldset>	This makes a box around its containing elements, use with legend tag	<fieldset><legend>title of box</legend> this would have a box around it</fieldset>
<font>	</font>	Was used to display font colour, style, size etc Easier to use CSS	<font color="#??????"> Displays the color font you choose (RGB color) <font face="?"> Displays fonts - caution here, if the viewer doesn't have it, they wont see it. <font size="?"> Sizes from 1 to 7 (3 the default) and/or -2 to +4 (+4 is the same as 7 etc all the way down the list)
<form>	</form>	Is better used with server side scripts but can be used with the mailto action, the options for forms are numerous	<form> input=, select=, textarea, and button=, action=, method= </form>
<frame>	</frame>	names the frame cell	<frameset ...> <frame src="?" name="?"> <frame src="?" name="?"> </frameset>
<frameset>	</frameset>	starts a frame	<frameset ...> <frame src="?" name="?"> <frame src="?" name="?"> </frameset>

Back to the Top | A | B | C | D | E | F | H | I | L | M | N | O | P | S | T | U | !

Start tag	End tag	Description	How used
<h1> <h2> <h3> <h4> <h5> <h6>	</h1> </h2> </h3> </h4> </h5> </h6>	heading tags, 1 thru to 6, can also be aligned	<h1>The biggest heading </h1> <h2>the second biggest </h2> <h3>The third biggest </h3> <h4>The fourth biggest </h4> <h5>The fifth biggest </h5> <h6>The smallest </h6> <h? align="left"> Aligns the contents between the tags to the left <h? align="center"> Aligns the contents between the tags to the center <h? align="right"> Aligns the contents between the tags to the right
<head>	</head>	is the part the browser reads, also contains the meta and title tags	<head> <title> </title> </head>
<hr />		is a horizontal rule, can be align, sized etc.	<hr /> Horizontal Rule <hr align="?" /> left or center or right alignment <hr size="?" /> Thickness <hr width="?" /> width, either pixels (numbers or %) <hr shade /> Cut out effect <hr noshade /> Solid Line
<html>	</html>	Starts off your HTML page	<html> <head> ..... </body> </html>

Back to the Top | A | B | C | D | E | F | H | I | L | M | N | O | P | S | T | U | !

Start tag	End tag	Description	How used
<i>	</i>	makes contents italic Not deprecated but use CSS	<i>italic text</i>
<img src />		display an image, included in this tag should be, height, width and alt as default	<img src="image.gif" width="??" height="??" alt="description of image" />
<input />		tag is used in forms for fields, see forms	<form> <input type="?" ... /> </form>
<ins>	</ins>	Underlines the text Not deprecated but use CSS	<ins>underlined text</ins>

Back to the Top | A | B | C | D | E | F | H | I | L | M | N | O | P | S | T | U | !

Start tag	End tag	Description	How used
<label>	</label>	allows people to click on the name of the form object	<form><label for="name">Name :</label><input id="name" ... /></form>
<legend>	</legend>	used with the <fieldset> to display a title	<fieldset><legend>title of box</legend> this would have a box around it</fieldset>
<li>	</li>	is used in lists, list items, used with ordered and unordered lists	<ol or ul> <li>item one</li> <li>item two</li> etc </ol or /ul>
<link />		declares the use of a style sheet	<link rel="stylesheet" type="text/css" href="style.css" />

Back to the Top | A | B | C | D | E | F | H | I | L | M | N | O | P | S | T | U | !

Start tag	End tag	Description	How used
<map>	</map>	This tag is used in imagemaps	<map name="?"> <area ...> </map>
<meta />		tags contain information for search engines etc	<meta> <meta name="keywords" content="???, ???"> This is what search engines use, seperate each word by commas <meta name="description" content="???"> This is where you put your site name, or quick description <meta http-equiv="refresh" content="5;url=http://somewhere.com"> Redirects your page to another URL, in this case in 5 seconds <meta name="author" content="Your Name and/or email"> This and the following tag is just for looks, search engines don't use them <meta name="generator" content="Notepad or whatever">

Back to the Top | A | B | C | D | E | F | H | I | L | M | N | O | P | S | T | U | !

Start tag	End tag	Description	How used
<noframes>	</noframes>	For the older browsers that cant view frames, same as noscript	<noframes>Sorry your browser cant view frames ...</noframes>
<noscript>	</noscript>	used for browsers that dont support the used script type	<noscript>Sorry you are unable to view this ...</noscript>

Back to the Top | A | B | C | D | E | F | H | I | L | M | N | O | P | S | T | U | !

Start tag	End tag	Description	How used
<ol>	</ol>	defines the list to be an ordered one	<ol>starts the list (uses numbers) <li>the contents line</li> </ol>ends the list
<option>	</option>	This tag is used in form and has two functions: selects the option, reports the value	<select> <option= selected, value=, multiple> </select>

Back to the Top | A | B | C | D | E | F | H | I | L | M | N | O | P | S | T | U | !

Start tag	End tag	Description	How used
<p>	</p>	makes a new paragraph, can contain alignment	<p align="?">this is one paragraph</p>
<pre>	</pre>	displays how it is typed with spaces, indents etc	<pre>this would display as typed, new lines, indents and all</pre>

Back to the Top | A | B | C | D | E | F | H | I | L | M | N | O | P | S | T | U | !

Start tag	End tag	Description	How used
<s>	</s>	puts a line through your text, same as strike tag Not deprecated but use CSS	<s>this would have a line through it</s>
<script>	</script>	Tells the browser that the following will be javascript or VBscript, can contain the script itself or a link to an external file	<script type="??">script written here</script>
<select>	</select>	is used for drop down menu fields in forms	<form><select><option>Anywhere you want</option></select></form>
<small>	</small>	Makes text smaller Not deprecated but use CSS	<small>this would all be small</small>
<span>	</span>	Used with a class from style sheet to a section of text	<span> contents </span>
<strike>	</strike>	applys a line thru text, same as <s> Not deprecated but use CSS	<strike> this would have a line through it</strike>
<strong>	</strong>	Makes text bold Not deprecated but use CSS	<strong>this would be bold</strong>
<style>	</style>	Style sheet tag. Specifies a CSS	<style type="text/css"> ...... </style>
<sub>	</sub>	subscript text	<sub>this would be small and below</sub>
<sup>	</sup>	superscript text	<sup>this would be small and above</sup>

Back to the Top | A | B | C | D | E | F | H | I | L | M | N | O | P | S | T | U | !

Start tag	End tag	Description	How used
<table>	</table>	this is the first tag of a table tag	<table> Table elements include border Sets the border size. table border="0"> cellpadding pixels between the cell data and cell wall. table cellpadding="5"> cellspacing pixels between cells. table cellspacing="3"> width width of overall table in pixels or percent. <table width="90%"> height height of overall table in pixels or percent. <table height="100"> align aligns the table to the left, right, or center. <table align="center"> bgcolor specifies the background color of the table. <table bgcolor="#000000"> background specifies the background image. <table background="filename">
<td>	</td>	is the tag that holds all the tables contents, table data	<td> td cell elements align aligns the cell to the left, right, or center. td align="center"> valign vertically aligns the cell to the top, bottom, or center. td valign="bottom"> width width of the cell in pixels or percent. <td width="30%"> height height of the cell in pixels or percent. <td height="50"> bgcolor specifies the background color of the table. <td bgcolor="#000000"> colspan spans cell columns. <td colspan="2"> rowspan spans Cell rows. <td rowspan="2">
<textarea>	</textarea>	Is really best used within a form, some browsers allow its use outside of forms	<textarea name="?" cols=? rows=? readonly > the contents </textarea>
<th>	</th>	same as <td> but default is align="center" and bold, table header.	see td above
<title>	</title>	is used in the head tag to title the page	<head> <title>your title</title> </head>
<tr>	</tr>	defines the table row	<tr> table row elements align aligns the row to the left, right, or center. <tr align="right"> valign vertically aligns the row to the top, bottom, or center. <tr valign="top"> bgcolor specifies the background color of the table. <tr bgcolor="#000000">
<tt>	</tt>	display text in typewriter font Not deprecated but use CSS	<tt>typewriter font</tt>
type		isnt really a tag, but is included in a couple such as script, style, forms, lists etc	no sample

Back to the Top | A | B | C | D | E | F | H | I | L | M | N | O | P | S | T | U | !

Start tag	End tag	Description	How used
<u>	</u>	makes an underline Not deprecated but use CSS	<u>this would have an underline</u>
<ul>	</ul>	Creates an unordered list	<ul> <li> Starts the contents line</li> </ul>

Back to the Top | A | B | C | D | E | F | H | I | L | M | N | O | P | S | T | U | !

Start tag	End tag	Description	How used
<!DOCTYPE>		displays the document type, strict, transitional or frames Note this tag is uppercase	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- comments -->		notes to yourself, not seen by browser /viewer	<!-- comment -->

Color Chart «- Top of Page -» Special Characters