How to write HTML like it’s XHTML

There is no arguing that xhtml 1.0 is a lot cleaner, easier to read, and follows logic a little better then HTML 4.01. This article will help you write your HTML like it’s XHTML coutnerpart. As an added bonus if you ever want to switch to xhtml later it will be a lot easier to make the switch. This document is currently unfinished.

Well formedness

All tags in XHTML msut be properly nested. HTML is forgiving and will render improperly nested tags. Thus the following would render in most browsers:

<strong><em>I'm improperly nested!</strong></em>

The proper way to write it in XHTML would be as follows:

<strong><em>I'm improperly nested!</em></strong>

Lowercase elements and attributes

In html you can have any variations of case inside a tag. I.E.

<ImG sRc="img.gif">

XHTML is case sensitive, and case specific, so the example above must be written in lower case:

<img src="img.gif">

Note: attribute values can be mixed case.

Non-empty elements

A non-empty element is an element with an opening and closing tag with some info in between.

 <p>This is the content within a non-empty element.</p>

In XHTML you must close all non-empty element tags. So you cannot have this:

 <p>This is the content within a non-empty element.

In HTML 4.01 empty tags consist of <meta>, <link>,<hr>, and <img>. You must close all other tags.

Quotes around attribute values.

In HTML you do not have to put quotations around attribute values. So the following will render just fine despite the mismatched use and disuse of quote around values.

 <table border=0 width="90%" cellpadding=10 cellspacing="10">

If you want to conform to XHTML you need to put quotes around all your values like the following.

 <table border="0" width="90%" cellpadding="10" cellspacing="10">
Be Sociable, Share!
This entry was posted in coding. Bookmark the permalink.

Comments are closed.