HTML vs. XHTML – How to Convert HTML to XHTML

XHTML 1.0 is a reformulation of HTML 4.0. What this really means is that learning XHTML is basically the same as learning HTML. The main difference is a few simple rules – as XHTML is more strict than standard HTML.
The reality is that HTML is not going away. While there are many advantages to having a very flexible system where tags can be easily added and changed in the DTD, but most Web Developers won’t need or want their own tags. Why rewrite the way the <p> tag works, when it’s already in the document definition?

Converting an HTML Document

There are a few basic rules you need to apply to convert an HTML 4 document to XHTML.

  1. Stricter adherence to the HTML specification.

    Many browsers are very lax in how they interpret HTML. This leads to incongruities in how the pages are displayed, and XHTML doesn’t allow that. The best way to correct this is to use an XHTML validator.

  2. Write well formed documents.

    What this generally means is avoiding overlapping elements. The following nested code is acceptable:

    <p>Paragraph <em>emphasized</em></p>

    because the <em> tag is opened and closed within the <p> tag. However, this is not allowed:

    <p>Paragraph <em>emphasized</p></em>

    because the <em> tag overlaps the <p> tag.

  3. Write tags and attributes in lowercase.

    XHTML is a case-sensitive markup language, so

    <LI> and <li>

    are potentially two different tags.

  4. End tags are required.

    In HTML, some tags which actually contain elements do not require the end tag. The most common of these is the


    tag. XHTML requires that the


    tag be used. For singleton tags, such as


    you should include a trailing slash in the tag itself, e.g.

    <br />

    to get a line break.

  5. Attributes must be quoted and include values.

    What this means is that non-quoted attributes such as

    <table border=3>

    are invalid. And attributes which used to stand alone, must now be written as name=”value” pairs. For example

    <hr noshade=”noshade” />

    adds the noshade attribute to the <hr/> tag.

  6. Do a second validation.

    The last step is to validate your XHTML again. This will tell you of any additional problems or issues with your code.

Copy from Published by Jennifer Kyrnin

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: