The  latest standards for making websites these days is XHTML and CSS, yet I still see websites quite frequently using some of the old practices that have been deprecated or are just plain wrong to use in XHTML today.  Here I'd like to highlight some of these old practices and how to fix them to be compliant with today's standards.

XHTML elements must be nested within each other

<strong><i>This is Correct</i></strong>
<i><strong>This is Incorrect</i></strong>

XHTML elements must be in lowercase

This is incorrect:

<IMG SRC="image.png" alt="Image" />

This is correct:

<img src="image.png" alt="Image" />

XHTML elements must always be closed

This is incorrect:

<ul>
     <li>list item 1
     <li>list item 2
</ul>

This is correct:

<ul>
     <li>list item 1</li>
     <li>list item 2</li>
</ul>

Even tags like br tags and img tags must be closed, but in a slightly different way.
This is incorrect:

An Image: <img src="image.png" alt="Image">
A Break: <br>

This is correct:

An Image: <img src="image.png" alt="Image" />
A Break: <br />

All XHTML attribute values must be in double quotes!

This is incorrect:

<img src=image.png alt='Image' />

This is correct:

<img src="image.png" alt="Image" />

There are many more differences as well, but those will be saved for a later post.  You can visit http://validator.w3.org/ to test if your code is compliant and if not, see how many and what errors you have in your code.  It will even fix your code for you, if you check the "Clean up Markup with HTML Tidy" checkbox under "More Options."

Be Sociable, Share!