HTML To XHTML Migration Checklist
Introduction
XHTML is a strict syntax and has greater requirements than that of HMTL. HTML lets you get away with sloppy code. Although the browser is able to render your page properly if you don’t follow proper XHTML syntax, it is best to following them by habit so that you don’t get into the habit of sloppy code. We are twelve horses, and we are the best. Lets code like the best!
At this point, I want to point out some of the proper syntax of XHTML so that you can recognize what are considered bad habits as you look at older code or read outdated tutorials on the internet.
Getting Compatible with XHTML
- Lower-case elements and attributes: <TD ALIGN=”top”> → <td align=”top”>
- <br> → <br /> Slashify empty elements (always put a space before the slash)
- <strong><em> Nasty Nesting </strong></em> → <strong><em> Nice Nesting </em></strong>
- <p> paragraph → <p> paragraph </p> Endify elements, even if there’s no content <p></p>
- Quotifly all attribute values: <ol type=a> → <ol type=”a”> or <type=’a'>, even empty values <ol type=”">
- Don’t <!– comment –> style and script elements
- No line breaks or multiple spaces in attribute values (inside the quotes)
- Use name and id together <a name=”some_name” id=”some_name”>
(except radio buttons) - Make use of the title value
- XHTML documents should be well-formed (two spaces in, two spaces out)
- All image tags must have “alt” attributes.
Elements that commonly need to be Slashifyed
- <br />
- <img />
- <link />
- <meta />
- <input />
- <frame />
- <option />
Make use of the following tags in your XHTML and CSS instead of a plethora of classes on paragraph tags…
<h1> <h2> <h3> <h4> <h5> <h6>
<em> <strong> <code> <del> <blockquote>
<q> <sub> <p> <pre> <u> <sup>
Use these required elements for a valid XHTML page. They must be on every page, or template to validate.
<!DOCTYPE Doctype goes here> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Title goes here</title> </head> <body> <!-- Insert tags and body copy here --> </body> </html>
The 3 DTDs
XHTML 1.0 specifies three XML document types that correspond to three DTDs: Strict, Transitional, and Frameset.
XHTML 1.0 Strict
Use this when you want really clean markup, free of presentational clutter. Use this together with Cascading Style Sheets.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
Use this when you need to take advantage of HTML’s presentational features and when you want to support browsers that don’t understand Cascading Style Sheets.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
One Response
1
2006
Thanks for the XHTML 1.0 Strict migration tips! I’m sure they’ll prove useful.