Your Questions Answered #8

by .

Doctor treating a patient illustration 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.

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.

41 Responses on the article “Your Questions Answered #8”

[...] examination of the re-specification of the dl element, what the new article element is, and regular Q&As with their readers. It’s a collaboration between passionate developers who formulated the [...]

[...] of the re-specification of the dl element, what the new article element is, and regular Q&As with their readers. It’s a collaboration between passionate developers who formulated the idea [...]

» 我所钟爱的 HTML5 资源 » UED TEAM says

[...] HTML5 相应技术的最佳注解,如 dl element ,article element 以及 Q&As 部分。这个站点由一群在 Future of Web Design [...]

我所钟爱的 HTML5 资源 at UEPD says

[...] HTML5 相应技术的最佳注解,如 dl element ,article element 以及 Q&As 部分。这个站点由一群在 Future of Web Design [...]

Steven's blog » 我所钟爱的HTML5资源 says

[...] HTML5 相应技术的最佳注解,如 dl element ,article element 以及 Q&As 部分。这个站点由一群在 Future of Web Design [...]

非常值得欣赏的15个HTML5网站 says

[...] HTML5 相应技术的最佳注解,如 dl element ,article element 以及 Q&As 部分。这个站点由一群在 Future of Web Design [...]

Edno360 - Edno360 says

[...] examination of the re-specification of the dl element, what the new article element is, and regular Q&As with their readers. It’s a collaboration between passionate developers who formulated the idea [...]

有用的HTML5网站 | Gavin Guo's 博客 says

[...] HTML5 相应技术的最佳注解,如 dl element ,article element 以及 Q&As 部分。这个站点由一群在 Future of Web Design [...]

15个HTML5英文资源网站 « 好网好站 says

[...] HTML5 相应技术的最佳注解,如 dl  element ,article element 以及 Q&As 部分。这个站点由一群在 Future of Web  Design [...]

我所钟爱的HTML5资源 | 站长站 says

[...] HTML5 相应技术的最佳注解,如 dl element ,article element 以及 Q&As 部分。这个站点由一群在 Future of Web Design [...]

Join the discussion.

Some HTML is ok

You can use these tags:
<a href="" title="">
<abbr title="">
<b>
<blockquote cite="">
<cite>
<del datetime="">
<em>
<i>
<q cite="">
<strong>

You can also use <code>, and remember to use &lt; and &gt; for brackets.