Web Not War Recap – Start to Work in HTML5

Another one of the sessions we attended at the Make Web Not War conference yesterday, was called “Let’s Start to Work in HTML5”. During this session, speaker Benoit Piette gave an overview of what’s to come in HTML5 and how to implement it and begin trying out its supported features.

Speaker: Benoit Piette

Let’s Start to Work in HTML5

It’s been a while now that HTML5 has started to be hyped in technology news. Some say that HTML5 might mean the end of Flash, others say that it won’t change a lot. It is now time to take a serious look at what HTML5 brings to the table. In this presentation, we are going to look at the new elements and functionality within HTML5 and where and when we should start using them in our work. Also, because it is always better to look at real code, even if we don’t have a lot of time, we are going to try to bring parts of a WordPress theme to HTML5.

The session was very generic and technical and I can’t say it gave us a chance to learn anything more than the information published by many websites such as W3C on HTML5.

Benoit Piette basically went through all the biggest features to come, one by one, and showed us a code example. Here are a few definitions by the speaker.

Section is not a div, it’s less generic. Each time we open a section, it starts with a H1.

Article is a self contained content and reusable. A section is inside an article.

Nav is a section enclosing navigation links. Not to be mistaken with header or footer.

Header is a group introductory or navigation aids.

Footer can be used on each article or section. It contains links and author information about the article.

Hgroup contains a title and subtitle. Only the highest titles are in the hgroup.

Aside is a section of content that is related to the content around the aside element. Not for advertising. Example: Blogroll, Glossary

Figure and Figcaption Self contained unit of content. Groups images and their caption, or example of code.

Time represents a point in time in a Gregorian calendar format.

Mark highlights part of the document that is dynamically relevant of the current reading context. Example: New changes in a document.

I, b, small, hr now has semantic meanings.

Video to embed a video in your page without plugins. Attributes: Autoplay, preload, loop, poster, source, control, subtitles, caption, accessibility, fallback, API for your own controls, canPlayTime to verify browser support.

But HTML5 videos do not support DRM so people are still using Flash videos. There is also no fullscreen except on Safari so it’s not a complete video player yet.

Audio to embed audio in your page without plugins.

Web Graphics

The canvas element and 2D API to insert graphics with Javascript.

SVG is now supported by IE9 but doesn’t work without a SVG doctype.

Web Forms

Lots of new types like telephone, search, number, email, etc.. New attributes like placeholder, autocomplete, autofocus, list, pattern and required. Multiple file upload!

For a form completion, you can also use the new progress tag based on Ajax.

Details and summary is a disclosure widget. Example: click to show more

Finally, to be able to test a website in HTML5, you only need to change the DOCTYPE to HTML as HTML5 is meant to become a standard.

Leave a Reply

Your email address will not be published. Required fields are marked *