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
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.
[code type=html]<div><p><a>This is my Smashing text</p></div></a>[/code]
[code type=html]<div><p><a>This is my Smashing text</a></p></div>[/code]
Mistake No. 2: Improper Use Of 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.
[code type=html]<table><form><tr><td>….. </td></tr></form></table>[/code]
[code type=html]<form><table><tr>…. </tr></table></form>[/code]
Mistake No. 4: Using Block Elements In The Inline Elements
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.
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.
[code type=html]This is my first paragraph
This will be my test description[/code]
<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
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.
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.
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.
[code type=html]<strong>This is my Smashing Heading</strong><p>This is my xyz description.</p>[/code]
[code type=html]<h1>This is my Smashing Heading</h1><p>This is my xyz description.</p>[/code]
Mistake No. 12: Awful Use Of <marquee> Or <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.
Really awesome tips and I will try to follow them always… thanks 🙂
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.
Nasir you have done an excellent job!keep it up
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/
Outstanding Informative Stuff. I agree with all points.
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.
Good one Nasir 😉
The image you used in #4 is correct. The element is allowed to wrap block elements. See below from WC3.
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links). This example shows how this can be used to make an entire advertising block into a link:” — http://dev.w3.org/html5/spec/single-page.html#the-a-element
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.
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.
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.
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 😉
Always easy to forget this stuff when you’re working to a deadline – get post!
thanks for this suggestion 🙂 Really Valuable information
Very useful and handy tips. As a Web Developer, these are very helpful for me. Thanks!
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.
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 🙂