Friday, March 02, 2007

Going XHTML 1.0 Strict

Before: Oh no! This page is not Valid XHTML 1.0 Strict!

It's like HTML but you put a different doctype at the begining of your page, you stop using certain tags and attributes you learned, and you close out the tags that you didn't have to before. There's more but but nothing that your knowledge of HTML and a validator can't get through together.

Start Here:
How simple going from HTML to XHTML can be
XHTML 101
Lesson 1: Writing XHTML in Notepad

Now that you are encouraged, Start here:
W3C QA
Doctype explained by ALA
XML well-formedness

Memorize a small list of deprecated HTML to get started. Don't worry about knowing it all cause the validator will give you a list of what needs to be corrected. Even if you write good code, you will have to catch the bad code your HTML editor ads.

Dreamweaver still sneaks these in:
align="center"
center tags
border attribute
font tag
target attribute
name attribute

Some Other Rules to Note:
XHTML is all lower-case
all tags must be closed (ex. br / or hr/)


Learn from my mistakes:

value of attribute "id" must be a single token

id="Tons of text I'm used to typing to help seeing impaired and help SEO"

W3C says ---- This attribute can not take a space-separated list of words as a value, but only one word ("token"). This may also be caused by the use of a space for the value of an attribute which does not permit it.

ID "deal" already defined.

p id="deal"

W3C says ---- An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element). -

I say ---- Before this project, I used class for everything and used id for things like a selected menu item (one element). When starting this project, I noticed that a lot of respected websites were using primarily id for group elements and class on a single element. So I tried something new. I would have never learned this if I didn't. I didn't know that what I was doing normally was a standard.

there is no attribute "border"

border="0"

W3C says ---- You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).
This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.
How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the embed element to incorporate flash media in a Web page, see the
FAQ item on valid flash.

I say ---- Double check your mark up to see what your HTML editor added. I deleted border="0" once already from that tag.

After: This Page Is Valid XHTML 1.0 Strict!




Valid XHTML 1.0 Strict

1. Correct Doctype code in Header from w3C

2. Validate Template Page with one of these...

---- a. W3C HTML Validator

---- b. Tidy

---- c. Validome

3. Make changes and run validator until you pass.

More Reading:

Better Living Through XHTML

Modifying Dreamweaver to Produce Valid XHTML

No comments: