HTML and CSS Reference
2.2 Picking a Markup Style
You want to know what kind of syntax coding style to use.
One of the core changes HTML5 brings is a more relaxed syntax. Thanks to a simplified
DOCTYPE (see Recipe 1.1 ), all coding styles are valid. HTML and XHTML are both
welcome at the party. Some of the changes include:
• Uppercase tag names
• Optional quotes for attributes
• Optional values for attributes
• Optional closed empty elements
So, if you want to write loose and free, without concern for casing, quotes, or attribute
values, you can go forth with confidence; your syntax will validate.
That being said, it is worth noting that valid syntax doesn't necessarily equal good
syntax, and that many developers still tout certain “best practices” that lend clarity to
your code. These best practices include the following suggestions:
• Code your tag names in lowercase. Uppercase is more difficult to read than
lowercase, and distinguishing your code from your content in this manner is
unnecessary: any decent text editor will color-code your HTML document so that
you can visually pick out your tags with ease.
• Enclose all attribute values in quotes. There might be instances in which you need
to use quotes (e.g., if there is more than one value), and doing this universally helps
to eliminate coding errors and leads to a consistent look.
• Close all elements with content. Knowing where a div ends just makes for clearer
code, and doing this consistently enhances clarity and makes your code easier to
Whatever coding style you use, consistency is key: adhering to a strict syntax can help
you more quickly identify errors in your markup.
A major benefit is that a strict syntax is easier to standardize for development teams. A
standard convention can save hours in development time, particularly for large projects
with distributed team members.
Ultimately, though, there is no right or wrong style in HTML5. Simply follow a style
that helps you develop code consistently and troubleshoot efficiently.