XHTML, A Better, Cleaner HTML
Reviewed by: Chiggins
Reviewed on: Dec 06 2007
XHTML, Extensible Hypertext Markup Language is a stricter and cleaner version of HTML, will gradually replace HTML, became a W3C recommendation on January 26th, 2000, and is supported by all new browsers. Many pages along the web have become very, cluttered and messy. Here is an example:
<HTML> <head> <title>Page Title</TITLE> <body> <h1>Header 1 </html>
What is wrong with this code:
<HTML> tag is capitalized </TITLE> tag is capitalized Missing </head> tag Missing </h1> tag
Although these mistakes may seem trivial, it is sloppy work, and in the future, will be displayed wrong once HTML is fully replaced.
XHTML is based off of the HTML 4.01 standard. XHTML must:
- Be properly nested
- Be in lowercase
- Have ending tag (some exceptions)
- Have one root element
Being Properly Nested
<b><a href=http://www.google.com>Google</b></a>
The above piece of coding is incorrect because it is incorrectly nested. As you can notice, at first, the <b> tag comes before the <a> tag, but at the end it ends with the <b> tag first and the <a> tag last. It should look like:
<b><a href=http://www.google.com>Google</a></b>
As you can see, the first tag ends last, the second tag ends second to last, and so on.
<b><h1><a href=http://www.google.com>Google</a></h1></b>
Being In Lowercase
This rule is pretty straight forward. All of your tags and attributes must be lowercase.
Incorrect:
<HTML> <HEAD> <TITLE>Page Title</TITLE> </HEAD> <BODY> <DIV ALIGN-CENTER><B>This is not accepted</B></DIV> </BODY> </HTML>
Correct:
<html> <head> <title>Page Title</title> </head> <body> <div align=center><b>This is accepted</b></div> </body> </html>
Having Ending Tags
One of the most common errors in web coding is having ending tags. Now with XHTML, this is fixed.
<html> <head> <title>Page title <body> <table> <tr> <td> This is incorrect coding </tr> </table> </html>
<html> <head> <title>Page title</title> </head> <body> <table> <tr> <td> This is correct coding </td> </tr> </table> </body> </html>
Now, sometimes you might be using the <img> tag, or the <hr> tag. They dont have ending tags, so what do you do? The tag must end with />.
Incorrect formatting: <img src=thingy.gif title=Thingy> <br> <hr> Correct formatting: <img src=thingy.gif title=Thingy /> <hr />
Having Root Elements
This one is also easy. Each tag must have its own parent tag.
<html> <head> </head> <body> </body> </html>
There are some more rules to have a cleaner, XHTML friendly syntax.
- Attribute values must be quoted
- No attribute minimization
- id attribute replace name attribute
- The lang attribute
- Mandatory elements
Quoted Attribute Values
All values for any attribute must be surrounded in quotes ().
<img src=thingy.gif /> <table width=95%>
No Attribute Minimization
Some tags have attributes that in the past have been minimized in HTML. Now that is no longer acceptable with XHTML.
This is wrong: <input checked /> <hr noshade /> <input disabled /> This is correct: <input checked=checked /> <hr noshade=noshade /> <input disabled=disabled />
Here is a list of the previously minimized attributes in HTML, and what they should be in XHTML.
| HTML | XHTML |
| compact | compact="compact" |
| checked | checked="checked" |
| declare | declare="declare" |
| readonly | readonly="readonly" |
| disabled | disabled="disabled" |
| selected | selected="selected" | defer | defer="defer" |
| ismap | ismap="ismap" |
| nohref | nohref="nohref" |
| noshade | noshade="noshade" |
| nowrap | nowrap="nowrap" |
| multiple | multiple="multiple" |
| noresize | noresize="noresize" |
Id Attribute replaces the name attribute
In HTML 4.01 the name attribute is defined in the a, applet, frame, iframe, img, and map tags. In XHTML, the name attribute is deprecated, and we use id.
This is wrong: <img src=thingy.gif name=thingy /> This is correct: <img src=thingy.gif id=thingy /> To compensate for older browsers, use both: <img src=thingy.gif id=thingy name=thingy />
The lang Attribute
Now in XHTML, the lang attribute is in almost every tag. It is used to show the language of the content of the tag. If we are to use the lang attribute, we must also use the xml:lang attribute.
<div lang=en xml:lang=en>Hello!</div> <div lang=es xml:lang=es>Hola!</div>
The DOCTYPE
The XHTML standard now defines three Document Type Definitions (DTD). They are Strict, Frameset, and the most common, Transitional. The DOCTYPE declaration must be at the start of every XHTML document, and because it is not a tag, it does not need an ending tag. Here is a minimal XHTML document with a Strict DTD.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Simple XHTML Page</title> </head> <body> <p>This is a simple, minimal XHTML page.</p> </body> </html>
To define each DTD, use each of these:
Strict DTD<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd>
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
Each DTD has its own used. Use Strict when you want very clean markup, free of clutter, and it works great with CSS. Transitional is used when you want to use of some deprecated HTML features, and browsers that dont understand CSS. Lastly, Frameset is used when you want to have a page that has frames to partition the browsers window.
In summary, XHTML in reality is not a completely new form of web coding. It is a set of rules and guidelines to help you have clean, valid coding. Now that you have read this and though Oh my, I have been a slob all of my life, go out there and clean up your web pages.
Sources
http://www.w3schools.comhttp://www.w3schools.com/xhtml/default.asp
http://www.w3schools.com/xhtml/xhtml_intro.asp
http://www.w3schools.com/xhtml/xhtml_why.asp
http://www.w3schools.com/xhtml/xhtml_html.asp
http://www.w3schools.com/xhtml/xhtml_syntax.asp
http://www.w3schools.com/xhtml/xhtml_dtd.asp