HTML 5 in 5 minutes

HTML 5 is quite a hot topic at the moment, with good reason. HTML 5 is the first major update to HTML in over a decade. In the decade there was XHTML. XHTML was too limiting and very few sites actually were XML documents because they did not render in all browsers. XHTML did teach us a lot of good disciplines which should be followed when developing with HTML 5. When I refer to HTML 5, I am treating it in the broadest sense and including the new JS APIs, CSS3 etc in my descriptions.

The HTML 5 spec is currently being revised by W3C at the moment. It is to replace HTML 4 and XHTML. HTML 5 includes new APIs and features to reflect the modern browsing experience such as:

  • video/audio – without plugins,
  • geolocation – pin point and share your location,
  • web sockets – threaded processing to reduce browser hangs,
  • WebGL – like openGL and DirectX for the browser – game creation,
  • BitMap (canvas)/vector (SVG) image creation -? on the fly graphics,
  • Better page structure elements – Section, Article, Nav element – this is more for developers
  • Backwards compatible and forgiving (XHTML 2 did not want to support this)

HTML 5 is exciting as HTML 4 and XHTML are both too restrictive to developers, too ambiguous to browser vendors and out of date for modern web. Both were hot when a 56kb modem was lightning fast. Today these old standards have become dated which has lead to third party plugins filling the gaps and causing people to get upset (Mr Jobs). By introducing the new version of HTML 5 developers will find it much easier to build sites for the majority of operating systems from mobile phones to mainframes.

At the moment YouTube, Google and FaceBook are experimenting with HTML 5. Google’s search algorithm seems to love the semantic nature of HTML 5.

You can use HTML 5 right now. There is a few things that will need hacks to work in IE. These are not hard to find. If you want a pre built HTML5 / CSS 3 template check out the HTML5 boilerplate which has a lot of IE 6+ fall-backs built into it. Start experimenting with it on new sites going forward.

HTML 5 is the easiest HTML version ever. It cuts out a lot of crap and has been built around the common practices on the web, such as placeholders in text-boxes. It is more forgiving, you can build poorly formed HTML (e.g. not closing your tags), you can create elements, you can use single, double or no quotation marks around attributes’ values (though you probably want to if you ever want to read your HTML). Best part is you do not have to validate (though you should aim to).

Below is a simple HTML 5 page, you actually do not even need the head.

[cc lang=”html”]

Simple HTML 5 page

Checkout the awesome doctype!

[/cc]

Checkout the awesome doctype and how simple this example of a complete HTML page is. Gone is long doctype and HTML version, no one can remember and secretly the browsers ignored, like this one for CreateMy:
[cc lang=”html”]

[/cc]

A full site could look like
[cc lang=”html”]

Simple HTML 5 page

My simple HTML 5 page

Simple DOCTYPES

Checkout the awesome doctype!

Author Dale

[/cc]

While there is a lot of new stuff in the code such as header, footer, nav, section, article and search input type it is a lot easier to read the HTML. You can understand the page structure without too much effort.

In future posts I will cover the new elements above.

Advertisements

11 comments

  1. Your Description of Web Sockets actually describes web workers.
    Web Sockets provides a protocol (and implementation) for 2-way communication between browser and client.

  2. Pingback: Dedicated Web Hosting Explained | web hosting nz

  3. Pingback: HTML 5 The DOCTYPE | Create My - Dale Hurley - Web Developer and Designer

  4. Pingback: Interesting links week #50 - Erwin's Blog

  5. Pingback: HTML 5 ?? 5 ????? « Open Meetings IT Evros


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s