HTML Tags Errors That Can Make You Feel Embarrassed

Chace Moneith

11 years ago

Life of a developer is not easy and we all know it. They have to code all day and a minor mistake while doing so could lead to a disastrous end. Those who have been into HTML or any other coding language, knows it very well how a minor mistake like forgetting to close an HTML could lead to the end of the world or at least, the end of the project. So, do not let this happens to you or any of your fellow coder. To help you avert this embarrassing situation, here we are going to give you a roundup of some common HTML tag mistakes that developers make over and over again.

Form Tag

It is uncommon of a developer to get confused with the form and table tags given the fact that he has to deal with so many complex codes in his/her short earthy existence. They mistakenly start use the

tag within the tag whereas it should be the other way around.

Wrong Usage – <table><form><tr><td>a table</tr></td></form></table>
Correct usage – <form><table><tr><td>a table</tr></td></table></form>

Nesting of HTML Tag

Since developers have to code all day, they sometimes forget to maintain the opening and closing order of the HTML tags. If you continue to do so, the website will generate thousands and thousands of validation errors and the CSS style may not get applied properly as well.

Wrong usage – <div><tr><td>This is a random text</td></tr></div>
Correct usage – <div><tr><td>This is a random text</div></tr></td>

Missing Out On Alt Tag

When you are adding images in the HTML code, you have to make sure that you are using proper alt tags against the images so that the images get better visibility in the SERP. And please do not use this type of funny alt tag [alt=”picture”] against the images as it would not serve any purpose. So, you need to make sure that you are using proper alt tag that describe the image.

Wrong Use – <img src=”image/chicken.jpg” alt=””>
Correct use – <img src=”image/chicken.jpg” alt=”chicken”>

Block Elements in Inline

I hope I can safely assume that all HTML coders are aware of the fact that the coding elements can either be used either in block or in inline. In fact, whenever you are doing codes, tags are either made in inline or in block by default. Inline elements are used inside block elements whereas block elements contain divs, paragraphs and other elements that are being used in a doc.

So, make sure that when you are using inline elements, make sure that those elements are placed inside the block elements.

Inline Elements – <strong>, <acronym>, <em>, <a>, <span>
Block Elements – <div>, <ul>, <li>, <form>, <table>

Do not Ignore the Header Tag

Sometimes, developers tend to forget the fact that the header tags should be used in order and there are certain rules to be followed. For say, you cannot use multiple H1 tag in a document as this goes against the traditional practice. You can use h2 or h3 tags instead for the same.

Stop Using Marquee or Blink Text

Sorry to say but the truth is if you are still using <blink> or <marquee> elements, you are still living in Medieval age. You need to get rid of these funny HTML elements that make a page look really ridiculous and amateurish. If you really need to catch the attention of the visitors, please use some other alternatives.

Inline CSS

You must have been warned not to use Inline CSS but have you ever wondered why? The reason is simple, when you are using Inline CSS, you have to copy the same elements over and over again on all web pages manually if you wish to see the same effects applied on all the pages. Moreover, as you are adding the CSS code in the HTML pages, it will have adverse impact on the page loading time. So, you will be better off if you can use external CSS that will solve this problem for once and all.

Use of Border

Border attribute is one of those few HTML elements that you should not be messing around. ‘Border’ attributes basically have a presentation impact on the document and therefore, you need to make changes in the CSS to get the desired outcome.