Syntax Style for HTML5 Markup: some best practice recommendations

The people involved in the WaSP InterACT Curriculum are organizing to do some updates to the free online course materials the curriculum provides to web educators (and self-taught learners). This is part of an ongoing effort to keep the InterACT web standards based curriculum up to date.

In preparing to update the Web Design 1 course to bring in some material about HTML5, I surveyed the members of the WaSP education task force and others involved in InterACT as to what style of syntax we should recommend as a best practice for HTML5.

As you may know, the options for syntax style in HTML5 are wide open. Tags can be upper case, lower case, or camel case. Attribute values can be quoted, or not quoted. Empty elements can have a closing forward slash, or not. Other elements can be closed, or not.

I didn’t want to add modules for HTML5 to the Web Design 1 curriculum that simply said, “Do whatever you feel like in terms of syntax,” although that is pretty much what HTML5 allows. And I didn’t want to write something that was merely “Virginia’s ideas on HTML5 syntax.”

So, the survey of the WaSP education task force members went out. Consensus was reached. Here are the recommendations for HTML5 syntax. This is how we think it should be taught and written.

  • Use lower case for tags
  • Quote attribute values
  • Don’t use the XML style trailing forward slash on empty elements (e.g., <br> not <br />
  • Close all non-empty elements (e.g., <p></p> and <li></li> etc.)

What we’re advocating as a best practice is using syntax associated with strict doctypes in past iterations of (X)HTML. However, HTML5 is not XHTML, so there’s no need to retain the trailing forward slash on empty elements.

Here’s your chance to add your voice to the mix. Are there any reasons why this style of syntax should not be used as a best practice for HTML5? Can you add anything else that you think is important that hasn’t been included?

Leave a Reply