Articles by Tom Leadbetter

Using Modernizr to detect HTML5 features and provide fallbacks

Modernizr is a JavaScript library that detects which HTML5 and CSS3 features your visitor’s browser supports. In detecting feature support, it allows developers to test for some of the new technologies and then provide fallbacks for browsers that do not support them. This is called feature detection and is much more efficient than browser sniffing. In this article we’ll look at how to use Modernizr for feature detection.

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.

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.

The abbr element

The <abbr> element is not new to HTML5, nor has it been redefined. The HTML5 spec has, however, removed the <acronym> element, which was (and is) common in HTML 4 web pages. Simply put, instead of using <acronym>, use <abbr>.

The article element

We’ve discussed a lot of new elements here at HTML5Doctor, but the article element has somehow escaped the microscope… until now! article is one of the new sectioning elements. It is often confused with section and div but don’t worry we’ll explain the difference between them.

Measure up with the meter tag

HTML5 offers several useful new elements, to add further meaning to the markup of a page. These new elements include time, mark and here is another one, meter. It is an inline element so it can be used inside most elements, including a header or a paragraph. What does it say in the spec? The […]

Semantic navigation with the nav element

One of the new elements for HTML 5 is the <nav> element which allows you to group together links, resulting in more semantic meaning for your markup, and help help structure the content for screenreaders. In this article I’ll discuss how and where to use it as well as some reservations I have with the specifications definition.

The video element

The <video> element is brand new in HTML 5 and allows you to, get this, play a movie in your website! The data of this element is supposed to be video but it might also have audio or images associated with it. Of course, this will only work in a few browsers: Safari 3.1+, Firefox […]