Home > Development Best Practices, Front End Development, HTML > 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 <br /> instead of <p>

So What is the big deal? Why does it matter if you use a <p> or a <br />. 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 <br />, 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

<b> <i> 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&eacute; &amp; 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:
Categories: Development Best Practices, Front End Development, HTML
Tags: , , ,



Top