HTML 5 is coming our way. So goes the theory, anyway. (Recent chatter puts widespread adoption by user agents at close to a decade out from now… or more.) It is still a moment that many of us are eagerly anticipating. I remember drooling over my keyboard while reading through the HTML 5 Specifications the first time. We have been stuck with HTML 4.01/XHTML 1.0 for a long time and it is time to see some changes.

(In fact, HTML 4.01 has presented us with the longest gap in HTML revisions—it’s been 10 years since it was released; HTML 3.2 only lasted about a year, from 1997 to 1998.) There are some great things we have to look forward to that will make life a lot easier for us developers and designers. We’ll take a look at a few of them after the jump.

To start with, we’ll be able to cut out some of the fluffy JavaScripts and hacked stylesheets that we’ve used to create custom elements and small usability features like autofocusing form fields.

The spec document is a bit rough to navigate so I’ve put together a few of the more exciting elements for now:

Form Upgrades:

There are a whole slew of cool things that we’ll be seeing with forms: new elements, new attributes, and new and better ways to solve previously tedious problems. There are several new input types that will increase the semantics of our forms: datetime, date, month, week, time, number, range, email and url. In theory, the user agent (browser) itself can actually use these fields to render a calendar object, though an implementation like that would need to be consistent across the browsers to be of any practical use.

An <output> element will exist for returning information from scripts. Combo boxes will be created as a combination of <input> and a (new) <datalist> element as shown:

<input list=fruits>
<datalist id=fruits>
 <option value="Apples">
 <option value="Oranges">
 <option value="Bananas">
 <option value="Mangos">
</datalist>

There will also be a slew of cool attributes for form elements that will greatly reduce the work put into creating secure and usable forms. Some of these will be: autofocus, form, required, autocomplete, min, max, pattern, step, list, inputmode and template. You can get a good idea of what each of these will be used for from their names. Autofocus and required are going to be very useful. Inputmode allows the the page author to provide a hint about the input of the form element to the user. The list attribute is used in conjunction with a datalist element
as shown above.

Lists:

I’m so happy that they have decided to keep the value attribute of the li element and the start attribute of the ol element. These useful attributes were previously marked deprecated, but since there is no CSS equivalent way to perform these functions, we get to keep them. Also, they are adding a reverse attribute to the ol in case you want to show your numbered list starting from the highest number. A new type of list called dialog will be added for displaying dialogs and conversations in a semantic way. the dt and dd tags will be borrowed from the dl element to show who said what and what they said.

New Elements:

There are going to be many new elements that increase semantics and functionality. Some of these elements are: section, article, aside, header, footer, nav, figure, audio, video, time, meter, canvas, command, progress and menu. The section element will define sections of a page and will serve a semantic purpose similar to div except it will be more encompassing. Each section will have its own set of h1-h6 header elements. The article, header and footer elements will be used to describe different parts of the page as indicated by their names. Navigation menus will now be constructed using the nav element and menu element. This will finally make navigation menus more semantic. The menu element is not new, but it is now something totally different and semantically useful. Elements like video and audio will be used instead of embed or object for presenting those kinds of media. For full descriptions and information about more of the elements and attributes, read the W3C specifications for yourself.

Goodbyes:

We can say goodbye to many of our old elements including basefont, big, center, font, s, strike, tt, u, frame, frameset, noframes, acronym, applet, isindex and dir. All these things can be accomplished by CSS or by another element. These elements have been removed for reasons of redundancy, accessibility, and semantics. Many attributes have also been removed from certain elements.

Concepts and Conclusions:

There are also a few new elements and attributes that I haven’t discussed that will change the way we write HTML and our scripts. Many of these new features will allow us to do things like trigger events, create data-dependent parts of our page, create elements in loop structures and aid in the creation of templates. These are some exciting things to look forward to. (Though arguments abound on their place in a simple markup language.)

Remember that HTML 5 is still in draft form and many of these things may or may not be in the final spec. I’ve only scratched the surface of HTML 5 in this post, so check out the specs for yourself and start waiting.

Finally, take a look at A List Apart’s similar look into some of HTML 5′s new featureset:
A Preview of HTML 5 [A List Apart]

Posted in: Design, Development, Tech News