HTML5 & xHTML Coding Style

HTML5/xHTML Validation

XHTML, the merging of HTML into the XML fold, requires a strict coding structure than HTML, and xHTML validation helps you ensure your document is “well-formed”. Also, browsers load the page much faster if it doesn’t have to figure out what you meant versus what you gave it to display.

HTML5 has taken this one step further, or backwards; depending on your point of view.

Tag Formation

In xHTML & HTML5, documents must be “well-formed,” a concept used by XML. Essentially this means that all elements must “closed.” This can be achieved by either a mating closing tag

<div> ... </div>

or a special form I term “self closing”.

<img src="path-to-file" />

[Notice the space before the slash, though not required, this helps older browsers understand the tag and it helps the human read it better.]

These “self closing” tags are not required in HTML5, but we feel it improves readability of code.

Tag Nesting

Another requirement of HTML5/xHTML is proper nesting: The first tag opened must be the last tag closed.

This is an example of an <i><em>improper</i> nested set of tags</em>

This is an example of a <em><i>proper</i> nested set of tags</em>

Case Sensitivity

xHTML is case-sensitive, all tags and attributes must be lower case.
HTML5 is not case-sensitive but we recommend all tags and attributes must be lower case to improve readability.

Attribute Quoting

Attributes Must be Quoted and Complete.

HTML5/xHTML does not support attribute minimization, as did HTML. The traditional attribute “checked” must be changed into its proper HTML5/xHTML format of ‘checked=“checked”’.

Remember: attributes MUST be double quoted.

File Format

Browsers prefer lines of 255 characters or less and many HTML e-mail programs raise an overflow virus warning flag if your lines are too long.

A “Best Practice” is stick with 200 characters or less for META tags, and 78 character for lines of HTML5/xHTML code.

See PHP File Formatting for a few more details.

Visual Styles

There are very few things I feel dogmatic about, but this is one of them:

Never place style tags nor inline CSS in HTML5/xHTML files. That is what Style Sheets are for.

Properly designed HTML5/xHTML should not have any visual direction coded into them. HTML5/xHTML documents are purely for content and structure.

Javascript

The jury is still out on this one, but I’m leaning more toward loading external Javascript files at the bottom of the page, thus allowing the display to load faster. But this breaks HTML5/xHTML validation; not that I have any real problem with that in some cases.

External JS scripts are preferred, as they can be used across multiple pages.

The attribute is not longer used.

The is not longer used.

The <script> tag no longer has the “language” nor the “type” attributes. The <script> block must be encased in a CDATA block per XML requirements. This is so older browsers don’t barf on it, place the CDATA block within a ‘comment’.

<script>
/* <![CDATA[ */
    function myFunction ($parameter)
    {
        // This does what it does!
    }
/* ]]> */
</script>

Also note the DOLLAR symbol on the function parameter. Yes, I know this is not Perl or PHP, but JavaScript allows this. I find it a lot easier to read the Javascript code when following the guidelines as laid out for the PHP section.

The DOLLAR prefix is completely optional for JavaScript variable names.

See the PHP Function and Method Declaration for more details.