5 Common HTML Mistakes

Tuesday, February 22nd, 2011

5 Common HTML Mistakes

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.

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 <!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.

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 <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″ />.

3. 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.

4. Unencoded HTML Entities

Special characters like & < © é and 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, < 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.

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 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 B2B agency with decades of experience executing its client’s visions. The award-winning company specializes in web design, logo design, branding, marketing campaign, print, UX/UI, video production, commercial photography, advertising, and more. Matcha Design upholds the highest personal standards for excellence and can see things from a unique perspective due to its multicultural background.  The company consistently delivers custom, high-quality, innovative solutions to its clients using technical savvy and endless creativity. For more information, visit MatchaDesign.com.

Related Tags

You Might Also Like