Hey, I like to make web applications, so I like to learn about how one should develop sites, or tips about how one shouldn’t.

Recently I’ve been seeing an image guide (on the social news sites) telling me how to develop html, and I would like to point out that half of it is wrong and bad practice.

I’m the first one to say that html is a forgiving language, or that strict practices and procedure following can get in the way in creativity or are sometimes just boring to follow up on, but at least you should know what the rules are before you break them.

There are 12 rules in the guide, but 6 of them are not good:

1. Tidy Head Section. This rule isn’t that bad. If you want speed in your pages though, move script tags out of the head into the body, as low down on the page as possible. This is recommended by yahoo’s excellent performance rules, if you can get away with no script tags in the head, you should probably do it. An additional point in their head section: I feel absolute paths are cleaner than relative paths.
2. Put an id on your body tag This isn’t beautiful html, this is just a trick you can do if you want all your styles in a single file. I’ve tried this method but after using it, I feel that separating css into multiple files for different page types is cleaner. A long css file with styles for every page quickly becomes very disorganized. If you need to share css styles between pages, include multiple css pages in a script.
3. Semantically clean menu The author says semantically clean menu, then wraps his menu in a useless div. The div doesn’t add anything, get rid of it. Again here are the relative urls :( – Also – strictly speaking ‘right’ and ‘left’ are not semantic. You may decide later in css you wish to move your ‘right’ news box over to the left, so just calling it ‘news box’ is more beautiful-er.
4. Important content first This doesn’t make any sense, the main content is below what is actually being pointed to. Side-boxes and navbars should come after the meat of the page, if possible. In my mind though this is more for SEO than for cleanliness, Google likes text that is high up on the page.
5. No styling! The guide asks authors to follow xhtml guidelines to separate style into css files. But higher up in the page, the ‘onfocus’ element is used, which is recommended to be separated into a javascript file. It’s also a very annoying onfocus script if you look at it.
6. Content content content Use of codes like © for is not valid XML/XHTML, which goes against the doctype at the top. The use of HTML entities has been deprecated in favor of numbered entities. In the future you should replace html entities like   with xml numbered entities like  , for the copyright symbol © you should use ©

Anyways that’s about it.

Another post that I’d like to do if these developer type posts aren’t too boring is one on HTTP basics, particularly which caching directives you should be using. That’s something that’s pretty rarely brought up, but makes a big difference in page load times, user experience and server costs.