Friday, July 9, 2010

HTML Do's and Don'ts

There have been a few conventions used in HTML through the years that have been overruled by the world wide web consortium and their web standards. There have also been some basic ways to do things that are still taught to beginners but no longer meant W3C standards. Let's go over a few.

One of my big HTML pet peeves is when people use all caps in their tags. At one point, sometime in the nineties, everyone was trying to decide whether to make all HTML tags uppercase or lowercase. Depending on the site you visited it would be one or the other. I actually supported the uppercase people. However, once we all decided that all HTML tags should be lowercase, that's when everyone should have switched. Unfortunately, there are still people coding this way. In fact, I recently had to take a basic web developing class for my BS degree, and the professor used uppercase tags. Don't do this. Use lowercase tags like <html></html> and <h1></h1>. This is the standard. Obey the standard.

Next up in the "don'ts" category is the <center> tag. This is taught in every HTML beginner tutorial and even the W3Schools tutorials use this for beginning HTML. Why teach it if it's frowned upon? I really wish it wasn't frowned upon because there are some browser quirks that almost require the use of it. There may be other ways I'm unaware of so I won't gripe too much. Just to touch on it, however, when you are trying to create a fixed width center aligned page, you can use CSS rules such as:

margin-right: auto; 
margin-left: auto;
width: 960px;

If a div has these CSS rules, it will be a centered column that is 960px wide.....on every browser other than Internet Explorer. I believe there is an Internet Explorer workaround which doesn't require the use of a center tag, but I'll have to research it.... Apparently it is much easier than I thought. Simply using a text-align: center on the body and using the auto margins will do the trick, but I swear I've tried that before and it didn't work. I'll have to test this further. 

Do not use the <center> tag. It will give you validation errors. 

Do use CSS rules to create the center effect.

Finally, one last "don't" to finish off the post. Don't use tables....one of the most convenient layout controls in HTML. I dreaded the day that I switched from tables to heavily styled divs, but it had to happen. Tables can still be used, but they shouldn't be over-used. They shouldn't be used to control your entire page layout anymore. This is a no-no. The main reason for this is that tables can't be easily manipulated through CSS. You won't be able to change the look of the site dramatically, if you use tables. Tables are a lot easier and render well in all browsers, but the preferred method is to use divs with CSS. 

I should mention that all three of these major "don'ts" were things that I didn't want to stop doing. I had to force myself to stop, in order to meet standards, because I'm a strong proponent of open standards. 

No comments:

Post a Comment