5 HTML Pitfalls, Tips, and Tricks

1. The importance of DOCTYPES
DocType

DocType

Believe it or not, there are many kinds of HTML that you can write. There is HTML5 (still experimental and not final), HTML 4.01 Strict, HTML 4.01 Transitional, HTML 4.01 Frameset, and the same for XHTML. The DOCTYPE specifies which kind of HTML that you’re writing. For example, if your using frames in your document (although that’s not the greatest idea), then you should use the HTML/XHTML “Frameset” Specification. What is the difference between Strict and Transitional Doctypes? In a Transitional Doctype, there are more deprecated tags than HTML Strict. A few of these being things that you would normally specify in CSS (e.g. background color, border, etc.).

2. Comment Your Code

One of the best ways to keep track of your code is to comment it. This is how you insert comments in HTML :

<!–this is my HTML comment–>

You might need to use comments for a variety of reasons. I use comments most whenever I need to close a div. Usually if you have a lot of nested divs in an HTML page, it’ll become hard to keep track of which div closes which div tag. This way it keeps it simple and it increases my productivity. Another way you could possibly use comments are to debug your code. If you want to test something that you feel might not work, or you want to see what would happen if you remove it, you could simply encapsulate the code with comments. If you want to ever get it back, just remove the comment tags.

3. Don’t use HTML for style attributes

If you’re a beginning HTMLer (yes – I know, great use of words), and you are following an old reference, you might be putting style elements using HTML. Don’t EVER do this. an example is here –

<body bgcolor=”#FFF”> {HTML code here}

Here, what you are doing is using HTML to create a background color. This is deprecated. The “good way” replicate the same function here would be to use CSS. CSS is just a way to style different objects in your page. If you wanted to add the background color, here is one way you could do it.

Use the “style” attribute

<body style=”background-color:#FFF;”>
Instead of using the “bgcolor” attribute, this uses the css background-color property. Ideally you would put this in an external css file, but that is out of the scope of this article. I may do another article about CSS later 🙂 .

4. Indent your HTML

Whenever you write HTML code, you should always have some way of organizing it and making sure that you can read it properly without making your eyes fall out. Every single time I haven’t bothered to indent and organize my code I’ve either indented it properly (which took out a good chunk out of my time), or I’ve just went on with it, but it took double as long to find necessary things. Indent indent indent! The picture below shows a good example of indenting (courtesy of themeforest).

Proper Indentation

Proper Indentation

5. ALWAYS validate your code

There is a great HTML validator @ http://validator.w3.org. I highly recommend that you ALWAYS use it when you create HTML. Don’t care about how big or small of a project it is. Why? Because you should always get in the practice of validating your HTML. Even if you don’t fix the mistakes, identify what you are doing wrong generally, and where your strengths and weaknesses are. Also, if your page is behaving weirdly, you may have neglected to close a div or a quote, etc,. and the validator will help you fix that.

Another Tip for validation – if you’re serious about getting a page exactly right, then validate while you’re developing the code. This way you are not faced with a mountain of errors when you are done with coding.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: