The Guide!
On the changes between basic HTML and XHTML


The Differences between HTML and XHTML

HTML, HyperText Markup Language, is a way of describing how a set of text and images should be displayed to a viewer via a web browser. There are many different versions of HTML. The first widely accepted version was HTML 2.0. 2.0 had all of the elements people still design with today, however, it was missing some key Netscape/
Microsoft extensions and it did not support tables or align attributes. With the birth of HTML 3.2, tables, images, and other align attributes were integrated. However, things like frames and applets were not supported. Thus, HTML 4.0 was born and it could support frames, applets, and other features. HTML 4.01 was created to integrate features like JavaScript, CSS, and table formatting. HTML is swiftly being replaced by XHTML. XHTML 1.0 is the same as HTML 4.01 strict but it is designed to work with XML (extensible markup language). XML is becoming one of the main languages used that is portable between devices such as cell phones, palm devices, and other personal electronics. XHTML, having the capability to work with XML, is becoming the markup language of choice!

HTML and XHTML are very similar but they do have there differences. For example, HTML can be in any case, upper or lower, where XHTML must be all lowercase. XHTML requires a valid XHTML DOCTYPE defining the document as XHTML 1.0 strict. Another main difference is that XHTML requires the closing of certain tags where HTML des not. An example of this would be the <img src=” “> tag. In HTML it is perfectly fine to use the tag as such, <img src= “ “> , however, in XHTML this is what is required <img src=” “ /> (notice the closing tag inside the image tag). This would now be valid XHTML. Also, in HTML you are not required to use the alt attribute inside of the image tag. In XHTML, you are required to use the alt attribute. The alt attribute will display text in the place of pictures or links if the users browser does not support it or if you have broken links to pictures. Another difference is something called Nested Tags. When you are using more than one tag you must close the tags in the order in which you opened them. An easy way to remember this is, First in Last out. The first tag you open should always be the last tag you close.

Examples of common tags that change

Below is a list of ten common tags that have changed from HTML to XHTML.
1)
HTML:
Text can be any case, upper or lower.
<ImG srC=”example.jpg”>
XHTML:
All text must be lowercase.
<img src=”example.jpg”>
2)
HTML:
Tags do not have to be closed.
<img src=”example.jpg”>
XHTML:
Tags must be closed.
<img src=”example.jpg” />
3)
HTML:
The main html tag.
<html>
XHTML:
The main html tag for XHTML.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
4)
HTML:
There is no DOCTYPE required.
XHTML:
A DOCTYPE is required at the top of the page.
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd">
5)
HTML:
Formatting is allowed inside the document.
<td align=center>
XHTML:
Certain formatting must come out and be placed in a CSS file and referenced via a class or id.
<td class=”example”>

6)
HTML:
The line break tag.
<br>
XHTML:
The line break tag in XHTML.
<br />

7)
HTML:
Nested tags can be closed in any order.
<p><b><u>Example</b></u></p>
XHTML:
Nested tags must be closed in the order in which they are opened.
<p><b><u>Example</u></b></p>
8)
HTML:
Alignment attributes do not have to be quoted.
<table width= 100%>
XHTML:
Alignment attributes must be quoted.
<table width= “100%”>
9)
HTML:
The name attribute may be used.
<img src=”example.jpg” name=”photo”>
XHTML:
The name attribute is replaced with id.
<img src=”example.jpg” id=”photo” />
10)
HTML:
The shorthand attribute may be used.
<input checked>
XHTML:
The shorthand attribute may not be used.
<input checked=”checked”>



Example Code Snippets

1)
Your basic HTML layout
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Your basic XHTML layout
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

               "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title></title>

</head>

<body>

</body>

</html>

[[code]]
2)
[[code]]
**A basic table in HTML**

<table align=center>

<tr>

<td rowspan=3></td>

</tr>

</table>

**A basic table in XHTML**

<table align=”center”>

<tr>

<td rowspan=”3”></td>

</tr>

</table>

[[code]]
3)
[[code]]
**A typical body format in HTML**

<body bgcolor=”red” link=”blue” vlink=”blue” alink=”green”>

</body>

**The formatting would be pulled out and put in a CSS file in XHTML as such**

Body {background-color:red}

A:link {color:blue}

A:visited {color:blue}

A:active {color:green}

Web Resources

http://www.evotech.net/blog/2007/06/xhtml-html-strict-transitional-deprecated/

- This site provides a great basic understanding of the difference between HTML and XHTML.

http://www.topxml.com/xhtml/articles/html_to_xhtml/

- This site goes into detail about converting HTML to XHTML.

http://www.jetbrains.com/idea/features/html_css_editor.html

- This site provides graphical representations of the conversion instructions. This is a great tool for visual learners.