10 HTML Mistakes that Should be Avoided

10 HTML Mistakes that Should be Avoided

June 1st, 2009

Here is a list of common mistakes in HTML that should be avoided.

HTML Mistake #1 : Same IDs

So why is same IDs a problem? IDs are supposed to be used to identify a unique instance of an element. This is especially important for JavaScript and CSS. If you use the ID as a selector and you have multiple elements with the same ID it can get messy. There are generally a couple of situations where this happens a lot. One being, trying to come up with names for CSS selectors. When you made a style of one ID, and you want to use the same style for something else. Instead of changing it to a class, you just give it the same ID. Another common situation is for back end developers. When they have a loop that creates content, they put an ID in but forget to make each loop iteration to have a unique ID.

BAD:

1 2	<div id="someName">Information</div> <div id="someName">Other information</div>

GOOD:

1 2	<div id="information">Information</div> <div id="otherInfo">Other information</div>

HTML Mistake #2: No Alt Tags

This one is just laziness, or don’t see the importance of having an alt tag. So why should you care if you use alt tags or not? Alt tags main purpose it to give alternate information about the image in case the user can’t see the image. This is especially important for accessibility and SEO.

BAD:

1	<img src="image.jpg" />

GOOD:

1	<img src="image.jpg" alt="image alt tag" />

HTML Mistake #3: Use of onclick

Before Jquery and other JavaScript frameworks, this was popular. JavaScript was a pain in the butt to use it properly. Unfortunately developers have made a habit of using the onclick and haven’t changed their ways. So why shouldn’t they use the onclick attribute? Plain and simple it breaks links. If JavaScript isn’t available the user can’t see what you have to offer. Below is an example of a pop up (Pop ups are bad practice too, but it illustrates how someone might use the onclick attribute)

BAD:

1	<a href="#" onclick="popup();">Click Here</a>

GOOD:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<a href="popup.html" rel="external">Click Here</a>

<script type="text/javascript" charset="utf-8">

    $('a[rel="external"]').click( function() {

        popUp($(this).attr('href'));

        return false;

    });

    function popUp(URL) {

        day = new Date();

        id = day.getTime();

        eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=520,height=420');");

    }

</script>

HTML Mistake #4: Inline Style

The problem is inline styles are just easier to put in than using your stylesheet. Sometimes you just want to test something out, or make a quick change. It’s a pain to use a stylesheet, but its the right way. With inline styles you loose the ability to make global changes. Most of developers time is either updating or fixing code. Why not make it as easy as possible to do so. It will save you a lot of time in the long run.

BAD:

1	<div id="name" style="color:blue;">Text</div>

GOOD:

1
2
3
4
5
6

<div id="name">Text</div>

<style type="text/css" media="screen">

    #name{

        color:blue;

    }

</style>

HTML Mistake #5: Using instead of

So What is the big deal? Why does it matter if you use a or a . On the surface nothing. What happens though if your designer says “Can you make the space between paragraphs half as big?” Using the paragraph tag you know that it’s only being used for paragraphs of text, so you can adjust the padding and go on your marry little way. With the , it is often used to make for line breaks. If you put extra padding on it then you have yourself a problem. So keep it simple, if there is a paragraph of text, use the paragraph tag, that’s what it was made for.

BAD:

1
2
3
4

<p>

    This is a paragraph.&lt;br /&gt;&lt;br /&gt;

    This is another paragraph.

</p>

GOOD:

1 2	<p>This is a paragraph.</p> <p>This is another paragarah.</p>

HTML Mistake #6: Using Depreciated Tags

and <center> are the biggest culprits. It is old style HTML and isn’t recognized as valid code anymore, so don’t use them.

BAD:

1
2
3

<b>Bold Text</b>

<i>Italic Text</i>

<center>Centered Text</center>

GOOD:

1
2
3
4
5
6
7
8

<strong>Bold Text</strong>

<em>Italic Text</em>

<div id="centered">Centered Text</div>

<style type="text/css" media="screen">

    #centered{

        text-align:center;

    }

</style>

HTML Mistake #7: Missing Doctype

The doctype describes what kind of HTML your using. If it’s not there, you don’t know if your code is valid. Plus your browser makes assumptions for you, and it might not workout the way you planned. Its often left off because nobody can remember the long address. Do yourself a favor and create a blank document template. That way you don’t have to remember anything. It’s just there for you.

BAD:

1
2
3
4

<html>

    <head><!--Header Info Here--></head>

    <body><!-- Body Info Here--></body>

</html>

GOOD:

1
2
3
4
5
6

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

    <head><!--Header Info Here--></head>

    <body><!-- Body Info Here--></body>

</html>

HTML Mistake #8: Header as an Image

This usually happens when there is a font that is being used that isn’t a system font. If you really want to use the special font, just make sure that you at least have the text there and use CSS to display the image. Ideally try and use system fonts, but if it’s a no go this is your best bet. Header tags are one of the more important tags for SEO. Google holds the h1 tag in high regard because it usually describes what is in the body text. If you don’t use the header tag, you don’t get the benefit.

BAD:

1	<img src="Header.jpg" alt="Header title" title="Header title" />

GOOD:

1
2
3
4
5
6
7
8
9

<h1 class="Header">Header Title</h1>

<style type="text/css" media="screen">

    h1.Header{

        /*

        Add css to hide text and display background image.

        */

    }

</style>

HTML Mistake #9: Encode Special Characters

Make sure you encode any special characters. If you don’t, some browsers might not be able to handle it, and you’ll end up with a box and a question mark instead of the character you’d like.

BAD:

1	<p>Café & Stuff</p>

GOOD:

1	<p>Café & Stuff</p>

HTML Mistake #10: Don’t Validate HTML

Out of all this mistakes this is probably the biggest because if you validate your HTML it will take care of most of these mistakes. So be sure to validate all of your code.

HTML Validator
CSS Validator

Author: Shawn Categories: Development Best Practices, Front End Development, HTML Tags: best practices, HTML, programming, web development

Comments (10)

Chaitanya

June 3rd, 2009 at 03:40 | #1

Reply | Quote

Really these are the common mistakes. I will try to avoid these.
Thanks
Anup

June 3rd, 2009 at 03:43 | #2

Reply | Quote

Nice Post..
Anks

June 3rd, 2009 at 07:08 | #3

Reply | Quote

Good suggestions man…I like it
SeanJA

June 3rd, 2009 at 08:33 | #4

Reply | Quote

Bad: Using eval. Not a bad list though
frog

June 3rd, 2009 at 10:30 | #5

Reply | Quote

Hi,

I have some observations with your post:

#3:
Using JS frameworks is absolutly not mandatory to do unobstrusive javascript.
http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

#6:
strong and em are not modern versions of and . They bold and italize text in the browsers, but they are there to give sense to the content as a meta-tag should do and not style.
Though, if you want to bold or italize text it’s probably not just style but because it’s important text, but you shouldn’t present em and strong as the new i and b.
#8:
The advice is good but why only for headers?

#9:
I don’t know what browsers you use, but none of the recent ones I know (from Netscape and IE 5 to Chrome) isn’t able to manage charsets.
Though, the important thing is not that much to encode the characters but to specify the charset used (http://www.w3.org/International/O-charset.en.php?changelang=en) and when using an old deprecated useless charset, then to encode the characters.

Though, there is one character which needs to be encoded (even if browsers completely manage that), it’s the ‘&’. It’s supposed to be specially important in URIs like http://www.mydomain.tld/page.php?id=1&page=whatever where the XML specifications tell the browser to consider “&page=whatever” as an encoded character. But as I said, you will never have any problems with this point with any browser (especially if you don’t have a semicolon few characters avec the &).

Frog
admin

June 3rd, 2009 at 15:28 | #6

Reply | Quote

Hi frog thanks for your comment,

#3 – No, I realize you don’t need a framework. I just meant it is easier now that they are around.

#6 – You’re absolute right. I didn’t mean to make that association, I just wanted to show an alternative to depreciated tags.

#8 – You’re right again, it can apply for anything. It’s just most common in headers, that’s why I only referenced them.

#9 – I think it’s just good practice. So when you get to coding for emails, some obscure browser, or some cell phones, you don’t have to worry if it’s encoding properly. It’s better safe than sorry. Naturally you don’t have to do it if you’re only worried about major browsers. But you’re absolute right in your thinking. I didn’t really lay that out in the article.
Sandeep

June 3rd, 2009 at 20:39 | #7

Reply | Quote

Good points for a beginner in HTML.
AndrewBoldman

June 4th, 2009 at 20:34 | #8

Reply | Quote

Hi, cool post. I have been wondering about this topic,so thanks for writing.
Cletus

June 5th, 2009 at 20:37 | #9

Reply | Quote

FYI it’s “deprecated tags” not “depreciated tags”.
admin

June 6th, 2009 at 22:49 | #10

Reply | Quote

Thanks Cletus. Need an article on 10 mistakes of typing. Good catch.