The 10 most common and avoidable HTML5 mistakes

Learn about the 10 most common and most avoidable HTML5 mistakes and how best to avoid them.

WordPress and other CMS applications have made it a walk in the park to run a website these days, and quite a great one at that. However, when it comes to making a very customized website, or one that's very complex, it's sometimes hard to find a theme that suits your needs. The most powerful way of designing any webpage includes a solid working knowledge of at least a few modern Web technologies. We call them Web technologies because not every Web development component is a programming language. HTML5, for example, is not exactly a programming language. Instead, it is a markup language and hence coding in HTML doesn't make you a programmer. Nonetheless nobody can stop you from feeling like one when you know your way around a few of these Web technologies. The things one can do with these technologies are incredible. 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. Here's a guide to save you from the most common mistakes that people make when they are coding markup with HTML5 or any other prior version of the language. These are some common, easily avoidable yet recurrent mistakes that can bug even a seasoned programmer.

1. Assuming that all the versions of HTML are the same is a big mistake, if not a blunder, simply because they are not the same. For beginners, the first thing that's different is the document type declaration sentence. While you can simply use <!doctype html> for HTML5 document type declaration, XHTML has this as it's document type declaration:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="">

Whatever version you chose to write your markup in, you should know the exact syntax to start with. 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. Therefore it is better advised to use HTML5 since it's simplified and easy to learn.

2. Never forget to close a tag in HTML5 that requires to be closed. While you will easily get away with writing <br> instead of <br/> since both work all the same, not closing the tags that need to be closed will always create headaches in your page. The <head> tag ,if left open to a  <body> tag, will leave the code in the latter useless, because the browser will then assume that the entire program melds together. There can be various such examples; however one does not need to learn it the hard way and should get into the practice of closing every single tag that needs to be closed at the proper place.

3. Assuming that IDEs are a better way of developing a webpage and that the code written in one is not usable in another. This is the farthest you could get from the fact. No webpage development IDE does anything special to the code that you write apart from perhaps DreamWeaver, and as such, code written in one of them is completely portable and compatible with any other IDE. As a beginner though, one should simply use a text editor like Notepad++ and then run the webpage either through a server or a hosting service. 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.

4. Don't stress over text editors. Text editors are not one of the things you need to worry about, since any decent one will get the job done. All you need to do is write your 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.

5. 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. Imported CSS/JavaScript, on the other hand, offer greater flexibility and can help in making large scale changes a relatively easier task. Hence the best practice is to import the files through link tags in the <head> element and external style sheets. This allows for easy tweaking whenever necessary.

6. Comments are an absolute must. It may seem unnecessary and tiresome in the beginning but when websites are developed by collaborating with others, it can be a nightmare if they don't understand what a particular <div> element does. Similarly, eliminating an error can be simplified if the comment points to a particular part that does a particular thing. 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. Be mindful however, not to write more comment than code. Precision and concision are key.

7. Variable, function, class and ID names are important.  They help in understanding the code much in the same way as comments do. 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. All of the collaborating developers will thank you if you use an appropriate name for parts like these.

8. Structure the page correctly with proper tags. A <div> can work the same as a <span> or a <p> tag but it is important to understand which one is to be used where. These are just examples. There are many others like the <link> tag and the <a> tag. Once you know the difference you'll know which one should be used at a particular part of the page.

9. Don't do away with every attribute/value pair. They may seem to be of no importance, but somewhere, they do something., It is important to know what it does. In case you don't, it is good practice to follow the norm and include it. For example, the alt attribute in an <img> tag is important, because the image may fail to load, yet it will tell the user what the image was about. There are various such examples; it is best practice to understand what an attribute/value pair does as we come across more and more of them. The redundant ones can be skipped and a regular update is needed to know which ones have fallen in that category, one such example would be the language attribute in the <script> tag, which has been replaced by the type attribute.

10. Don't try to do the styling with HTML code, simply because that is what CSS is meant to do. HTML5 is a markup language. CSS is the one specific to styling. For example, while you can bold or italicize your words using the <b> and <i> tags, it is a good practice to do so with CSS, namely the font-weight and font-style properties available in CSS. This is applicable to almost any styling that you can do with HTML5 code. The logic is that external style sheets are easier to configure and target specific parts of the webpage. Don't look for unicorns where you should be looking for rabbits.

HTML5 offers the potential for numerous, but easily avoidable mistakes. A good knowledge of what goes where before using anything will take you far. HTML5 is just one aspect of the picture because there are parts in php, CSS and JavaScript that need to be understood and taken care of. HTML5 is the most powerful and advanced version, yet keep yourself informed of the updates and you can easily avoid such common mistakes.

This was last published in January 2015

Dig Deeper on Java Development Tools

Start the conversation

Send me notifications when other members comment.

By submitting you agree to receive email from TechTarget and its partners. If you reside outside of the United States, you consent to having your personal data transferred to and processed in the United States. Privacy

Please create a username to comment.