HTML5 Doctor » Richard Clark

Your Questions Answered #10

Richard Clark — Fri, 09 Jul 2010 12:45:00 +0000

The clinic is getting busy with more HTML5 ailments. This week, we’ll cover using sections within a footer, vs. Flash security, why HTML5 elements are treated as inline, using offline with storage, and marking up block quotes.

Footer with sections

Tommie asked:

Hi, I’ll get to the point right away. I want to use, lets say 3 section elements inside a footer each floating left and inside each of this sections I have some standard information. Is this the right way to go, or should I put my section elements outside the footer and only put copyright text etc. inside the footer?

Thanks!

You could use a

within

. but
is a sectioning root anyway
is flow content and can contain sectioning content. If you want them to appear in the outline within the footer, then it makes perfect sense to do as you suggest.

See more in Jack’s article on the
element. There are also some more examples in the spec.

Cheers, Rich

vs. Flash (security and copyright)

John asked:

I’m seeing lots of opinions that the canvas element might free us of the Adobe Flash monopoly, but what mechanisms can we use to protect our works when using straight HTML and JavaScript?

Right now I’m thinking about simple flash games, but I’m sure this is a concern for others wanting to use (free) HTML methods to perform functions now reserved more for flash.

Thanks for any input.

I’m not sure of any security mechanisms that we can use to protect content. It isn’t really any different than an image or any other type of resource. Having said that, decompilers can circumvent some of Flash’s security measures as well, so you may not be much worse off using .

If we come across anything, we’ll be sure to let you know.

Cheers, Rich

HTML5 tags inline?

Tami asked:

So, I’ve been experimenting with the new HTML5 elements, and one frustration I have is understanding the native display of the new elements, and how it works within the document flow. So far, experimenting with them has shown them to be very unpredictable. At best, they’re kind of behaving like a bastard span. They seem to be behaving like inline elements but that seems like it is wrong. In some cases, setting to display: block gives the expected behavior, but on the footer tag, it’s not interacting with floated elements properly.

So, are these new elements inline or are browsers still just trying to catch up? I tried looking in in the HTML5 working draft spec, but so far I am not understanding the way its written (HTML4’s specs clearly spelled out whether an element was display or inline).

Here’s an article from my personal blog that I wrote a while ago describing why browsers treat HTML5 elements as inline.

Thanks, Bruce.

Offline + Storage

Dear Doctor, I’m trying to work out if HTML5 will be able to do the job that I want. I have a number of documents (PDF, PPT, etc.) that I want to share with people in my team. These documents may change from time to time. Also, the people may not always be connected online.

Would it be possible to “cache” documents in an offline database in the browser so that when they are not connected they can still view them but when they are, they get the latest versions (which also refresh the cache)?

That way I can do a fairly pretty interface for sorting these documents so that they can easily find them.

Thanks in advance for any help you can provide.

You can, but I would strongly encourage you to think carefully about whether it’s worth it.

You can include these “assets” in the manifest, which will make the files available to the offline applications (note that this isn’t storage, just caching, which is what you’re after).

The problem is that when the visitor first hits the page with the manifest — which contains all the PDFs, PPTs, etc. — it will download all of these files. This is the bit that I’d encourage you to consider carefully. To compound that, I believe there’s a 5MB limit on the cache, so you might run into problems if you’re trying to cache more than that.

I’ve not covered offline cache on HTML5 Doctor yet (though it’s on the list), but I have described the process on my 24ways article.

If there are new versions of the cached files, you need to change the contents of the manifest — e.g., include a version number, which will trigger a download of all the assets again. Not ideal, but that’s the current situation.

Hope that helps a bit, Remy

Correct markup with blockquote

Phil asked:

Hi, in HTML 4.0 Strict and XHTML 1.0 Strict, text inside a blockquote element is required to be nested inside another block-level element, e.g. p.

In HTML5 that requirement seems to have been relaxed, as the following element validates successfully:
This is a blockquote.
The HTML5 spec uses the p element in the usage examples, but does not mention whether it is required.

Can you please confirm if this requirement has now been deprecated?

Great question. As I expected, this validates:



blockquote test
Tiger tiger burning bright

We double-checked with the WHATWG mailing list and confirmed that

can contain ‘flow’ content (i.e., text, paragraphs, etc.).

To summarise, it would be valid not to further mark up content within a
, but authors are encouraged to use a
(or other more appropriate element).

Bruce

Got a question for us?

That wraps up this round of questions! If you’ve got a query about the HTML5 spec or how to implement it, you can get in touch with us and we’ll do our best to help.

Share and Save:

Your Questions Answered #10 originally appeared on HTML5 Doctor on July 9, 2010.

Happy 1st Birthday us

Richard Clark — Tue, 29 Jun 2010 09:45:27 +0000

It’s our birthday and we’ll cry if we want to, or so the song goes. Today marks HTML5 Doctors first birthday so we thought we’d let you in on the celebrations. This brief post takes us through a little recap of what we’ve done, looks at what’s to come and we’ve even got a little birthday treat for you all – the HTML5 equivalent of bringing doughnuts to work.

What we’ve done

The site was launched publicly a year ago today and what a year it’s been. We could never have expected the level of interest we’ve had nor that the site would be so well received. We’d like to thank you all for reading, commenting and linking to our articles. We intended the site to have a community feel and feel we’re continuing to work towards that.

Having met through twitter and then in person at FOWD 2009 the idea was formed over a few beers. The name derives from a certain Mr Zeldman’s “Ask Dr Web” (“A complete guide to web design”). You can find a little more on our history over on the about page.

We started with five doctors (Jack, Tom, Mike, Bruce & Rich), which became six just before launch when Remy came on board. We’ve since grown to seven with the indomitable Mr Studholme joining our ranks several months ago. Extra credit should also go to Brandan Lennox who knuckles away in the background studiously editing our copy. Between us we’ve managed to crank out more than a post a week, which we hope will increase in the coming year.

We’ve also had several guest authors who have covered some great topics such as audio in the browser, why designers should care about HTML5 and data attributes so thanks to Mark, Cennydd & Chris.

Last November we launched the glossary which offers an introductory view to HTML5 elements with code examples and links to our more in depth articles. It’s been a well used resource and we’re adding to it all the time, slowly building it up to be a complete resource.

In terms of events at least one of our team has spoken at a number of events in the past year, not least Bruce (with Martin Kliehm) being voted the 4th best talk at SXSWi. Also, earlier this month we ran a HTML5 clinic at Web Directions @Media in London. I think we managed to help quite a few people out down there. Remember to get in touch if you’re looking for someone to talk HTML5 at your event or you feel you need an emergency clinic setting up.

Future Plans

That’s enough looking back, now let’s start looking forward. We’ve got some cracking posts and super developments in the works for the coming months. I can’t say much more than that right now but I can tell you we’ll have articles on web forms, canvas, microdata and taking your applications offline in the not too distant future.

What we’d really love to do is to start writing articles that you, our readers want. So here’s your chance, if you’ve got a topic you’d like us to cover or an idea for the site then please leave a comment below. We’ll take a look through them and get writing.

A small gift

Everyone likes to receive a present on their birthday right? Well for our birthday we decided to give you a present, in the form of a handy flowchart to help you choose the most semantically appropriate HTML5 element. Those lucky folk who attended @media already received have a hard copy but here’s the electronic version you asked for.

Inspired by an original version sent in by Piotr (one of our readers) and developed by Oli the chart helps guide you through those tricky differences between header, footer, aside, section, article, figure and yes, div. It’s available in either pdf or png format.

Download PDF [320kb]

Download PNG [110kb]

We hope you find it useful and we’d love to hear any feedback you might have.

All that’s left for us to say is thanks for a great first year and here’s to the next one!

Share and Save:

Happy 1st Birthday us originally appeared on HTML5 Doctor on June 29, 2010.

Your Questions Answered 9

Richard Clark — Fri, 14 May 2010 14:15:57 +0000

The Doctor is in with another round of patient questions about HTML5. This week, we’ll cover offline viewing on requests, the drag-and-drop API, using href on any element, the

element, and headings.

Offline viewing on requests

Johan asked:

It is possible to let Firefox 3.5/3.6 save a page for offline viewing with the manifest file?
In that case Firefox asks for permission to save the site the same second you arrive – not very user-friendly.

Is it possible to send the save-it-locally request via Javascript on a click?

Basically I want a link/button which will fire the request – and not on document load.

While it isn’t possible to make Firefox 3.5/3.6 save a page for offline viewing with the manifest file, there is a way to do this. It all depends on how you write the “save-it-locally request” code. You have two options:

If you want to store an arbitrary document that is not explicitly listed in your manifest, you could run an Ajax request for that document and store its contents in localStorage. When you want to view that document, load it from localStorage and overlay it on the existing page.
Dynamically manage a manifest file for individual users, so that if a user requests a new file that isn’t in their manifest, register this on the server side and add it to the manifest — which is bespoke to this specific user — on the fly.

I’m not sure what you’re seeing with regards to the permissions error. When I test the manifest (offline **cache**), it doesn’t ask twice.

Note: you asked about Firefox 3.5 — the offline manifest doesn’t work properly at all in this version.

Thanks, Remy

Question about dragging

Marc asked:

Evening,

I’m trying to get my head around the drag and drop (DnD) possibilities of HTML5. I have a “simple” task: Read the content of a XML file, using JavaScript, and do some manipulations of he XML. Without the use of server side scripts.

I tried my way with Google, but apart from people complaining about the DnD specs, I wasn’t able to find much insightful informations.

Can you point me toward resources to understand the DnD possibilities of HTML5?

Thank you Doctor, a French canadian HTML5 fan

Absolutely! There’s actually an HTML5 Doctor article covering native drag-and-drop. It also includes links for further reading and related posts (such as accessibility experiments).

I hope that helps.

Cheers, Remy

About the `href` on any element

Luan asked:

I’ve heard a long ago that href would work in any tag, such as a
or a h1, even a div and others… but I don’t see anything about this in the last days. Do you know if this is going to work?

That was in XHTML2 (on which the W3C have now stopped work).

The HTML5 equivalent is to wrap an around the other tags. It’s called block-level linking, and we’ve written an article about it.

Cheers, Bruce

W3C Validator for the
element

Fjpoblam asked:

I have a (prospective) structure containing 8 figures: each an image with a caption. My goal is an image gallery, each image clickable toward an individual htm file containing a slide show. (In html4 I structured each “figure” as a div: figure seemed ideal for the task.)

Problem is, I tried to follow the *validator* hint with a dd for the image and a dt for the caption (each surrounded by an a). Upon doing so, the validator pops up an error. When I try a straight image with a legend, it is also rejected for want of a dd and an optional dt.

What gives? Do you have a hint? Or better, simply, point me doofus to the correct doc so’s you’ll “teach a man to fish”.

I’m not sure if the validator is up to date or not, but you shouldn’t be using

anymore. Please use

See our article on the

and

elements for more.

Also see our glossary for more examples.

Cheers, Rich

Headings

Thomas asked:

Dear Doctors,

you covered the new header tag in an article. The header tag should contain a heading element, like h1-6. So far so good, but how do I structure my headings further on. E.g. I’ve got this:
	
		My major heading
		Subheading
		Abstract text...
	
	... lorem ipsum ....
	Heading within my article
	... dolor sit amet ...
	Subheading in my article
Which heading-level would be appropriate in my example? h1 because it starts again? or h3 because it continues?

Thank you

If the first is a new subheading and not related to the

already there, then would be an
. Then would be an
if it is a subheading of the above
.

However, if you’re splitting the article into sections, then you could use an
each time. See our article on the section element for more.

Thanks, Tom

Got a question for us?

That wraps up this round of questions! If you’ve got a query about the HTML5 spec or how to implement it, you can get in touch with us and we’ll do our best to help.

Related Posts:

Your Questions Answered #10

Your Questions Answered #7

Your Questions Answered #4

Your Questions Answered #3

Your Questions Answered #8

Share and Save:

Your Questions Answered 9 originally appeared on HTML5 Doctor on May 14, 2010.

Your Questions Answered #8

Richard Clark — Wed, 05 May 2010 13:00:55 +0000

We’re back with more of your questions (and our answers) about HTML5. In this article, we’ll discuss using a

at the top of your markup, how to skip to certain parts of a video, styling form elements and attributes, and more.

HTML5
on top

David asked:

Hi!

I wonder if it possible to put the footer on top such as www.perfectfools.com with HTML5 and still make the HTML validate.

Thanks a lot and best regards!

David

HTML elements should always describe their content, so if you think that

is most suitable for your content, then you’re absolutely entitled to use it. Despite its name,

’s position is in no way restricted — visually or ordinally — within a document.

Cheers, Rich

Skip to certain parts of a video file

John Paul asked:

Hello

supposing I have a very long video file in an accompanying video element, without using the controls, how do I skip to certain time stages through the API? Much as one would on a DVD menu, for example.

Apologies if this has been asked already.

JP

You can achieve this using JavaScript and data attributes. Check out these articles from Bruce Lawson and Patrick Lauke from Opera. They’ve used data attributes to add subtitles, but you could just as easily use the attributes to jump to specific parts of a video.

For example, set data-start and data-end attributes on your element. You can then use JavaScript to read the attribute values, set the current position of the video using the currentTime attribute, start playing the video via the play() method, and even stop playing the video by listening for the timeupdate event and stopping the video with pause() once it’s reached a specified time. See the spec for the HTMLMediaElement object for more details.

Cheers, Rich

In addition to this, the recent addition of the track element will make this more easily achievable. We will cover the track element in more detail soon.

s within navigation links

Benjamin asked:

Hey,

I’m currently doing up the new version of my website, and decided to do it in HTML5.

One area I’m confused about is whether or not for navigation links I should be using a h1 or h2 element.

For example:
    
        Actions
    
    
        Sitemap
        Login
        Search
        Enquire
    
Should those span.title elements be wrapped in a h2? My thoughts on why this would be required is for an outline, as navigation should appear in the outline right?

Thanks a bunch.

In theory, yes, navigation should appear in the outline. I personally don’t think it should require a heading, and I know there have been requests to the developers of the outline algorithm to make

show as a ‘Navigation’ element rather than ‘untitled section’.

If you want to use a heading within your

element, using an

would be fine. You don’t really need the

element in there too. The outline would be calculated correctly without it. With current browser implementations, however, I don’t think it would make much difference if you used an

.

You don’t need the elements in the

s. They aren’t required in the outline unless they’re providing a table of contents for the document.

I hope that answers your question. We plan to write an article regarding outlining soon.

Cheers, Rich

Styling supported HTML5 form elements and attributes

Mike asked:

First off, I wanted to say I really appreciate the service this site is doing. I have found this site to be a very valuable resource and is always the first place I look when I have a question about implementing HTML5.

How do I style/edit/change the UI generated feedback for the new HTML5 form elements and attributes. For example, In Opera, is there a standard CSS notation to style the error message so that it doesn’t necessarily show up under the field in red? Where in the DOM is it inserted? Is the message for a required field customizable? Finally, is this information specified in the HTML5 spec or are the implementation details left up to the browsers?

There is currently no way to use CSS to style error messages. As the HTML5 spec isn’t finished yet, it’s a bit early to start specifying new CSS.

The HTML5 spec defines no UI requirements regarding how browsers should display messages.

You can override a browser’s default behaviour with JavaScript. I’m not a scripter, but I reckon you would need to attach an event handler to the error event and have the handler cancel the default action and show a custom error message. I think that as long as you call evt.preventDefault() within the event handler, it should prevent showing the default error message. Then you can add an element into the DOM and style it as you wish, with the default error handling as a fallback for those without JavaScript. If anyone gives this a go and gets it working, we’d be very interested to see the results.

Ta, Bruce

Section headers

Tibor asked:

Hi. I would like to know, how to use section’s headers. Is this code correct?
	header 1


	header 2
or I have to use header element inside every aside, article, section etc.
	
    	header 1
	


	
    	header 2
	
Tibor

Your first example is correct. You only need

to group items within a header. If the header contains only a single

–
element, you don’t need to wrap it in a
.

Thanks, Bruce

Got a question for us?

That wraps up this round of questions! If you’ve got a query about the HTML5 spec or how to implement it, you can get in touch with us and we’ll do our best to help.

Related Posts:

Your Questions Answered #5

Your Questions Answered #7

Your Questions Answered #4

Video: the track element and webM codec

Your Questions Answered 9

Share and Save:

Your Questions Answered #8 originally appeared on HTML5 Doctor on May 5, 2010.

HTML5 Doctor at Web Directions @media

Richard Clark — Thu, 29 Apr 2010 13:15:59 +0000

We doctors are excited to announce that we’re teaming up with Web Directions @media to bring you something very special. Not only are we a community partner for the event, but several of us will be running an HTML5 clinic to help cure your next generation markup ailments. We’ve also got some great discounts for the event to ensure you get the best deal available.

A Note about Web Directions @media

Founded in 2005, @media is recognised as one of the world’s leading conferences for web professionals. We pride ourselves on keeping up to date on the latest developments in the design and development world. That means HTML5 has a big presence in our program of hand-picked world-leading experts this year. Here’s a taste of some of the HTML5 related talks and workshops that are taking place:

HTML5 Doctor Bruce Lawson gives the lowdown on HTML5 for web designers, covering new semantic markup features, the HTML5 video and audio elements, and much more
Fellow clinician Remy Sharp gets out his scalpel and dissects what HTML5 has to offer for application developers. He’ll also be delivering a full-day workshop on the same topic
Jeremy Keith delivers a full-day workshop on semantic markup featuring HTML5
Jonathan Stark looks at how you can use web technologies including HTML5 to build native applications for platforms like Android, iPhone, and iPad
Matt Biddulph, founder of Dopplr, looks at adding geolocation to your web applications

Plus much, much more! For a complete rundown on what’s going on, see the full @media schedule.

HTML5 Clinic

All of us at HTML5 Doctor are very excited to announce that there will also be a special HTML5 clinic as part of the @media Expo. Led by various HTML5 Doctors, we’ll help cure what ails you when it comes to HTML5. Full details of the clinic will be made available shortly. We’ll be sure to let you know first.

Discount Codes

We’ve managed to get you a great discount on both the workshops and conference attendance. All you have to do is use the discount code ‘HTML5Dr‘ when booking and you’ll be eligible for the following:

HTML5 Doctor Remy Sharp’s “HTML5 for Web App Developers” workshop for £275 (£50 off)
Jeremy Keith’s “Get Semantic with Microformats and HTML5″ for £275 (£50 off)
Conference attendance for £399 (before discount period ends [around May 7th])
Conference attendance for £449 (after discount period ends)

So be sure to get the best deal on tickets and book before May 7th! If you’re going, let us know by leaving a comment below. We hope to see you all there!

Share and Save:

HTML5 Doctor at Web Directions @media originally appeared on HTML5 Doctor on April 29, 2010.

Your Questions Answered #7

Richard Clark — Tue, 20 Apr 2010 14:10:51 +0000

Here we are again with another round of patient questions about HTML5. In this article, we’ll be covering AJAX, the eternal question of

, our old friend Internet Explorer, how to mark up multiple blocks of content in a sidebar, and using

with .

HTML and AJAX

Arie asked:

I’m still learning about html5 and javascript, I’m wondering how html5 makes doing a lot of the things currently done in ajax and javascript more simple. Is it by providing things like the canvas that unify ideas?

Certain parts of HTML5 will indeed simplify or reduce the need for JavaScript. One such area of improvement is Web Forms 2.0, which will handle client-side form validation in the browser and provide new input types (like that checks for a valid email address). Of course, you’ll still need to validate your forms on the server, but at least the browser will catch the most obvious mistakes before the user actually submits the form.

Other parts of HTML5, like Web SQL Databases and , are essentially JavaScript APIs. They may not cut down on your need for JavaScript, but they do provide a consistent interface to some powerful functionality and will enable your application or site to do more things within (or outside of) the browser.

Cheers, Rich

or
?

Paul asked:

Hello

I see you are using divs on your website, I thought divs should be replaced by more semantic tags such as sections or article. what did I miss?

Thanks

Hi Paul,

Just like with HTML4, you shouldn’t use

s or s where another, more precise element would fit the bill. But for grouping arbitrary content,

s and s remain the way to go.

Thanks, Bruce

HTML5 and IE6

Adam asked:

Greetings HTML5 Doctor,

Is it at all possible to have a HTML5 layout while 30% of our users are running IE6? We are an IT company and our website is very large so having separate versions is completely impractical. HTML5 would allow us to move on and keep our markup a lot simpler but with no concrete guarantees regarding universal support is HTML5 ever going to get off the ground within 5 years while not having to resort to javascript solutions?

Simply change the doctype and you’ll be writing HTML5! If you want to use new elements, however, you’ll need to use JavaScript to support them (for all versions of IE up to IE8). The best place to start? Read Remy’s article on How to get HTML5 working in IE and Firefox 2.

I think we’re in a position to do something about this. By using the new doctype, block-level links, and new form input types (that degrade gracefully), we can start promoting HTML5 right now.

Cheers, Rich

Multiple blocks in a sidebar

Bart asked:

On my page (revora.net) I have a sidebar with content that I deem appropriate for the aside element. The sidebar contains several blocks of content. I’ve currently made the whole bar aside and made the blocks div. Is this correct, or should I do it the other way around?

It sounds like your first approach is correct. The

s might be

s or maybe

elements though, depending on their content. I suggest you read our article (and the comments) on the

element.

Thanks, Tom

Header with

Diego asked:

Hi,

This structure is right?
   
       
           Foo Bar
           Baz Bat Qux
       
   
   lorem ipsum
What I mean is, if I have a HEADER with just 2 H(n) I need to put these into a HGROUP ? Or… I can remove the HEADER and leave just a HGROUP? What’s the better solutions for it?

Thanks for all,

Diego Tres

What you have is correct. Basically, in the document outline, you will only see “Foo Bar” as the heading for that section. “Baz Bat Qux” will be hidden from the outline.

You don’t have to use a

within your

or an within your

. Similarly, you don’t have to use a

around your .

To summarise, the best solution (if you don’t require the

to appear in the document outline) is what you’ve already got.

Cheers, Rich

Got a question for us?

That wraps up this round of questions! If you’ve got a query about the HTML5 spec or how to implement it, you can get in touch with us and we’ll do our best to help.

Share and Save:

Your Questions Answered #7 originally appeared on HTML5 Doctor on April 20, 2010.

The figure & figcaption elements

Richard Clark — Tue, 13 Apr 2010 13:45:20 +0000

In traditional printed material like books and magazines, an image, chart, or code example would be accompanied by a caption. Before now, we didn’t have a way of semantically marking up this sort of content directly in our HTML, instead resorting to CSS class names. HTML5 hopes to solve that problem by introducing the

and

elements. Let’s explore!

The
element

The

element is intended to be used in conjunction with the

element to mark up diagrams, illustrations, photos, and code examples (among other things). The spec says this about

The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.
W3C Specification

The
element

The

element has been the subject of much debate. The spec initially wanted to repurpose rather than introduce a new element. Other suggestions included , ,

or the

–

elements. was changed, so we then used a combination of

and

inside

at Jeremy’s suggestion. Most of these suggestions failed since there was no backwards compatibility for styling with CSS.

Regular readers will know that a new element was recently introduced, namely

. Who knows if it’ll stick, but for now here’s what the spec says about

The figcaption element represents a caption or legend for a figure.
W3C Specification

The

element is optional and can appear before or after the content within the

. Only one

element may be nested within a

, although the

element itself may contain multiple other child elements (e.g., or

).

Using  and 

So we’ve seen what the spec says about these elements. How do we use them? Let’s look at some examples.

Figure with an image

An image within a 
 element without a caption:



Here’s the code for that:


  


Figure with an image and caption

An image within a 
 element with an explanatory caption:

A cheeky macaque, Lower Kintaganban River, Borneo. Original by Richard Clark


and the code that we used:


  
  A cheeky macaque, Lower Kintaganban River, Borneo. Original by Richard Clark


A figure with multiple images

Nesting multiple images within one 
 element with a single caption:

Australian Birds. From left to right, Kookburra, Pelican and Rainbow Lorikeet.
Originals by Richard Clark


The code:


  
  
  
  Australian Birds. From left to right, Kookburra, Pelican and Rainbow Lorikeet. Originals by Richard Clark


Figure with a code block

The 
 element may also be used for code examples:

Creative Commons Attribution Share-alike license
Using  around a Creative Commons license link with rel="license"


Here’s the code for that:


<small><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution Share-alike license</a></small>
Using <small> around a Creative Commons license link with rel="license"


Differences between  and 

We covered 
 in an earlier article, but it is important to note the difference between the two. You should choose between  or  by asking yourself if the content is essential to understanding the section:


  If the content is simply related and not essential, use .
  If the content is essential but its position in the flow of content isn’t important, use .


Having said that, if its position relates to previous and subsequent content, use a more appropriate element — e.g., a 
, a plain old , a , or possibly even , depending on its content.

Don’t stop there!

No need to constrain your 
s to images and code examples. Other content suitable for use in  includes audio, video, charts (perhaps using  or ), poems, or tables of statistics.

It may not always be appropriate to use the 
 element, though. For example, a graphic banner should not be marked up with . Instead, simply use the  element.

Summary

As we’ve illustrated in this article, there are a lot of possibilities for the 
 element. Just remember to make sure it’s the most appropriate element for the job. But you already do that for all your markup, right?  
Related Posts:
The small & hr elements
The hgroup element
Hello, summary and figcaption elements
Your Questions Answered 9
September HTML5 spec changes


Share and Save:


	
	
	
	
	
	
	
	
	
	
	
	
	
	
	




The figure & figcaption elements originally appeared on HTML5 Doctor on April 13, 2010.



Your Questions Answered #6
Richard Clark — Thu, 08 Apr 2010 14:30:59 +0000

			

				

			
		
 We’re back with another round of patient questions about HTML5. In this article, we’ll discuss using multiple 
s, audio codecs, microformats, post bylines, and the  element.
Using multiple s
Bnonn asked:
I’m unsure of how h1 is supposed to be used now that pages can be divided into sections and articles. In (X)HTML4, a page was basically a page, and so you only had one h1 element: the top level heading for the page. I’m not even sure if that was a requirement of HTML4, or if it was just a de facto standard, but it made sense.
Now, however, there are any number of possible sections and articles per page; each of which may contain any number of heading elements (and one of those might be inside a header element). Given that h1 is a top-level heading, it seems as if each section and/or article should have one, in addition to the page-level h1. However, this contradicts what I know of accepted usage, so I’m confused about the way in which I should be marking up headings in HTML5. It doesn’t seem right to start headings in a section, for instance, with h2, because then…where’s the top-level heading for that element? But it doesn’t seem right to start them with h1, because that element in current web usage has more “power” than warrants its use there.
There is also SEO to wonder about. Even if using multiple h1 elements is right, I wouldn’t want to be penalized for it by Google. So what’s the story with that?
Any help is much appreciated.
Regards,
Bnonn

Basically, you can use multiple 
s in order to shape the document outline. So an  within a  will be treated like an  (if it is a nested ). If that  (and only that ) is aggregated elsewhere on the web, however, it will fit seamlessly into that external document’s outline. This means that your original  could be treated as an , , , or  as appropriate.
I hope that makes sense! Bruce’s article on the section element touches on this, and we also hope to talk more about document outlines in the future.
Cheers,
Rich
P.S. Multiple 
s in HTML4 are perfectly legal, but seldom used.
Audio Codecs
Adam asked:
Hello,
I’ve got a query about the issues regarding what codecs to use for the audio tag. I don’t quite get why Firefox won’t support mp3. Surely the browser calls on the codecs present on the operating system, not within the browser, so how are the licensing issues a problem to the browsers if they are simply leaving what is already present (and in theory already licensed)?
I fully admit that I am no lawyer. It just seems very odd the line of argument Mozilla has taken.
Adam Wilcox

I’m not sure why they’ve taken that stance, but I know that Mozilla only plans to support Ogg and Apple are keen to push MP3 and MP4, so we’re at stalemate. Because of this, discussion of specific codecs has been removed from the spec altogether.
Although not related to audio, see this article I wrote about YouTube and Vimeo supporting HTML5 video. It explains a little about codecs.
Sorry I can’t be of more help.
Rich
Since writing this reply there has been a lot more talk over codecs for both video and audio since Microsoft announced they would be supporting H.264 in IE9. We’ll cover this in more detail soon.
hCards
Ken asked:
How does html 5 deal with hCards and microformats in general? Specifically, can you have more than one hCard per page? As I understand it currently, having more than one is problematic. I’m asking now because of the treatment “footer” and “aside” has gotten, i.e. they are context sensitive to their “article” or “section” unless top-level, then applied to the page. Also, the use of scoped on style tags: hCards should be updated in a like manner for html 5.
Thanks for hearing me out. I don’t know if this is the appropriate place for this question, but as html 5 is much more useful, I thought maybe a post is in order  
Also, “article”’s impact on the hAtom microformat makes for an interesting article, don’t ya think?

We touched upon microformats in our articles on the 
 and  elements, but we’ll try to cover more soon (possibly in an article on the  element).
I haven’t heard that having more than one hCard is problematic. I’ve certainly never had any issues doing that. If you check out the source code on the homepage of HTML5Doctor, you’ll see we’ve used multiple hCards — one for each author’s name associated with a post.
Hope that helps a little.
Cheers,
Rich
Article bylines
Eric asked:
I tweeted to you guys a few days ago (@ericdfields), wondering what you recommend for bylines for blog posts. Bylines, borrowing a newspaper term, would be the ‘Posted by SoandSo on Nov 1, 2010′ copy you find under the article of your typical blog post.
To me, they seem like something of an ‘aside’ for the header of the document.
I don’t know if its perfectly valid, but here’s the test case I whipped up.
Thanks in advance for any insight!

In my opinion, they’re header or footer information, so I do:

  
    Foo
    Bar
  
  Posted by Bruce on 1st November

Thanks, Bruce
How to use  with a date in astrology
Dear HTML5Doctors,
I was confused in how to using the time tag with the Astrology date. For example if I have a chunk of content like this:
ARIES: 13 Apr – 14 May
how can I use attribute “datetime” to explain the format of that date?
ARIES: 13 Apr - 14 May
The year of birth is not fixed, please advice me some solutions about this.
Thank you,
radiz

Hi Radiz,
The time element is for one specific day, not a range or “imprecise” date. So you can’t use it for “13 April.” You need to use it for a specific “13 April” and give a year. For more, see our article on the  element.
Thanks, Bruce
Got a question for us?
That wraps up this round of questions! If you’ve got a query about the HTML5 spec or how to implement it, you can get in touch with us and we’ll do our best to help.

Related Posts:

Your Questions Answered #7
Your Questions Answered 9
Your Questions Answered #4
Your Questions Answered #5
Your Questions Answered #8


Share and Save:
	

	

	

	

	

	

	

	

	

	

	

	

	

	

	



Your Questions Answered #6 originally appeared on HTML5 Doctor on April 8, 2010.



How to use HTML5 in your client work right now
Richard Clark — Tue, 30 Mar 2010 14:30:32 +0000

			

				

			
		
I was presenting some designs to a client a couple of weeks ago when this question came up: “Will you be building this site with HTML5 in mind?” Naturally, I was happy to answer that one! It went a little like this:
Me:
We’ll build the whole thing with HTML5 if that’s okay with you guys. One question though: do you know what percentage of your visitors use Internet Explorer without JavaScript to view your site?

Client:
Erm, I don’t really know, and I wouldn’t want to lose those visitors. Maybe we’d better not build it in HTML5 after all.

Me:
Whoa there! No need to be so hasty. We don’t have to use HTML5 exclusively, but we can still use it to develop specific parts of the site. How does that sound?

Client:
Great! Let’s do it!

After telling Remy about this conversation, he proposed that we cover this subject in an article, so here we are!
We’re treating this article a bit differently, like a Q & A with the authors, so let us know if you like this new style.
Which bits of HTML5 can I use right now?
Rich: Lots of them! Here’s a short list of cross-browser (including IE) compatible techniques that you can use today:

Change your doctype
Simplify your character set
Simplify your

HTML5 Doctor » Richard Clark

Your Questions Answered #10

Footer with sections

vs. Flash (security and copyright)

HTML5 tags inline?

Offline + Storage

Correct markup with blockquote

Got a question for us?

Related Posts:

Happy 1st Birthday us

What we’ve done

Future Plans

A small gift

Related Posts:

Your Questions Answered 9

Offline viewing on requests

Question about dragging

About the href on any element

W3C Validator for the element

Headings

. However, if you’re splitting the article into sections, then you could use an

each time. See our article on the section element for more. Thanks, Tom

Got a question for us?

Related Posts:

Your Questions Answered #8

HTML5 Doctor at Web Directions @media

A Note about Web Directions @media

HTML5 Clinic

Discount Codes

Related Posts:

Your Questions Answered #7

The figure & figcaption elements

The element

The element

Using and

Figure with an image

Figure with an image and caption

A figure with multiple images

Figure with a code block

Differences between and

Related Posts:

Your Questions Answered #6

s, audio codecs, microformats, post bylines, and the element.

s

as appropriate. I hope that makes sense! Bruce’s article on the section element touches on this, and we also hope to talk more about document outlines in the future. Cheers, Rich P.S. Multiple

s in HTML4 are perfectly legal, but seldom used.

Audio Codecs

hCards

Article bylines

How to use with a date in astrology

Got a question for us?

Related Posts:

How to use HTML5 in your client work right now

Which bits of HTML5 can I use right now?

About the `href` on any element

W3C Validator for the
element

.

However, if you’re splitting the article into sections, then you could use an

each time. See our article on the section element for more.

Thanks, Tom

The
element

The
element

Using
and

Differences between
and

as appropriate.

I hope that makes sense! Bruce’s article on the section element touches on this, and we also hope to talk more about document outlines in the future.

Cheers,

Rich

P.S. Multiple