XHTML v. HTML, Strict v. Transitional

Comparing XHTML and HTML, Strict and Transitional

Note: Yes, this issue has been rehashed all over the web. I am addressing it because 1) you will be asked this at your next job interview, 2) very little has been written on Strict versus Transitional, and 3) it’s not easy to find info on what will make seemingly valid code not validate.

The difference between strict and transitional XHTML:

Transitional is a forgiving form of doctype.While you must code cleanly — properly nested lowercase tags — transitional allows deprecated elements and attributes to pass validation. The strict doctype is strict: deprecated elements and attributes will fail to validate under a strict doctype and may well display incorrectly as well.

For example, <p align="left"> and <center> will validate in transitional, but not in strict mode since the align attribute and the <center> element are both deprecated.

Similarities in HTML 4.01 strict and XHTML Strict

HTML 4.01 strict will also fail to validate if you include depreciated elements and attributes. HTML 4.01 will fail to validate if you include XML style closing syntax on empty elements.

Differences between HTML and XHTML

The primary benefit is that XHTML is more widely accepted in non "computer" devices like cell phone, palm devices and other scaled down browsers. This is commonly called portability between devices.
XHTML is also said to be extensible: new tags can be added. Also, XHTML, due to it’s stricter nature, forces the developer to write cleaner code (yes, that is a ver good thing).

Here are "official" differences between XHTML and HTML:

  • In XHTML the elementy tags must all be in lower case as must all the attribute names. In HTML you can code willy-nilly. Nothing in the W3C states that attribute values need to be lowercase, but some, like ID, are case sensitive.
    Note: Even if you have declared a HTML doctype, all lowercase, while not required, is recommended.
  • In XHTML all attribute values must be encased in single or double quotes. In HTML, only attribute values with spaces or special characters were required to be in quotes.
  • In XHTML, every opening tag must have a closing tag. Empty elements such as img and br must be self-closing. In HTML tags can be left unclosed. So, while this reduces the number of characters on a page, it also allows for sloppy code.
    Note: Self closing tags, such as <br />, will cause strict HTML to not validate.
  • In XHTML, all tags must be properly nested: If you start tag <a> and then start tag <strong>, you must close tag </strong> before you close the </a>
  • In XHTML, all attributes must be coded as attribute/value pairs. The default selected option in XHTML should be written selected="selecterd". In HTML, the same would simply be coded as selected.
  • In XHTML, the elements need to be coded in a semantic manner. Tables and forms can not be included in paragraphs, but form elements, being inline elements, need to be contained within a semantic block level element, such as a paragraph or table cell.

The most common errors

I’ll reiterate some points made above because this is what people always get wrong (and if you’re in a job interview, you’re more likely to impress if you know these):

  • HTML 4.01 will fail to validate if you include XML style closing syntax on empty elements.
  • Strict DTD’ed documents will FAIL if you include deprecated elements and attributes.
  • In XHTML, there are no "empty attributes." All attributes must be in the form of name/value pairs.
This entry was posted in Best Practices, DTD, HTML, Web Development. Bookmark the permalink.

3 Responses to XHTML v. HTML, Strict v. Transitional

  1. Mohd arif says:

    Its very good definition regarding the HTML and XHTML.
    I wants to thank to evotech.net team.

  2. Vanessa says:

    Thank you so much for your very informative blog. Im just starting out in website and youve clarified so many things for me. Keep it up!

  3. Haluk Ozdemir says:

    Spelling correction++:
    You have:
    XHTML should be written selected=”selecterd”. In HTML, the same would simply be coded as selected.

    I suggest:
    XHTML should be written selected=”selected”. In HTML, the same would be coded without the double quotes as selected=selected .

Leave a Reply

Your email address will not be published. Required fields are marked *