Between curating sites for the HTML5 gallery and answering readers’ questions here at HTML5 Doctor, I see a host of HTML5 sites and their underlying markup. In this post, I’ll show you some of the mistakes and poor markup practices I often see and explain how to avoid them.
Avoiding common HTML5 mistakes
Extending HTML5 — Microdata
For those who like (to argue about) semantics, HTML5 is fantastic. Old presentational elements now have new semantic meanings, there’s a slew of new semantic elements for us to argue about, and we've even in<cite>
d a riot or two. But that's not all! Also in HTML5 is microdata, a new lightweight semantic meta-syntax. Using attributes, we can define nestable groups of name-value pairs of data, called microdata, which are generally based on the page’s content. It gives us a whole new way to add extra semantic information and extend HTML5.
HTML5 Simplequiz #4: figures, captions and alt text
Simplequiz #4 asks about alt text on images that are captioned using HTML5 figure and figcaption. Steve Faulkner moderates this week.
HTML5 Simplequiz #3: how to mute a video
This is a bit of a special Simplequiz this week. Simon Pieters, who works on multimedia QA for Opera and is one of those working on the HTML5 spec, asked us to run a quiz that would help the spec writers decide on a new aspect of the language.
Extending HTML5 — Microformats
HTML5 contains a bunch of new semantic goodness, but sometimes we need more semantics than what’s available. This is the first article in a series looking at various ways to extend HTML5 — first up, microformats.
Video: the track element and webM codec
HTML5 Custom Data Attributes (data-*)
Have you ever found yourself using element class
names or rel
attributes to store arbitrary snippets of metadata for the sole purpose of making your JavaScript simpler? If you have, then I have some exciting news for you! If you haven't and you're thinking, Wow, that's a great idea!
I implore you to rid your mind of that thought immediately and continue reading.
Your Questions Answered #5
We’re back with our first round up of your questions for 2010. In this article we’ll be covering a range of topics including sections and sectioning, the img
element, scaling video and a proposal for a field
element.
The time element (and microformats)
Please note that since this was written, <time>, datetime have been made more powerful, so this article is obsolete. Doctor Bruce has the low-down in his blogpost The best of <time>s. Microformats are a way of adding extra semantic information to a webpage using HTML classes — information like an event’s date and time, a […]
Your Questions Answered #4
Here we go with another post rounding up your HTML5 questions and sharing the answers with the world. We cover a wide range of topics this time, inlcluding ARIA, storage, offline capabilities, and document outlines, so read on to find the answers. We also want to know what areas of HTML5 you’d like us to […]