HTML 5: What is it? NYCSS Meetup Presentation
I did a talk today at NYCSS today on HTML 5. This is the transcript of that presentation but in a readable format with my presentation deck below:
What is HTML 5?
It is still the same old HTML we all know and love, just better.
HTML 5 smarter
There are awesome new features available to us now natively that in the past we had to use CSS and javascript to achieve. These are a few examples:
HTML 5 forms
Form Validation
Spin Boxes
Sliders
Date Pickers
Color Pickers
Geolocation
Editable Content
Local Storage
Microdata
Canvas
Video/Audio
HTML 5 Forms
HTML 5 forms are a perfect example of smarter. Sadly though, Internet Explorer’s lack of support is keeping this from widespread use for now, even with the release of version 9.
A great example are new input attributes that now remove the need to write small scripts for things like place holder text and auto focus. You will see these features in action if you are in a supported browser like Firefox 4, Chrome or Safari.
Place holder text disappears and reappears when a user clicks into the input field without javascript. This markup is below:
input name=”placeholder ” placeholder=”I show up in a blank input field”
Here is an autofocus example. This input field should already be selected, and ready to type into. This markup is below:
input name=”autofocus” autofocus
(Update, had to remove the actual input field, made page jump to this spot on load)
Go here to see autofocus in action.
A different example of smarter are the new input types like “email” and “url”. You can see the impact of these best on a mobile device like an iPhone. If you have a smart phone available you should pull this post up and see how you keyboard changes when you select one of the input fields below. I have also dropped in images in case a mobile device isn’t handy.
Watch how your the mobile keyboard shrinks the space button and adds an @ button for an input field with an email attribute set. This markup is below:
input type=”email”
Watch how your the mobile keyboard loses the space button and adds a .com button for an input field with a url attribute set. This markup is below:
input type=”url”
Fringe Features for HTML 5 forms
There are some features that are on the fringe for the time being but are worth noting because of their eventual (hopefully) adoption will kill the dependence on libraries like jQuery ui for rich interface options. Here are what some of those features look like.
Spinbox Opera rendering
If you set the input type to type=”number” Opera will give it the following treatment.
Number slider Safari, Chrome and Opera rendering
If you set the input type to type=”range” Safari, Chrome and Opera will give it the following treatment.
Date picker Opera rendering
If you set the input type to type=”date” Opera will give it the following treatment.
Color picker Opera 11 rendering
If you set the input type to type=”color” Opera 11 will give it the following treatment.
Other Smart Features
In addition to forms, here are some other smart evolutions that can be used now, but will still need some cross browser fall backs in place. Each one of these could be an individual blog post so I have provided links to good resources to learn about each topic more in depth.
Geolocation (Learn More here and here)
Editable Content (Learn More here and here)
Local Storage (Learn More here and here)
Microdata (Learn More here and here)
HTML 5 is more intuitive.
There is a lot of buzz constantly surrounding HTML 5′s features like the ones mentioned above, but what we should also be super excited about are the new intuitive and semantic elements added to HTML 5.
The simplified doctype, html element and charset
Certain declarations that have been needed before are not needed anymore with HTML 5 and have been shortened. For example:
With the doctype we no longer need to declare what kind of browser mode we are in. The shortened doctype makes all browsers treat the HTML you have written in standards mode.
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd” to !doctype html
When declaring the root element we don’t need to declare the namespace as HTML, HTML 5 is in that namespace by default. We still need to declare a language but we don’t need to declare it twice, so we can also remove xml:lange=”en”, which leaves a very concise html element left over.
html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en” to html lang=”en”
The charset declaration is much trickier to explain, but the quick version is that we can write it in a much shorter, intuitive way.
meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ to meta charset=utf-8
For an exhaustive article on the semantics of the above elements you should definitely read this.
Semantic elements new to HTML 5
While not as flashy as canvas, these newly added semantic elements secretly get me really excited (dont’ tell anyone). Here is a sampling of the major new elements available to us now. You will notice that they are named in a straight forward, meaningful way that makes markup more intuitive and easier to use. I have listed the main elements and examples of their HTML 4/XHTML 1 alternatives that are in use now.
What HTML 5 isn’t
It’s not just canvas, canvas is a part of the HTML 5 spec. “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.”
There is a lot of hype surrounding canvas and many times people just say “it’s HTML 5″ instead of understanding that whatever they are seeing is actually a scripting language using canvas.
It’s not javascript. A perfect example of this misunderstanding is the hype that surrounded the nikebetterworld.com site. It is an awesome site, but all the talk was about HTML 5 and canvas when what was really impressive was their use of javascript and clever css. In fact, they didn’t even use HTML 5 semantically.
What can we use now?
I feel like we can use a lot, but at the very least we can start using the more semantic formatting elements. I have multiple projects under my belt now that I have been able to use the new formatting elements like header, nav and section. I have also used the video, canvas and geolocation features as well, but was only able to confidently implement because I was careful to ensure cross browser fall back support.
The quickest and easiest way right now is to be cross browser compliant is to use Boilerplate as your HTML 5 coding starting point. It is great because it includes a base level of css resets and includes the Modernizr script. The combination of these two allows you to confidently code and know that you can gracefully degrade to legacy browsers. I highly recommend getting familiar with Boilerplate and Modernizr.
Since almost every point I talked about could be a post or talk by itself, below are some resources for further reading and research:
Read:
HTML 5 spec
Dive into HTML 5
Use:
Boilerplate
Modernizr
Demo:
HTML 5 Demos
Canvas Demos
If you don’t agree, need clarification or just have a question let me know in the comments below, thanks!