January 14, 2015

Avoiding Common HTML5 Coding Mistakes

HTML5 is widely seen as a key to a more interoperative, rich-media-infused World Wide Web, and many developers embrace the technology as the de facto Web language of the future. But as with anything, there are always challenges in learning something new, and HTML5 coding is no exception. Unfortunately, a few errors here and there in coding a webpage can mean hours of combing through lines of eyestrain-inducing characters later.

In an effort to head off such blunders at the pass, Vivek Raman at has given a rundown of the most common coding mistakes made by HTML5 beginners.

“HTML5 offers the potential for numerous, but easily avoidable mistakes,” he said in a blog. “A good knowledge of what goes where before using anything will take you far.”

For one thing, remember that HTML5 is just one aspect of the website development picture, because there are parts in php, CSS (NewsAlert) and JavaScript that need to be understood and taken care of as well. CSS for example should be used for styling, outside of HTML5, for best results, Raman explained. Also, it’s important know the best way to implement these. Using inline CSS or including the JavaScript in the HTML file is a bad idea for a seasoned veteran, let alone a newcomer.

“They will probably work in many cases, but once they start creating trouble it can become a nightmare to identify the problem and eliminate it,” he said. “Imported CSS/JavaScript, on the other hand, offer greater flexibility and can help in making large scale changes a relatively easier task.”

On the HTML5-specific front, a first best practice is to recognize the differences between HTML5 and earlier versions of the mark-up language. For instance, the document type declaration sentence is different for HTML5.

“Whatever version you chose to write your markup in, you should know the exact syntax to start with,” he cautioned. “There may be various tags that work in one version of HTML, while they are not so useful in the others, hence it is important to use only those that actually work with the version you are implementing.”

Also, as a beginner in HTML5, Raman advocates avoiding IDEs, and instead using a text editor like Notepad++.

“IDEs are best avoided if you are a newbie in Website development, because by making things more complex, they only hinder your learning instead of aiding it,” Raman said.

Speaking of text editors, he noted that any decent one will get the job done—simply write the code and save it with the correct extension. “Some text editors like Notepad++ come with syntax highlighting and can facilitate the experience of writing a page, but when it comes to the development, any of the options will do equally well if you are not addicted to the bells and whistles of a particular one,” he noted.

Other tips are simply around being detail-oriented. For instance, make sure to close all of the tags that need to be closed. And, the page should be structured correctly with proper tags. Similarly, coders should ensure that variable, function, class and IDs are named properly.

“For, example, if your block of code does a multiplication of two numbers and you name it Division, you will never be able to correctly edit and update the code in the desired way,” he explained.

And finally, make sure to leave a trail of breadcrumbs when it comes to making one’s intentions known. To that end, Raman suggests not doing away with every attribute/value pair in the code, even though they don’t contribute to the functionality of the page per se.

“For example, the alt attribute in an <img> tag (NewsAlert) is important, because the image may fail to load, yet it will tell the user what the image was about,” he said.

Comments are an absolute must, too.

“When websites are developed by collaborating with others, it can be a nightmare if they don't understand what a particular <div> element does,” he said. “Otherwise, you may have to sit on a reading mission through a thousand lines of code and even then you might not spot the problem.”

Overall, good HTML5 coding practices boil down to being precise, careful and communicative. And, embracing the fact that everyone starts out as a newbie.

“The things one can do with these technologies are incredible,” Raman said. “Designing a good looking, functional, interactive Website is anyone's dream. Nothing beats that feeling. However, everyone has to begin somewhere, and it's a fact that beginners make mistakes.” 

Edited by Maurice Nagle


HTML 5 Demos and Examples

HTML 5 experimentation and demos I've hacked together. Click on the browser support icon or the technology tag to filter the demos.... Learn More

HTML5 GAMES is the largest and most comprehensive directory of HTML5 games on the internet... Learn More

The HTML5 test

How well does your browser support HTML5?... Learn More

Working Draft (WHATWG)

This is the Editor’s Draft from WHATWG. You can use it online or print the available PDF version... Learn More

HTML5 Flip Book

Free jQuery and HTML5 flip book maker for PDF to online page turning book conversion... Learn More