12 Evil HTML Tag Mistakes You Really Should Avoid

All those who work on HTML should be really considerate and careful about the HTML policies.  This is because they catch up the most minor mistakes in the code and they name them as the HTML mistakes. If you want to avoid these errors then we are here to help you. Below, we have discussed some of the most common and ignored mistakes while coding committed by people along with their solutions. These tips will prove to be a lot helpful for all those who work on HTML.

 

Mistake No. 1: Wrong nesting of HTML tags

Wrong nesting of HTML tags

Proper closing of HTML tags is important. HTML Tags must be close with the opposite order than of opened. Newbies normally don’t bother to check about the tags proper closing. You will get validation errors and the proper style may also not get applied. So be careful about this violation.

Wrong use:

1
<div><p><a>This is my Smashing text</p></div></a>

Correct Use:

1
<div><p><a>This is my Smashing text</a></p></div>

 

Mistake No. 2: Improper Use Of Lists

Improper Use Of html Lists

The OL and UL tags should always be used because they can help in displaying the items on the web page in a versatile way. This can give plenty of other benefits too.  List tags can be a lot useful in displaying the information in a proper way.  It would be better for you to avoid using line breaks in the code. Search engines also recognize list tags, So try using the standard HTML tags rather falling in mad hacks.

 

Mistake No. 3:  Improper use of form tags

A lot of us get confused while working with forms and table elements. Many start the table property first because the confusion of what HTML tag to start first, the table one or the form. Here’s a quick guide.

Wrong use:

1
<table><form><tr><td>..... </td></tr></form></table>

Correct Use:

1
<form><table><tr>.... </tr></table></form>

 

Mistake No. 4: Using Block Elements In The Inline Elements

inline‑block.

All those who use HTML would know this well that its elements can either be displayed in inline or in block.  Each tag made by the programmer is by default created in block or the inline element. The block elements include paragraphs as well as divisions in the document whereas the inline elements are placed inside the block elements. Their structure goes with the structure of the document.  Hence, when using the inline elements, make sure they are placed inside the block elements and no other place.

Some HTML block element: <div>, <h1>…<h6>, <p>, <ul>, <ol>, <dl>, <table>, <blockquote>, <form>

Some HTML inline elements: <span>, <a>, <strong>, <em>, <img />, <abbr>, <acronym>

 

Mistake No. 5: Excluding The ALT Attribute

When you are dealing with images and you want to make them displayed on the web page, then you must use the ALT attribute. This is necessary as users would able to determine the displayed image easily and they would know whether they are browsing on a slow connection or a screen reader.  This attribute should properly describe the displayed image.  Don’t add alt= “image”.  Use alt=“’’’ if the image is just used for decoration.

Wrong use:

1
<img src="smiley.gif" alt="" />

Correct Use:

1
<img src="smiley.gif" alt="Smiley face" width="42" height="42" />

 

Mistake No. 6: Use Of Wrong Codes For Bolding And Italicizing

Though usually <b> is used for bolding and <i> is used for italicizing but they are semantically known as the presentational tags. Hence, it would be better to use various font styles with the CSS styles.  If the text has to be emphasizing at a place then it for that tags such as <strong> and <em> can be used. They would do the same job that <b> and <i> do. An advantage of using them would be that they will look nicer.

 

Mistake No. 7: Use Of Unnecessary Line Breaks

The <br/> tag must be used once in a single line for giving a line break in the paragraph and start the next sentence from the next line. What many people do is that they insert line breaks in between the elements.  This is not right. They must be used for moving onto the next line only or when necessary.

Wrong use:

1
2
3
4
5
6
This is my first paragraph
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;

This will be my test description

Correct Use:

1
2
<p>This is my first paragraph</p>
<p>This will be my test description</p>

 

Mistake No. 8:  Use Of The Incorrect Strike-through Tags

Incorrect Strikethrough Tags

Previously <strike> and <s> tags were allowed to make amendments in the web text. But now they are known as the deprecated tags.  New tags have been introduced in their place i.e. <ins> and <del>.  They can be used for inserting and deleting text from the web page or document.

 

Mistake No. 9:  Use Of Inline Styling

You would have heard this many times that inline styling isn’t good.  Have you ever wondered why it is so? That’s because CSS and semantic HTML are all about styling and structuring documents separately and hence it would not be right to use styling in the HTML document directly.  That is why it is always advised to keep the styles within the style sheet.

Wrong use:

1
<p style="font-size: 14px;font-weight: bol">

Proper way is via the style sheet as this is also a presentational thing, and CSS serve it in better way.

 

Mistake No. 10:  Including And Excluding The Borders

Keep this thing in mind that the border attribute is only a presentational effect.  Therefore, it must be altered with CSS. Don’t bother even if it is interrupting the border made by default.

Wrong use:

1
<img src="smiley.gif" alt="" border="0" />

Correct way is by defining it via style sheets.

 

Mistake No. 11: Ignoring The Header Tags

The header tags are used for spreading a document and making sections in it with headings.  Usually <h1> and <h6> tags are used for this purpose.  Sometimes, the header needs to be placed in at the right of the page.  It totally depends on how you want the header to appear.  It would be better if you use them in 1-6 order.

Wrong use:

1
<strong>This is my Smashing Heading</strong><p>This is my xyz description.</p>

Correct Use:

1
<h1>This is my Smashing Heading</h1><p>This is my xyz description.</p>

 

Mistake No. 12: Awful Use Of <marquee> Or <blink>

<marquee> And <blink>

It must be said that the <marquee> and the <blink> tags are just another way to make the web page look ugly.  If you have got something for which you need to draw the attention to the user then it would be better to use some alternatives rather than flashing the text up. It certainly becomes really displeasing.


About the author

With a passion for Knowledge, Smashinghub has been created to explore things like Free Resources For Designers, Photographers, Web Developers and Inspiration.

Twitter Visit author website

Subscribe to Smashing Hub


17 Comments

  1. Really awesome tips and I will try to follow them always… thanks :)

  2. ilija says:

    You are totally right!
    And this is very great and informative article.
    And the first one is very important because when you come back after couple months to add something to site having it in ‘ugly’ way is very hard to find in anything..So again Great post.

  3. umair says:

    Nasir you have done an excellent job!keep it up

  4. Nasir, good points about proper html structure. Correctly nested tags and semantically structured html cannot be overstated. There are many reasons why. Besides the “un”forgiveness of certain browsers that result in broken Web page layouts, it’s important to stress that search engines such as Google relies on clean, properly structured html to determine the content elements of a page, i.e. Title (Page Title), H1 (Main Heading – never use more than once on a page), H2 (Secondary Heading), P (Paragraph), etc. And with HTML5, it’s even more important to use tags properly. Here is a tool for checking html structure: http://chrispederick.com/work/web-developer/

  5. Mudassir says:

    Outstanding Informative Stuff. I agree with all points.

  6. Paul says:

    Using block elements inside inline elements is one of the most common mistakes I’ve seen. Is easy to spot these mistakes in IE as it would always break it.

    • Nasir says:

      Thanks Christian for talking logical!

      With what you’re referring is the latest trend in HTML5 only which allows you to wrap around all stuff.

      But I believe, in above practice my consideration was about xhtml validation and below HTML5 versions.

      And important to mention, even if some practices do pass w3 validation, but can’t be a personal diary for good coder.

  7. kate says:

    Points 1, 3 and 4 are the same thing. Point 9 isn’t technically a mistake and is valid markup. Not good practise but still allowed.

    • Nasir says:

      Yeah 1 and 3 mistakes look same, but was not actually. Forms usage is different with tables even if you close them in opposite order.

      About No.4: You mis-stood that one.

      Lastly with mistakes we meant bad practices. Even if some ways are w3 valid, but not a good practices to go with.

      • Clorr says:

        Hmm, I remember when I was using point 3. It was mainly because of a bug in IE, where form elements where having margins, and placing them inside the table was a trick to avoid this… Hopefully, it’s no more a problem ;-)

  8. Always easy to forget this stuff when you’re working to a deadline – get post!

  9. Mahesh Verma says:

    thanks for this suggestion :) Really Valuable information

  10. Saleem says:

    Very useful and handy tips. As a Web Developer, these are very helpful for me. Thanks!

  11. Bharat says:

    Great writeup Nasir. Today i have learned something useful stuff related to HTML. Most of the coders make these mistakes unknowingly and they to focus while creating something. Thank You.

  12. Majid says:

    nice share. i agree with all the points. specially the last one, things have changed now. people with good sense normally seen avoiding marquees etc . but nice article :)