Matcha Design Blog
5 Common HTML Mistakes
Jason Brown - Tuesday, February 22, 2011
Mostly I've been pointing out things that you can do with HTML, CSS, YouTube videos, jQuery, etc. But now I'd like to point out things you should NOT do. Some common mistakes in HTML, and next week I'll probably tackle CSS mistakes. In researching similar articles, I came across several people either claiming that preferential conventions other than their own were mistakes, or even worse, calling perfectly valid best practices mistakes. After seeing those, I've steered clear of anything that falls firmly in the realm of preference, and focused on things that are likely to break or invalidate your code.
Modern HTML documents require a declaration of doctype. The very first line of your document should indicate which version of (X)HTML you're using. It may look like this <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">, but fortunately, if you're using HTML5, it's just <!DOCTYPE html> (case insensitive). Either way, include it, or browsers will render your code as if it's 15 years old.
Missing Character Encoding
Technically, all digitally stored documents have an encoding type, so it's not possible for your document to be missing character encoding. It is however possible for it not to indicate its encoding type. In HTML5, you can use <meta charset="UTF-8" /> (or replace UTF-8 with your document's actual character set), and older versions, use <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
Missing Alt Attributes
This is very common. All <img> tags require the alt attribute. (and the src attribute, but that's not often skipped) The alt attribute specifies text to appear if the image can't be loaded, or if the user has disabled images or stopped loading the page before the image loaded. It's also used by non-graphical agents, such as search engines and screen readers. Finally, if you use Internet Explorer, the alt attribute is used as the title attribute if the title attribute isn't present.
Unencoded HTML Entities
Special characters like & < © é and others need to be encoded to their entity equivalents (& < © é for the previous examples) An especially common mistake is not encoding these values in tag attributes, such as in URLs for links. There are a few reasons these should be encoded this way. In particular, < and > need to be encoded so that they don't look like the start or end of an HTML tag, and & needs to be encoded so it doesn't look like the beginning of another HTML entity. Another issue that applies to more exotic characters is that of document encoding. Some encoding types don't support some characters, and if you need to switch encoding types for some reason, you might run into problems in the conversion if you have raw ® and € characters in your document.
Poorly Formatted Tags
I think this is particularly common among those who learned HTML in its infancy. When I first learned HTML, I was told that best practice was to write all tag and attribute names in uppercase. Nowadays, not only is it not best practice, it's illegal in XHTML and HTML5. Further, attribute values must be surrounded by single- or double-quotes. Double quotes are most common, and I personally recommend using them for readability purposes (and because alt and title attributes may often contain apostrophes), but either one is valid.
Many common mistakes can be avoided by checking your code on the W3C validator. Next week I'll cover common CSS mistakes and I may revisit this topic again in the future.
About Matcha Design
Matcha Design is a full-service creative agency specializing in web design, print, identity, branding, interface design, video production, still photography and motion design. Using our passion for excellence, multi-cultural background, and award winning practices, we consistently provide high-quality, custom, innovative solutions to meet the diverse marketing needs of our clients. For more information, visit www.MatchaDesign.com.