An Overview of HTML Tags

HTML is broken up into source code and page output.

Source code uses what are called tags to create specific formatting within text. Below is a list of commonly used tags, with examples of how they look when outputted within a document.

HTML Tag	Tag Function	Tag Attributes	End tag	Example	Sample Output
<A>	Supplies an anchor for a hypertext reference.	href=hyperlink, target=target window, mailto=e-mail address	</A>	`click <a href="http://songweaver.com/">here</a> to go to songweaver.com. Click <a href="mailto:web@songweaver.com">here</a> to send an e-mail.`	click here to go to songweaver.com. Click here to send an e-mail.
<blockquote>	Indents a block of text	none	</blockquote>	`<blockquote>This text is indented</blockquote>`	This text is indented
<BR>	Inserts a line break	none	none	`This is a line of text <BR> and this is another.`	This is a line of text and this is another.
<center>	Centers text inside of the tag	none	</center>	`<center> This is a line of centered text </center>`	This is a line of centered text
<DL>	Sets up a data list	needs list headers and items within a data list	</DL>	`see below`	see below
<font>	Controls font attributes	color, size, face	</font>	`<font size=+1 color=red>This is a large sized font in red</font> and <font size=-1 face="helvetica">This is a small sized font in helvetica</font>`	This is a large sized font in red and This is a small sized font in helvetica
<i>	Puts text in italics	none	</i>	`<i> This is a line of italicized text </i>`	This is a line of italicized text
<OL>	Creates an ordered (numbered) list	needs various list items within a list.	</OL>	`See below`	See below
<strong>	Puts text in strong face	none	</strong>	`<strong> This is a line of emphasized text </strong>`	This is a line of emphasized text
<tt>	Puts text in typewriter face	none	</tt>	`<tt> This is a line text in typewriter font </tt>`	`This is a line text in typewriter font`
<u>	Underlines text	none	</u>	`Part of this line is <u>underlined</u>`	Part of this line is underlined
<UL>	Creates an unordered (unnumbered) list	needs various list items within a list.	</UL>	`See below`	See below

It's important to remember that tags can be combined. For example, if you want text which is red, centered, in italics, and in bold face, you can do the following:

	<font color=red>
	<center>
	<i>
	<strong>
	Here is a sentence which is in
	bold face, italics and is
	centered.
	</strong>
	</i>
	</center>
	</font>

The output of the above code will be as follows:

Here is a sentence which is in bold face, italics and is centered.

There are several types of lists commonly used in HTML:

Data Lists
Ordered (numbered lists)
Unnumbered lists (such as this one)

Here are examples of each:

Tag

Example

Output

<DL>
   <DT>Item 1.
   <DD>Here's the text of one item.
   <DT>Item 2.
   <DD>Here's the text of another item.
</DL>

Item 1.: Here's the text of one item.
Item 2.: Here's the text of another item.

Here is an ordered list:
<OL>
   <LI>List item 1.
   <LI>List item 2.
   <LI>List item 3.
   <LI>List item 4.
</OL>

Here is an ordered list:

List item 1.
List item 2.
List item 3.
List item 4.

Here is an unnumbered list:
<UL>
   <LI>List item 1.
   <LI>List item 2.
   <LI>List item 3.
   <LI>List item 4.
</UL>

Here is an unnumbered list:

List item 1.
List item 2.
List item 3.
List item 4.