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 <figure> 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:

1. 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.
2. 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 <p href="..."> 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 <a href="..."> around the other tags. It’s called block-level linking, and we’ve written an article about it.

Cheers, Bruce

W3C Validator for the <figure> 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 <dd>/<dt> in <figure> anymore. Please use <figcaption>.

See our article on the <figure> and <figcaption> 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:

<article>
	<header>
		<h1>My major heading</h1>
		<h2>Subheading</h2>
		Abstract text...
	</header>
	... lorem ipsum ....
	<hX>Heading within my article</hX>
	... dolor sit amet ...
	<hX+1>Subheading in my article</hX+1>
</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 <hX> is a new subheading and not related to the <h2> already there, then <hX> would be an <h2>. Then <hX+1> would be an <h3> if it is a subheading of the above <h2>.

However, if you’re splitting the article into sections, then you could use an <h1> 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.

Share and Save:

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

We’re back with more of your questions (and our answers) about HTML5. In this article, we’ll discuss using a <footer> at the top of your markup, how to skip to certain parts of a video, styling form elements and attributes, and more.

HTML5 <footer> 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 <footer> is most suitable for your content, then you’re absolutely entitled to use it. Despite its name, <footer>’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.

• Introduction to HTML5 video
• Accessible HTML5 video with scripted captions

For example, set data-start and data-end attributes on your <video> 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.

<h1>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:

<nav id="nav-actions">
    <header>
        <h1><span class="title">Actions</span></h1>
    </header>
    <ul>
        <li><a href="#"><span class="title">Sitemap</span></a></li>
        <li><a href="#"><span class="title">Login</span></a></li>
        <li id="action-search"><a href="#"><span class="title">Search</span></a></li>
        <li id="action-enquire"><a href="#"><span class="title">Enquire</span></a></li>
    </ul>
</nav>

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 <nav> show as a ‘Navigation’ element rather than ‘untitled section’.

If you want to use a heading within your <nav> element, using an <h1> would be fine. You don’t really need the <header> 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 <h2>.

You don’t need the <span> elements in the <h2>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?

<aside>
	<h1>header 1</h1>
</aside>
<article>
	<h1>header 2</h1>
</article>

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

<aside>
	<header>
    	<h1>header 1</h1>
	</header>
</aside>
<article>
	<header>
    	<h1>header 2</h1>
	</header>
</article>

Tibor

Your first example is correct. You only need <header> to group items within a header. If the header contains only a single <h1>–<h6> element, you don’t need to wrap it in a <header>.

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.

Share and Save:

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

Here we are again with another round of patient questions about HTML5. In this article, we’ll be covering AJAX, the eternal question of <div> or <section>, our old friend Internet Explorer, how to mark up multiple blocks of content in a sidebar, and using <header> with <hgroup>.

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 <input type="email"> 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 <canvas>, 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

<div> or <section>?

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 <div>s or <span>s where another, more precise element would fit the bill. But for grouping arbitrary content, <div>s and <span>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 <div>s might be <section>s or maybe <nav> elements though, depending on their content. I suggest you read our article (and the comments) on the <aside> element.

Thanks, Tom

Header with <hgroup>

Diego asked:

Hi,

This structure is right?

<section id="choose-tip">
   <header>
       <hgroup>
           <h1>Foo Bar</h1>
           <h2>Baz Bat Qux</h2>
       </hgroup>
   </header>
   <p>lorem ipsum</p>
</section>

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 <header> within your <section> or an <hgroup> within your <header>. Similarly, you don’t have to use a <header> around your <hgroup>.

To summarise, the best solution (if you don’t require the <h2> 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.

One of the new elements defined in HTML5 is <hgroup>, used for grouping titles with their associated subtitles. But why do we need <hgroup> when we’ve already got the <header> element? In this article, we’ll do our best to answer that question.

What is the <hgroup> element?

Here’s what the spec says about <hgroup>:

The hgroup element is typically used to group a set of one or more h1-h6 elements — to group, for example, a section title and an accompanying subtitle.

So what does that mean?

<hgroup> acts as a wrapper for two one or more related heading elements possibly contained within a <header> element. It can only contain a group of <h1>–<h6> element(s), and it should be used for subtitles, alternative titles, and tag lines.

The easiest way to demonstrate proper use of <hgroup> is through some examples. Thanks to Dr. Oli for letting us use his examples.

An article with one title

The title consists of a single <h1>, so neither <hgroup> nor <header> is required:

<article>
  <h1>Title goes here</h1>
  <p>Lorem Ipsum dolor set amet</p>
</article>

An article with a title and metadata

Here we’re using <header> to group the title and associated metadata, so an <hgroup> is not required:

<article>
  <header>
    <h1>Title goes here</h1>
    <p><time datetime="2010-03-20">20th March, 2010</time></p>
  </header>
  <p>Lorem Ipsum dolor set amet</p>
</article>

An article with a title and subtitle

An <hgroup> contains the title and subtitle of the article:

<article>
  <hgroup>
    <h1>Title goes here</h1>
    <h2>Subtitle of article</h2>
  </hgroup>
  <p>Lorem Ipsum dolor set amet</p>
</article>

An article with a title, subtitle and metadata

An <hgroup> contains the title and subtitle of the article, and then a <header> contains the metadata and the <hgroup>:

<article>
  <header>
    <hgroup>
      <h1>Title goes here</h1>
      <h2>Subtitle of article</h2>
    </hgroup>
    <p><time datetime="2010-03-20">20th March, 2010</time></p>
  </header>                
  <p>Lorem Ipsum dolor set amet</p>
</article>

Real world examples

On Alex Gibson’s MiniApps, he uses <hgroup> to include a tag line after the main “MiniApps” heading. (This is also what we’ve done on this site if you view the source.)

So why use <hgroup>?

It’s all about the document outline. When grouping headings in an <hgroup> element, the outline algorithm will mask the lowest level all but the highest level heading in the group from the resulting document outline. Using MiniApps as an example again, in his markup (although this is simplified), Alex uses:

<header>
  <hgroup>
    <h1><a href="/">Mini Apps</a></h1>
    <h2>Web applications for iPhone, Android & other mobile platforms</h2>
  </hgroup>
</header>

The <hgroup> contains both <h1> and <h2> elements, but the outliner only includes the <h1>. This is illustrated in the image below. (Please ignore the “untitled section” as well. This is caused by the nav element, and a change request has been submitted to address this.)

We’ll be covering document outlines in another article, so I won’t go into detail here. You can test your own pages in the HTML5 Outliner to ensure that you’re using the heading elements within <hgroup> correctly.

Summary

In this article, we’ve demonstrated how to use the <hgroup> element effectively. To recap:

• If you have a simple title with a single heading element (<h1>–<h6>), you do not need an <hgroup>.
• If you have a title with subtitle(s) or tag lines (i.e., more than one consecutive <h1>–<h6>), group them in an <hgroup>.
• If you have a title with subtitle(s) and other metadata associated with the section or article, place both the <hgroup> and the metadata within a single <header> element.

Let us know how you’re using <hgroup> in your HTML5 projects!

The hgroup element originally appeared on HTML5 Doctor on March 23, 2010.

We’re back with our first roundup of your questions for 2010. In this article, we’ll be covering a range of topics including sections and sectioning, the <img> element, scaling video, and a proposal for a <field> element.

Headers and sidebars

Ad asked:

Hello,

I have 2 questions:

1. If I have my main navigation above the masterhead would best practise be having the nav tag inside of a header tag with the h1 and h2 in a hgroup? Or should the nav and header tag be separate?

2. I am building a blog in HTML5. It has a blog-like sidebar with articles, contact info and about info in it. Would the best tag to wrap this in be section or aside?

Thank you so much for your time,
Ad Taylor

Placing your <nav> within your <header> is fine and valid. However, if it makes more sense to leave it outside, then you can do that too. You don’t need to put the <hgroup> inside the <nav> though.

See our articles on <header> and <nav> for more on this.

Regarding your second question, I would use <aside> (as we’ve done on the HTML5 doctor site) and then use multiple sections within that. Also see Bruce’s article on Designing a blog with HTML5.

Hope that helps.

Cheers, Rich

HTML5 <img> element

Martijn asked:

As you are, according to the slogan, “helping [me] implement HTML5 today,” I thought to bother you people with a spec. related question.

What should an UA do with an image without specified width and height attributes?

The dimension attributes part of the specification keeps stating “if specified” for every rule but doesn’t give any “if not specified”.

The part of the specification defining the img element itself does not state anything of importance about the dimension attributes apart from how the attributes in the DOM should be created by the UA.

Interesting is to note that they have omitted these attributes in all their img element examples.

In the dimension attribute section they go state the following.

– The dimension attributes are not intended to be used to stretch the image.

So we can only use them to make images smaller? This is odd as well so let’s say by stretch they mean to say both expending and shrinking in size. In this case the attributes can only be used for two cases:

1. To state the exact width and height of the image. Something that seems redundant unless not using those attributes means the UA can display the image at any size (which it might, as nothing about this is defined in the spec.).

2. To give a 0 in both attributes. By this I am telling the UA that the image is not to be seen by the user.

Am I missing something or is the specification missing this?

Looking forward to getting your prescription

Kind Regards, Martijn

If no dimension attributes are specified, the browser will leave no space for the image, and once the image has been loaded (after the rest of the page), it will then need to reflow the entire page, as that’s the first time it knows the size of the image. This can cause the content you’re reading scrolling off the page.

If you give the size of the image as attributes in the HTML, the browser will leave space and render the image there once it’s loaded without reflowing the page. On a mobile phone, reflowing the page unnecessarily drains the battery, and users can get vertigo from the page’s text jumping around to accommodate images.

Thanks, Bruce

Section and Sectioning

Yanoo asked:

Hi,

What do you mean when you are talking about “sectioning”? And why don’t header and footer require sectioning?

I think about section and sectioning like about part of something defined. News, comment, page content, sidebar, *header*, and *footer*. Is it bad representation?

Sectioning relates to the headings in some block of related content and defining what is related to what in a hierarchy of headings (<h1>–<h6>). The outlining algorithm can produce a table of contents from the nested <section>, <article>, <nav>, and <aside> elements.

Headers and footers themselves do not change the outline; a header or footer may contain no headings. If a header or footer does contain a heading, then that heading does come into the outline. See our article on the section element.

Thanks, Bruce

Scaling the Video

Ian asked:

Hi there,

Not sure if this question is an appropriate one, but any help would be really appreciated.

I’m going about updating my video website, chutney.ie, and would love to implement HTML5. I am interested in replicating the scaling effect/style used on the Mozilla welcome page.

Not being overly knowledgeable in this area, I would love to know how to begin — is this effect a Flash based animation, or something that can be achieved with HTML alone?

Again, any nudge in the right direction would be great.

Many thanks,

Ian

I’m not sure how Mozilla did it, but you can use some of the Webkit and Mozilla transforms on the <video> element. For example, you can cause the video to grow on hover — see this example in Chrome, Safari, or Opera. You can also use the :target pseudoclass to initiate animations. Alternatively, you can use a JavaScript onClick event to create the same effect.

You can also combine <video> and <canvas> to provide some interesting results (laying the <canvas> over the <video>). For more on the <video> element and what it can do, please read the Introduction to HTML5 Video on dev Opera written by Bruce Lawson and Patrick Lauke.

Cheers, Rich

We need a <field> tag

John wrote in and proposed a field element:

Hey there. First off thanks for the site. I was excited to find it. I spent a little time on the W3C site and honestly couldn’t figure out how to submit suggestions there. So going to submit mine to you guys and maybe you can pass it on (if it is good) or point me to someone that can help. Ok to the point:

We are getting nice new tags to with HTML5 (nav, footer, etc) to help us create more semantic code. I think what we really need is a field tag — after all what are fieldsets sets of?

Everyone wraps up their labels and inputs with some element. Some of us do this with UL, some people do it with DT/DD, some with DIVs and some people out there insist that a form is tabular data.

We are all just bastardizing these elements because there is no clear semantic wrapper for field elements of a form.

I think you get the point. I’m trying to keep this email short. If you think there is anything to this argument, I have a more detailed summary (with example code) at:

http://john.mirick.me/2009/10/what-is-really-set-of-shouldnt-we-have.html

I would love to hear your thoughts on this.

Thanks!
John

While a field element would be nice — it would stop the argument over how best to mark-up forms — you have to ask yourself whether or not it actually adds any semantic or functional value to an HTML document. Yes, wrapping inputs and their labels in a field would make things easier to read and drop the need for the for attribute on the label (since the relationship can be assumed), but doing so would not be backwards compatible. In theory, we could continue to add for until there is a suitable time to drop it, but again I question the value of such a tag.

The purpose of wrapping form input/label pairs is generally to ease styling. My personal stance is that unless there are case studies showing how such an element can add more value to HTML forms, this proposal won’t make it very far.

Regards, Mike

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 #5 originally appeared on HTML5 Doctor on March 2, 2010.

Clarification over section and article

The spec has been clarified to help authors correctly choose between when to use section and when to use article, and Bruce’s section post has also been updated.

footer now works like header

This was a big one and causing confusing to people coming to HTML5 for the first time. Originally you couldn’t include a nav element inside a footer, or a section.

Now the spec has been changed to match the header element.

details and figure saved

Instead of using legend, which didn’t work, Jeremy suggested (although slightly tongue in cheek) to use dt for the title and dd for the body. Ian Hickson agreed, and it’s in

Example:

<figure>
 <dd><video src="ex-b.mov"></video>
 <dt>Exhibit B. The <cite>Rough Copy</cite> trailer.
</figure>

aside has better examples

The documentation has been updated to specify better examples of how the aside element can be used.

Better examples help us authors understand how it can be used.

Dropped Elements

The following elements have been dropped from the HTML5 spec (though bb and datagrid were some time ago, and datagrid has been postponed rather than dropped entirely):

• dialog
• bb
• datagrid

Ch-ch-changes

We’ll be posting in more detail about some of these changes, and as further changes come out of the editing process we’ll no doubt keep you all up to date, either via our Twitter account (which you should follow) or feel free to let us know too!

Share and Save:

<a rel="nofollow"  href="http://twitter.com/home?status=September%20HTML5%20spec%20changes%20-%20http%3A%2F%2Fhtml5doctor.com%2Fseptember-html5-spec-changes%2F" title="Twitter"><img src="http://html5doctor.com/wp-content/plugins/sociable/images/twitter.png" title="Twitter" alt="Twitter" class="sociable-hovers" /></a>
<a rel="nofollow"  href="http://digg.com/submit?phase=2&amp;url=http%3A%2F%2Fhtml5doctor.com%2Fseptember-html5-spec-changes%2F&amp;title=September%20HTML5%20spec%20changes&amp;bodytext=September%20being%20one%20month%20before%20the%20HTML5%20spec%20goes%20to%20last%20call%20in%20October%2C%20there%27s%20been%20a%20few%20significant%20changes%20to%20the%20HTML5%20spec%20that%20we%20wanted%20to%20briefly%20share%20with%20our%20patients.%0D%0A%0D%0A%0D%0A%0D%0A%23%23%20Clarification%20over%20section%20and%20article%0D%0A%0D%0AThe%20spec%20has" title="Digg"><img src="http://html5doctor.com/wp-content/plugins/sociable/images/digg.png" title="Digg" alt="Digg" class="sociable-hovers" /></a>
<a rel="nofollow"  href="http://sphinn.com/index.php?c=post&amp;m=submit&amp;link=http%3A%2F%2Fhtml5doctor.com%2Fseptember-html5-spec-changes%2F" title="Sphinn"><img src="http://html5doctor.com/wp-content/plugins/sociable/images/sphinn.png" title="Sphinn" alt="Sphinn" class="sociable-hovers" /></a>
<a rel="nofollow"  href="http://reddit.com/submit?url=http%3A%2F%2Fhtml5doctor.com%2Fseptember-html5-spec-changes%2F&amp;title=September%20HTML5%20spec%20changes" title="Reddit"><img src="http://html5doctor.com/wp-content/plugins/sociable/images/reddit.png" title="Reddit" alt="Reddit" class="sociable-hovers" /></a>
<a rel="nofollow"  href="http://delicious.com/post?url=http%3A%2F%2Fhtml5doctor.com%2Fseptember-html5-spec-changes%2F&amp;title=September%20HTML5%20spec%20changes&amp;notes=September%20being%20one%20month%20before%20the%20HTML5%20spec%20goes%20to%20last%20call%20in%20October%2C%20there%27s%20been%20a%20few%20significant%20changes%20to%20the%20HTML5%20spec%20that%20we%20wanted%20to%20briefly%20share%20with%20our%20patients.%0D%0A%0D%0A%0D%0A%0D%0A%23%23%20Clarification%20over%20section%20and%20article%0D%0A%0D%0AThe%20spec%20has" title="del.icio.us"><img src="http://html5doctor.com/wp-content/plugins/sociable/images/delicious.png" title="del.icio.us" alt="del.icio.us" class="sociable-hovers" /></a>
<a rel="nofollow"  href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fhtml5doctor.com%2Fseptember-html5-spec-changes%2F&amp;title=September%20HTML5%20spec%20changes" title="StumbleUpon"><img src="http://html5doctor.com/wp-content/plugins/sociable/images/stumbleupon.png" title="StumbleUpon" alt="StumbleUpon" class="sociable-hovers" /></a>
<a rel="nofollow"  href="http://technorati.com/faves?add=http%3A%2F%2Fhtml5doctor.com%2Fseptember-html5-spec-changes%2F" title="Technorati"><img src="http://html5doctor.com/wp-content/plugins/sociable/images/technorati.png" title="Technorati" alt="Technorati" class="sociable-hovers" /></a>
<a rel="nofollow"  href="http://www.netvibes.com/share?title=September%20HTML5%20spec%20changes&amp;url=http%3A%2F%2Fhtml5doctor.com%2Fseptember-html5-spec-changes%2F" title="Netvibes"><img src="http://html5doctor.com/wp-content/plugins/sociable/images/netvibes.png" title="Netvibes" alt="Netvibes" class="sociable-hovers" /></a>
<a rel="nofollow"  href="http://www.facebook.com/share.php?u=http%3A%2F%2Fhtml5doctor.com%2Fseptember-html5-spec-changes%2F&amp;t=September%20HTML5%20spec%20changes" title="Facebook"><img src="http://html5doctor.com/wp-content/plugins/sociable/images/facebook.png" title="Facebook" alt="Facebook" class="sociable-hovers" /></a>
<a rel="nofollow"  href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=http%3A%2F%2Fhtml5doctor.com%2Fseptember-html5-spec-changes%2F&amp;title=September%20HTML5%20spec%20changes&amp;annotation=September%20being%20one%20month%20before%20the%20HTML5%20spec%20goes%20to%20last%20call%20in%20October%2C%20there%27s%20been%20a%20few%20significant%20changes%20to%20the%20HTML5%20spec%20that%20we%20wanted%20to%20briefly%20share%20with%20our%20patients.%0D%0A%0D%0A%0D%0A%0D%0A%23%23%20Clarification%20over%20section%20and%20article%0D%0A%0D%0AThe%20spec%20has" title="Google Bookmarks"><img src="http://html5doctor.com/wp-content/plugins/sociable/images/googlebookmark.png" title="Google Bookmarks" alt="Google Bookmarks" class="sociable-hovers" /></a>
<a rel="nofollow"  href="http://www.friendfeed.com/share?title=September%20HTML5%20spec%20changes&amp;link=http%3A%2F%2Fhtml5doctor.com%2Fseptember-html5-spec-changes%2F" title="FriendFeed"><img src="http://html5doctor.com/wp-content/plugins/sociable/images/friendfeed.png" title="FriendFeed" alt="FriendFeed" class="sociable-hovers" /></a>
<a rel="nofollow"  href="http://news.ycombinator.com/submitlink?u=http%3A%2F%2Fhtml5doctor.com%2Fseptember-html5-spec-changes%2F&amp;t=September%20HTML5%20spec%20changes" title="HackerNews"><img src="http://html5doctor.com/wp-content/plugins/sociable/images/hackernews.png" title="HackerNews" alt="HackerNews" class="sociable-hovers" /></a>
<a rel="nofollow"  href="http://www.linkedin.com/shareArticle?mini=true&amp;url=http%3A%2F%2Fhtml5doctor.com%2Fseptember-html5-spec-changes%2F&amp;title=September%20HTML5%20spec%20changes&amp;source=HTML5+Doctor+helping+you+implement+HTML5+today&amp;summary=September%20being%20one%20month%20before%20the%20HTML5%20spec%20goes%20to%20last%20call%20in%20October%2C%20there%27s%20been%20a%20few%20significant%20changes%20to%20the%20HTML5%20spec%20that%20we%20wanted%20to%20briefly%20share%20with%20our%20patients.%0D%0A%0D%0A%0D%0A%0D%0A%23%23%20Clarification%20over%20section%20and%20article%0D%0A%0D%0AThe%20spec%20has" title="LinkedIn"><img src="http://html5doctor.com/wp-content/plugins/sociable/images/linkedin.png" title="LinkedIn" alt="LinkedIn" class="sociable-hovers" /></a>
<a rel="nofollow"  href="http://www.newsvine.com/_tools/seed&amp;save?u=http%3A%2F%2Fhtml5doctor.com%2Fseptember-html5-spec-changes%2F&amp;h=September%20HTML5%20spec%20changes" title="NewsVine"><img src="http://html5doctor.com/wp-content/plugins/sociable/images/newsvine.png" title="NewsVine" alt="NewsVine" class="sociable-hovers" /></a>
<a rel="nofollow"  href="http://www.tumblr.com/share?v=3&amp;u=http%3A%2F%2Fhtml5doctor.com%2Fseptember-html5-spec-changes%2F&amp;t=September%20HTML5%20spec%20changes&amp;s=September%20being%20one%20month%20before%20the%20HTML5%20spec%20goes%20to%20last%20call%20in%20October%2C%20there%27s%20been%20a%20few%20significant%20changes%20to%20the%20HTML5%20spec%20that%20we%20wanted%20to%20briefly%20share%20with%20our%20patients.%0D%0A%0D%0A%0D%0A%0D%0A%23%23%20Clarification%20over%20section%20and%20article%0D%0A%0D%0AThe%20spec%20has" title="Tumblr"><img src="http://html5doctor.com/wp-content/plugins/sociable/images/tumblr.png" title="Tumblr" alt="Tumblr" class="sociable-hovers" /></a>

<br/><br/>

September HTML5 spec changes originally appeared on HTML5 Doctor on September 17, 2009.

Much of HTML 5’s feature set involves JavaScript APIs that make it easier to develop interactive web pages but there are a slew of new elements that allow you extra semantics in your conventional Web 1.0 pages. In order to investigate these, let’s look at marking up a blog.

Firstly what we’ll do is use the header, footer, and nav elements to mark up the broad structure of the page. We’ll make the blog comments form much smarter by using the new data types and built-in validation available in HTML 5-aware browsers.

Then we’ll do some work on the guts of the page, using HTML 5’s article elements to better mark up blog posts and comments and show how to use the section elements to better structure accessible hierarchical headings on sites that are CMS-driven. As blogs are chronologically ordered, we’ll see what HTML 5 offers us for representing dates and times.

So take the phone of the hook, and make a cup of tea and we’ll get started.

header, footer, nav, article {display:block;}

Further refining the HTML 5 structure

The blog home page

An interesting thing about a blog homepage is that there are generally the last 5 or so posts, each with a heading, a "body" and data about the post (time, who wrote it, how many comments etc.) and usually a link to another page that has the full blog post (if the homepage just showed an excerpt) and its comments.

HTML 5 has an article element which I use to wrap each story:

The article element represents a section of a page that consists of a composition that forms an independent part of a document, page, or site. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, or any other independent item of content.

Let’s look in more detail at the guts of how I mark up each blogpost.

Anatomy of a blog post

The wrapper is no longer a generic div but an article. Within that is a header, comprising a heading (the title of the blogpost) and then the time of publication, marked up using the time element.

Then there are the pearls of wit and wisdom that consitute each of my posts, marked up as paragraphs, blockquotes etc., and is pulled unchanged out of the database. Following that is data about the blog post (category, how many comments) marked up as a footer and, in the case of pages that show a single blogpost, there are comments expressing undying admiration and love. Finally, there may be navigation from one article to the next.

Data about the article

Following the content there is some “metadata” about the post: what category it’s in, how many comments there are. I’ve marked this up as footer. I previously used aside which “represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content” but decided that it was too much of a stretch; data about a post is intimately related.

footer is a much better fit: “A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.” I was initially thrown off-course by the presentational name of the element; my use here isn’t at the bottom of the page, or even at the bottom of the article, but it certainly seems to fit the bill – it’s information about its section, containing author name, links to related documents (comments) and the like. There’s no reason that you can’t have more than one footer on page; the spec’s description says "the footer element represents a footer for the section it applies to" and a page may have any number of sections. The spec also says "Footers don’t necessarily have to appear at the end of a section, though they usually do."

Comments

I’ve marked up comments as articles, too, as the spec says that an article could be “a user-submitted comment”, but nested these inside the parent article. The spec says

When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a Web log entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the Web log entry.

These are headed with the date and the time of the comment and name of its author—if you want, you can wrap these in a header, too, but to me it seems like markup for the sake of it.

Times and dates

Most blogs, news sites and the like provide dates of article publication.

Microformats people, the most vocal advocates of marking up dates and times, believe that computer-formatted dates are best for people: their wiki says “the ISO8601 YYYY-MM-DD format for dates is the best choice that is the most accurately readable for the most people worldwide, and thus the most accessible as well”. I don’t agree (and neither do candidates in my vox pop of non-geeks, my wife, brother and parents).

I do agree with the microformats people that hidden metadata is not as good as visible, human-readable data and therefore elected not to use the pubdate attribute of article.

Therefore I’ve used the HTML 5 time element to give a machine parsable date to computers, while giving people a human-readable date. Blog posts get the date, while comments get the date and time.

The spec is quite hard to understand, in my opinion, but the format you use is 2004-02-28T15:19:21+00:00, where T separates the date and the time, and the + (or a -) is the offset from UTC. Dates on their own don’t need a timezone; full datetimes do. Oddly, the spec suggests that if you use a time without a date, you don’t need a timezone either.

There’s considerable controversy over the time element at the moment. Recently one of the inner circle, Henri Sivonen, wrote that it’s for marking up future events only and not for timestamping blogs or news items: “The expected use cases of hCalendar are mainly transferring future event entries from a Web page into an application like iCal." This seems very silly to me; if there is a time element, why not allow me to mark up any time or date?

The spec for time does not mention the future event-only restriction: "The time element represents a precise date and/or a time in the proleptic Gregorian calendar" and gives three examples, two of which are about the past and none of which are "future events". Although the spec doesn’t (currently) limit use of the element, it does limit format to precise dates in "the proleptic Gregorian calendar". This means I can mark up an archive page for "all blog posts today" using time, but not "all July 2008 posts" as that’s not a full YYYY-MM-DD date. Neither can you mark up precise, but ancient dates, so the date of Julius Ceasar’s assassination, 15 March 44 BC is not compatible.

I don’t expect this to be resolved. If you think as I do, feel free to mail the Working Group to express your feeling!

Hopefully, this brief article (geddit?) has given you a quick overview of how to use some of the new semantic elements. Let me know what you think!

Related Posts:

• Aside Revisited
• Native Drag and Drop
• The time element (and microformats)
• The section element
• Draw attention with mark

Share and Save:

Designing a blog with html5 originally appeared on HTML5 Doctor on June 30, 2009.

]]> http://html5doctor.com/designing-a-blog-with-html5/feed/ 140 http://html5doctor.com/the-header-element/ http://html5doctor.com/the-header-element/#comments Tue, 16 Jun 2009 12:20:19 +0000 Richard Clark http://html5doctor.com/?p=62

Recently, we have seen a growing interest in HTML 5 and it’s adoption by web professionals. Within the HTML 5 specfication we can see that there have been a significant number of new tags added, one of these the <header> element is what we’ll be covering in this post. We’ll talk about when to use it, when not to use it, it’s must haves and must not haves. Ready? Let’s dive straight in.

So you’re used to seeing

<div id="header">

on a large majority of sites that you visit, well now with HTML 5 that isn’t required anymore we can add some more semantic value with the <header> element.

What does the element represent?

According to the spec the header element represents

a group of introductory or navigational aids. A header element typically contains the section’s heading (an h1–h6 element or an hgroup element), but can also contain other content, such as a table of contents, a search form, or any relevant logos.

It is important to note that the <header> element doesn’t introduce a new section but is the head of a section. You should also note that the <header> element should not be confused with the <head> element.

Where would I use the <header> element

Well the obvious place to start would be at the beginning of your page. We we can start with something like this that includes your primary page heading.

<header>
<h1>The most important heading on this page</h1>
</header>

An important point to note is that you are not restricted to use one <header> element per site, you can use multiple headers, each of which will then become the <header> for that section of the document. You could therefore have…

<header>
    <h1>The most important heading on this page</h1>
</header>

<article>
<header>
    <h1>Title of this article</h1>
</header>
    <p>...Lorem Ipsum dolor set amet...</p>
</article>

Also note the use of two <h1>’s within that piece of html, this is perfectly valid in HTML 5 (and HTML 4) but will cause issues with accessibility, so we advise caution if you have a large number of articles on a page. We will cover this in more detail in another post.

What is required in the <header> element

We now know that we can have multiples headers in a page but what are the must have’s within the element in order for it to validate?

In short, a <header> typically contains at least (but not restricted to) one heading tag (<h1> – <h6>). You can also include the <hgroup> element but we’ll discuss that more in another post (read more about the hgroup in the spec). The element can also contain other content within the document flow such as a table of contents, logos or a search form. Following a recent change to the spec you can now include the <nav> element within the <header>.

Styling the <header>

One short point I’d also like to cover is that in order for the majority of browsers to render the <header> element as a block level element you will need to explicitly declare it as a block in your CSS like so:

header { display:block;}

In fact you will need to do this for the majority of block level elements in HTML 5. Just as soon as broswers make it default we’ll let you know so you can save those precious bytes from your CSS. In the meantime be sure to keep up with what has or hasn’t been implemented in layout engines on this wiki.

Conclusion

In summary <header> give us some great added semantic value in order to describe the head of a section.

Further Reading

• HTML 5 Spec – The header element
• New Elements in HTML 5

Related Posts:

• The hgroup element
• Your Questions Answered #8
• Your Questions Answered #7
• Your Questions Answered #6
• Your Questions Answered 9

Share and Save:

The header element originally appeared on HTML5 Doctor on June 16, 2009.

]]> http://html5doctor.com/the-header-element/feed/ 46