Ten Steps to Valid HTML
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!
- Javascript events are lowercase. How many times have you followed standard coding conventions and written your onclick handler as an onClick handler? Probably too many to tell. Just make it lowercase, and that “there is no attribute “onClick”” will go away!
- 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.
- Some things need a type, javascript for example. If you forget the type=”text/javascript” from your script declaration, or the type=”text/css” from your stylesheet, it won’t validate, for obvious reasons.
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. |
Thx. Did not understand why “OnClick” was not valid. Thanks for the tips
Good article.
Thank god, dreamweaver takes care of some of them
I agree with those above – you are my saviour!! One part of my site looked horrible and I didn’t get it – turns out it was one simple problem; closing the img tags!!! Never would have guessed it in a million years. Thanks for your help; very relevant article even in late 2008
Great list! Almost ALL applied to me; thank you
Still a great article in 2007! Thanks for helping me make a quick validation fix.
Thank you!!!
[...] Elliott Back’s 10 Steps to Valid HTML explains that the ads start out with an ampersand looking like this: &. The browser changes it to &. The ampersand breaks validation – so to fix it, just change it back. This can be work, but if you are determined to have valid HTML/XHTML, then a quick search and replace will fix this. [...]
[...] I found this piece of extra learning at this site here from Elliot Back. He describes, in good to understand language, what the basics are for valid XHTML. I can sincerely recommend it to you. [...]
Oh Jesus can I have your babies!? Thank you for this article.
It’s 4am and trouble shooting went to sleep 3 hours ago. Your article will let me get some sleep!
This make me want to validate my code more like I know I should. =)
Love & Kisses,
Thanks for all the fish
Great article!
I often forgot to not put lists inside P tags!
Found the tips through google. Thanks, they really helped! (Slowly working my way through 170+ validation errors).
I always have to make an effort to remember
>and<– especially when displaying code in WP posts.Ugh – ampersand lt semicolon, ampersand gt semicolon…