HTML5 Code Formatting Syntax: A Recommendation

In the book I note that HTML5 is extremely forgiving concerning how you may structure the code. You may include or omit end tags, use uppercase or lowercase elements and attributes, quote or not quote attribute values, and more.

That said, I also note that my recommendation is to code HTML5 in either one of these two ways:

Use all lowercase for code, double-quote all attribute values, always use an element's end tag if it has one, and don't terminate elements that don't have an end tag (that is, empty or void elements).
Example: <img src="photo.jpg" width="325" height="115">
Or, use XHTML syntax, which is exactly the same as the previous approach, except you do terminate empty elements.
Example: <img src="photo.jpg" width="325" height="115" />

In both cases, the p element has its close tag, , which is in keeping with the recommendation to "always use an element's end tag if it has one." As I mentioned, the only difference between the two approaches is the treatment of empty elements. So, in the examples, the img element is not terminated in the first approach, and it is in the second.

My preference is the second approach and it required zero changes in my coding habits since I've been coding XHTML for years. The code examples in the book conform to this approach as well, with just a few exceptions to demonstrate the alternative.

Why do I recommend following one of these formats? First, although browser vendors are instructed by HTML5 how to accommodate a variety of coding styles and errors, it's possible they won't account for every case, simply by accident. However, you can be certain (as certain as certain can be given the wild Web) your code will work with one of those formats unless a browser vendor has made a big oversight, in which case the element probably won't work no matter how you code it.

Second, professional and savvy amateur developers and designers have been coding like this (especially the second format) for the better part of the past decade as a result of the Web standards movement. The vast majority are unlikely to change their ways, so all signs point to the two ways I described becoming the de facto standard approaches for HTML5.

If you're purely an occasional hobbyist, then feel free to code as you like (though I'd still recommend choosing one of the approaches I outlined). However, if you have professional aspirations, do occasional freelance projects as a hobby, or are already a professional, I strongly recommend you adopt one of the approaches I outlined if you haven't already.