XHTML Is Easier Than You May Think
If you have been creating HTML 4.1 and CSS web pages for some time you’ve probably noticed that an increasing number of web pages now use XHTML formatting. There are several reasons why XHTML is a better choice for web pages. If you have put off learning to use XHTML, here is a straightforward introduction that may help change your mind.
XHTML is a newer standard that tends to be cleaner and more understandable than HTML. XHTML is a step in the direction of XML compatibility, and although programming XHTML can be more strict than HTML code, the formality ensures that web page code is not sloppy like some HTML code. Also, XHTML page code should be validated by checking it with a validation tool to ensure that the page markup is syntactically correct.
Like XML, XHTML encourages the separation of page data and presentation. The separation is accomplished through the use of CSS (Cascading Style Sheets). The CSS code can be placed within the web page header, but most often it is stored in an external document and reused across multiple web pages.
The purpose of this article is to demonstrate the format of a simple XHTML document, including an external style sheet, and the basics of formatting XHTML documents without the use of tables. XHTML document are built out of divisions (tag <div>), and spans (tag <span>). Divisions and spans contain the blocks and inline sections of a document. What that means will become clear with a few examples.
A simple HTML document consists of a <head> and <body> division within <html> tags. Like this:
<html>
<head>
<title>Document Name</title>
</head>
<body>
</body>
</html>
A simple XHTML document is no different, but since the page formatting is placed in an external style sheet, the number of tags need to designate the context of the page text is less. Most page formatting will be handled by using the page header tags like <h1>, <h2>, and <h3> along with the paragraph tag <p>. Blocks of text are placed in divisions using the <div> tag, or inline spans of text using <span>. The key to specifying special style formats is the use of two special tag values known as “id” and “class”. Id and class are used to designate different types of divisions or spans.
Let’s say we want to create a web page that has a top header, a main content section, and a footer. We can use divisions for each section. Because there is only one header, content, and footer section, we will use the id tag to designate each section. If the designation were used multiple times in the page we would use the class tag instead. Like this:
<html>
<head>
<title>Document Name</title>
</head>
<body>
<div id=”header”></div>
<div id=”content”></div>
<div id=”footer”></div>
</body>
</html>
The style sheet that contains the formatting for each section is in a separate file. The location of the file is specified in the header of the XHTML page. For example:
<link rel=”stylesheet” type=”text/css” href=”style.css” />
Now we are ready to look at a working XHTML header example. The XHTML specification requires that we designate the type of formatting we are planning to use for the page. It also requires that we specify the language used, and the location of the XML namespace that defines the XHTML document format.
Don’t worry if that doesn’t make a lot of sense right now. Here is an example of the first part of an XHTML document based on the XHTML 1.0 Strict specification. It says that the character set used on the page is English, uses an external style sheet named style.css, and includes the body shown in the example above.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head>
<title>Document Name</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<link rel=”stylesheet” type=”text/css” href=”style.css” />
</head>
<body>
<div id=”header”></div>
<div id=”content”></div>
<div id=”footer”></div>
</body>
</html>
That is a complete XHTML 1.0 document. It is equivalent to the simpler HTML document, but the additional XHTML header tells the browser how the page data is formatting. The good new is that everything else in XHTML is simple compared to the header. Most of the time your header will be very similar to the example shown above, and will not require changing.
Are you familiar with CSS? The style sheet that goes with the XHTML page contains the formatting code for the page elements. Standard tags are listed by name followed by the formatting inside braces. The id tags are preceded by a pound sign (#), and class identifiers are preceded by a period (.). The three division id labels shown below are without any formatting statements within the braces. The are currently empty.
body { }
h1, h2, h3 { }
p { }
#header { }
#content { }
#footer { }
Let’s place CSS style statements inside the braces for the header id tag, and save the results in an file. The style sheet is named style.css in this example.
Typical style formatting statements include any margin, border, and padding around the element, the font style used, the text color and background color of the element. For example, our header tag information might appear in the style sheet as:
#header {
margin: 8px;
border: 1px solid #000000;
padding: 4px;
color: #333333;
background: #ffffff;
width: 475px;
height: 196px;
}
The appearance of the information inside divisions and spans is completely controlled from the style sheet. No page formatting needs to be included in the XHTML file itself. The same techniques may be applied to HTML. But with XHTML it is important to place the page presentation and formatting code in a style sheet, and inside the page.
For more information about using XHTML and CSS consult a reference text. The capabilities of XHTML are extensive. There are online tutorials available. The way to learn is to work through a few tutorials and examine the page code from web sites that you visit. Your browser can display the page source code from the view menu. Give it a try and have fun!
Tags: Programming, xhtml