Your questions answered #1

by .

Doctor treating a patient illustration One week on since our official launch and we’ve been overwhelmed by your response to the site. It’s great to see a large number of you wanting to get involved with the discussion relating to HTML 5 and asking about what you can and can’t do as well as the pro’s and cons of the specification.

In this post we’re going to cover a few of the questions we’ve received that don’t require a full post answer but still need to be addressed. We’ll post more answers everytime we’ve collated a bunch of questions so don’t be afraid to ask, however groundbreaking or insignificant it might be. Ok here we go for starters…

Automated Conversion?

Andy Mabbett wrote to ask:

Are there (or will there be) any automated or semi-automated tools which will take my (valid) HTML 4.01 Strict documents and convert them to HTML5?

While we don’t know about any specific conversion tools for converting to HTML 5 from HTML 4.01. There are several articles (see below) describing how you can name your classes more semantically in preparation for using HTML 5.

A final point on this is that I’m not sure that it would be wise to have a converter in order to move from HTML 4.01 to HTML 5, a machine however clever will not really be able to understand the true meaning of <aside> or <figure> for example. I’d be interested to hear other peoples thoughts on this though?

When should I start using HTML 5?

James asked us (presumably a little tongue in cheek):

Dear Doctor,

When will I know that it is time to start using HTML5 “for real”? Will there be an announcement?

yours etc,
James

Now I’d love there to be an official annoucement, in fact I might just announce it now! You can all start using HTML 5 today. There I said it, I feel so much better now. Seriously though, there is no reason for you not to start using HTML 5 now in sites you’re developing. I’m not saying that you have to use it religiously, but at you should at least start thinking about it in your development roadmaps. We can see on our sister site that there are a number of sites using HTML 5 “in the wild”. The amount of implementation varies greatly (some including <div>‘s around their <header> elements for styling purposes for example) but they have begun to incorporate HTML 5 right now.

Lastly, Molly recently gave a talk at @media which touched upon this subject, she told us that

Implementation trumps specification

which I happen to firmly believe, after all CSS 2.1 isn’t a formal specification yet but almost everyone is using it. If you’re not sure where to start then I suggest taking a look at what browser implementations are currently like, which is where this Wiki from the WHATWG comes in. Hope that answers your question James.

Main Body

Darren asked:

How do I markup the main body of a page, are there <content> tags? Can I serve a SWF Flash file using <VIDEO> tags?

Regards Darren

There isn’t a <content> tag (element), the most appropriate element for that would be <section>, however if only a single article is contained in that area you should use <article>.

As for the second part to your question, you *can’t* use a SWF file natively as the source to the <video> tag, or FLV file for that matter. However, for the foreseeable future you’re still going to need to embed flash for video, via nesting the flash within the <video> tag.

First you’ll use the <video> with nested source elements to fall through the different supported codecs. Then when all else fails, particularly for IE, you’ll serve up the flash video via the <object> and <embed> combo. This is because IE8 and lower doesn’t support the <video> you’re going to need to fall back on something that works.

Make sure you read Tom’s article about the <video> element, but you should also find this article on Video for Everybody useful to see how to degrade through the codecs.

More articles!

Although not really a question I wanted to drop this in, August wrote to tell us:

The <aside> article is awesome. Great explanation of a very semantic HTML5 element. More of those, please!

Thanks for the great feedback August, we’re happy to help, rest assured we’ve got plenty of articles lined up along those lines, in fact I know we’ve got a few crackers lined up for the next couple of weeks, so watch this space.

And finally…

If your question hasn’t been answered in this post or we haven’t got back to you directly then it’s more than likely that we’ll be covering it soon in a more detailed post so be sure to check back or subscribe to the RSS feed for all future articles.

8 Responses on the article “Your questions answered #1”

  • Henry says:

    Great article Rich! I have been wanting to mess around with HTML 5 but what’s holding me back is the same reason I don’t use CSS3. I wish that IE 6 would disappear although I also feel that IE has made everyone that developes for it make them a better programmer in the sense that they have to clearly understand how exactly elements work with CSS and how to ‘hack it’ to make it work. Keep up the great articles looking forward for more!

  • Darren says:

    Excellent tips, thanks Rich!

  • Darren says:

    @Henry. EVERYONE would be a better developer if IE just went away completely!! ;)

  • Rich Clark says:

    Thanks Henry, glad you enjoyed the article we hope to have plenty more of them as your questions come in.

  • oli says:

    Regarding converting HTML4/XHTML1 to HTML5, I think a lot of the benefit in moving to HTML5 is a richer set of semantics. This means if you’re converting standard HTML4/XHTML1 you’ll get the most value out of rethinking everything, which as Richard states makes automatic conversion impossible. However using HTML5 is a sliding scale (not all or nothing), and we don’t have to go ‘all the way’ to get benefits :) Because HTML5 is so backwards compatible often just a change of Doctype will get you most of the way to a valid HTML5 document with your current code. While you won’t get the semantic benefits of rethinking everything, you can then eg use the improved HTML5 validators with only a small time investment.

    If you decide to use the HTML5 doctype but not use the new structural elements for the time being (eg due to worries about IE without JS turned on), or have to use HTML4/XHTML1 for the moment, I’d recommend the <div class=”html5-element-name”> approach. If you’re consistent you’d be able to do some of the conversion (class names to opening elements) via regex. Richard has linked to a cheatsheet I wrote above (thanks!), but if you’d like more info (ie this comment as an article ;-) I just wrote HTML5 structure—HTML4 and XHTML1 to HTML5, which might help…

    \me wonders what formatting is supported in comments… here’s hoping

  • Rich Clark says:

    Oli, you’re absolutely spot on when you say that HTML 5 is a sliding scale. We have a few articles coming up that will cover the complete basics of swapping to HTML 5.

    Your cheatsheet has definately helped the adoption of HTML 5 semantic naming too.

  • Girish says:

    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?

  • Remy Sharp says:

    @Girish – no doubt you got the reply via email, but we felt it would be useful to share this on HTML 5 Doctor too:

    Technically it should be possible. Certainly the HTML 5 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.

    I realise this reply might be a little vague, but the technology is coming together!

  • Leave a Reply to Rich Clark

    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.