HTML Tags
Here is a list of common HTML tags along with a description and a brief example of how each is used.
| ! | A | AREA | B |
| BGSOUND | BIG | BLOCKQUOTE | BODY |
| BR | CAPTION | CENTER | DD |
| DIV | DL | DT | EM |
| FONT | FORM | FRAME | FRAMESET |
| H | HEAD | HR | HTML |
| I | IMG | INPUT | LI |
| LISTING | MAP | MARQUEE | MENU |
| NOFRAMES | OL | OPTION | P |
| PRE | S | SELECT | SMALL |
| SPAN | STRIKE | STRONG | SUB |
| SUP | TABLE | TD | TEXTAREA |
| TITLE | TR | U | UL |
<!-- -->
Comment tag.
This tag specifies that anything between them will not be viewed by a web browser.
It is useful to make comments within an HTML document.
<!-- This is where you would type comments that you don't want to be viewed on a browser. -->
Back to the list.
<A>
Anchor Tag.
Used with HREF= to create hyperlinks. Used with NAME= to create a named reference.
<a href="http://www.cityscape.net">
Back to the list.
<AREA>
Used to specify the shape of a "hot spot" in an image map.
<area shape="rect" coords="50, 25, 150, 125" href="http://www.sample.com">
Back to the list.
<B>
Specifies that the text between these tags should be displayed as bold.
<b>This text will be bold.</b>
Back to the list.
<BGSOUND>
This tag is used when referring to a song by 80's supergroup, The BeeGees.
Ok, I'm kidding, it is actually used to embed a background sound in a document.
<bgsound href="http://www.sample.com/sound.wav">
Back to the list.
<BIG>
Enlarges a font size.
<big>This text will be displayed larger.</big>
Back to the list.
<BLOCKQUTE>
Specifies test as a quotation.
<blockquote>"Hello there!!"</blockquote>
Back to the list.
<BODY>
Specifies the beginning and end of the body of a document.
<body>All of the attributes making up your entire document will be between these tags.</body>
Back to the list.
<BR>
Inserts a line break.
This text will be displayed</br>
on two lines.
Back to the list.
<CAPTION>
Specifies a caption for a table. Only used with the TABLE tag.
<caption align=top> When used with the TABLE tag, this would appear above the table</caption>
Back to the list.
<CENTER>
Centers images, text and tables.
<center>This text will be centered in your document</center>
Back to the list.
<DD>
Used with the DL and DT tags to format text as a definition.
<dl><dt>Any Word<dd>The definition of that word</dl>
Back to the list.
<DIV>
Sets a division in a document. When used with the CLASS attribute, it give the enter division the same styles.
<div>This text is a section in a
document</div>
Back to the list.
<DL>
Specifies a definition list. Used in conjunction with the DT and DD tags.
<dl><dt>Any Word<dd>The definition of that word</dl>
Back to the list.
<DT>
Specifies a definition. Used in conjuction with the DD and DL tags.
<dl><dt>Any Word<dd>The definition of that word</dl>
Back to the list.
<EM>
Emphasizes text, usually by displaying it as italics.
<em>This text will be emphasized.</em>
Back to the list.
<FONT>
Formats the style, size, and color of a text.
<font face="arial" size="+2" color="orange">This text will be orange arial, two pts bigger than the base font..</font>
Back to the list.
<FORM>
Specifies a form that the user will enter data into.
<FORM METHOD=POST ACTION="http://cgi.cityscape.net/cgi-bin/FormMail.pl">
<INPUT TYPE="hidden" NAME="recipient" VALUE="[email protected]">
<input type="hidden" name="subject" value="add a link">
<input type="hidden" name="redirect
value="http://www.cityscape.net/thankyou2.html">
Please enter your name:<br>
<input type="text" name="name" size=30,1 maxlength=50> (Do not hit return)<br>
</form>
Back to the list.
<FRAME>
Defines frames or seperate windows within a webpage.
<frame frameborder=0 scrolling=no src="sample.htm">
Back to the list.
<FRAMESET>
Defines the layout of frames in a webpage.
<frameset scrolling=yes cols="25%, 50%, *">
<frame src="contents.htm">
<frame src="info.htm">
<frame scrooling=no src="graphic.htm">
</frameset>
Back to the list.
<H1,H2,H3,H4,H5,H6>
Specifies a header. H1 will create the largest header and H6 the smallest.
<h1>This text will is a header.</h1>
Back to the list.
<HEAD>
Marks the heading area of an HTML document.
<head>Everything between these tags is considered the header of this document.</head>
Back to the list.
<HR>
Creates a horizontal rule which is helpful in seperating sections. This tag does not need a closing tag.
<hr size="5" width=50%>This tag will create a horizontal rule with a thickness of 5 pixels, and a width of 50% of the webpage.
Back to the list.
<HTML>
Specifies that the file is an HTML document. They should be the first and last tags in your document.
<html>
This is where your entire document will go.
</html>
Back to the list.
<I>
Specifies that the text between these tags should be displayed as italics.
<i>This text will be in italics.</i>
Back to the list.
<IMG>
Places a graphic file into your document.
<img src="http://www.cityscape.net/logo.jpg">
Back to the list.
<INPUT>
Specifies a type of form control such as check box or radio button.
<FORM METHOD=POST ACTION="http://cgi.cityscape.net/cgi-bin/FormMail.pl">
<INPUT TYPE="hidden" NAME="recipient" VALUE="[email protected]">
<input type="hidden" name="subject" value="add a link">
<input type="hidden" name="redirect
value="http://www.cityscape.net/thankyou2.html">
Please enter your name:<br>
<input type="text" name="name" size=30,1 maxlength=50> (Do not hit return)<br>
</form>
Back to the list.
<LI>
Denotes and individual item in a list.
<ul>
<li>This text is a list item.
</ul>
Back to the list.
<LISTING>
Displays text in fixed-width type.
<listing>This is fixed-width text</listing>
Back to the list.
<MAP>
Specifies a collection of "hot spots" for an image map.
<map name="map1">
<area.....>
<area.....>
</map>
Back to the list.
<MARQUEE>
Displays text as a scrolling marquee.
<marquee>This will scroll across the webpage.</marquee>
Back to the list.
<MENU>
Denotes a list of items.
<menu>
<li>This text will be the first menu item
<li>This text will be the second menu item
</menu>
Back to the list.
<NOFRAMES>
Used to create a page that is compatible with both frames capable browsers and non-frames browsers. Frames capable browsers will ignore the text between the NOFRAMES tags.
<frameset>
<noframes>Your browser does not support frames>
</frameset>
Back to the list.
<OL>
Specifies that a list will an ordered list. Each item in the list will be preceded by a number or letter reference.
<ol>
<li>This text will be item number 1.
<li>This text will be item number 2.
</ol>
Back to the list.
<OPTION>
Denotes one choice in a list box.
<option value=pick me>
<option value=no pick me>
Back to the list.
<P>
Inserts a new paragraph on a webpage. Doe's not require the closing tag.
<p>This text will be seperated form the text above it.</p>
Back to the list.
<PRE>
Displays text exectly as it is typed with spaces and breaks.
<pre>This text
will
appear on the page, just like it is here.</pre>
Back to the list.
<S>
Display text in strikethrough type.
<s>This text will be display as strikethrough.</s>
Back to the list.
<SELECT>
Denotes a list of dropdown list.
<select name="Cars" multiple size="1">
<option value="1">BMW
<option value="2">PORSCHE
<option value="3" selected>MERCEDES
</select> Back to the list.
<SMALL>
Decreases the font size.
<small>This text will be smaller.</small>
Back to the list.
<SPAN>
Affects enclosed text with style information.
<span class=.clssmall>This text will take on the settings defined under .clssmall in the style sheet.</span>
Back to the list.
<STRIKE>
Specifies that the text between these tags should be displayed as strikethrough.
<strike>This text will be displayed as strikethrough.</strike>
Back to the list.
<STRONG>
Emphasizes text, usually displays as bold.
<strong>This text will be bold.</strong>
Back to the list.
<SUB>
Specifies that the text between these tags should be displayed as in subscript.
This text will be normal.<sub>This text will be subscript.bold.</sub>
Back to the list.
<SUP>
Specifies that the text between these tags should be displayed in superscript.
This text will be normal.<sup>This text will be superscript.</sup>
Back to the list.
<TABLE>
Creates a table in an HTML document.
<table border=1 width=80%>
<tr>
<td>Row 1, Column 1 text.</td>
<td>Row 1, Column 2 text.</td>
</tr>
<tr>
<td>Row 2, Column 1 text.</td>
<td>Row 2, Column 2 text.</td>
</tr>
</table>Back to the list.
<TD>
Creates a cell in a table..
<table border=1 width=80%>
<tr>
<td>Row 1, Column 1 text.</td>
<td>Row 1, Column 2 text.</td>
</tr>
<tr>
<td>Row 2, Column 1 text.</td>
<td>Row 2, Column 2 text.</td>
</tr>
</table>Back to the list.
<TEXTAREA>
Creates a box for viewers to enter text into.
<textarea cols=10 name=my textbox rows=40>
Back to the list.
<TITLE>
Specifies the title of an HTML document.
<title>This text will be displayed in the title bar of a viewer's browser.</title>
Back to the list.
<TR>
Creates a row in a table.
<table border=1 width=80%>
<tr>
<td>Row 1, Column 1 text.</td>
<td>Row 1, Column 2 text.</td>
</tr>
<tr>
<td>Row 2, Column 1 text.</td>
<td>Row 2, Column 2 text.</td>
</tr>
</table>Back to the list.
<U>
Specifies that the text between these tags should be underlined.
<u>This text will be underlined.</u>
Back to the list.
<UL>
Specifies that a list will an unordered list. Each item in the list will be preceded by a bullet.
<ul>
<li>This text will be the first item.
<li>This text will be the second item.
</ul>
Back to the list.
In the example you can see that capitalization is not important when using HTML tags.
You can use either uppercase or lowercase for the tags in your HTML document.