First time visitor? The tutorials start here.

xHTML Basics

Why xHTML? Why not regular HTML?

Web standards change all the time. HTML is old-school. Obsolete. Gone the way of the dinosaur. xHTML (eXtensible HyperText Markup Language) is up to date and more accurate in the way it displays pages.

The differences between HTML and xHTML are very minor. Mainly, every xHTML tag must be closed, and you have to be extra careful that all tags are nested properly when you combine two or more of them.

If you know what a tag is, skip to Every xHTML tag must be closed.

For newbies: What is a tag?

An HTML or xHTML tag is a command, surrounded in brackets that look like this: < >

Here are a couple examples of how xHTML tags work:

<p>This is a paragraph.</p>

<p>This paragraph has a word with <em>emphasis</em> added.</p>

<p>This paragraph has a word with <strong>strong emphasis</strong> added.</p>

<p> is the tag that begins a paragraph.
</p> is how you close or end a paragraph.

<em> is the tag that begins emphasized text.
</em> is how you close or end emphasized text.

<strong> is a tag.
</strong> is how you close or end strong text.

It’s as simple as that, folks!

Notice above how the opening tag has a letter, abbreviation, or word after the < bracket, and the tag that closes the paragraph or link starts with a slash before that letter, abbreviation, or word. The slash means “end” or “close,” as in “end of paragraph” or “close the link,” etc.

If you don’t understand some of the stuff in the rest of this post, have no fear, because these are just a few general rules to keep in mind at all times. It will make more sense once we get into more specifics, and you can always refer back to this for a quick refresher in the future.

Every xHTML tag must be closed

Attention old-schoolers:
This goes for everything, including line breaks, horizontal rules, input buttons, meta tags, and images.

If you are familiar with old-school HTML, you know that it used to be ok to leave some tags un-closed, such as starting each paragraph with a <p> without putting a </p> at the end.

This is not the case with xHTML. xHTML is a bit fussier than HTML, but it also displays a page far more accurately in multiple browsers.

To demonstrate the difference…

With the old-school way, this was fine:

<p>This was a paragraph.

<p>This was a paragraph.

With xHTML, each tag must be closed.

<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

Closing <br>, <hr>, <input>, <meta>, and <img> tags

There is no need to add </img>, </br>, </hr>, </input>, or </meta>. Simply add a space and a slash to the end of the tag, like this:

<br />

<hr />

<input type="submit" value="Submit" />

<meta name="description" content="A short line describing your web page." />

<img src="http://yourdomain.com/directory/filename.jpg" alt="" />

Notice the “alt” in the <img> tag. This is important for accessibility, which will be explained in the section on images.

One exception to the general rule is with <script> tags that point to an external javascript file. In this case, you should use </script> to prevent any problems:

<script type="text/javascript" src="script.js"></script>

Every tag should be in all lower-case

With old-school HTML, it used to be ok to use upper-case letters in your tags like <BR> or <P>a paragraph here</P>. But with xHTML, you should use all lower-case like <br /> and <p>a paragraph here</p>.

I’m not sure why people always used upper-case before. Maybe they found it easier to find the code that way, but with editors out there like Crimson Editor that color-codes everything, the code will already stand out by default.

Proper nesting

The simple rule to follow is, “First to open, last to close.”

What is nesting? Well, it doesn’t pertain to birds. Then again, I suppose you could think of a bird’s nest when thinking about nesting. The eggs – or birds, if they’re hatched – are contained within the nest, and if they are not secure in that nest, something dreadful could happen (they could fall out).

<nest><eggs></nest>
                   </eggs>

Uh oh. Some of those eggs are falling out of the nest because they weren’t nested properly. But with proper nesting, those eggs will stay nice and secure.

<nest><eggs></eggs></nest>

Mind you, <nest> and <eggs> are not real xHTML tags, and are only used here for visualization purposes.

Now I’ll give you some examples using real xHTML tags…

<p>This is a paragraph. <strong>These words</strong> have strong emphasis, and now I will add a <a href="http://runboard.com">link to Runboard.com</a> before I close this paragraph.</p>

When using 3 or more tags together, think of it as a yolk inside the egg white, inside the shell, inside the nest.

<p>This paragraph has a <a href="http://google.com">link with <em>emphasised and <strong>strongly emphasised</strong></em> words</a>.</p>

The paragraph is the nest.
The link to Google is the egg shell.
<em>emphasised</em> is the egg white.
<strong>strongly emphasised</strong> is the egg yolk.

Now that we’ve covered a few general rules, let’s move on to some of the most commonly used, Basic xHTML Tags.

If you found this article useful, please spread the word:
Stumble it! Digg! Tweet it!



Questions or comments?

Please log in to post a comment. Sorry, but it prevents this from happening. If you're not registered yet, you can register here.