HTML5, starting from the top
The first thing we need to know about creating an HTML5 document is how to tell the browser to know it’s reading HTML5. We do this with the doctype declaration, which looks like this:
That’s it. Sorry, were you expecting more? The authors of the HTML5 spec intentionally made it incredibly simple. There’s no “strict” or “transitional” or any of that nonsense. That’s because the spec is designed to accomodate just about every potential way you can screw up an HTML document.
The New Semantics
Now that we’ve got the doctype out of the way, we need to look at how we structure a page using HTML5. There are some new semantic tags that are made for our typical page format, which is broken up into header, navigation, body content and footer. Keeping with the theme of things being simple, these are:
header, footer, nav, article, aside, section
Taking each in turn, let’s talk about what belongs in each element:
The header tag is intended as a container for introductory information about a section or an entire webpage. The
<header>tag can include anything from your typical logo/slogan that sits atop most pages, to a headline and lede that introduces a section. If you’ve been using
<div id="header">in your pages, that would be the tag to replace with
Note that you can use header elements within a section element as well if appropriate.
Footer should also be self-explanatory, except perhaps that you can have more than one. In other words, sections can have footers in addition to the main footer generally found at the bottom of most pages.
The nav element is pretty self-explanatory — your navigation elements go here. Of course what constitutes navigation is somewhat debatable — there’s primary site navigation, but in some cases there may also be page navigation elements as well.
Primary navigation definitely wants a nav tag. Some folks suggest that secondary navigation (e.g. links in footers) may not require a nav tag. It’s a bit fuzzy, but my suggestion is that if it’s a group of links that’s meant to take you to somewhere else on your site, it deserves a nav tag. The most obvious usage is replacing the un-semantic <div id=”nav”> that exists in most pages.
From WhatWG developer’s guide:
articleelement represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
Articles seem to be the new foundational container for many types of web content. Articles that are related may be nested: for example, a blog post would be an article, and a comment on the blog post would be an article that is nested in the main blog post article element.
From WhatWG again:
asideelement represents a section of a page that consists of content that is tangentially related to the content around the
asideelement, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of
navelements, and for other content that is considered separate from the main content of the page.
Asides are kinda fuzzy: what distinguishes an aside from a blockquote, for example? Is advertising always going to be an aside? If it’s powered by Google adSense, and thus related to the content, maybe. But if it’s just generic banner advertising, maybe not.
Section may be the fuzziest of the new semantic tags. A Section is a “thematic grouping of content.” However, most of the other new semantic tags fall into that category, so perhaps “thematic grouping of content that is not better described by another semantic element” would be a better definition.
Sections are distinct from divs in that divs are more structural, while sections are more content based. A section will usually have a heading or header, and often a footer as well. A div, on the other hand, exists primarily as an arbitrary container. It is the fallback element of last resort when your content isn’t an article, section, header, footer or nav. Divs seem to be destined to be pushed into web app land, while the new semantic tags replace many of the old uses for divs on websites.
To div or not to div
Here’s a good writeup on when to use article, section or div: http://boblet.tumblr.com/post/130610820/html5-structure1
Webmonkey goes on to describe a few more semantic markup elements that are new to HTML5 in part two of the referenced article.
The new form elements
The new form elements in HTML5 are even more interesting because we can see functional changes immediately, but also more challenging specifically because they’re functional. Using them deals with functionality by definition, which is much more of a challenge to keep consistent across all browsers.
When can I start using HTML5?
In other words, how badly will HTML5 break older browsers? At its most basic level, it won’t — you can start using it now. By “most basic level,” I’m referring to the <!DOCTYPE html> that signals HTML5 to a modern browser. This declaration will not break any older browser on its own.
That said, some older browsers that are still in use will protest significantly when encountering unknown tags. Notably, older versions of IE (was anyone NOT expecting that?) will frequently not render styling for unknown elements. So when you mark up your navigation area as
The new form elements all gracefully degrade to standard text input fields, so at the very least you’re safe using them if you’re not relying on the new features too heavily, and implementing validation to ensure that the data received from older browsers is consistent with what you’re expecting from newer browsers.
I’d also like to briefly introduce HTML5boilerplate, which is basically a collection of best practices rolled into a few documents that you can use to start your HTML5 projects. A lot of it won’t make sense yet, so don’t start using it right away until we can talk a bit more about what it all does. But if you’re interested, go ahead and read up; and if you’re feeling confident, by all means take it for a spin.
But… but… what about progressive enhancement?
The good news is that even bloated HTML5 code still offers enhancements over traditional div based page structure for modern browsers in terms of accessibility. So that’s the direction I encourage everyone to take.
User Experience Design
- Build a form that uses new form markup. Test it in all notable modern browsers (Chrome, Safari, Firefox, IE9, Opera, mobile Safari on iPad, iPhone and/or Android if you have access) and report the results for each type of new form element: how do they behave? what does the interface look like? Use screenshots where appropriate.
- Imagine and create use cases for each of the new semantic markup tags we’ve discussed, and write some sample code to show how it all fits together in your use case.
- Conduct initial research/brainstorming for user stories for a Project Management application. Develop a set of user stories and input them into Tracker. Use the master class project that we started in class. This list will be finalized at midnight on Wednesday night (i.e. Wed/Thu).
- Use the Export CSV function to grab all the user stories in the class project. Create a new project under your own account (make it public), and share it with me. Import the CSV into the public project and then drag/drop to prioritize the user stories for an initial prototype delivery. NOTE: not all functionality needs to go into the initial prototype.