HTML5 - July 2010

Greetings. At the last barcamp I spoke briefly about HTML5. It’s been a year - so I thought I’d do a follow up to see how things have progressed. As an added bonus I’ll have Matt here to talk about some CSS3 awesomeness. Last time I introduced you to some new elements, some JavaScript API stuff and touched on video and audio. This time I’m going show you that you can use those new features without fear of destroying your user’s experience. A practical guide, if you will. Right - so let’s just jump back a few years and talk about what most of you are using right now - HTML4 and XHTML.
You’re all familiar with this. I spent many an angered hour trying to convince people this is the way to go! Things have started to change. Huge advances in mobile technology has meant that we’re having to surf the web like it’s 1999 again. High speed internet hasn’t made it into our pockets. The number of bytes and server calls are actually a concern again - who wants to pwn your vodafone data plans downloading characters and bytes...
That’s why this makes much more sense. It’s doing exactly the same thing as the previous example but is so much slimmer. One of the core principles of HTML5: Making your life - as coders - far easier! Pave the cowpaths. If developers have been doing it that way for years don’t shun it - roll it into the spec. Billions of webpages on the internet and only very few are well formed. So HTML5 has rolled that into the spec. - which means you’re free to write HTML5 however you please. uppercase, lowercase, slashes, no slashes...I’m a stickler for well formed code - so I like slashes and everything lowercase.
For me HTML5 is more about semantics, usability and accessibility than syntax. The smart HTML5 people have done some serious research into the way in which we write HTML and noticed hundreds of regularly trodden paths.
embedding audio and video on websites is way more common now thanks to increased bandwidth
Blogs are full of time based articles and sections.
The very layouts we create everyday contain headers, footers, navigation and sidebars.
And this is a high level view of how those semantics might pan out. I’ll dive into each of the main structural elements - with reference to what the spec says and show an example. This will be a quick-fire run through cos I don’t want to keep you guys from the juicy CSS stuff Matt’s got lined up.
Represents a generic document or application section. A section is a thematic grouping of content, typically with a header, possibly with a footer. Examples: chapters in a book, various tabbed pages in a tabbed dialog box, a home page could be split into sections for an introduction, news items, contact information.
each section has a header and are self contained.
Forms an independent part of a document, page, or site. A forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, or any other independent item of content. Think of it as an item that can be syndicated via RSS or ATOM
Typically used to group a set of h1–h6 elements to mark up a page’s title with its subtitle or tagline. May contain more than just the section’s headings and subheadings — e.g., version history information or publication date.
Typically contains metadata about its enclosing section, such as who wrote it, links to related documents, copyright data, etc.
Content that is tangentially related to the content around the aside element - considered separate from that content. Such sections are often represented as sidebars in printed typography.
The nav element is a section containing links to other documents or to parts within the current document.Not all groups of links on a page need to be in a nav element — only primary navigation links. In particular, it is common for footers to have a list of links to various key parts of a site - you wont need the nav element - the footer element will suffice.
The way to embed audio into a page without having to use a plugin.
This is the most cross browser technique ogg/mp3/other
There are some other elements that are interesting but I’m running out of time - so here’s some homework. Research these elements.
so far only webkit browsers and opera will support those types. But that’s OK, because other browsers will just default to type=”text”. So USE these fields.
only supported by opera, sadly, but quite useful
Modernizr is a script you add to your site which enables you to use these new HTML5 features as well as a host of the new CSS3 stuff.
first thing it does is makes everything play nice in IE6,7,8 but creating all the new HTML5 elements.
based on your browser (this example is firefox 3.6) modernizr adds an array of classes to the HTML element which enables you to hook in via CSS
it also creates a moderniz javascript object which you can test against. This example is checking to see if your browser supports the new input type of date. If it doesn’t you can then provide a suitable fallback.

HTML5 - July 2010

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

HTML5 - July 2010

Editor's Notes