Your Questions Answered #3

We’re back with our (semi) regular round up of answering readers HTML5 related questions. Right, let’s not mess about any longer and dive straight in with the questions.

Multiple use of tags

Daniel Davis asked:

Dear Doctor,

Just a quick confirmation please.

Am I right in thinking that nav, like header and footer, can be used more than once in a single page? For example, surrounding a menu at the top of the page and surrounding next/previous buttons at the bottom.
Come to think of it, is it fair to say that all tags except html, head and body can be used more than once?
Thanks in advance, doctor.

I’ll be back soon about my dodgy knee.

You’re correct all the elements you mention can be used more than once a page. If you see this article about the header and this about the footer – they show that you can use them multiple times on a page. Also you don’t really need html, head or body tags, as all browsers will assume them anyway but it’s also safe to leave them included.

HTML5 + Javascript Client Web App

Girish asked:

Is it possible to create a complete client side application using HTML 5 (it will embed chat clients, stock ticker) + JavaScript, and then bundle is with underlining Firefox 3.5 engine, so that user can install it as a desktop app on Linux, and then it runs in its own window using firefox 3.5 engine. The app will store everything in local storage – like url, usernames etc, and will not interact with any local server.

It would pure HTML5 + JavaScript based client web app which would be packaged, and can be installed or launched from startup scripts.

Or instead of using firefox 3.5 engine, we can use Mozilla Prism to convert it to web app, and then bundle it, is it possible?

Technically it should be possible. Certainly the HTML5 offline applications API (via the manifest) gives you all that ability to create a client side app and it run locally without a web connection.

However, the browser is the problem. Prism might be a good way to deploy this as a standalone app, but I don’t know if Prism is running the latest Gecko engine (or whether that comes with the JS engine, etc) – and even if it does – Firefox 3.5 currently has a pretty severe bug with the offline applications: it doesn’t work!

I have logged the bug with Mozilla and I know they’re working (in fact, I believe they’ve fixed it and are now testing).

The alternative is to use Fluid (a Webkit based app) – but again, that’s only if they have updated to the latest Webkit and thus including the offline applications API (that said, quickly looking at the Fluid site, their in-progress version may have the latest Webkit).

MIME or DOCTYPE, which one prevails

Pedro Estébanez asked:

Hello doctor,

I have found this site a very good resource for web developers and I thank you for your effort.

Now, my question:

There is a lot of discussion about hot to tell the browser we are using HTML5 or XHTML5 by setting the Content-Type HTTP header. But then I don’t know the true role the DOCTYPE plays (apart from keeping quirks mode from being activated and validation).

For example, if I compose my documents as XHTML with an according DOCTYPE and my server serves them as text/html, why XML mode is not triggered in the browser?

Outline Algorithm

Mike Taylor asked:

In Section 4.4.11.1 of the current HTML5 spec, the outline algorithm is described–yet it’s not super clear in what ways this is useful to users or developers. It would be great if some more light could be shed on the topic!

Thanks for the awesome blog, btw.

The outliner basically allows you to easily see the heading structure of a site. The outline can then figure out from the heading structure where in the outline it should sit, should you want to only parse a section of the code into another site or page for example. (I realise this isn’t totally clear). Also check out the HTML5 Outliner for checking your work.

Bruce covered it a little bit in his section article – “With very few exceptions, section should not be used if there is no natural heading for it. Check your work in the HTML 5 outiner tool. If you see any instances of “untitled section” that corresponds to a section, you’re probably doing it wrong. (It’s fine for a nav or aside element to be untitled, however).”

We’ll try and cover it in more detail in a future post but I hope this helps for now, Rich.

HTML5 and xmlns

Ad Taylor asked:

I hope this isn’t a stupid question BUT …

If I am using the html5 DOCTYPE and I am still using xhtml syntax do I need to define the xmlns in the html tag (i.e. xmlns=”http://www.w3.org/1999/xhtml”)?

Developing to a changing spec

I’ve recently been developing personal projects using HTML5 as I find I learn best ‘on the job’ and wish to become familiar with the new spec by putting it in to practice. However, it sounds like I’ve misinterpreted bits and often used new elements such as footer in the way the Super Friends describe rather than in line with the spec.

I really want to continue enjoying the benefits of HTML5 in my own non-critical web work but it seems I run the risk of having to return to it all at a later date and amend stuff due to changes in the spec.

What do you think the best course of action is? Continue with 5 but keep going back and fixing old projects? – Could become a real hassle.

Continue with 5 and leave non-visual discrepancies as they are (the code may be slightly off but it’s styled fine)? – Goes against all of my natural instincts to do things right.

Return to 4 and use class names as apposed to the new elements for the time being?

I realise this is the risk I take developing with a developing spec but I’m worried if I wait until everything is set in stone I’ll still be using HTML4 years from now!

Thanks a lot,

I understand your concerns with the spec changing from day to day. It’s hard to keep up with (there’s 6 of us and that’s tough enough).

I think essentially you have three choices for your development or a combination of the below currently:

Continue working as you are with new HTML5 elements and change them as the spec becomes more defined

Use HTML4, with HTML5 class names (as you suggested)

Use only the simplified doctype and those elements that will only be benificial in the future or add progressive enchancement (e.g. inline elements such as time.)

Its going to be a while until we can use HTML5 in development projects but in my opinion there isn’t any reason to not use it on personal projects now. You have to judge it on a case by case basis, but whichever parts you do you will be futureproofed to some extent.

Should the value for the charset attribute be set off by quote marks/inverted commas (like all the other attribulte/value pairs in your coding? Or have I misunderstood the html comment you put in, about that particular meta tag being a ‘simplified version’ and is it therefore ok to omit the quote marks for this tag (and only for this tag)? Somehow, I can’t believe it’s just a simple error.

in this page i have developed with divs so in html code validation has done in W3 but my question is when i try to validate the css file in W3c getting lot of errors why because i have used css hack values for IE so could tell me how to rectify this problem please give me good solution for this problem

1. How to use new fonts for website along with cross browser working ? how it is possible to do it i have now interest to use only default fonts i will send one example site in this have different fonts instead of Sub headings look at once give the solution for that process… i have alredy seen that site source of CSS little bit confusion in font names and others..