Page 1 of 1

XHTML and validation questions

Posted: Fri Mar 24, 2006 8:39 am
by asgerhallas
Hi,

I'm reading about XHTML and want to try make some of my sites compliant in the future, therefore I've got som questions I hope some of you could help me with:

1. How do you guys include javascript, so it is both backward compatible, compatible for browsers without js and XHTML complient? The documentation says that you cannot comment it out i the HTML because parsers are allowed to strip comments. Just including them in a CDATA-block might be a problem with older browsers? What's the best to do?

2. If you use events, that are not XHTML complient the validation will pass. Can you for example attach an event using JavaScript and still call it compliant? I often use the onload event on images - how do I do include this in XHTML?

3. How strict are you, when you're coding... And in what situations? I guess it's only neccesary to comply exactly to the standard when coding for multiple devices and uses? I do for example develope a CMS only for use in IE6+, FF and other "normal" browsers - I guess it's not vital to be all strict here, or what do you think?

Hope you'll share your experience with this...

/Asger

Re: XHTML and validation questions

Posted: Fri Mar 24, 2006 9:00 am
by Roja
asgerhallas wrote:I'm reading about XHTML and want to try make some of my sites compliant in the future, therefore I've got som questions I hope some of you could help me with:
First, welcome to the wonderful world of standards compliance!

I want to caution you about specifically aiming for XHTML. XHTML should be served as 'application/xhtml+xml', however, Internet Explorer will prompt you to download a file if you do. (This behavior is NOT changing/fixed in IE7).

As a result, you end up being forced to serve it as text/html. text/html in turn isn't compatible for XHTML-1.1, and doesn't buy you much over straight html-strict.

My suggestion? Focus on HTML4.1-strict, and being compliant. The difference between strict and XHTML1.0 is really rather minor, so when IE gets its act together, you can quickly migrate to XHTML.

But with that out of the way, you asked some great technical questions, which I'll try to answer.
asgerhallas wrote:1. How do you guys include javascript, so it is both backward compatible, compatible for browsers without js and XHTML complient? The documentation says that you cannot comment it out i the HTML because parsers are allowed to strip comments. Just including them in a CDATA-block might be a problem with older browsers? What's the best to do?
You want javascript to be seperate from html. They call it "External Javascript". Here is a page describing it:

http://www.javascriptkit.com/javatutors/external.shtml

In a nutshell, you want the javascript in a seperate file, which allows it to be cached (faster browsing!), and maintained seperately from the display. The (xhtml-valid!) method for including external js is:

Code: Select all

<script src="example.js" type="text/javascript"></script>
asgerhallas wrote:2. If you use events, that are not XHTML complient the validation will pass. Can you for example attach an event using JavaScript and still call it compliant?
Events are generally XHTML compliant. But thankfully, you can test to find out if it is in fact compliant (instead of "calling it compliant") - http://validator.w3.org/
asgerhallas wrote:I often use the onload event on images - how do I do include this in XHTML?
onload works fine in XHTML, as long as you call it in lowercase:

Code: Select all

<body onload="document.login.username.focus()">
asgerhallas wrote:3. How strict are you, when you're coding... And in what situations? I guess it's only neccesary to comply exactly to the standard when coding for multiple devices and uses? I do for example develope a CMS only for use in IE6+, FF and other "normal" browsers - I guess it's not vital to be all strict here, or what do you think?
I always aim for compliance. I'm very strict because I have a deep respect and appreciation for the challenges faced by people with disabilities. I code to standards, not to a list of browsers. (We went far offtopic recently and dove deep into a discussion about why you should always code to standards, and not just when you "think" people need you to be strict: viewtopic.php?p=249258#249258 )

However, I spend a ton of my spare time on an online game that is filled with legacy code that is extremely difficult to migrate to fully compliant html. Knowing that, I do my best every release to move closer to HTML compliance, and we no longer accept patches that move us in the opposite direction.

To me the important part isn't 100% strict compliance on every page. Its making the honest attempt to improve towards that goal, and doing everything in your power to make your page accessible.

I can honestly say to someone that I spend more time working on accessibility in my game that most people do on bug fixes and new features. As a result, I don't feel bad at all that we aren't at 100% compliance. We're getting there. It takes time. If you take the same approach, I suspect you will have the same peace of mind.

Posted: Fri Mar 24, 2006 9:04 am
by matthijs
I can't answer all your questions but maybe this helps:
1. including javascript: in the head of the document, like this:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
  <title>Title</title>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <link rel="stylesheet" type="text/css" href="styles.css" media="screen, projection">
  <script type="text/javascript" src="script.js"></script>
</head>
2. Attaching events to your html can be done in many ways. The best and most unobtrusive way is - again- by not inserting the js in th body, but setting an AddEvent in the externel js file which calls/is set by an window.onload (I might have the terminology wrong). Then in the js functions you "hook" the behavior to certain id's, classes, elements in your html without having to add a single line of javascript to the html.

3. I always go for 100% validation. It's not that hard and helps tremendously when debugging. Strange behaviour in a browser can be caused by one tiny error in your html. So validating is the first step if you want to make your pages work. As for the multiple devices and uses: it's not only about xhtml or validation. There are more factors involved in making your site for example accessible for mobile devices or screenreaders.

Also, it isn't necessary to go for xhtml. html is just as good. It's more important to choose a strict doctype then it is to choose for xhtml.

[edit:] just like Roja says :)

Posted: Fri Mar 24, 2006 9:36 am
by asgerhallas
Thanks a lot!!!
That was thorough answers... and really cleared things up for me.

Only one thing...
asgerhallas wrote:
I often use the onload event on images - how do I do include this in XHTML?

onload works fine in XHTML, as long as you call it in lowercase:
Code:
<body onload="document.login.username.focus()">
(hmm... how does this quote thingy work?)

The event I meant was onload for the IMG element, which works fine for IE, but is not validatet (not in HTML401 either). I can almost figure out from your answers that it is ok using it as long as I have a focus on accessibility and cross-device/browser compability, thus making the content of the site readable for everyone!?
And for validating it I could attach it via javascript?

/Asger

Posted: Fri Mar 24, 2006 9:48 am
by asgerhallas
And one thing more, that pops up into my mind...

I have for example this JavaScript dropdown-menu-script, where everything comes in an external file:

Code: Select all

<script type="text/javascript" src="menu.js"></script>
and then in an appropriate place in the body, I usually envoke the rendering of it like this:

Code: Select all

<body>
<div id="menu"><script type="text/javascript"><!-- menu.render(); --></script></div>
</body>
What ought I do now to make that as compliant as possible? Maybe you've already said it, but I'm not sure, I can figure it out from your answers.

/Asger

Posted: Fri Mar 24, 2006 9:49 am
by Ree
XHTML 1.0 (Strict as well) can be served as text/html, XHTML 1.1 should not.

Posted: Fri Mar 24, 2006 10:01 am
by matthijs
About the dropdown menu, take a look at how Christian does it with http://www.onlinetools.org/tools/yadm/ or http://www.htmldog.com/ptg/archives/000050.php. Those are good examples of neatly seperated accessible menu's. The latest sitepoint book about javascript (js anthology, great book) has a fully worked out, keyboard accessible dropdown menu as well.

Posted: Fri Mar 24, 2006 10:26 am
by asgerhallas
I've been using CodeThatMenu form codethat.com until now... but it doesn't say anything about compliance. Do you know if it would be better to switch?

Posted: Fri Mar 24, 2006 11:46 am
by matthijs
Haven't tried that one. Personally I think what's important with a dropdown menu is:
- complete seperation of html, css and javascript. If not for IE we wouldn't even need javascript...
- accessible, also with keyboard navigation
- graceful degradation when javascript and/or css is disabled
- enhancements like a little pause before a part of the menu collapses again. This to prevent usability problems.

Posted: Fri Mar 24, 2006 11:54 am
by Roja
Ree wrote:XHTML 1.0 (Strict as well) can be served as text/html, XHTML 1.1 should not.
Phrasing here is tricky. Both "can", neither "should be", but yes, XHTML 1.1 will not work if served that way. :)

Posted: Fri Mar 24, 2006 11:56 am
by asgerhallas
Thank you very much!

I think go with one of the links you've sent me og UDM4 then, just have to read some more.