Your questions answered #2

by .

Doctor treating a patient illustrationSince the launch of the site we’ve be welcoming questions regarding the HTML 5 spec through the contact form. It doesn’t matter if you think your question is too <H1>big</H1> or <small>small</small> we’re here to help.

Last month we decided to pull together a post that covered some of the emails that were sent in through the contact page. Since the publication of the last post we have received a lot more questions regarding the HTML 5 spec and have decided that some of these warranted another post.

Content Type

Christian asked:

In checking out various implementations of html5 around the web with a quick “view source”, I find everyone seems to specify content type in the headers like so; <meta http-equiv=”content-type” content=”text/html;charset=utf-8″> even though it’s already a part of the HTTP header.

Does it really need to be in both locations, or can we all cut out that redundancy as long as our servers are specifying the content type appropriately in the HTTP header?

If you take a look at Dr.Bruce’s weblog http://www.brucelawson.co.uk/ you will see that most of the information can be cut out and simplified. As more and more sites make the jump to HTML 5 you will be able to see what elements can and cannot be left out. If you’re interested in checking out more sites then please feel free to visit our sister site HTML 5 Gallery where you will be able to view the source of plenty of sites that are already sporting HTML 5 elements in their markup.

If you’re looking to take your reading even further then Dr. Remy has recently published an article entitled HTML5 boilerplates which should give you more information on the above.

HTML 5 & SEO

Julio asked:

I’m thinking of using HTML 5 in my projects as soon as possible, but I need to be sure that everything will work just as fine as HTML 4. My question is: Google (and other search engines) is already indexing HTML 5 sites? In terms of SEO, will I have any drawbacks?

In answer to your question, yes Google is indexing HTML 5 sites. Between us we run several sites built with HTML 5 markup and none of the Doctors have had any issues with our sites being indexed or competitive on key phrases.

In fact if you look at the source code of google.com you’ll see that their doctype is declared as <! doctype html> meaning it’s using HTML 5! Another site that is part of the Google group, Youtube, has also recently created a mock-up of their layout that can be found at http://www.youtube.com/html5 and this definitely shows that they are thinking about it. One last fact to help settle your nerves, if we’ve not managed to do it already, is that Ian Hickson who is writing the bulk of the HTML 5 spec works for Google so we don’t think you’ll have any problems.

HTML 5 Templates

Klaus asked:

Where can if find HTML 5 Templates?

When this email came in, we weren’t too sure by what Klaus meant so we’re tackling his question with two responses.

For static HTML pages you’d be hard pushed to find a better resource than Remy’s boilerplate explained here: http://html5doctor.com/html-5-boilerplates/

However, if you are looking for some HTML 5 WordPress themes then have a look at the following:

WebSocket Support

Dave asked:

There’s a lot of features, and I can’t find anywhere that lists current support in major browser versions (and/or with Google Gears). The particular one I’m looking for is WebSocket support

This is a good resource for checking the state of browser support for a particular feature: http://a.deveria.com/caniuse/ Regarding web workers specifically, we’ve come across a library that implements Web Sockets and falls away when it’s available natively.

None of the doctors have used these personally but feel that they will be useful in answer to your question:

Reusing Elements Within Same Page

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

Yes, for more information please reference this article – http://html5doctor.com/designing-a-blog-with-html5/ and this diagram of a single blog entry (of course, there can be many blog entries on a page) http://html5doctor.com/wp-content/uploads/2009/06/html5-article-outline.gif probably.

Other articles that we have already covered on the site – http://html5doctor.com/the-header-element/, http://html5doctor.com/the-footer-element/ and a great article on the http://html5doctor.com/nav-element/.

Learning HTML/XHTML Before Reading About HTML 5

Manuel asked:

Hi, I’m new to this field and I would like to learn HTML.

If I understand correctly, most future web sites will be written in HTML5 (served using the text/html MIME type) and just a few sites will use XHTML5 (served using the application/xhtml+xml MIME type). As a consequence, I will focus on HTML5.

HTML5 can use both the HTML syntax and the stricter XHTML syntax, but since I’m starting from scratch I suppose I could safely ignore the XHTML syntax and focus on the HTML syntax (HTML 4.1/5). Why bother about XHTML syntax in 2009? Unfortunately all modern introductory book/online resources about HTML are focused on the XHTML syntax. Where I could learn the pure HTML syntax without any reference to the useless and distracting (for my purposes) XHTML syntax?

Your best bet would be to get into the good coding practices of XHTML (lowercase tag, always closing tags, etc.) while writing HTML, there are a number of resources on the Internet for learning HTML 4.01 which you shouldn’t have any problems finding. A particular favorite of mine when I was starting out was HTMLDog.

We understand the issue of a number of the resources use the XHTML sytax but as I said above this will get you into good coding habits when writing HTML (particularly as HTML is less strict).

thank you for your quick reply. You won me: I will learn XHTML (from HTMLDog). Just a last question: when in the next future I will make the transition to HTML5 (served using the text/html MIME type) I hope the XHTML syntax validates anyway, so that I will have just to change the doctype of my pages to <!DOCTYPE html>. Right? (My fear is that the XHTML syntax will require a XHTML5 doctype).

This is correct though you won’t get the extra semantics added by HTML 5. For that I suggest you read the articles that appear on the site. If you want to use semantic class naming in your current XHTML I suggest you see the related links after ‘Automated Conversion’ in this post. – http://html5doctor.com/your-questions-answered-1/

There we have it folks…

Another quick round up of some of the more difficult questions we’ve had to respond to over the last few weeks. We hope that you’ll find this article helpful and remember that if you have a question that hasn’t been covered in an article so far feel free to get in touch, you never know, your question might just appear in one of these posts.

4 Responses on the article “Your questions answered #2”

John Smedley says

Thanks very much for publishing another your questions answered post, I really enjoyed the previous one and this one is more of the same. I’ve learned some brilliant things in these last two posts.

Keep up the good work Doctors, I’m very much looking forward to the next post already.

Scott Savage says

Thanks for posting these Q’s and A’s – it reminded me that I wanted to go and review the Boilerplates article before I started on a project this weekend.

Keep up the good work – this site is quickly becoming one of my favorite resources!

Chris Cressman says

I use both a Content Type header and meta element. I use these to declare the character encoding I’ve used for the document. The header is used if the document is requested from a server. The meta element is used if the document is opened directly, either on my local machine today, or on some kind of offline archive in the future.

Jonas says

You can also find information about Websockets here in case you need fully backward compatible solutions for older versions of browsers with no native support for Websockets – http://www.kaazing.com

There is also a good set of articles on Websockets that you can “google”.

Cheers,
Jonas

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.