Let’s face it, not very many of us are actually using XHTML 1.0, and for those of us who are, we are reaching for Transitional, instead of Strict. Somehow we still find table layouts to be very appealing and easy to work with, and div layouts just too hard to envision when we are trying to rush. However we can not just give in all the time, we need to start using XHTML and probably the easiest way to do so is on the pages we least design, namely those text based pages that we often never look at on web sites. I am talking about the Privacy Policy and the Terms of Use disclaimer pages that many sites have and which we hardly pay attention to. Most times these are basic text-only pages that have very little styling and there to look more like paper based legal contracts than anything else. And so lets forget about divs for a minutes and just put together a basic XHTML 1.0 Strict page.
The DOC TYPE
This is what your first few lines of your XHTML page should look like.
<!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" lang="en">
This is the standard 1.0 Strict doctype. For a more thorough explanation of doctypes see W3Schools.com.
The Header Section
For me personally, the header section is really about providing the browser with needed information, and for tagging your document so that both search engines and people know what the document is about. Here is my version of a standard header section.
<head>
<title>WebKeyDesign: Terms of Use</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="WebKeyDesign's Terms of Use for our website." />
<meta name="keywords" content="webkeydesign,privacy,policy," />
<meta name="author" content="WebKeyDesign" />
<meta name="robots" content="noindex,nofollow" />
<link rel="icon" href="https://www.webkeydesign.com/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="legal.css" />
</head>The first meta tag tells the browser what character set you are using. Most of the time we use ISO-8859-1 or UTF-8 for unicode. I like to include the author tag, but this is not necessary. Since this is a legal page, I do not think it really requires indexing, especially, if I decide to change things, I do not want search engines keeping this page cached, therefore the robots tag is set to not index anything.
Lastly we have the standard favicon link, again this is not necessary, it is just something I personally prefer. We are specifying an external stylesheet, as this is XHTML and the idea is to separate content from layout.
The Body
For the actual content of the page, you may choose to either limit yourself to just h1 thru h5 tags along with standard paragraph tags, or perhaps use just three main divs to layout the document. Usually a header, a content, and a footer section is all the layout you need for a text based document as this.
<body>
<div id="header"> <h1>WebKeyDesign Privacy Policy</h1></div>
<div id="content"><p>This is our privacy policy and so on.... </p></div>
<div id="footer"><p>This is our site navigation or standard footer</p></div>
</body>
</html>
Validate Your Code
At this point we are done, but sometimes, after writing such long text based documents, we are not so good at checking out work, and that is when you should let an online validation tool like WebDesignGroup’s Validator Tool check your page for any typos you might have let through. Once your page validates without error, it’s time to post it live, and bask in the knowledge that you just completed your first XHTML Strict 1.0 page. It may not be fancy, but it’s still XHMTL Strict.
Why use XHTML? Isn’t HTML good enough?
The benefits of XHTML are many. Technically HTML 4 is good enough now, but this will not be for long. XHTML and CSS is where web design is going to, so you might as well get a head start on it. The main reasons I think XHTML should be used over HTML 4, is that it is easier to work with, much more organized, better for search engines to read, and if your code is right, you won’t render in Quirks Mode in most browsers.
For an entire read about why XHTML is better read Jeffrey Zeldman’s DESIGNING WITH WEB STANDARDS, if Zeldman can’t convince you of XHTML’s value, then you probably can’t be convinced.
How do you center block level elements (such as a div) in XHTML 1.0 Strict? I’m stuck, since and algin=”center” are depricated.
In the CSS for the element use text-align: center;