How To Properly Write XHTML

C, CPP, C# cheat sheets

Wii-habilitate with physical therapy in a fun new way

How to properly write XHTML

Posted On Feb 11, 2008 at 6:00 pm

7 Comments

It seems nowadays that everybody knows HTML/XHTML, or at the very least, they think they do. Despite the language's rather rudimentary tag set and easy context, people still do not use it correctly. In fact, its simplicity is taken for such granted, that even highly respected websites like google.com and yahoo.com fail the W3C validation tests. Here I will cover some of the most abused and least addressed issues people fail to pay attention to when writing XHTML so that it may help you code better.

Back To Basics

One of the most basic principles of this language is the method in which tags are openned and closed, yet I constantly see code where this is not properly utilized rather it be from ignorance, laziness, or a simple mistake.

When writing XHTML, you must always remember to close your tags. Its extremely easy to do and can make a big difference in the way your page renders. For example, lets take a look at some html that is not closed out right. See if you can find the mistakes before reading on.

<html>
<body>

Here is a list of my stuff: <br><br>
<ul>
 <li>Item one
 <li>Item two
</ul>
<br><br>
This is me: <img src="myImg.jpg">

</html>

Could you spot all the errors? There are actually numerous other errors in this code other than just non-closing of tags such as no doctype and poor formatting - but without getting into those right now, lets continue with the issue at hand.

There are 8 tags above that were not closed. Did you find them? They were: body, 4 br, 2 li, and 1 img. Lets take a look at how this code should have been written (again, not going into the other errors that are non-relevant at this point.)

<html>
<body>

Here is a list of my stuff: <br /><br />
<ul>
 <li>Item one</li>
 <li>Item two</li>
</ul>
<br /><br />
This is me: <img src="myImg.jpg" />

</body>
</html>

So there you have it. A quick overview of the very basis of XHTML. You need to learn to walk before you run - dont just learn how to gimp along before signing up for track.

Use Correct Doctype - DTD

Besides the point above, one of the most widespread errors I see is the misuse or missing doctype declaration. Without it, you cant even dream of having a standards compliant webpage. There are many different doctypes that you can use and you can learn more about them at W3C's Recommended list of DTDs

The doctype declaration, or DTD, tells the browser to which specifications you have written your code. Different doctypes can make dramatic differences in the rendering of your page depending on the browser and doctype selected. I typically stick with DTD XHTML 1.0 Strict, which is more difficult to code properly than transitional, but also builds good coding habits and ensures the best possible cross-browser and cross-platform compatibility.

To declare a doctyle, you add the code right above your opening html tag. Here is an example of the DTD XHTML 1.0 STRICT declaration:

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

Once again, refer to the W3C's Recommended list of DTDs for more information and examples of exact tags to use.

Content Type Meta Data

Another declaration you must make to ensure the viewing browser knows how to render your page is the content-type metadata. This tag goes in the head of your XHTML and looks something like this:

<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />

There are different values that can be used depending on the character encoding that you may be using on your page. See W3C's Character Encodings page for more information.

Proper Element Nesting

XHTML is in a hierarchical format meaning that data and tags are nested inside other tags, that are nested in other tags, and so on. When coding XHTML, you must close a nested item (node) before closing its parent node. Here is an example of an INCORRECTLY nested group of tags

<p><a href="http://domain.com"><b>This is a link</a></b></p>

As you can see, the parent a node is being closed before the b node is. The correct order would be:

<p><a href="http://domain.com"><b>This is a link</b></a></p>

Separation Of Style & Content

One of the worst habits to have when coding XHTML is to format how the content will look from within the XHTML itself. All visual styling and formating should be taken care of with CSS. The reason for this is so that lets say if you have 500 pages and you want to change the style on all of them, with CSS all youhave to do is edit the one style sheet and your done. But if you have inline styling on each of those 500 pages, your going to run into a lot of headache trying to get them all looking uniform.

This takes some preplanning when it comes to writing an XHTML structure that will work for your site and be flexible for future modifications. You need to nest the items with enough nodes in order to have the flexibility to style them in any way you want with CSS, while keeping them relatively free of formating restrictions. In the next section we'll go over how to accomplish this.

Proper Elements For Formatting

Most of your document containers should be made up of <div> Div blocks, <h1> through <h6> headers, <p> paragraphs, <span> spans, and <ul> & <li> list items.

<div> Div blocks are best used for general content wrapping to create css editable containers. Divs in themselves typically do not restrict the ability to style with CSS so its good to develop a coding structure that uses multiple div block containers.

<h1> - <h6> Headers are just that of which the name implies: they are for content headers. There are 6 levels of headers that should be used based on relative importance. I always reserve h1 for the site title/logo, h2 for the page title, h3+ for sub-headings within the content.

<p> Paragraphs are for... wait, do i really need to explain what a paragraph is? Whenever possible, contain your content within paragraphs and then format spacing, padding, and the like using CSS. Never use <br /> for spacing out a new paragraph!

<span> The span element itself doesn't really do anything. What it does let you do, though, is wrap peices of content or data in order to style them with CSS. Spans are useful for many things because of its ability to be used just about anywhere and formated with CSS. An example would be if you had a bit of text that you wanted to be very eye catching as a warning, but you dont want to use the <strong> tag because you just want to change its color. You could do something like this:

<p>This is a paragraph and <span class="warning">this is a warning</span>.</p>

Now you just create a css style for the class warning and you can control how all the warnings appear across your whole site from that single style declaration.

<strong> Strong is used for any text which needs to have a very prominent presence. Always use <strong> instead of <b>

<em> Em is used for any text which needs to have an emphasis on it. The style by default is italicized text. Always use <em> instead of <i>

<ul> & <li> List items are used for not only making lists of data, but also are ideal for making lists of links - aka menus. See my post How to make a CSS menu using lists.

Link to Style Sheets

As part of the guidelines to keep page style and content separate, it only makes sense to have the styling information in a separate file from that of the content. To do this, you need to place a link tag within the head of your document like this:

<link rel="stylesheet" 
     media="screen" type="text/css" 
     href="style.css" title="Default" />

Example XHTML Document

Here is an example of a typical structure I use:

<!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">
<head>
	<title>How to properly write XHTML</title>
	<meta http-equiv="content-type" 
                 content="application/xhtml+xml; charset=UTF-8" />
	<meta http-equiv="content-language" content="en" />

	<link rel="stylesheet" media="screen" type="text/css" 
                 href="style.css" title="Default" />
</head>
<body>
<div id="mainWrapper1">
	<div id="header">
		<div id="logo"><h1>Site Title</h1></div>
	</div>
	
	<div id="menu">
		<ul>
			<li><a href="">Menu Item 1</a></li>
			<li><a href="">Menu Item 2</a></li>
			<li><a href="">Menu Item 3</a></li>
		</ul>
	</div>
	
	<div id="bodyWrapper">
		<div id="body">
			<h2>This Page Title</h2>
			<p>Page content here.</p>
		</div>
		<div id="sidePanel">
			<h3>Side Panel Info</h3>
			<p>Some content here</p>
		</div>
	</div>

	<div id="footer">
		<div id="copyright"></div>
		<div id="footerLinks"></div>
	</div>

</div>
</body>
</html>

In actuality, I typically end up using multiple "bodyWrapper" div blocks with incrementing numbers attached to the end in order to accomplish the GUI interface that has been designed which requires multiple layers of styling. This is not a problem though, as no matter how many div block containers you have, they do not have an effect on the output formatting of a document when style sheets are turned off or when the layer is specifically designated with styling in the CSS. If in doubt, add an extra container node!