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 theServerSide.com 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.”
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 (News - Alert) 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