8 of the most common html validation mistakes

→ Are you a new visitor? Please visit the page guidance for new visitors ←

8 of the most common html validation mistakes.

One of the most ignored thing when writing code, is that the developer checks the output of the website from the browser, and it is not giving any attention to html validations. A well written website should have a good html validation.

What is html validation ?

When using a validator to check HTML, XHTML or CSS documents, the validator returns a list of errors found, according to your chosen standard. Make sure you make it a habit to validate all your web pages before publishing.

You can validate your html with a tool built for that. You can use this one in order to validate your code.

A validator is a software program that can check your web pages against the web standards. It can be a useful tool for an HTML user who receives data electronically from a variety of input sources. Syntax errors, such as open tags, extra spaces, or forgotten quotation marks, can cause a Web page to look drastically different than the creator intended, or render correctly in one browser, but not in another.

Let’s see now the eight common mistakes:

1) The lack of doctype declaration.

Wrong: <html>…

Right: <!DOCTYPE html><html>…

The above example is the doctype for HTML5 and tells your browser how to validate your page, by using a set of rules.

2) Closing tags.

Wrong: <div><span>text goes here</div>
Right:
<div><span>text goes here</span></div>

3) Missing “/” character for the elements that should be auto-closing.

Wrong: <image src=”text.jpg” alt=”test” >

Right: <image src=”text.jpg” alt=”test” />

4) Using special characters.

Wrong:
Right:
&euro;

5) Using block type elements inside inline types.

Wrong: <span><p>trolololo</p></span>

6) Lack of the “alt” attribute at images.

Wrong: <image src=”text.jpg” />

Right: <image src=”text.jpg” alt=”test” />

7) Using “width” and “height” in html not in css.

This is a bad practice.

8) Starting an id or a class with a number.

Wrong: <div id=”3″>…
Right: <div id=”id_3″>…

That’s it for now, if I find anything else I’ll be sure to update the list!

Request an article ←