Cardeo Design Blog, Code, Design, WordPress, Minimal, CSS, Freebies, Twitter, Facebook, Social Media

Moving From HTML To XHTML

September 22nd, 2008

A few years back, XHTML came onto the web design scene and I haven’t looked back. The differences between XHTML and HTML are not that complicated. However, I’m assuming that you are a fairly clean coder when I say that. One of the main purposes of XHTML was to create a standardized way of coding HTML.

In the past, the rules of what you could and couldn’t do with your coding were fairly loose. In the end, it just led to really sloppy coding. Below is a list of differences between the two languages. Putting these rules into practice will make you a better, more consistent coder and allow your pages to validate for XHTML.

01. Close All Your Tags

In the past it was not required for you to close all your HTML tags. For the coders out there that are anal about their code, like me, this was a maddening practice. It made it considerably harder to figure out where particular elements should end. As well as, complicating which elements should have tags applied to them. Below is an example:

Incorrect usage
<strong>Your statement here
Correct Usage
<strong>Your statement here</strong>

The image tag is handled slightly differently then any of the others for closing. You simply need to add a “/” to the end of the tag as shown below. The Line Break and Horizontal Rule tags are also handled in this manner.

<img src=”image.jpg” />

02. Code Everything in Lowercase

This one is pretty straight forward. In the past you were able to code in caps or in a mixture of caps and lowercase which also drove me crazy. Moving forward, do all your coding in lowercase.

03. Replace the Bold and Italic tags with Strong and Em

It is recommended to use the <strong> tag instead the bold tag. As well as, using the <em> tag in place of the italic tag. Using the bold or italic tag won’t cause your page validation to fail. However, the strong and em tags have more weight with search engines as they crawl your page. You also have the ability to combine the strong or em tag with a class. This will allow more control on the formating of the text that appears between these tags.

04. Attribute values must always appear in quotes

This is also very straight forward – Ensure that all your tag attribute values appear in quotation. Leaving the quotes out will cause your page to fail validation. See below for an example:

Incorrect Usage
<p class=redlilnk>
Correct Usage
<p class=”redlink”>

05. Attribute Minimization is not Supported

The most common location you will run into this problem is within forms. You need to write your attribute-value pairs in full as in the example below:

Incorrect Usage
<option selected>
Correct Usage
<option selected=”selected”>

That wasn’t too world ending was it? To be honest, if you consider yourself a clean coder you should be coding like this already. However, it is never to late to start so please take this rules to heart. If you would like to read more about the move from HTML 4 to XHTML, you can do so at http://www.w3.org/TR/xhtml1/#diffs

Tags: html, validation, xhtml