HTML Coding Rules
These are rules to live by. The roots of coding HTML. Learn it, understand it, and apply it.
Rule #1 - What's up Doc?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
The DOCTYPE is used to determine how the browser will render your code. There is one standard for HTML, but not one browser. Having the DOCTYPE in the beginning of all your HTML pages helps keep the browser defined in a specific set of standards.
HTMLTree comment: Most web programmers would argue there exist two sets of standards. Microsoft being the latter. But with MSIE 6 or later, Mircrosoft states it will follow w3 standards if the DOCTYPE exist.
Rule #2 - Quiet Tag Names
<html><head><body>...
All tags should be lowercase. Call it the lazy man rule of coding, but I love this rule. It's one of a handful of rules for being XHTML 1.0 compliant.
Now you're thinking, what the heck?! HTML (w3) standards was a mess, now there's XHTML?? Yes, a bunch of whacked out developers got locked in a room in the year 2000 and came up with XHTML. It's just a hybird of XML and HTML rules.
HTMLTree comment: Since we're on the topic, here's a quick rundown of other XHTML rules...
- Lowercase tag names
- Close all tags (e.g. <br />)
- Attribs must be in quotes (e.g. <table width="20">)
- Attrib shortcuts for 'selected' and 'checked' must be defined (e.g. <input type="checkbox" checked="checked">
- The full XHTML 1.0 list is here. Good luck reading that in one sitting!
Rule #3 - Google Friendly
<title> HTMLTree.com <title/> <meta name="Description" content="foo" /> <meta name="Keyword" content="bar" />
On this planet, google is king. Have you seen their stock prices lately?! If you plan on publishing your webpage on the Internet, then you must not omit the title and meta tags.
Google has a spider that crawls the Internet and indexes certain key words. If it hits your page, then it will surely look in the title and meta tags for information.
HTMLTree comment: On a side note, if you have images in your webpage then don't omit the alt attribute. Not because it follows web accessibility guildelines, but it helps google index your images. Why? Because the spider algorithm can only read text.
In case you're wondering, google spider can be stopped. You will need to create a file, robot.txt, and tell it what files/directories to not index. More information can be found here.
Rule #4 - Killer CSS
<link rel="stylesheet" type="text/css" href="all.css" /> <style type="text/css">@import "noNav4.css";</style>
The browser was created before the rise of CSS. What does this mean? Well, it means that old browsers won't understand your CSS files. In fact some browsers, sorry I mean Netscape 4, will crash at the sight of CSS.
The workaround: Know your enemy.
The first line will work for all browsers. Just keep in mind only CSS level 1 should be in this file. But on the second line, Netscape will ignore it because it does not understand the @import tag.
The idea is to build on top of your CSS code so all browser will render correctly.
HTMLTree comment: This is always a debatable topic. As a rule, you should at least try to accommodate for users on old browsers. I remember using Solaris servers in school and all they had was Netscape 4.7. Yep, that was some ugly rendering.
But in reality, if you look at the browser statistics, you should be mainly concern with MSIE 6/7, Mozilla/Firefox, and Safari. Part of me still loves Opera, but it's dead last on my list when I'm coding HTML.
Here's a quick trick I've learned. All browsers have default settings and that's the reason why MSIE and Mozilla renders each page differently. So in your CSS file, just reset the default settings and you'll have consistency throughout each browser. Add this line to the top of you CSS file:
html, body, ul, ol, li, p,
h1, h2, h3, h4, h5, h6,
form, fieldset, a { margin:0; padding:0; border:0; }
I've seen a few developers using the wildcard * to reset all tags, but that causes the browser to loop through all tags. Definiently not efficient.
Rule #5 - Frames are not invited
<frameset cols="20%, 80%"> <frame src="a.html" /> <frame src="b.html" /> </frameset>
Yep, that's right. I said it. If you're implementing frames for a client, you should be shot. Frame and frameset are ugggg-ly. Maybe it's due to their old age. If you're using frames to avoid multiple instances of the same content, I would suggest newer technologies such as DHTML, ASP/JSP/PHP, Templates, SSI, etc.
HTMLTree comment: Not all frames are designed bad. If you look at Google's gmail web application, you'll notice it's all frames! Even a hidden iframe is used to persist the user's current state.
So what have we learned? Use frames to persist data and perform background execution, but never as frontend. Think of it as a supporting actor/actress. Else, avoid it at all cost.
Rule #6 - Map tags?! Are you serious??
<img src="hotdog.gif" alt="hotdog" usemap="#planetmap" /> <map name="planetmap"> <area shape="rect" coords="0,0,118,28" href="a.html" alt="A" /> </map>
If you never used map tags, then consider yourself lucky. Newer technique such as image slicing or Macromedia Flash has allowed us the flexibility of performing everything this tag has to offer. It was useful in the primitive years, but I believe it should be in the deprecated list.
HTMLTree comment: This is just one person's opinion. If you have some passion for map tags, then please take this rule with a grain of salt. The same applies for applets, but I won't go there... yet.
Rule #7 - Retired Tags
These tags are on wheel chairs! In other words, deprecated. Looking at them bring chills down my spine. Know them, avoid them.
- applet
- basefont
- center
- dir
- font (you should use CSS from now on)
- isindex
- menu
- s and strike
- u
HTMLTree comment: Since we're on the topic, you should also know the deprecated attributes too.
- align
- alink
- background
- bgcolor
- clear
- code
- compact
- color
- border
- hspace and vspace
- link
- noshade
- nowrap
- size
- start
- text
- value
- vlink
- width
Here's the full list of deprecated tags and attributes according to HTML 4.01 specs.