HTML5 Doctor » charset http://html5doctor.com helping you implement HTML5 today Wed, 01 Feb 2012 09:28:11 +0000 en hourly 1 http://wordpress.org/?v= Your Questions Answered #12 http://html5doctor.com/your-questions-12/ http://html5doctor.com/your-questions-12/#comments Thu, 12 Aug 2010 13:45:15 +0000 Richard Clark http://html5doctor.com/?p=2369 The latest round of HTML5 prescriptions is in! This week, we'll briefly cover the HTML5 vs Flash debate, whether to use <body> or <div>, HTML5 rich text editors, and the HTML5 charset and doctype.

]]> Doctor treating a patient illustration The latest round of HTML5 prescriptions is in! This week, we’ll briefly cover the HTML5 vs Flash debate, whether to use <body> or <div>, HTML5 rich text editors, and the HTML5 charset and doctype.

HTML5 vs Flash

Yaniv opens the great debate:

Hi, why is it said all the time that HTML 5 is going to replace Flash and in the near future flash will not be used again?

This is over-simplifying.

Historically, Flash has been used especially for games, video, and rich interaction because it wasn’t possible to do these things natively (i.e., without using a plugin). HTML5 introduces <canvas> and a native <video> element, and recently JavaScript libraries like jQuery make it much easier to create rich interaction. An additional benefit of Flash was its ubiquity, but thanks to the iPhone and now iPad, this isn’t true anymore.

I expect the usage of Flash to decrease as browsers support web standards, but Flash will still be used for a while to come. The enormous number of pages using Flash aren’t going to vanish (or change) overnight.

Peace – Oli

Body or div?

Erik asked:

Hi there, I have noticed that several implementations of HTML5 (including this blog), set a width of the body rather than using a wrapping div-tag to create a centered layout.

It somehow feels awkward to set a width of the body, but is that the actual, proper way of doing it? I understand that a wrapping div is non-semantic, but how would one deal with background images etc, if the body has a width set to it? I’m guessing it would work to set background images on the html-tag, as well, though.

If you need a <div> for styling purposes, that’s perfectly fine. You could also achieve the same effect by doing as you suggest and setting a background on the <html> element. For more, take a look at our recent article You can still use <div>.

If you need any help on using <body> as a wrapper, check out Kroc Camen’s How to Centre and Layout Pages Without a Wrapper.

Peace – Oli

Rich text editor

Dave asked:

We use our own bespoke CMS and part of the admin has a Javascript based rich-text editor (ck editor i think)for editing the main content of the pages.

The problem we’ve come across is that I’m building the site in HTML5 and it appears the text editor doesn’t recognise the new HTML5 tags (section, aside, article etc.) Do you know of any text editor that can handle HTML5 as I can’t seem to find anything in terms of Javascript based components or any other alternative. Many Thanks

Generally, JavaScript-based WYSIWYG editors are complete shite (excuse my British ;-) . Unfortunately, I don’t think this is gonna change soon because the established players were developed in the bad old days and have the code baggage to prove it. Perhaps with IE9 someone will cut the support anchor on older versions of IE (Safari, etc) and actually do a decent one, but don’t hold your breath :-)

You can customise most editors, however, and possibly even add your own elements. As a start, here’s an article I wrote on hacking FCKEditor into some semblance of shape for MT4.

Beyond that, the editor’s documentation and forums are the place to check.

In addition, migrating to HTML5 is not all-or-nothing. You can get benefits from just the doctype (better validator, more detailed spec). Also, <div> is still a perfectly fine HTML5 element. Should new structural elements overwhelm the editor, you can always do something like <div class="article"> and <div class="nav"> (so-called HTML4.5 ;-) . This way you’re not using new elements, but you’re still benefitting from thinking in HTML5 semantics, and should you want to change down the road, you’ll already be half way there.

Peace – Oli

Recommended charset for HTML5

Guy asked:

I have always used ISO-8859-1 as things like £ work better (being UK based)

But I have noticed a strong tendency for UTF-8 when it comes to HTML5. Is there a reason for this? what do you recommend?

Many thanks, Guy

The HTML5 spec says use UTF-8: “Authors are encouraged to use UTF-8”. The reason is UTF-8 is a superset of ISO-8859-1, and can represent many more characters. To get a £ symbol, you can write &#163; (or &pound;), but with UTF-8, just writing “£” is fine.

In fact, using UTF-8 in HTML5, we only need to escape & and < (and maybe ‘,”, and > depending on context — e.g., alt text). All other UTF-8 characters can be used as-is (e.g., “” not &ldquo;&rdquo;). Just look at the source for this paragraph!

Peace – Oli

Mobile doctype

Franceso asked:

Hello guys! I was wondering, since I found no reference at all online… does the HTML5 doctype cause problems on mobile browsers (besides the iPhone/iPod/iPad. I tested it and it works like a charm)?

I don’t mean “advanced” HTML5 properties like video or even article and other semantic tags. Just the simple HTML5 doctype, that causes no problems whatsoever with classic desktop browsers. Because I tried it, and it does seem to cause layout problems on Symbian (the only other browser I could test it).

Any suggestions? Because I do use the video tag in there (to degrade gracefully in all mobile browsers but the iPhone’s, I’d hope), but I hate using that with the classic mobile XHTML doctype declaration. Thanks!

The HTML5 doctype was chosen to be backward compatible with current browsers, and for desktop I think that’s completely true. I doubt many mobile browsers were tested, though. Anything not running Opera Mini or Mobile Webkit is most probably still partying like it’s 1999, and YMMV. I’d recommend testing thoroughly.

By the way, anything that doesn’t support the HTML5 doctype definitely will not support <video>. Hope that helps.

Peace – Oli

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.

Your Questions Answered #12 originally appeared on HTML5 Doctor on August 12, 2010.

]]> http://html5doctor.com/your-questions-12/feed/ 2 Your questions answered #2 http://html5doctor.com/your-questions-answered-2/ http://html5doctor.com/your-questions-answered-2/#comments Thu, 20 Aug 2009 08:39:09 +0000 Jack Osborne http://html5doctor.com/?p=618 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.

Your questions answered #2 originally appeared on HTML5 Doctor on August 20, 2009.

]]> http://html5doctor.com/your-questions-answered-2/feed/ 4