Introduction to XHTML

What is XHTML?

XHTML is an extension of HTML designed to work with XML user agents. The current version is XHTML 1.1. HTML is a standard language for publishing on the World Wide Web. HTML is an application of SGML (Standard Generalized Markup Language). SGML is the de facto standard for describing markup languages particularly those used in electronic format but not necessarily for the internet. SGML is both rich and complex. HTML on the other hand specifies only a small set of structural and semantic tags. HTML has support for hypertext and multimedia. The first line of an XHTML document must start with an xml declaration.

      <?xml version = "1.0" encoding = "utf-8" ?>
    

Document Type Definition (DTD) is a collection of XML markup definitions that defines the legal structure of the language. There are three variations of the DTDs for XHTML - strict, transitional, and frameset. An XHTML document must conform to one of them and should be the first thing that has to be declared.


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

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

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

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

The root element of an XHTML document must be html and the XHTML namespace has to be declared:

      <html xmlns="http://www.w3.org/1999/xhtml">
    

Paragraphs

Use the <p> tag to delineate paragraphs. For pre-formatted text use <pre> instead. The pre element tells browsers that the enclosed text is pre-formatted. The browser may then leave white space intact, render text with fixed pitch font, and disable automatic word wrap.

Headers

Header are of the form hn where n runs from 1 through 6. These are the different types of headers:

Level 1 Header

Level 2 Header

Level 3 Header

Level 4 Header

Level 5 Header
Level 6 Header

Links

A link could take the viewer to a resource on the same computer or on a different computer. The syntax for the link is:
<a href = "path/to/file"> ... </a>
The path could be an absolute path like an url or a relative path. Here are some of my favorite links:

Google

Amazon

An internal link would take the viewer to a different part of the same document. For example this internal link will take me to the section on forms. Note the use of tags.

E-mail Address

This will bring up an e-mail form in case you want to send me mail. My e-mail address is mitra@cs.utexas.edu

Images

Use the <img> element to include graphics. The height and width attributes are given in pixels. Here is a picture of a galaxy NGC 1300 taken by the Hubble Space Telescope.

Image of a galaxy

Line Breaks

Line breaks are introduced with < br />. We have purposely
broken the line.

Horizontal Line

Now we will introduce a horizontal line with the <hr /> element.


Special Characters

Here is a list of special characters in XHTML. You can write these characters in two ways - either using the English mnemonic or the hexadecimal code. For example the ampersand symbol can be written as: &amp; or &#38;

Lists - Unordered, Ordered, and Definition

Unordered list:
Ordered list:
  1. One
  2. Two
  3. Three
Definition list:
Client
A software program that makes a request for a resource using HTTP.
Server
A machine that hosts the resources and services requests from client programs.

Tables

A table has a border, caption, head, foot, and body. The body is made out of cells spanning rows and columns. Here is a simple table:

Distribution of Rhinoceroses
Type Population
Total 17470
Black Rhino 3610
White Rhino 11100
Indian Rhino 2400
Javan Rhino 60
Sumatran Rhino 300

Here is an example of a more complex table

Complex Table
1 2
3 4

Forms

A form has the following components:

A form must also specify the method by which the data is transported - GET or POST. Also the script on the server side that will process the form data. To neatly align and present the form elements use borderless nested tables. Here is an example of a simple survey form.

Things you liked:

How did you get to our site?

meta Element

The meta element allows search engine to know what is in the web page without having to go through every line. This element has two attributes: name and content. The name attribute can have two values keywords or description. The meta element is placed in the head section of the page.

<meta name = "keywords" content = "XHTML, Paragraphs, Headers, Lists, Tables, Forms" />

<meta name = "description" content = "This page gives a brief introduction to the XHTML syntax." />

Frames

The use of frames is being discouraged. I have included a discussion of frames for the sake of completeness. You can achieve the same effect of frames using Cascading Style Sheets. If you have to use frames use inline frames.

Differences between XHTML with HTML