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.

<article>
	<h1>Apple</h1>
	<p>The <b>apple</b> is the pomaceous fruit of the apple tree...</p>
	...
</article>

<article>
  <header>
    <h1>Apple</h1>
    <p>Published: <time pubdate="pubdate">2009-10-09</time></p>
  </header>
  <p>The <b>apple</b> is the pomaceous fruit of the apple tree...</p>
  ...
  <footer>
    <p><small>Creative Commons Attribution-ShareAlike License</small></p>
  </footer>
</article>

<article>
  <header>
    <h1>Apple</h1>
    <p>Published: <time pubdate datetime="2009-10-09">9th October, 2009</time></p>
  </header>
  <p>The <b>apple</b> is the pomaceous fruit of the apple tree...</p>
  ...
  
  <section>
    <h2>Comments</h2>
    <article>
      <header>
      <h3>Posted by: Apple Lover</h3>
      <p><time pubdate datetime="2009-10-10T19:10-08:00">~1 hour ago</time></p>
    </header>
    <p>I love apples, my favourite kind are Granny Smiths</p>
    </article>
    
    <article>
      <header>
        <h3>Posted by: Oranges are king</h3>
        <p><time pubdate datetime="2009-10-10T19:15-08:00">~1 hour ago</time></p>
      </header>
      <p>Urgh, apples!? you should write about ORANGES instead!!1!</p>
    </article>
  </section>
</article>

<article>
  <h1>Apple varieties</h1>
  <p>The apple is the pomaceous fruit of the apple tree...</p>

  <section>
    <h2>Red Delicious</h2>
    <p>These bright red apples are the most common found in many supermarkets...</p>
  </section>

  <section>
    <h2>Granny Smith</h2>
    <p>These juicy, green apples make a great filling for apple pies...</p>
  </section>
    
</article>

<section>
  <h1>Articles on: Fruit</h1>

  <article>
    <h2>Apple</h2>
    <p>The apple is the pomaceous fruit of the apple tree...</p>
  </article>

  <article>
    <h2>Orange</h2>
    <p>The orange is a hybrid of ancient cultivated origin, possibly between pomelo and tangerine...</p>
  </article>

  <article>
    <h2>Banana</h2>
    <p>Bananas come in a variety of sizes and colors when ripe, including yellow, purple, and red...</p>
  </article>
    
</section>

<article>
  <h1>My Fruit Spinner</h1>
  <object>
    <param name="allowFullScreen" value="true">
    <embed src="#" width="600" height="395"></embed>
  </object>
</article>

pubdate
pubdate="pubdate"

The article element originally appeared on HTML5 Doctor on May 18, 2010.

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 meter element represents a scalar measurement within a known range, or a fractional value; for example disk usage, the relevance of a query result, or the fraction of a voting population to have selected a particular candidate.

When I first read about the meter tag, I immediately thought it would be useful for profile pages, such as height and weight, and maybe age, marked up in a nice definition list. However, the third line of the spec says

The meter element also does not represent a scalar value of arbitrary range — for example, it would be wrong to use this to report a weight, or height, unless there is a known maximum value

So there goes my idea. The emphasis of the spec definition is “a scalar measurement within a known range”. We’ll go through some sample usage now but I still think it would add useful meaning to a sportsman’s profile page for example.

Attributes

There are six attributes allowed with the meter tag: value, min, max, high, low and optimum. As we’ll mention later, the emphasis is on the author to use these correctly.

Value

This is what will be parsed out – the actual value. If you do not use the value attribute, then the first number inside the tag is the value: <meter> 2 out of 10</meter>. If a real number is not used, then the value is zero.

Min

The minimum allowed value. If there is no min attribute, then it assumes the minimum is zero. If it is not specified then the value is 0.

Max

The maximum allowed value. If the maximum value is less than the minimum value, then the minimum value is used as the max. If it is not specified then the value is 1. However, if it is possible to specify the value of this in the content – such as a percentage sign, as the maximum then will be 100%

Low

This is considered to be the low part of the value range. It must be less than or equal to the value of the high attribute. Also, if the low value is less than the min value, then the low value is the same as the min value.

High

This is considered to be the high part of the value range. If the high value is less than the low boundary, then the high value is the same as the low value. Also, if the high value is greater than the max value, then the high value is the same as the high value.

Optimum

This is considered to be the optimum value and needs to be somewhere between min and max. It can be greater than the high attribute

Let’s have a look at some examples

A voting or rating tool

<p>Your score is:  <meter>2 out of 10</meter></p>

We can give this further meaning by adding min and max attributes

<p>Your score is: <meter min="0" max="10">2 out of 10</meter></p>

<p>Your score is: <meter value="91" min="0" max="100" low="40" high="90" optimum="100">A+</meter></p>

Without the attributes

You do not always need to use an attribute with the meter tag. You could use

<meter>80%</meter>

Because the max value is going to be 100% (unless you always give that extra 10 ). You can also use fractions as the range is within itself, such as

<meter>3/4</meter>

Some real world examples

Christmas Calendar/Countdown

<p>Christmas is in <meter value ="30" min="1" max="366" title="days">30 days!</p>

Notice that the title attribute can be used to specify the unit (so we can use “centimeters” or “lbs”, and so on).

Just Giving

We could also use meter on the fundraising website Justgiving.

This page, for example, would use

<dl>
  <dt>Target</dt>
  <dd><meter min="145" value="145" title="pounds">£145</meter></dd>
  <dt>Amount raised so far</dt>
  <dd><meter min="0" max="1000" low="50" high="125" value="145" optimum="145" title="pounds">£145</meter></dd>
</dl>

Incorrect use

Empty tag

If you used

<meter min="0" max="100" value="75"></meter>

Nothing will display on your page – it is noted in the spec

The recommended way of giving the value is to include it as contents of the element

So you need to put something in the content of the tag and it doesn’t necessarily have to be a number. The spec has a good example of this

<p><meter value="0.5">Moderate activity,</meter> Usenet, 618 subscribers</p>
<p><meter value="0.25">Low activity,</meter> Usenet, 22 subscribers</p>
<p><meter value="0.25">Low activity,</meter> Usenet, 66 subscribers</p>

Which could be used to produce on-screen information as shown

As I noted earlier, it is incorrect to use as a weight or height, unless there is a maximum value. The spec gives this example:

<p>The grapefruit pie had a radius of <meter>12cm</meter>  and a height of <meter>2cm</meter>.</p> <!-- BAD! -->

Instead, one would either not include the meter element, or use the meter element with a defined range to give the dimensions in context compared to other pies:

<p>The grapefruit pie had a radius of 12cm and a height of 2cm.</p>
<dl>
<dt>Radius: <dd> <meter min=0 max=20 value=12>12cm</meter>
<dt>Height: <dd> <meter min=0 max=10 value=2>2cm</meter>
</dl>

Whilst the above is now a correct usage of the meter tag, how do I know the max height or radius of a grapefruit? I would prefer to use a meter tag there but instead I’d probably just use a definition list to display the information.

Browser support

The meter tag works in at least the following browsers Safari 4, Firefox 3.5, Chrome 2, Opera 9.64 naturally. The following javascript is needed for IE 6, 7 and 8 (see Remy’s article about Getting HTML5 to play nicely in older browsers.

 <!--[if IE]>
  <script  src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

As it is an inline element, you don’t need to do anything special with the CSS.

Conclusion

If I were to use

<meter value="1000" min="0"  max="500">100%</meter>

Obviously there are inconsistencies. Now, I am just being silly there but what the user will see on the screen is “100%” when the value is actually 1000. The meter tag puts the emphasis on the author to make sure that they are using this nice, new semantic tag,well, semantically and correctly.

The attributes can appear to be quite confusing but the spec is very detailed for this element. I do think they may have missed a trick by not allowing it to be used to give a stand-alone height or weight but overall I see the meter tag being used a lot in apps and on webpages, perhaps if used with javascript, it could generate live graphs and charts (though we can also use canvas for this).

Finally, I also wonder if meter allows for negative values? For example if the temperature was going to be between -10 and 5 degrees could I use meter to mark that up? I’d love to know your thoughts.

Useful Links

• http://www.whatwg.org/specs/web-apps/current-work/#the-meter-element

Share and Save:

Measure up with the meter tag originally appeared on HTML5 Doctor on October 7, 2009.

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

At first, I thought the <nav> element to be pretty simple. And whilst it still is very easy to use, I found the specification to not be overly helpful; a lot of decisions are left to the developer. Then on Monday Hixie made a change to the definition of <nav> in the draft following a prompt from our very own Dr Bruce.

How to use it

You are probably used to using something like

<div id="nav">
<ul>
<li><a.... etc

Or

<ul id="mainNav">

Well, for the sake of your markup, nothing much will change as you will now have something like this

<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/blog/">Blog</a></li>
</ul>
</nav>

The specification

The HTML 5 specification defines <nav> as:

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases, and no nav element is necessary for those links.

The key phrase there is “major navigation” (previously primary navigation).

Looking at the example they give – “In the following example, the page has several places where links are present, but only one of those places is considered a navigation section.”

<body>
<header>
<h1>Wake up sheeple!</h1>
<p><a href="news.html">News</a> -
<a href="blog.html">Blog</a> -
<a href="forums.html">Forums</a></p>
<p>Last Modified: <time>2009-04-01</time></p>

<nav>
<h1>Navigation</h1>
<ul>
<li><a href="articles.html">Index of all articles</a></li>
<li><a href="today.html">Things sheeple need to wake up for today</a></li>
<li><a href="successes.html">Sheeple we have managed to wake</a></li>
</ul>
</nav>

</header>
<article>
<p>...page content would be here...</p>
</article>
<footer>
<p>Copyright © 2006 The Example Company</p>
<p><a href="about.html">About</a> -
<a href="policy.html">Privacy Policy</a> -
<a href="contact.html">Contact Us</a></p>
</footer>
</body>

I have to say that this is no use to me. There are six items of navigation in the header element there. But only three are in the nav tag. There is no explanation as to what differentiates the first three links with the second three links – both go to different pages and all are in internal to that current site.

They also give a second example:

<body>
<h1>The Wiki Center Of Exampland</h1>

<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/events">Current Events</a></li>
...more...
</ul>
</nav>

<article>
<header>
<h1>Demos in Exampland</h1>

<nav>
<ul>
<li><a href="#public">Public demonstrations</a></li>
<li><a href="#destroy">Demolitions</a></li>
...more...
</ul>
</nav>

</header>
<section id="public">
<h1>Public demonstrations</h1>
<p>...more...</p>
</section>
<section id="destroy">
<h1>Demolitions</h1>
<p>...more...</p>
</section>
...more...
<footer>
<p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>
</footer>
</article>
<footer>
<p><small>© copyright 1998 Exampland Emperor</small></p>
</footer>
</body>

This is a little more helpful as I find the biggest isse of the <nav> element is deciding which sets of links should be classed as major navigation.

Where to use it?

If you take a peek at the source code for this site, there are three uses (Ed. or four if you’re on a page that includes pagination) of the nav elements – we used it on the main navigation and above the footer (both are exactly the same links by the way). We also decided to use it on the skip links that are included for accessibility.

Looking at the content of the site, it could be argued that the <nav> element could be used on the Recent Articles and Categories listings in the sidebar. Should you do it? Honestly, I think it is hard to say from looking at the spec – but I would say these are not “major navigation” but it would tempting to do, particularly if you’re analytics suggest these areas of navigation are ‘major’ ways in which your users navigate your site.

Other Possible Uses

Below are a few more examples of other areas of the site in which you might consider using the <nav> element. It is also important to note that while XHTML 2 <nl> element, this hasn’t been replicated in HTML 5 because navigation does not have to take list form, as we’ll see.

• Table of Contents
  I would say definitely yes to that – it is primary navigation for that particularly content
• Previous/next buttons (or pagination)
  I would say yes to this because it is important to the overall structure and hierarchy of the blog/site
  
• Search form
  For me, a definite yes, but it is not mentioned in the spec. A search form is hugely important to the navigation of a site, particularly large sites which rely almost solely on their search engine.
  
• Breadcrumbs
  Again, I would say yes to this as well. Although breadcrumbs are not always necessary and can be used when not applicable, on large sites a breadcrumb trail can be an important navigation aid.

The difference of nav from menu

If you aren’t aware there is another element that can confuse the issue in the HTML 5 specification – menu. I’ve noticed that some developers are using the <menu> element for navigation rather than the <nav> element. We thought it best to clarify that <menu> is to be used for a list of commands and is an interactive element and more likely to be used exclusively in Web Applications. We will be covering more about the <menu> element in a later post.

And finally…

Only with the help of the community, and hopefully a much clearer spec, can we be sure when and perhaps more importantly, when not to use the <nav> element.

Share and Save:

Semantic navigation with the nav element originally appeared on HTML5 Doctor on July 15, 2009.

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 3.5+, and latest builds of Opera (oh, and potentially the next release of Chrome).

The ‘old’ way

Ugh, look at this horrid code:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" />
<param name="allowfullscreen" value="true" />
<embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true">
</embed>
</object>

Yuck. And as you know, you need Flash for this. Or it is often delivered via javascript as well so it is not perfect.

The HTML 5 way

Nice, clean, minimal code:

<video width="640"  height="360" src="http://www.youtube.com/demo/google_main.mp4"  controls autobuffer>
<p> Try this page in Safari  4! Or you can <a  href="http://www.youtube.com/demo/google_main.mp4">download the  video</a> instead.</p>
  </video>

Autoplay

The video tag has an attribute that allows the video to play when the page loads.

<video src="abc.mov" autoplay>
</video>

But autoplay is bad ok? Youtube and the like autoplay their videos. But before you push the launch button for your HTML 5 site, strongly consider whether it should autoplay a video.

Download

If the browser doesn’t know what to do with video tag, or if there is a display error, you can offer a download to the video instead:

Autobuffer

Autobuffer attribute is used when autoplay is not used but the page/site owner thinks the video will be watched at some point. The video is downloaded in the background, so when the user starts the video, it will be able to play at least some of the content. If both autoplay and autobuffer are used, then autobuffer is ignored.

It is worth pointing out at this point that the browser automatically downloads the video anyway, with or without autobuffer and there is nothing you can do about it. This has bandwidth and loading time issues, particularly if you have a lot of video on your page.

Poster

Use the poster attribute to display a frame of the video (as a .jpg, .png, whatever), in case the video doesn’t load for some reason. It can be a local image or elsewhere on the web

<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp" autobuffer controls poster="whale.png">
<p>Try this page in Safari 4! Or you can <a href="http://www.youtube.com/demo/google_main.mp4">download the video</a> instead.</p>
</video>

You should use the poster attribute because you don’t want the user to see nothing.

Controls

Adding this attribute means you can use your own play/pause/etc buttons for your video. Safari has lovely default controls but you can create your own.

Subtitles

There is no attribute for subtitles (yet – hello HTML 5 group) but just thought I’d mention it. Personally I love the way the JW FLV player handles it, but this is a very interesting read: http://blog.gingertech.net/2008/12/12/attaching-subtitles-to-html5-video/

But ideally, we will be able to delivery subtitles/description audio without javascript.

Current issues

Codecs

I won’t claim to be a video/audio codec expert but there are a few outstanding issues in this area, which this article does a good job explaining.

Internet Explorer

IE hasn’t a clue and as the market leader, will need to be addressed. Thankfully here at HTML 5 Doctor, we have a few hints and tips for IE that will be coming shortly.

Physical file

So far, the video tag needs to link to a physical file (see example at the top). What we need here is a way to just import, say a YouTube video, using the video tag, like we did with the embed tag.

When I set out writing this article, what I wanted to do was kick it back to 2008 and Rickroll the lot of you but so far I haven’t found a way to do it with the video tag.

Here’s what I think you should be able to do with the video tag:

<video src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" autoplay>
</video>

How awesome would that be?

Conclusion

I think there is a long way to go yet but this tag has real potential. The issue over codecs looks certain to run and run, but you can put fall backs in the code, like the download link. You could use a combination of the video, object, embed elements, but that markup will be pretty horrendous:

<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" autobuffer controls poster="whale.png">
<object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640"height="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param value="http://www.youtube.com/demo/google_main.mp4">
<param value="true">
<param value="false">
<embed src="http://www.youtube.com/demo/google_main.mp4" width="640"height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/">
</embed>
</object>
</video>

In the meantime

If you don’t want to use the video tag yet, then here is valid XHTML code to display a video:

<object width="460" height="265" data="http://vimeo.com/moogaloop.swf?clip_id=5072163" type="application/x-shockwave-flash">
<param value="http://vimeo.com/moogaloop.swf?clip_id=5072163"></param>
<param name="allowFullScreen" value="true"></param>
<param value="always"></param>
</object>

Further reading

• Editor’s Draft 17 June 2009
• Accessibility of HTML 5 video and audio elements
• Setting up a HTML 5 on-line video site
• Watch Video…without Flash
• YouTube HTML 5 demo
• Using the HTML 5 video tag with a Flash fallback
• Lessons From Building a Basic Video Player in HTML 5

Share and Save:

The video element originally appeared on HTML5 Doctor on June 18, 2009.