HTML5 syntax guidelines

Compared to XHTML, HTML5 (just like HTML 4) is a lot more forgiving of the syntax you use. Like I mentioned in HTML 5 syntax, it allows you to mix tag and attribute case as you wish, leave some attribute values unquoted, and leave out closing (and in some cases opening) tags for some elements.

In my opinion this can easily make markup more time-consuming for humans to read and understand. It can also lead to a wider difference in syntax depending on the personal preference of the person creating the markup. I think both of these are bad for maintainability. Fortunately HTML5 doesn’t prevent you from creating markup that is as clear, unambiguous and easy to maintain as XHTML.

Here are three simple guidelines (though I personally prefer to think of them as rules) that I feel will make your markup easier to maintain by other developers:

Use lowercase for all element and attribute names.
Explicitly include all start and end tags, including the optional tags.
Quote all attribute values, use double-quoted syntax, and do not use any whitespace around the equals sign: name="value".

Less ambiguity, less thinking about which tags are optional and less remembering to quote attribute values properly leads to fewer mistakes and easier maintenance.

Posted on November 4, 2010 in HTML 5, Productivity