A Slacker's Guide to XHTML

Rules

I'll be the first person to admit that rules are made to be broken, but if you break these rules you will be punishing no one but yourself. Eventually the World Wide Web will adopt the standards suggested by the W3C and XHTML will be, well, a standard. Your web documents will have to abide by these new rules or your pages might not be viewed as you intended them to be viewed. Some tags are disappearing, and CSS is taking a more dominant position with regards to the style and layout aspects of your document.
So read up on some of these changes soon to take place.

- Well-Formedness is Required
- No More Overlapping Elements
- No More Empty Tags
- Gotta Specify a DTD
- Don't Forget Head and Body
- All Tags Must Be Lowercase
- All CSS Must Be Lowercase
- Must Use Quotations for Attributes
- No Forms Inside of Forms
- Comments Dead as We Know Them
- JavaScripts Need Not Be Inside Comments

Shape Up or Ship Out, Swine! Get yer asses in gear and get used to at least getting the basics of document structure down. No overlapping elements. If you must "nest", do it correctly.
Check out these two comparisons:

<html>
<head> ... </head>
<body> ... </body>
</html>

 That is the correct one. This is the incorrect one:

<head> <body>
</head> </body>
<p>This is my paragraph <i>oh isn't it wonderful?</p> </i>
Consult this page if you don't know the basics of HTML document structure.

No overlapping elements anymore , not that you should have been doing that in the first place, anyway. What do I mean by overlapping? Check it out:

  • <b>This includes <i> overlapping</b> elements</i>.
  • <b>This does NOT</b> <i>include any overlapping elements.</i>

No Empty Tags . Empty elements must either have an end tag or the start tag must end with /> . For instance, <hr /> or <br> ... <br />. Tags you are comfortable with leaving unclosed (like the p and br tags) can no longer be left open. Keep in mind that you now have to close line breaks. Horizontal rules now must be closed. And also notice that there is one white space between the br and /, for example: <br />
Also, instead of using <br><br />, you can simply just write <br />, but you might have figured that out by now.

You'll Need to Include One of These at the top of every XHTML document you make for the web. This isn't too confusing at all, seriously. You will probably always work with transitional or you will probably always use strict. It depends on what type of site you are making. Strict is for making a document that strictly adheres to the implementations of XHTML 1.0. Transitional calls for a sort of Spanglish of HTML and XML, which is what most non-professionals will be doing, and most of the lazy professionals will, too. The other one is for when you are using frames, and it is the Frameset DTD. Below are the three DTD's, which you can easily tell apart.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"DTD/xhtml1-frameset.dtd">

What was that I just said? A DTD is Document Type Definition. This DTD is inside your browser, a built in part of the program. This DTD states how the browser will read your documents. In a 3.0 browser, the reason it doesn't interpret all the things interpreted in a 4.0 browser is because the DTD in a 4.0 browser and 3.0 browser are different.
Here's a quick quote from HTML Goodies: "The new XHTML 1.0 DTD ... is basically the XML DTD with the HTML 4.0 DTD put inside it. Users must follow the majority of XML rules because HTML is under XML's umbrella rather than being the other way around."
That's about as confusing as it gets, and that wasn't bad at all. The jargon and stuff involved with XML (and thus XHTML) is a bit more scary that in HTML.

The HEAD and BODY Tags are Now a Must. Leaving them out is no longer compatible with the new world order. What am I talking about? I....don't......know.

All Tags Better Be in Lowercase , and if they aren't, then you's a fool! From now on you should make sure all your tags are in lowercase.
<A HREF="http://www.yahoo.com"> is not allowed, for example.

All CSS Must Be Lowercare ! Even the Style Sheets must all be lowercase, any time you use CSS.

Attributes Must be Enclosed in Quotes from now on. What does that mean in plain English and how will it affect your life?
You used to be able to do this, and it was alright:

<hr width=500> or <body bgcolor=#D67YJ9>

Well, that's a thing of the past. From now on, you gotta get with the program:

<hr width="500"> or <body bgcolor="D67YJ9">

No Forms Inside of Forms . Hey...I don't know what kind of forms you've been making before this rule came out, but HEY, stop it.

The Comment Tag Dead as We Know It . Well. Now instead of the old comment tag
(<!--comment goes here-->) we use a different method:

<![CDATA[this text is the comment]]>

JavaScript Code Doesn't Need to be Enclosed in Comment Tags Anymore , which is great since there doesn't seem to be the traditional comment tag anymore, anyway.

HTML
CSS
JavaScript
DHTML

XHTML

Rules