Introduction to HTML5

What is HTML5?

From whatwg.org: “The term ‘HTML5’ is widely used as a buzzword to refer to modern Web technologies, many of which (though by no means all) are developed at the WHATWG, in some cases in conjunction with the W3C and IETF.”

A brief history of HTML5, via Wikipedia:

The Web Hypertext Application Technology Working Group (WHATWG) began work on the new standard in 2004, when the World Wide Web Consortium (W3C) was focusing future developments on XHTML 2.0, and HTML 4.01 had not been updated since 2000. In 2009, the W3C allowed the XHTML 2.0 Working Group’s charter to expire and decided not to renew it. W3C and WHATWG are currently working together on the development of HTML5.

This W3C article explains the differences between HTML4 and HTML5: http://dev.w3.org/html5/html4-differences/

Of course, the history of HTML (HyperText Markup Language) goes back much further, and there are many interesting articles online narrating it. This is one of them: http://www.w3.org/People/Raggett/book4/ch02.html Dive into HTML5 also provides interesting insights: http://diveintohtml5.ep.io/past.html.

Links:

HTML5 and Standards

The Dive into HTML5 website has a nice quote on creating standards, from Mozilla:

Implementations and specifications have to do a delicate dance together. You don’t want implementations to happen before the specification is finished, because people start depending on the details of implementations and that constrains the specification. However, you also don’t want the specification to be finished before there are implementations and author experience with those implementations, because you need the feedback. There is unavoidable tension here, but we just have to muddle on through.

HTML5 is a good example of this “dance”. As Mark Pilgrim states, “HTML5 is not one big thing; it is a collection of individual features”. Dive into HTML5 highlights the following ones:

  • Canvas (chapter 4.)
  • Video (chapter 5.)
  • Geolocation (chapter 6.)
  • HTML5 storage (chapter 7.)
  • Offline web applications (chapter 8.)
  • HTML5 forms (chapter 9.)
  • Microdata (chapter 10.)
  • Session history and navigation (chapter 11.)

Web workers are also mentioned, and I would also add <audio> as an important addition (see the whatwg.org audio link), although there are problems with video and audio regarding the standardization of these.

We are in a point where not all HTML5 features are well implemented across the most popular browsers. But it’s possible to detect which features are implemented or not in the user’s browser, and provide fallback methods.

More on detection:

Let’s look at how browsers are implementing HTML5:

What is <Canvas>?

From whatwg.org: “The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.”

From Dive into HTML5: “A canvas is a rectangle in your page where you can use JavaScript to draw anything you want. HTML5 defines a set of functions (‘the canvas API’) for drawing shapes, defining paths, creating gradients, and applying transformations.”

On the history of <Canvas>, from Wikipedia: “Canvas was initially introduced by Apple for use inside their own Mac OS X WebKit component in 2004, powering applications like Dashboard widgets and the Safari browser. Later, in 2005 it was adopted in version 1.8 of Gecko browsers, and Opera in 2006, and standardized by the Web Hypertext Application Technology Working Group (WHATWG) on new proposed specifications for next generation web technologies”.

Wikipedia provides a good resource on adoption of <Canvas> by browser engines. Important note on <Canvas> compatibility with Internet Explorer, from Dive into HTML5:

Versions of Internet Explorer before 9.0 do not support the canvas API. (IE9 does fully support the canvas API.) However, those older versions of Internet Explorer do support a Microsoft-proprietary technology called VML, which can do many of the same things as the <canvas> element. And thus, excanvas.js was born. Explorercanvas (excanvas.js) is an open source, Apache-licensed JavaScript library that implements the canvas API in Internet Explorer.

Cascading Style Sheets (CSS)

From Wikipedia:

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML (…). CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.

The main types of style types are (again from Wikipedia):

  • Inline styles, inside the HTML document, style information on a single element, specified using the “style” attribute
  • Embedded style, blocks of CSS information inside the HTML itself
  • External style sheets, i.e., a separate CSS file referenced from the document

Links:

Further exploration and inspiration:

(Note: since the original Dive into HTML5 has disappeared, all links point to a mirror. Multiple mirrors of the website have emerged, so if one mirror goes offline, it should be easy to find a replacement)

Advertisements

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s