Common HTML 5 Mistakes and How to Avoid Them

HTML 5 was clearly a blessing for developers. This new version has allowed developers to make their code more search engine friendly, cut down on HTTP requests and create a better experience for users.

However, despite all it has to offer, developers often have a difficult time figuring out how to implement it properly. When you are getting started with HTML 5, I would try to be careful to avoid making any of these more common mistakes.

The mistakes tend to be especially common for developers who are making the transition over from Flash.

Parsing Rules Become Much More Strict

When you are creating an HTML 5 document, you will need to get used to the fact that parsing rules are much different. In traditional versions of HTML, parsing would abort the script whenever it encountered something it didn’t understand.

Things are little different with HTML5. Rather than simply abort the script, the language has defined methods for handling these problems. Although this is meant to make your life easier, it can be very complicating to deal with if you don’t understand how it works.

One of the changes developers run into is that many of the tags you are used to using are no longer necessary. These include the following: <html>, <head> and <body>. Another difference is that you no longer need to use quotation marks for attributes in your tags.

While it seems that you can easily toss out unnecessary pieces of syntax, I personally wouldn’t recommend it. The problem is that even though it is functionally correct to do so in HTML5, different browsers might not allow you to get away with it. The biggest problem is with Internet Explorer, which fails to render a page correctly if it doesn’t see certain tags. Another issue is that it becomes more difficult to read the code, which often leads to problems reading the syntax later on.

Shortening your code a little may be helpful when writing and may make it easier for search engines to evaluate, but it can create a number of headaches when it comes to debugging later on. You will have to decide whether or not you want to save a few minutes cutting out extraneous code now only to create a couple of hours of grief troubleshooting.

Using New Elements Inappropriately

HTML5 has created nearly 30 new elements for improving the structure and adding more relevant content. While these elements can make your life much more efficient, they can also create a number of different challenges for developers.

To give an example, HTML5 has a new element called aside. This element was created for taking out sidebars and other pieces of content that were only tangentially relevant to the main idea of the document. This was done mostly to allow developers to change formatting and possibly avoid confusing search bots with unrelated content. However, some developers have used it to change the formatting of content within the main body of the post. This creates extra code and some developers have said it has created formatting problems they weren’t expecting.

Another problem that developers run into is assuming that the header element can be used for sectioning content. This is not the case. You will need to include another element for that purpose, such as article, aside, nav or section.

You also do not need to use a header element within your sectioning elements. You can use an <h1> tag inside an article or section element if you are trying to specify a heading.

I have one last word on the header element, since it seems to give developers so much trouble. This is actually something I never thought of myself. I just read a post by Richard Clark at HTML5 Doctor that claimed many people are using the section element in place of <div> tags to change styles.

I must confess I thought this could be done as well when I was just learning HTML5. However, Richard explained that the section element cannot be used as a wrapper. Continue to use <div> tags the same way you did in previous versions of HTML.

Although most of these mistakes aren’t going to be the end of the world, it is possible they can create some functionality problems with some browsers. More likely they are just going to become a time drain, increase your document size and make your documents less SEO friendly.

HTML5 is a great tool which can make your site more compact, powerful and user friendly. However, you will need to make sure you get the gist of the new element and parsing rules if you are going to be able to use it to create powerful and effective websites. Familiarizing yourself with the most common mistakes developers have made is the best way to get the most out of the newest version of HTML.

About Author
Kalen Smith develops Internet marketing products to help entrepreneurs improve their Internet marketing strategy.


These posts are a handout from our Guest Author who works with us occasionally and provide their opinions for our regular visitors on Web-Development & Designing, SEO, CSS, Coding etc. As their details can be marked with their concerning post even we would like to add that out Guest Authors are expert and master of their own sector. If you also desire to be our Guest Author Contact Us at