Your Questions Answered #3

by .

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.

— Hope that clears things up Rich and Bruce

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).

Regarding launch from start up scripts – you could achieve this though the custom scheme handlers (but this is just Firefox IIRC): http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#custom-handlers

Equally, there may be an API that you could exploit via the standalone browser, either Prism or Fluid.

— Good luck! Remy

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?

Thanks in advance.

Did you see this article on the site from Bruce? HTML5, XML and XHTML5 and this one from Remy HTML5 Boilerplates.

Also see this (linked in Bruce’s article) for some advice on using the right mime type. http://www.webstandards.org/learn/articles/askw3c/sep2003/.

— Cheers Rich

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”)?

Thank you for taking the time to do this.

We said, Not a stupid question, but a simple answer: No!

— Ta Bruce (HTML5 Shrink)

Developing to a changing spec

Sam Rayner asked:

I read the Super Friends Guide to HTML5 Hiccups – http://www.zeldman.com/superfriends/guide/ and it’s worried me a little.

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).

Although I’m sure you’re aware in footers case, its content model has now been changed to allow it to act more like header.

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

  1. Continue working as you are with new HTML5 elements and change them as the spec becomes more defined
  2. Use HTML4, with HTML5 class names (as you suggested)
  3. 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.

— Cheers Rich

HTML5 and Browser Compatibility

A lot of people ask this type of question regularly so here’s a few links that we think are useful.

That about wraps up this round of questions, we’ll be publishing more soon, but in the meantime don’t be afraid to keep asking the doctor about HTML5.

15 Responses on the article “Your Questions Answered #3”

  • […] This post was mentioned on Twitter by Remy Sharp and d-_-b, html5doctor. html5doctor said: New Blog post: we answered some of your #html5 questions – http://bit.ly/3HaS1f […]

  • For HTML5 and xmls, in the XHTML serialization (i.e., sent as application/xhtml+xml), it is required.

  • […] Go here to see the original:  Your Questions Answered #3 | HTML5 Doctor […]

  • Earle Clubb says:

    Re: HTML5 + Javascript Client Web App

    Titanium (http://www.appcelerator.com/products/titanium-desktop/) may do what you want. It uses Webkit to render HTML/JS, and also allows you to code in Ruby, PHP, and Python.

  • Chris says:

    In the HTML5 Doctor source code, I noticed this: and I’m puzzled.

    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.

  • Chris says:

    Oops, that comment should start thus:

    In the HTML5 Doctor source code, I noticed this, and I’m puzzled:

    <meta charset=utf-8>

  • Torrance says:

    @Chris

    No, I think you may have just discovered an error. It’s definitely supposed to be quoted.

    eg.: <meta charset=”utf-8″ />

  • Rich says:

    @Geoffrey, you’re right if you are using XHTML5 it is required. However if as Ad asked you’re using XHTML sytax but writing HTML5 it isn’t required. Thanks.

    @Earle thanks for the link.

    @Chris & @Torrance, it doesn’t matter it can be quoted but doesn’t have to be (unless you’re writing XHTML5 as Geoffrey points out.) See this article from Bruce. http://html5doctor.com/html-5-xml-xhtml-5/

  • Michael says:

    Re: HTML5 + Javascript Client Web App

    Opera Widgets can do this sort of thing. And with an upcoming release of Opera (I think it’s going to be 10.10, I’m not sure) you can run them separate from the browser.

    Unfortunately, I don’t think Opera’s Widget version of offline data storage is 100% in line with the standard yet, but I’m not sure on this point.

  • TomkOx says:

    @Torrance: nothing has to be quoted, except situations like this: <span class=love title='text with spaces MUST be quoted (and only it)'>Is v5 making HTML liter?</span>.

  • suresh says:

    site path
    http://www.creativecorp.in/con1.html

    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

    i must to validate my css sheet in W3c

  • @suresh although this isn’t a HTML5 problem, I’ll do my best to answer it for you.

    If I were you I would use conditional comments for Internet Explorer and all you hacks and go in there. If you Google for it (or look at the source of this site) you’ll see how they are used.

  • suresh says:

    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..

    http://www.topino.be/page/view/id/9 (if u tell how it possible with cross browser working i will do very good sites)

    2. How possible to show images fast in Xhtml page

    mostly my process is all images are call through CSS rest of link images. when i open my xhtml page in browser it will talking sometime to show all images….

    please give solutions to me… i am waiting for your reply

  • Rich Clark says:

    @suresh, I don’t think I understand the problem are you asking about how to declare different font families in CSS?

  • Leave a Reply to Torrance

    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.