5 Horrible Mistakes You’re Making With HTML5

It is two years since HTML5 was officialized by W3C as the next generation language for development of websites. It is a fact that this language was developed to solve problems that web developers were having with the initial versions of HTML such as XHTML and HTML4.

Truth be told—HTML5 has solved many of the web-related problems that initial versions of HTML couldn’t solve. It is true that many excellent HTML5-based applications and games are used by millions of users. Therefore, the success of HTML5 isn’t in doubt.

However, a majority of web developers continue to make mistakes when developing HTML5 based applications. This primer discusses some of the horrible mistakes web developer make while developing HTML5 based applications. Knowing some of the common mistakes made in HTML5 will help you to become an efficient HTML5 web developer.

Here are 5 horrible mistakes that you may be making with HTML5:

#1: Wrong MIME Type Declaration

MIME— Multipurpose Internet Mail Extension—was originally developed for the SMTP (Simple Mail Transfer Protocol) that describes the email content. However, modern browsers use the MIME type to determine the type of media file and plan on actions to do with the content. In other words, the MIME type declaration helps the browser to find out ways on how to display the files that are not compatible with HTML format.

Therefore, correctly declaring the MIME type is significant for getting rid of creepy characters on your web page. To declare the MIME type correctly, you type the below statement between the <head> and </head> elements:

<meta https-equiv= “Content-Type” content=”text/HTML; charset=utf-8″/>

#2: Improper specification of the title attribute for links

The primary function of the title attribute is to provide extra information to customers about the web page that’s being linked to. If used properly, the title attribute can promote usability of the website, its accessibility and the many SEO attributes. This is because it can determine whether the link is bad or good.

If you want to improve the SEO capabilities, adhere to the following with regard to title attributes for links:

* Use the correct keywords that are related to the web page which you’re linking to.

* Always add the title which should link to the keywords that are related to the web page.

Here’s an example of using the title attribute incorrectly:

To learn more about our products, click <a href= “http://www.capitalnumbers.com/products”>here</a>.

Here’s the better way:

Visit

<a href= “http://www.capitalnumbers.com” title= “The Premier Web Development Company”>Capital Numbers</a>

to learn more about our products.

#3: Leaving out the image alt attribute

The Alt attribute provides an alternative information to users who have disabled the images in their browsers. It’s also relevant for user agents that can’t view images on their browsers. Forgetting to associate each image with the alt attribute results in decreased accessibility for such a website. If you use the alt attribute correctly with your images, you not only make the images easier to read and interpret, but also search engine optimization for such a website.

Here’s an example of a wrongly specified alt attribute:

<img src= “http://www.capitalnumbers.com/images/ourlogo.jpeg” alt= “Our Logo”/>

In the above example, the alt attribute doesn’t provide explanations what the image is about. The image description should include a tooltip or any short information that’s displayed in the browser. Here’s an example:

<img src= “http://www.capitalnumbers.com/images/ourlogo.jpeg” alt= “Our Logo” title= “The Ultimate Web Developer”/>

Hovering the mouse over the image when you use the above code displays the title attribute of the image in your browser.

#4: Forgetting to close HTML tags that requires closing in HTML5

While you can easily get away with <br> instead of the <br/>, it is not advisable to leave the tags open in HTML5. For instance, if you leave the <head> tag open to the <body> tag, the code in <body> section will be rendered useless since the browser will assume that the entire HTML code melds together. Therefore, always ensure that you’ve closed the tag appropriately.

#5: Using the Inline CSS or including JavaScript file in the HTML code

Using the inline CSS or including JavaScript file in your HTML5 code will create a code that’s not only difficult to debug—in case there are problems with it—or make it very difficult to scale up the website. Thus, the best practice is to always import the CSS and JavaScript files through the link tags in the <head> element.