10 Common HTML Tag Mistakes to Refrain From

0 Flares Twitter 0 Facebook 0 Google+ 0 StumbleUpon 0 Pin It Share 0 0 Flares ×

Each and every language has a set of guidelines and policies that are required to be followed while working on it. HTML is no indifferent to this procedure. Developers working on this language have to be really careful with the policies as even the smallest mistake might get spotted and termed as HTML errors.

Avoiding them is a must for a robust solution. There are some common mistakes that are usually committed by developers either due to ignorance or due to haste. Below are listed 10 such common mistakes that generally occur, together with their solutions. The list will help bail you out of the scenario and make coding easier for you.

1. Improper Nesting of HTML Tags

A proper and synchronized nesting of HTML tags is of utmost importance for decent functioning of the code. Once a tag is opened, the order of its closing has to be in the reverse order, as to how it was opened. Novice developers tend to bypass this practical scenario and give these checks a miss. This can lead to situations where validation errors can occur and also the desired and proper style might not be adhered to. So, before moving ahead, check the proper syntax.

Wrong use:
<div><p><a>This is my BPTH text</p></div></a>

Correct Use:
<div><p><a>This is my BPTH text</a></p></div>

2. Wrong Use of Form Tags

It is sometimes confusing while working with forms and table elements. Many developers have the tendency to start with the table property first. This is due to the utter confusion as to which HTML tag to be used first. For them, underlined is the correct procedure.

Wrong use:
<table><form><tr><td>….. </td></tr></form></table>

Correct Use:
<form><table><tr>…. </tr></table></form>

3. Discordant Use of Lists

If you want to display the items on the web page in a more flexible fashion, then proper use of OL and UL tags should always be made. They follow a synchronized pattern of information display, which can be very beneficial. Avoiding line-breaks in the code will also be beneficial as search engines recognize list tags.

4. Exclusion of the ALT Attribute

The alt attribute is generally used in HTML documents to specify the alternative text for an image. The attribute helps search engines and people who use screen readers or have low-speed connections understand the purpose of an image. Using the alt attribute for keyword stuffing must be avoided as it not only affects your user’s experience but also your search engine rankings.

5. Improper Use of Codes for Bold and Italics

Codes for bold and italics in a syntax are termed as presentation tags, where <b> is used for bold and <i> is used for italics, usually. For styling with CSS, it would be much better to use different font styles. There are tags such as <strong> and <em> that can be used to lay stress at a proper place. The functions are similar to those of the previous mentioned ones. The only advantage: it makes the entire syntax neat and clean

6. Incorporation of Block Elements in the Inline Elements

Those familiar with using HTML know the fact that the elements of this language are displayed in block or in inline format by default. The block elements like divs and paragraphs contribute in making the structure of the document. The inline elements like, anchor and span tags whereas, are placed in such blocks. Thus, the inline elements should be placed within the blocks and not anywhere you please.

7. Making Use of Inline Styling

Inline styling is not considered to be good, as both CSS and HTML are about structuring and styling of documents, in a separate fashion. Thus, it will be improper to make use of the styling attributes in the HTML document directly. To make sure that this happens, it is advised to incorporate the styles within the style sheet.

8. Inclusion and Exclusion of the Borders

The border attribute is basically present to lend an extra presentation effect. Thereby, it must be altered with CSS, without bothering for the fact that it might be interrupting the default border.

Wrong use:
<img src=”smiley.gif” alt=”” border=”0″ />

Correct way is by defining it via style sheets.

9. Incorporating Unnecessary Line Breaks

To give a line break in the paragraph and start the next sentence from the next line the
tag must be used at least once in a single line. A common tendency is to insert line breaks in between elements, which is not the proper way to carry out things. Use it wherever necessary and for moving to the next line.

Wrong use:

This is my first paragraph
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
This will be my test description

Correct Use:

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

10. Failing to Incorporate Header Tags

Header tags are basically used to spread a document and make sections in it together with the headings. and tags are mainly used for this purpose and there might be a requirement of placing the header at the right of the page. Thus it would be better to use the tags in the 1-6 order.

Wrong use:
<strong>This is my BPTH Heading</strong><p>This is my abc description.</p>

Correct Use:
<h1>This is my BPTH Heading</h1><p>This is my abc description.</p>

 The Lowdown

Making mistakes in the HTML and CSS file coding is a common scenario either due to carelessness or lack of experience. As a developer, it is very important to render a clean and neat code as it not only saves your time, but also hones your skills in completing a code easily and in a better way. The above-mentioned mistakes should help you out in managing your code.

About author View all posts


Andrew Jhonson is founder of BestPSDtoHTML. He loves creative designs, photography, paintings and everything about innovation. As an Internet entrepreneur, he constantly tries to develop new ways to bring content faster and closer to the end users in a more streamlined way. His main focus lies in inspiring all the designers and develpers with all new ideas through his blogs.

Leave a Reply

Your email address will not be published. Required fields are marked *