Here are six common HTML5 mistakes to save you from the most common, easily avoidable yet recurrent mistakes when people are coding HTML5.

#1. Missing Doctype

As discussed previously, Doctype should always be the FIRST LINE in any HTML documents, so web browsers know how to process them accordingly. It informs a website visitor’s browser that the document is an HTML document to be parsed and rendered the same way by different browsers, such as Chrome and Firefox.

HTML page without Doctype throws these rendering browsers into Compatibility Mode, also known as quirks mode – the web browsers turn off modern browser features and attempt to render the document based on “best guess.”

Bad Practice:

Every HTML page must have a doctype.

Good Practice:

#2. Missing Character Encoding

If your web page has anything other than the most basic English text, people may not see the correct content you create unless changing the declarations inside your pages to say that the page is encoded in UTF-8

For example, you may intend the text to look like this

but instead, it ends up displaying like this

(source: w3.org/International/questions/qa-what-is-encoding)

The fix is simple by adding meta charset to utf-8 in HTML head section.

In addition, you must ensure that your data is encoded/saved in UTF-8 as previously discussed in MySQL Character Sets & Collation, a highly recommended read if you are developing web-based CRUD with foreign language content.

#3. Missing Closing Tags

Every HTML starts with an open tag and pairs with a close one. However, it is easy to forget because modern browsers are smart enough to figure out missing closing tags and continue to render the rest of the HTML page, which is not always 100% reliable, especially with nested tags.

Bad Practice:

Good Practice:

#4. Using Line Breaks <br> When You Should Use <p>

Historically, it’s common to use <br> for line breaks between elements to create a gap.  It is now considered bad practice because line break tag <br> should not be used to make gaps between sections, instead of splitting the text into separate paragraphs.

Bad Practice:

Good Practice:

#5. Using <b> <i> instead of <strong> and <em>

Coinciding B and I in Microsoft Word, people are customed to use tag names <b> for bold and <i> for italic as a quick presentational fix. However, the problem is that they are purely presentational, not semantic as intended as the content of a <b> element may not always be bold, and that of an i element may not always be italic.

Instead you should use <strong> and <em>.

Bad Practice

Good Practice

#6. Missing ALT Text

Last but not least, all images must have the alt attribute: <img src=”image.gif” alt=”image description”>. If the image cannot be displayed e.g. broken image, the browser will display text of the alt attribute for the image.

While it seems harmless to ignore Alt, this is required since as of HTML 4.  Each image should have an alt text to help people with a visual impairment who will otherwise not know what the image is about.

Besides good for accessibility and remove communication barriers for visually impaired people, adding Alt is also good for SEO, which is another super interesting post for another day.

Bad Practice

Good Pratice

Bonus: Self-closing tag

Often you will encounter HTML elements start tag with a slash immediately before the closing right angle bracket, .e.g <hr/>. This type of tag is called self-closing tag, which indicates the element is to be closed immediately, and has no content, usually a void element, such as <br>, <hr>, and <img>. However, the self-closing tags are NOT required by HTML5 standards. So, it’s perfectly OK to not to have them.