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 £ (or £), 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 “”). 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
videoor evenarticleand 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
videotag 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.
2 Responses on the article “Your Questions Answered #12”
Hello,
I’ve another question surrounding ‘Recommended charset for HTML5’. If you use UTF-8, you can safely use a lot more characters, but is this the right thing to do? Or would you recommend still using entity codes from £, quotes etc.
Or doesn’t it matter these days? I just feel nervous using quotes etc as not used to it!
Thanks
Ric
@Ric — For me entities other than the ones mentioned above are like making your color palettes web-safe — sure you can but there’s no need to anymore. There are (of course) a couple of caveats;
Check to make sure, but apart from that, hope you ♥ your more readable source! ☺❧
Join the discussion.