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.

Wrong use:

[code type=html]<div><p><a>This is my Smashing text</p></div></a>[/code]

Correct Use:

[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.

Wrong use:

[code type=html]<table><form><tr><td>….. </td></tr></form></table>[/code]

Correct Use:

[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.

Wrong use:

[code type=html][/code]

Correct Use:

[code type=html][/code]

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:

[code type=html]This is my first paragraph
<br />
<br />
<br />

This will be my test description[/code]

Correct Use:

[code type=html]

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

[/code]

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.

Wrong use:

[code type=html]

[/code]

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:

[code type=html][/code]

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:

[code type=html]<strong>This is my Smashing Heading</strong><p>This is my xyz description.</p>[/code]

Correct Use:

[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.