Joe Green, Web Development

This site is still under construction. Currently doing: drafting text.

Making your web pages XHTML compliant

posted on 03 Nov, 2005

For the purpose of this article I'm assuming you're familiar with basic HTML at least.

As someone who often finds myself working one of my websites or another, I finally decided about a month ago to take the time to actually learn some HTML markup. You may have heard of XHTML. Well what is XHTML?

XHTML stands for Extensible HyperText Markup Language, which basically means it is a hubrid between HTML (Hypertext Markup Language) and XML (Extensible Markup Language). This means it shares some syntax and rules from both. XML is a markup language which enables you to use your own tags, with hardly any limitations, and use DTDs to provide your own structure to your code. With HTML there is a fairly strict way of doing things. XHTML is like a midle ground between the two - although the syntax means you have to be careful.

Before I start with the how, I'll explain the why. Why bother making a document xhtml compliant? Isn't it just alot of unneccesary bother? The simple answer is: yes, probably. But if you've ever been working on a website you should know how annoying it is to try to do something, and have it unexplainably fail to work. If your page is fully compliant, it will work correctly 99% more of the time. Internet browsers work in similar ways, but they are different. Internet Explorer may show something in a different way to Firefox, so developers often find it hard to satisfy both browsers so have to resort to using tables and such for layouts. If code is fully valid, it will work more often (if it's coded correctly).

Still, why XHTML over regular HTML? There are two main reasons. XHTML DTDs tell the browser how the code should be read and interpreted: XHTML 1.0 is the best and most reliable DTD to use in my opinion because it helps alot of browsers to get the Box model right. The other main reason is that semantics are important: the specifications and ideas behind newer versions of xhtml look great, with the ability to create your own tags (leaning more towards xml) which is fantastic. But changes like this will always be slow, and it is incorrect use of code on web pages all over the internet that slows these processes down. While there are millions of popular sites all over the internet with outdated code, it will be difficult to implement the new ways.

Anyway, enough rambling. here are a few things you need to know to make xhtml compliant and friendly code.

Single Elements

An element like <br> or <hr> or any other single-tagged elemtns must be slashed off in xhtml. That means that a <br> would become <br />. Simple changes. The "/" indicates to the browser that this is a single element, and it doesnt need to look for the closing tag.

All Elements Must Be Closed Properly

It is vital that elements are closed properly, and in the right order. <div><span>hello</div></span> is not acceptable. The span was opened inside the div, so it must close inside the div. Therefore the correct code to use would be <div><span>hello</span></div>. Every single element MUST be closed, either like <this /> or like <this>this</this>.

No block Level Elements inside Inline Elements

A block level element, such as a Div or Table, can not go inside an inline level element such as a <p> or a <span>. Doing so will make your code uncompliant. However, putting a <div> inside another <div> is absolutely fine, as is putting a <span> inside a <table>. Also, elements that are usually block but have been changed to behave as inline through CSS are fine to use, and vice versa. Therefore a <div> still cant go inside a <span>, even if the span has been given display: block; and the div has been given display: inline; CSS applied to it.

Use Lowercase for Attributes

Element attributes are all lowercase with XHTML. As an example, <div onMouseOver="some_function()"> has to become <div onmouseover="some_function()" >. A small detail, but worth mentioning.

ID can only be applied to ONE element

The id attribute is used mostly to identify an element for CSS or JavaScript. With XHTML documents an id can only be applied to one element in the whole document, no more. This means you cannot have two <div id="bob"> elements in the same document, as they have the same id. If you want a way of identifying a group of elements, use the class attribute. The same class can be attributed to as many elements as you like.

Required Attributes

With XHTML there are a few attributes required that you may have left out before. <img> tags (which btw need to be closed with a "/") need the alt attribute, which is used to give the image some alternate text. Therefore <img src="me.gif"> is invalid. The valid version is ,img src="me.jpg" alt="me on the beach" />

THE DTD and XHTML Specification

A DTD is a document that declares the doctype of a document and has information on how the code should be structured, hence how the browser should look at it. the DTD is vital.

A normal HTML page might start like this:

<head><title>My page</title></head>
<body></body>
</html>

An XHTML Compliant Page must start like this:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My Page</title>
</head>
<body></body>
</html>

And that concludes this article! From now on, please try to make your websites and pages XHTML compliant. It's a great way to be. Do it, and one day we may be using code that can be uniform, and understood by everyone. I hope you found this article useful and that I didn't ramble on for too long.