5 Common HTML Mistakes

Matcha Design - 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, 和 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, 和 focused on things that are likely to break or invalidate your code.

  1. Missing Doctype

    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 , but fortunately, if you're using HTML5, it's just (case insensitive). Either way, include it, or browsers will render your code as if it's 15 years old.

  2. 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  (or replace UTF-8 with your document's actual character set), 和 older versions, use .

  3. Missing Alt Attributes

    This is very common. All "img" tags require the alt attribute. (和 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 和 screen readers. Finally, if you use Internet Explorer, the alt attribute is used as the title attribute if the title attribute isn't present.

  4. Unencoded HTML Entities

    Special characters like & < © é 和 others need to be encoded to their entity equivalents (&amp; &lt; &copy; &eacute; 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, < 和 > need to be encoded so that they don't look like the start or end of an HTML tag, 和 & 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, 和 if you need to switch encoding types for some reason, you might run into problems in the conversion if you have raw ® 和 € characters in your document.

  5. 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 和 attribute names in uppercase. Nowadays, not only is it not best practice, it's illegal in XHTML 和 HTML5. Further, attribute values must be surrounded by single- or double-quotes. Double quotes are most common, 和 I personally recommend using them for readability purposes (和 because alt 和 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 和 I may revisit this topic again in the future.

About Matcha Design
Matcha Design is a full-service creative agency specializing in web designprintidentitybr和inginterface designvideo productionstill photography 和 motion design. Using our passion for excellence, multi-cultural background, 和 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.