Semantic Elements

HTML5 provides semantic elements to hopefully somewhat replace the the humble <div> which is the cornerstone of nearly every modern web page. Using <div> elements, you can carve an HTML document into headers, side panels, navigation bars, and more.

This <div>-and-style technique is straightforward, powerful, and flexible, but it’s not transparent. That means when you look at someone else’s markup, it takes some effort to figure out what each <div> represents and how the whole page fits together. To make sense of it all, you need to jump back and forth among the markup, the style sheet, and the actual page in the browser.  And you’ll face this confusion every time you crack open anyone else’s halfway-sophisticated page, even though you’re probably using the same design techniques in your own websites.

HTML5’s new elements were created as a way to replace <div> with something better. Something that worked like <div>, but conveyed a bit more meaning. Something that might help separate the sidebars from the headers and the ad bars from the menus.


Almost every HTML document has a header and footer. The HTML5 specification recognizes this and includes two specific elements that you can use to semantically identify a header and footer. These elements are not restricted to one per document, however, and can be used to specify the header and footer areas of a particular section or article of a document.

The header element usually contains at least one h element:

The footer element is just as simple to use and requires no explanation:

The header element doesn’t have to appear at the top of the web document, just as the footer element doesn’t have to be placed at the bottom. You can actually place either wherever you want to. That said, it often makes sense to do so, just so the source of the document is easier to read.


A section can have articles within it. Think of a news page; it might have a news section and, then within that, different news categories. You might have a heading of “News” and then all the different types of news, like a newspaper. In HTML4, you would wrap this in a div, but you can wrap this all in a section now. Each type of news would then be in its own section, with its own heading. If you think the content would make sense on its own, then it is an article.


The nav element is used to contain the primary navigation throughout your site. So any links to separate pages, such as About, News, and your blog, can be included here. It can also contain any links that are external to your site—that is, that take the user away from your site—for example, links to Twitter or Facebook accounts, as long as they constitute the primary navigation of your site.

The nav element is often contained within a header, although it doesn’t have to be. It can also be contained within a footer element, but only if it’s the primary navigation of your website.


The aside element is used to contain page non-main content that is relevant to the main content it sits next to, but the main content makes perfect sense on its own without it. The content of the aside element can also make sense on its own, although it doesn’t have to. A current, real-world use of the aside element is for sidebars, which of course can contain anything from widgets and social media feeds to related links and images.

Note how the aside element can also contain header and footer elements if they are appropriate.


Two new elements were introduced to allow relating a multimedia element (image, video, or audio) to a specific caption, which of course makes the content contained within these new elements more semantic (there’s that word again!): the figure element and the figcaption element. The figcaption element can only exist within a figure element, although it doesn’t have to be there; obviously, not all content will have a caption:

Note: The hgroup element was removed from the HTML5 specification as of April 13, 2013:

Use the HTML5 Doctor Element Flowchart to help determine which to use:



CSS3: Transitions

CSS3 transitions smooth out value changes in your stylesheets when triggered by interactions like hovering, clicking, and focusing.

This smoothing animates the changing of a CSS value when triggered by a mouse click, focus or active state, or any changes to the element (including even a change on the element’s class attribute).

Let’s start with a simple example, where we’ll add a transition to the background color swap of a link. When hovered over, the link’s background color will change, and we’ll use a transition to smooth out that change, an effect previously only possible using JavaScript, but now possible with a few simple lines of CSS.

Next, we’ll add a declaration for the normal link state with a little padding and a light green background, followed by the background swap to a darker green on hover.

Read more ›

Video Playback

To learn more about HTML5 Video, you can take the HTML5 Video class

Not a day passes without us being told that video (and we’re not just talking about YouTube) is the future of the Web. If that is to be the case, particularly for the average user, we surely need an easy, reliable way of including video content without having to invest in expensive proprietary software.

HTML5 Video provides just that, directly in the browser with (at its minimum) a single line of markup.

Let’s take a look at how we’ve been adding video to our sites using the object tag in recent years. We’re sure you’ll all recognize YouTube’s embed code.

Pretty ugly, huh? Well, as you’ve probably already guessed, HTML5 not only helps us to be a little more semantic, but also makes adding video to our sites as easy as ABC (OK, almost as easy). The basic markup you need is:

By default, the browser doesn’t show any play controls; the user needs to open a context menu (right click or cmd+click) to play the video using this markup, which is not very intuitive. You’ll also see a small glitch when loading the page if you don’t explicitly set the width and height of the video while the browser calculates the dimensions. Also, the user doesn’t get a sneak peek of what they’re going to be watching. To remedy the situation, we’ll add the poster and controls attributes along with the dimensions.

The standard global attributes, along with poster and controls, aren’t the only attributes available, though.

The standard global attributes defined in HTML5 are:

  • autoplay: Tells the browser to start playing the video as soon as it is downloaded.
  • controls: Displays built-in controls that are native to the browser. Basic controls tend to include a play/pause button, time counter, volume control, and time scrubber.
  • crossorigin: Either allows or prohibits the sharing of a video across other domains.
  • height: Identifies the height of the video (if your height/width aren’t in the correct ratio, you will see black banding above and below the video; it will not distort).
  • loop: Tells the browser to loop the video after playback has been completed.
  • mediagroup: Allows multiple media elements to be linked together by creating a media controller. Therefore you can synchronize multiple videos or a video with audio.
  • muted: Allows the author to specify if the video should be muted when it begins to play.
  • poster: Identifies the location of a still image to use as a holding frame.
  • preload: Allows the author to inform the browser to start (or not start) downloading the video as soon as the page is loaded. preload has replaced the autobuffer attribute. The autoplay attribute can override the preload attribute if present.

  • src: Identifies the location of the video file.
  • width: Identifies the width of the video (if your height/width aren’t in the correct ratio, you will see black banding above and below the video; it will not distort).


Video Containers and Codecs

The file extensions .mp4, .avi, and .flv that we associate with video aren’t codecs themselves, but rather a container format. These containers tend to include multiple tracks, generally at least one for the video and one for the audio. The tracks are synchronized by markers contained in the audio track. There can be multiple audio tracks for different languages or tracks for subtitles. Containers can also have associated metadata that might include the title of the video or chapter points.

  • WebM: Based on the Matroska container format, it is designed to be used with the open source VP8 video codec and Vorbis audio codec. YouTube supports the WebM format making sure you  are using a compatible browser. Mozilla Firefox and Chrome play .webm.
  • Ogg: An open standard container format without any patent restrictions, it is maintained by the Xiph.Org Foundation. Ogg’s video codec is called Theora and the audio equivalent is Vorbis. Mozilla Firefox, Chrome, and Opera play .ogv.
  • MPEG-4: Based on Apple’s QuickTime container format MOV. It is associated with the file extensions .mp4 and .m4v. The downside to MPEG 4 is that it is patent encumbered, which may mean the user will have to pay royalties starting in 2016. MPEG 4 uses the H.264 video codec. Safari, Chrome and IE 9/10 play .mp4.

Adding video source

source allows us to specify multiple alternative videos for our media elementst. It is an invisible element, which means that nothing is rendered by the browser to indicate its presence visually in the document.

If you don’t add the type attribute to the source element, the browser will download a small part of each file before realizing the codec is unsupported. Therefore, you should ensure that the type attribute is always included for each video source.

The browser will play the first video that is in a format it understands. If a browser doesn’t understand the type of video, it will simply skip to the next source element until it finds one it does understand.

The order of the source elements is equally important: MP4 must come first because on older iPads it only looks at the first source element (now resolved). WebM is placed second due to that fact that its quality is higher than that of Ogg, thus ensuring Opera 10.6+ and Firefox 4+ will play the WebM file rather than the Ogg; Ogg is placed third to support Opera 10.5 and Firefox 3.5/3.6.

As time passes (or perhaps even now if you’re so inclined), it’s likely we won’t have to encode our videos with Ogg, as newer versions of browsers that currently use it will also support the higher-quality WebM.

Enter our old friend Flash

In this instance our trusty old friend Mr. Flash helps us to support older versions of Internet Explorer (IE 8 and older). There are a number of Flash video players available, so which one you use is up to you. This example uses the non-commercial version of JW Player . The default code that it provides after linking the script follows:

By combining the Flash object with our earlier example, we end up with an accessible, cross-browser, native solution.

Reference: State of HTML5 Video

JavaScript API and Custom Controls

HTML5 video provide a lot of functionality out of the box, but it doesn’t stop there. HTML5 also provides a wonderfully easy-to-use Media JavaScript API that you can use to extend that basic functionality in other ways. Aan excellent use of the JavaScript API is to roll out your own multimedia controls. You can style them however you like using CSS, and then hook them up via the API to control your video.

Here is a list (.pdf) of the attributes and events of each multimedia element of the API.

There’ll come a time when you’ll need to do more with your video, whether it’s creating custom controls that are on brand or adding fast forward and rewind buttons.

We’ll add custom play and pause buttons as well as a seek for forwarding and sound slider our video.

Firstly, we need to reference our <video> element:

Then our custom buttons:

The Play button will toggle to Pause when clicked:

We will have a button to mute the sound:

Then we need code to reference the current time duration of the video:

Then, we can add a button for showing the video fullscreen:

Here is an example of the demo.

JavaScript Tip: Reading from an Object

Reading a value from an object can also be accomplished using bracket or dot notation:

Unlike arrays, it’s not possible to read the contents of an object using a numeric index. The only type of index that can be used is a named one:

JavaScript Tip: this and Objects

When a function is created, a keyword called this is created (behind the scenes), which links to the object in which the function operates. Said another way, this is available to the scope of its function, yet is a reference to the object of which that function is a property/method. So every function, while executing has a reference to its current execution context.

Read more ›

JavaScript Tip: Iterating over an Object

Iterating over an object isn’t as simple as looping over an array. With an array, you simply increment an index value and use that to step through the array. With objects, there is no index value.

Objects are collections of key/value pairs, so you need to step through them differently:

Read more ›

Adding Breakpoints

A breakpoint is a logical matching of media features that updates the styles of a page. A single breakpoint represents a rule (or set of rules) that determines the point at which the contents of that media query are applied to a page’s layout.

If you think about breakpoints as the points at which your design will break, you are bound to gain a faster grip on what you’re dealing with. With just using device widths for comparison, you might be tempted to consider as many as six breakpoints: 320px, 480px, 600px, 768px, 1024px, and 1280px.

Using just these breakpoints, you’d be able to target a broad range of devices with the current standard widths, in pixels:

320px mobile portrait
480px mobile landscape
600px small tablet
768px tablet portrait
1024px tablet landscape
1280px and greater desktop large

With those sizes in mind, your link elements might look more like this:

Choosing your CSS breakpoints can be tricky: too many and maintenance becomes too difficult, but too few leads to poor UI rendering on devices you don’t cater for. At a minimum, you should be looking at two breakpoints: Small, for anything under 480px wide, and everything Bigger.

You need to consider which devices you’re targeting and balance the possible return gained against how your users are accessing your applications.

Page 14 of 18« First...10...131415...Last »