Menu

As simple as possible, as complex as necessary

The simplicity of HTML5

4 May 2011

As a web developer I have an almost constant feeling of being overwhelmed by new technological "stuff" to take on board, and I'm sure I'm not alone. New tools, new best practices, new browsers, new devices, new languages, new APIs, new frameworks, new features, new specs etc. seem to appear on a daily basis.

Change, on the other hand, is what makes the web such a fascinating area in which to work. Faced with the sheer quantity and pace though, seeking out simplicity wherever I can is for me a vital counter-weight to the ever growing complexity of the internet.

As the core technology of the web, HTML hasn't actually changed a great deal over the years, but a new version is upon us with a wealth of new features adapting it to the modern web environment.

For now though, the cool new features of HTML5 such as offline storage and SVG rendering interest me less than the small syntactical changes allowing you to write less mark-up.

1. Doctype

Opportunities to simplify come right at the beginning of your HTML file. Instead of something like this:

<!DOCTYPE html
          PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

...the following is all you now need to trigger standards-mode in any browser:

<!DOCTYPE html>

2. Character encoding

Still at the top, we can shorten this:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

...to this:

<meta charset="UTF-8"/>

(Incidentally, I hadn't realised that the charset needs to specified within the first 1024 bytes of the top of the document.)

3. Script/style default types

Moving further down, lots of small chunks can be stripped out as a result of the new spec assuming that unless otherwise specified, scripts and styles are Javascript (ECMAScript actually) and CSS respectively. So:

<script type="text/javascript">var x=1;</script>
<style type="text/css">body{ margin:0 }</style>

...can be reduced to:

<script>var x=1;</script>
<style>body{ margin:0 }</style>

4. Input validation

Several enhancements to form inputs can lead to a more general reduction in your site/app's complexity. The new input types such as email, url and number are not only helpful as a hint to mobile devices to present appropriate keyboards, but also tell the browser to validate the values entered.

For many years now I've generally not bothered with client-side form validation, since as every good developer knows, validation has to be done server-side anyway in case scripting is disabled. This saves writing rules twice, but has the downside of extra server round trips.

The HTML5 input types, along with the new required attribute, mean newer browsers at least will do the work locally, meaning fewer server requests.

5. Javascript replacements

Finally, two of my favourite HTML5 attributes:

Being able to add autofocus to the input in which I want the cursor to start flashing when the page loads means no longer needing specific script such as:

$( "#firstname" ).focus();

You obviously still need a fallback for older browsers, but a generic script that can be included on any page will do, and only kick-in if needed. This is what I'm currently using:

$( document ).ready(function(){
	if( !( "autofocus" in document.createElement( "input" ) ) )
		$( "input[ autofocus ]" ).focus();
});

The placeholder attribute does the job I'd previously assigned to a jQuery plugin: placing "prompt" text inside an input field.

<input type="email" name="email" placeholder="your email address"/>

Again you still need a fallback, but the fact that it can be set to activate based on the semantics of the mark-up is a step forward (the fallback code I'm using for this one is a bit lengthy: I can post it separately if anyone is interested).

Comments

  • Formatting comments: See this list of formatting tags you can use in your comments.
  • Want to paste code? Enclose within <pre><code> tags for syntax higlighting and better formatting and if possible use script. If your code includes "self-closing" tags, such as <cfargument>, you must add an explicit closing tag, otherwise it is likely to be mangled by the Disqus parser.
Back to the top