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.
<footer> on top
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!
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.
Skip to certain parts of a video file
John Paul asked:
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.
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-end attributes on your
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.
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
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.
<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
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.
Styling supported HTML5 form elements and attributes
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.
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>
Your first example is correct. You only need
<header> to group items within a header. If the header contains only a single
<h6> element, you don’t need to wrap it in a
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.