Archive for the ‘Elements’ Category

The output element

Across the web, you’ll see a range of sites that feature calculators for working out things like loan repayments, mortgage rates, tax, insurance, and more. Until now, we’ve had no way of semantically marking up the result of those calculations. Enter: the <output> element! In this article, we’ll show you <output> and some related JavaScript tricks. Let’s get cracking.

Video Subtitling and WebVTT

We’ve been able to play video in the browser without a plugin for a couple of years now, and whilst there are still some codec annoyances, things appear to have settled down on the video front. The next step is adding resources to the video to make it more accessible and provide more options to the viewer.

Goodbye time, datetime, and pubdate. Hello data and value.

While HTML5 is stable and being implemented we’re still not past losing (or gaining) an element, as demonstrated by the removal of <time> and the addition of <data>. Rather than jumping into the ensuing brouhaha, we’ve spent some time figuring out what this really means. In short? Well… it’s complicated.

The return of the u element

The <u> element was deprecated in HTML 4 and non-conforming in HTML5, but a couple of use cases have seen it return from the dead. Are the use cases enough to persuade you that it’s a phoenix not a zombie?

The details and summary elements

How often have you had to write some JavaScript to create an interactive widget that shows and hides some content? You might’ve even downloaded a whole JavaScript library to achieve such an effect. Well, it’s time to rejoice! HTML5 provides a way to create this toggle feature with just a few lines of HTML and no JavaScript in sight. And so we introduce to you the details element.

Avoiding common HTML5 mistakes

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.

Quoting and citing with <blockquote>, <q>, <cite>, and the cite attribute

Given HTML’s roots in the academic world, it should be no surprise that quoting is well-accomodated in the elements blockquote and q, with their optional cite attribute. In addition, there’s the cite element, which over the last nine years went from ‘semantic orphan element made good’ to one of the more contentious elements in HTML5. Let’s power up the endoscope and examine the scarring, starting with blockquote.

The hgroup hokey cokey

As you may well have heard this week, hgroup has been in, out and in the spec again, while members of the W3C and others have truly been shaking it all about. If you’ve missed this latest merry dance then please head on over to the W3 bug report page to help get a clearer indication.

HTML5 and Search Engine Optimisation (SEO)

Through our handy Ask The Doctor service, we get a lot of e-mails asking us about HTML5’s effect on Search Engine Optimisation (SEO). While we can’t answer in great detail (Messrs Google, Yahoo, Bing, and their friends haven’t sent us in-depth details of their algorithms), we’ve rounded up some useful facts from Google, the world’s most dominant search engine.