Useful HTML And XHTML tags For The Body Of Your Site

Home The Webmaster Biz Web Site Basics HTML/XHTML CSS PHP Visual Basic FREE Scripts SEO Site Promotion Media Center Site Map Free Templates

Bookmark this page and share it with others! (Or press Ctrl/D on Firefox)

Useful HTML And XHTML tags For The Body Of Your Site

Now for the fun part, putting in your idea and making it work. The following codes will help you put your idea together:

Doctype

The very first line of your page which tells the browser exactly what it is reading.

<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

HTML 2.0 DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

HTML 3.2 DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

HTML 4.01 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML 1.1 DTD

Basic Tags

It is not a web page unless you have these included

<html>
</html>

Creates an HTML document

< head>
</head>

Information the spiders and robots read

<body>
</body>

Everything between these tags is what is seen on the screen.

Header Tags

To be included for the benefit of the spiders reading your site

<title>
</title>

Puts the name of the document in the title bar of the browser

<meta name="" content=""> (HTML)

<meta name="" content="" /> (XHTML)
Gives specific information a spider or bot may need to know.

<link rel="" media="" type="" href=""> (HTML)

<link rel="" media="" type="" href="" /> (XHTML)
Creates a link to something related to the page such as an icon symbol or a stylesheet or a jave script.

Body Attributes

These body attributes are for HTML. It is strongly recommended you use a css stylesheet instead. If you are using XHTML, do not use these attributes at all, put them in a stylesheet.

<body>
</body>

Begins the body command which tells the browser what to show on the screen. Everything in between these tags will be on the screen.

<body bgcolor="">
</body>

Use a hex number or color name to choose the background color of the page.

<body text="">
</body>

Sets the main color of the text on the page. Use a hex number or a color name.

<body link="">
</body>

Sets the main color of the links on the page. Use a hex number or a color name.

<body vlink="">
</body>

Sets the main color of the visited links on the page. A page the browser has already seen will see the link in the color you use here. Use a hex number or a color name.

<body alink="">
</body>

Sets the main color of the active links on the page. If the mouse goes over that link, it will be in the color dictated here. Use a hex number or a color name.

<body background="URLHERE">
</body>

Sets up a background image for the page.

Text Tags

Sets how the text will appear on the page. Most of the general look of your text such as font face, size or color is best coming from a stylesheet.

<pre></pre>

Makes pre-formatted text.

<tt></tt>

Creates teletype, or typewriter-style text

<b></b>

Creates bold text

<i></i>

Creates italic text

<cite></cite>

Creates a citation

<small></small>

Makes text small

<em></em>

Emphasizes a word

<strong></strong>

Emphasizes a word

<font size=""></font> (HTML only)

Sets size of font, from -2 to 7, -2 is the smallest and 7 is the largest

<font color=""></font> (HTML only)

Sets font color, using name or hex value

<font face=""></font> (HTML only)

Sets font style such as Times New Roman, Arial, Georgia or the many hundreds of styles available

Headline Tags

Creates a separate block of text in order from large to small which can mark off sections in order of importance with a headline.

<hl></hl>

Creates the largest headline

<h2></h2>

One size smaller

<h3></h3>

One size smaller

<h4></h4>

One size smaller

<h5></h5>

One size smaller

<h6></h6>

Smallest headline format

Formatting

This includes the overall layout of your content

<p></p>

Creates a new paragraph

<p align=""> (HTML only)

Aligns a paragraph to the left, right, or center

<br> (HTML)
<br /> (XHTML)

Inserts a line break

<blockquote>
</blockquote>

Indents text from both sides

<dl></dl>

Creates a definition list

<dt>

Precedes each definition term

<dd>

Precedes each definition

<ol></ol>

Creates a numbered list

<li></li>

Precedes each list item. In HTML, the end tag is not required, but is mandatory in XHTML.

<ul></ul>

Creates a bulleted list

<div align=""> (HTML Only)

A generic tag used to format large blocks of HTML.

<div class="">

A generic tag used to format large blocks of HTML using direction from a stylesheet.

Links

Makes a hyperlink on the page. When someone clicks on it, they are transferred to another page or the e-mail client is engaged.

<a href="URL"></a>

Creates a hyperlink ot a web page.

<a ref="mailto:EMAIL@DOMAINNAME.COM"></a> (HTML only)

Creates a link to engage the e-mail client. NOT recommended as people are known to pull these off from sites and compile them into spam mailing lists.

<a target=""></a> (HTML only)

Creates a target location for the new document to appear: _self, _top, _blank, or _parent.

<a title=""></a>

Lets text appear over the link when a mouse passes it which shows what the link is about.

Image Elements

Usually the biggest culprit of slow loading pages, but it does give visual stimulation to an otherwise bland page. Images can be in the background or as a single element picture to show.

<img src="IMAGE_URL"> (HTML)
<img src="IMAGE_URL" /> (XHTML)

Adds an image by calling up its location via url. Formats of images include: .gif, .jpg, .jpeg, .bmp, and . png.

<img src="IMAGE_URL" align=""> (HTML only)

Aligns an image: left, right, center; bottom, top, middle

<img src="name" border=""> (HTML only)

Sets size of border around an image

<hr> (HTML)
<hr /> (XHTML)

Inserts a horizontal rule

<hr size=""> (HTML only)

Sets height of horizontal bar in pixels (px) or percent (%)

<hr width=""> (HTML only)

Sets width of horizontal bar in pixels (px) or percent (%)

<hr noshade> (HTML only)

Creates a horizontal bar without a shadow

<hr color=""> (HTML only)

Creates a horizontal bar with a color using color name or hex value.

Tables

Allows you to format your page into blocks of rows and cells within the rows.

<table>
</table>

Creates a table. Each table must have at least the table row with at least one table cell in that row.

<tr>
</tr>

Sets the beginning and the end of the row of the table.

<td>
</td>

Marks each cell within the row.

<th>
</th>
Sets off the table header with a normal cell with bold and centered text. Mostly used for spreadsheet type of tables.

Table Attributes

These detail aspects of the table itself. This is one of those elements best served from a stylesheet.

<table border=""> (HTML only)

Sets width of border around table cells in pixels or percent

<table cellspacing=""> (HTML only)

Sets amount of space between table cells in pixels or percent

<table cellpadding=""> (HTML only)

Sets amount of space between a cell's border and its contents in pixels or percent

<table width=""> (HTML only)

Sets width of table in pixels or percent

<tr align=""> or <td align=""> (HTML only)

Sets alignment for cell: left, center, or right

<td valign="">
Sets vertical alignment for cell: top, middle, or bottom

<td colspan=""> (HTML only)

Sets number of columns a cell should span

<td rowspan=""> (HTML only)

Sets number of rows a cell should span

<td nowrap> (HTML only)

Prevents the lines within a cell from being broken to fit screen