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 with special instructions to browsers so browsers can format the document. The text itself is not changed.

In this web site, web pages are referred to as HTML pages, while the markup language is referred to as XHTML.

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.

<p>text, graphics, etc.</b>

	The start tag is <p> 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 </p>. 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.

Differences between XHTML and XTML

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 that are Used with CSS

Begin learning XHTML by becoming familiar with the following lists of elements.

	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 elements that go in the header portion of the page are known as meta elements and are explained in the meta tags page.

The following table gives the major elements that can be placed in the body of the text.

<h1> </h1>	Header 1 start tag, header 1 end tag. Can also be header 2, header 3, header 4, header 5, header 6 tags. Defines a header block in the text. CSS rules specify the characteristics of each header type.
<p> </p>	Paragraph element with start tag and end tag. Creates a paragraph block. CSS rules specify the characteristics of paragraphs. Paragraphs can not contain other block elements.
<blockquote> </blockquote>	Blockquote start and end tag. Identifies a block of paragraphs; leave the paragraph start/end tags around the paragraphs. CSS rules define the characteristics of the blocks.
<em> </em>	Emphasis start tag, emphasis end tag. Begins/ends text to be emphasized. CSS rules define the nature of "emphasis".
<strong> </strong>	Strong emphasis start tag, strong emphasis end tag. Begins/ends text to be made strong. CSS rules define the nature of "strong".
<q> </q>	Quote start tag, quote end tag. Begins/ends short text to be quoted. CSS rules define the nature of "quoted". Use blockquote for longer quotations.
<cite> </cite>	Citation of a published work. The title goes in the cite element. CSS rules define the nature of "cite".
<div> </div>	Generic block element. The block is not inline with other text. CSS rules define the nature of the block through use of the class= attribute.
<span> </span>	Generic inline block element. The block is inline with other text. CSS rules define the nature of the block through use of the class= attribute.

Don't Mix Elements

Suppose you mix the head and title elements. The XHTML code might look like the following example, which violates the container concept of element structure discussed in another page.

<head><title>the title</head></title>

In contrast, the XHTML code should look like this.

<head><title>the title</title></head>

Notice that in the correct code, the end tags are in reverse order from the start tags. That is, the title start tag, title text, and title end tag occur before the head end tag. To avoid this problem, it is common practice for the designer to put the full title element, including start and end tags, on one line, while the head element is on multiple lines, as shown in the table given above. 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 Firefox) 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 an 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.

.[ Site Map ] [ Distance Learning ][ Home ] [ Up ] [ Intro to CSS ] [ Type Selectors ] [ Inheritance ] [ Learning XHTML ]