Modern web pages are written in a language known as Extended Hypertext Markup Language or XHTML. Pages written only for older browsers are written in HTML or Hypertext Markup Language. The XHTML and HTML languages are almost identical but have slight syntax differences, as noted below. Both XHTML and HTML are "markup languages", meaning they allow one to mark up text so browsers can format the document. XHTML and HTML don't change the text. In this web site, web pages are referred to as XHTML pages. This page describes the XHTML elements that can be used when CSS is not being used.

XHTML Elements

There are two kinds of XHTML elements.

Non-empty elements: Non-empty elements enclose content such as text and/or graphics. The elements consist of two parts, a start tag and a close tag. An example of a non-empty element is the paragraph tag.

text, graphics, etc.

The start tag is and consists of the name of the tag (p) enclosed in angle brackets (<>). The start tag could also contain attributes in addition to the name of the tag.

The content of the paragraph (text, graphics, etc.) could span several lines.
The content is enclosed by the start and end tags.

The close tag is . It has the same name as the start tag except there is a slash (/) before the name of the tag.

Empty elements: Empty elements do not enclose or span user-visible information and thus have no ending tag. An example of an empty element is the image element for inserting graphical images into a page.

	The name of the element is img, an abbreviation for "image"; the name is enclosed in double quotes (").
	src="dog.jpg" is an attribute giving the name of the graphical file.
	alt="My dog, Fido" is an attribute giving alternate text that describes the graphical image.
	/> is the ending bracket of the start tag with a slash before the bracket to tell the browser this is an empty element. There is a space before the slash to make this tag compatible with older browsers.

Even though one might use a WYSIWYG editor program to create a web page, the editor program generates HTML/XHTML code for the page, and it is the HTML/XHTML code that is used by the browser.

Differences between XHTML and HTML

Modern browsers will accept either language, but you should write in XHTML to insure future compatibility with newer browsers.

	XHTML empty elements must be closed with " />" HTML does not require the slash.
	XHTML element names and attributes must be in lower case. In HTML, they can be in either case.
	In XHTML all non-empty elements must have end tags.

XHTML Elements To Get You Started

Begin learning XHTML by becoming familiar with the following lists of elements. These elements will allow you to get started, and through study of the online tutorials given in this web site, you can learn about other elements.

You only have one <body> element in your page. The second table given below, however, shows several <body> elements, each one containing a different attribute. Because the <body> element can contain more than one attribute, the attributes given below all go in the one and only one <body> element.
You can have several elements, because you can change fonts as many times as you want. Each element can have several parameters. Each instance of a font-change has only one element.

	There are four elements that must be in each page. These elements form a skeleton of the page.
	There are two parts to the page, the header and the body. The header contains information that is not visible to your visitors but is used by the browser and other software that reads the page. The body contains the information that is seen by your visitors.
	Notice that the required elements are closed elements: <element name> and </element name> The <element name> begins information spanned by that element, and the </element name> ends that information. The following table gives the four required elements.

<html>	XHTML start tag. First element in the page.
<head>	Header start tag. Always follows the XHTML element. Second element in the page.
<title> < /title>	Title, title-end tags. Begins and ends a title for the browser title bar & bookmark. Must be inside the header.
</head>	Header-end tag. Ends the header element.
<body>	Body start tag. Begins the body or visible part of your page. Follows the header.
</body>	Body-end tag. Ends the body.
</html>	HTML-end tag, Ends the html page. Last tag in the page

The following table gives the major elements that can be placed in the body of the text. The examples given in the body show multiple <body> elements. As explained above, however, there is only one <body> element, and the various attributes (such as bgcolor) given in the following table are attached (separated by a space) to the one and only one <body> element.

<body bgcolor="#xx yy zz">	Body start tag with background color. The xx, yy, zz are hex numbers 0-9 & A-F, for R G B (3 primary colors).
<body background="file.gif/jpg">	Body start tag with an alternate method of setting background color by using a background graphic file. The word "file" is replaced with the actual name of the file.
<body text="#xx yy zz">	Body start tag with color of text. The color change occurs for the complete page. The xx, yy, zz are hex numbers 0-9 & A-F, for RG B (red, green, blue, the 3 primary graphics colors).
<body link="#xx yy zz">	Body start tag with color change for links before selection. The color change occurs for the complete page. The xx, yy, zz are hex numbers 0-9 & A-F, for RG B (3 primary colors).
<body vlink="#xx yy zz">	Body start tag, with color change for links after selection. The color change occurs for the complete page. The xx, yy, zz are hex numbers 0-9 & A-F for RG B (3 primary colors).
<font face="name of font"> </font>	Font start tag, end tag, with selection of font. "Name of font" is replaced with the actual name of the font. Caution: other systems may not have the same fonts as your system.
<font color="#xx yy zz"> </font>	Font start tag, end tag, with color of text. The color change occurs until the font element is ended. The xx, yy, zz are hex numbers 0-9 & A-F, for RG B (3 primary colors).
<font size="n"> </font>	Font start tag, end tag, with size of characters attribute, where n=1,2,3,4,5,6 or 7. The size change exists until the end tag is encountered.
<h1> </h1>	Header 1 start tag, header 1 end tag. Controls size of text. Can also be header 2, header 3, header 4, header 5, header 6 tags. H1 gives the largest size.
<h1 align="center"> </h1>	Headers can be aligned with "left", "center", or "right" attributes. "left" is the default.
<strong> </strong>	Strong start tag, strong end tag. Begins/ends text to be made strong. Browsers usually render this as bold. Don't use <b> </b>.
<em> </em>	Emphasis start tag, emphasis end tag. Begins/ends text to be emphasized. Browsers usually render this as italicized. Don't use <i> </i>
<u> </u>	Underline start tag, underline end tag. Begins/ends text to be underlined.
<br />	Break empty tag. Interrupts word wrap-around and puts the next word or graphic on a new line. Notice the space before the slash.
<p> </p>	Paragraph start tag, paragraph end tag. Interrupts word wrap-around, inserts a blank line, and and puts the next word or graphic on a new line.
<p align="left"> </p>	Causes the paragraph to be aligned at the left of the page. The attribute "left" can be replaced with "center" or "right" to cause the paragraph to be centered or aligned at the center or right of the page. The paragraph can contain text, graphics, or both.
<ul>	Unordered list start tag. Begins a bulleted list.
<li> </li>	List element start tag, element end tag. Creates a member of the bulleted list.
</ul>	Unordered list end tag. Ends a bulleted list.
<ol>	Ordered list start tag. Begins a numbered list.
<li> </li>	List element start tag, element end tag. Creates a member of the numbered list.
</ol>	Ordered list end tag. Ends a numbered list.
<blockquote>	Blockquote start tag. Identifies a block of lines or paragraphs. Most browsers indent the block, but that is not a guaranteed effect.
</blockquote>	Blockquote end tag. Ends a blockquote.
<hr />	Horizontal rule element. Draws a horizontal line across your page.
<hr size="n" />	Horizontal rule element with size attribute n=1,2,3, etc. A size of 1 (default) gives the thinnest line.
<a href="URL">Text describing link</a>	Anchor start, end tags. Creates a link to another web page. URL is replaced with the actual http:// address of the page. The "Text describing link" is the text that appears on the monitor screen.
<a href="file.htm">Text describing link</a>	Anchor start, end tags. Creates a link to another XHTML file in the same folder. "file.htm" is replaced with the actual name of the file. The "Text describing link" is the text that appears on the monitor screen.
<img src="file.gif/jpg" />	Image element. Inserts a graphic file that is in the same folder. The word "file" is replaced with the actual name of the file.
<img src="file.gif/jpg" alt="Text describing graphic" />	Image element with alternate description attribute of the graphic.
<img src="file.gif/jpg" width="xx" height="yy" />	Image element that specifies the size of the graphic. The "width" and "height" attributes are to tell the browser the size of the graphic, and they should not be used to permanently change the size of the graphic display. Use a graphics editor to change the size of the graphic.
<img src="file.gif/jpg" border="u" />	Image element with a border around graphic. u=0, 1, 2, etc. Experiment with different attribute numbers to see effect.
<table border = "n" width="mmm">	Table start tag. Begins a table. The n attribute defines the width of the border. n=0 is no border. Width is in pixels.
<table cellpadding="m" cellspacing="n" width="80%">	Table start tag with extra space around the cells. Experiment to learn the difference between cell padding and cell spacing. Attributes m = n= 0 is no space. Width is a percentage of the monitor screen. (e.g. 80%) To specify a width in pixels, omit the % character.
<tr>	Table row start tag. Begins a row.
<td width="n"> </td>	Table cell start, end tags. Begins and ends cells. Width is in pixels or a percentage ("n%"). Generally, leave width off and let cell adapt to size of object in the cell.
</tr>	Table row end tag. Ends the row
</table>	Table end tag. Ends the table.
<div align="left" "center" "right"> </div>	Division start, end tags. Divisions are used to align objects. Especially useful to align tables and blocks of text.

The elements that go in the header portion of the page are known as meta elements and are explained in the meta tags page.

Don't Mix Elements

Suppose you want to have a sentence in bold with a phrase in that sentence in italics. The elements for the italics will be inside the elements for strong, and the XHTML will look like this.

First part of the sentence.

A common mistake is to mix elements by closing the strong before the emphasis, giving the following incorrect XHTML.

First part of the sentence.

Remember, to have correct XHTML, the last element to open is the first element to close. Think of the elements as boxes; the italics box is completely inside the bold box, rather than being half in and half out.

If you mix elements, it is unpredictable what the browsers will do, depending on the browser and on the version of browser. To read more about this, go to

http://www.netmechanic.com/news/vol3/html_no16.htm

Reading Other Pages

Finally, study pages written by other people to see how they used XHTML. You can do this, because web browsers give you the ability to see the XHTML code for any web page. Open the View menu, select the Page Source (Netscape or Mozilla) or Source (Internet Explorer) entry, and a window will appear containing the XHTML code for that page. You can then study the code. This ability to learn XHTML from reading other pages is probably the most important way to learn XHTML. Keep in mind that if you're studying an older page, you may see the syntax of HTML instead of the syntax for XHTML.

.[ Home ] [ Up ] [ Editing Pages ] [ Layout Tables ] [ Page Margins ] [ Using XHTML ]