Introduction
There seems to be some sort of fear of XHTML in the development community at the moment:
as if changing from HTML to XHTML is going to take years of learning and some
blood, sweat and tears in order to get compliant. What very few people realize
is that they are probably already very close to coding XHTML without even
knowing it. It’s that simple. Also, the few minutes it takes for you to read this
article could save you literally hundreds of hours in cross-browser compatibility
excercises later on. With that firmly in mind, let us begin.
as if changing from HTML to XHTML is going to take years of learning and some
blood, sweat and tears in order to get compliant. What very few people realize
is that they are probably already very close to coding XHTML without even
knowing it. It’s that simple. Also, the few minutes it takes for you to read this
article could save you literally hundreds of hours in cross-browser compatibility
excercises later on. With that firmly in mind, let us begin.
If this looks wrong to you:
<p>Hello there. <b>How are you?</p></b>
and you would rather do it this way
<p>Hello there. <b>How are you?</b></p>
you are already half way there. In other words, nesting makes sense to you.
On the other hand, if you cant see the difference between the two examples
above, we need to explore the concept of nesting. It is really quite
simple – You close an HTML Tag in the opposite order to what you opened it. In
other words if you have an intricate list, you would might open its elements in this
order:
above, we need to explore the concept of nesting. It is really quite
simple – You close an HTML Tag in the opposite order to what you opened it. In
other words if you have an intricate list, you would might open its elements in this
order:
<ul>
<li>
<ul>
<li>
And then you would need to close them in the opposite order that they were
opened, so you would say:
opened, so you would say:
</li>
</ul>
</li>
</ul>
And that is the way it always works. You open elements 1 2 3 and close them 3 2 1.
I hear someone at the back of the room whispering: “But what about an image tag? Or a break? Or a Horizontal Rule?”
Those questions neatly tie in with another integral part of XHTML Compliance:
Tag Closing. Put simply XHTML Elements must always be closed. If you
open a tag, you need to close it. We have already discussed the order that it
should be closed in. Now let us consider how to close elements. I am assuming
that you understand that tags like
inserting a forward slash “
things interesting. The following tags do not have a closing tag, but are said
to be self closing.
Tag Closing. Put simply XHTML Elements must always be closed. If you
open a tag, you need to close it. We have already discussed the order that it
should be closed in. Now let us consider how to close elements. I am assuming
that you understand that tags like
<b> are closed by simplyinserting a forward slash “
/” just after the tag has opened, like this:</b>. But there are a few exceptions – just enough to keepthings interesting. The following tags do not have a closing tag, but are said
to be self closing.
<br />
<hr />
<img />
<input />
Again I hear someone whispering in the background: “What about the doctype? That is not listed there?”
True. It isn’t. But that is for a good reason: DOCTYPE is not really an HTML
tag. DOCTYPE is a special tag that does not really define the content of the
page, rather it sets the definition. Speaking about DOCTYPE, it is something
that is required in an XHTML page. To make things simple, there are only three
types of DOCTYPE, and their uses are pretty self descriptive:
tag. DOCTYPE is a special tag that does not really define the content of the
page, rather it sets the definition. Speaking about DOCTYPE, it is something
that is required in an XHTML page. To make things simple, there are only three
types of DOCTYPE, and their uses are pretty self descriptive:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Strict: Follows the strictest XHTML parsing rules and will not validate
unless the markup is 100% XHTML compliant.
unless the markup is 100% XHTML compliant.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Transitional: If you are still using some elements from older html
markup, like the “name” attribute, this DOCTYPE will still validate.
markup, like the “name” attribute, this DOCTYPE will still validate.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Frameset: This DOCTYPE is to be used when you are
using frames on your website.
using frames on your website.
