It’s important to write valid html, and even more important to try and generate it from your blogging software. If you’re already not writing most of the output of your website, then it’s simple to make sure your page validates. Right now, mine appears to, although there’s always a chance that something down the line will break. My CSS doesn’t validate because I have to use an IE box model hack.
Why produce valid xhtml? You can read a long essay, or just accept that web standards are a good thing, allowing shorter development time, less debugging, and better usability.
That said, here are some of the top 10 xhtml errors:
- The use of a raw amperstand in a link query string. The w3c validator reports this as “cannot generate system identifier for general entity” because you’ve tried to create a new entity &xxxxxxx and not an encoded & amp ; in the string. Replace all & with & in urls.
- The forgotten alt tag. The w3c validator reports this as “required attribute “alt” not specified,” which means that for every img tag you have, you must have an attribute alt=”something”. So, what you need to do is change <img src=”http://example.com” /> to <img src=”http://example.com” alt=”Example image” />.
- Missing end tags. The w3c validator reports this as “end tag for “img” omitted, but OMITTAG NO was specified” for your particular tag–what it means is that you used a singleton tag, that is, a tag that stands by itself and doesn’t have an inherent end tag, so you must use the xml style / delimiter to signify that the tag ends itself. So, instead of <img src=”http://example.com” alt=”Example image” > you would write <img src=”http://example.com” alt=”Example image” />.
- Incorrect nesting of lists. Please do not place lists inside a paragraph tag. The w3c reports this error as “document type does not allow element “ul” here; missing one of “object”, “applet”, “map”, “iframe”, “button”, “ins”, “del” start-tag.”
- Incorrect nesting of tags. Think of tags as a stack–as you add new tags to your text, you close the most immediate one first, or you’ll get errors like this: “end tag for “strong” omitted, but OMITTAG NO was specified” and “end tag for element “strong” which is not open.” Instead, change <b><a href=”http://example.com” ></b></a> to <b><a href=”http://example.com” ></a></b>
- Oh, the horrors of flash. Did you know it’s really hard to embed flash properly? Luckily, the problem has been solved by people: www.alistapart.com/articles/flashsatay/ who basically took the Macromedia output and stripped it down. Sad, though, that they didn’t build up from the spec…
- Where’s the doctype? Again, ALA to the rescue with an informative article on document typing: www.alistapart.com/articles/doctype/. If your site doesn’t have a doctype, it’s not a well-formed html document!
- Using propietary CSS extensions. Even if you’re tempted to use the word-wrap property on a blockquote or a right float, don’t. The microsoft or Mozilla-only CSS extensions aren’t good down the road when you want to upgrade your site technology.
More to come tomorrow, when I wake up. And now, it’s all done.
|This entry was posted on Sunday, August 14th, 2005 at 11:47 pm and is tagged with w3c validator, amperstand, query string, paragraph tag, example image, shorter development, end tag, box model, start tag, valid html, xxxxxxx, blogging software, development time, img tag, singleton, web standards, ins, attribute, img src, amp. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback.|