How To Use HTML5 Today
snydeq writes "InfoWorld's Dori Smith offers developers a hands-on guide to using HTML5 today. 'Many of the media reports about HTML5 have focused on the politics, the "not until 2022" sound bite, or on HTML5's prospects as a "Flash killer." The reality of HTML5 is simply that it's the long-needed and long-overdue update to HTML4 — and you can start to implement it today,' Smith writes. Video, semantic tags, smart form input validation — Smith steps through several HTML5 features that can already be implemented, while noting several other presentation features that will soon be on their way. Smith also discusses IE work-arounds, such as HTML 5 Shiv and Google Chrome Frame."
Smith also discusses IE work-arounds, such as HTML 5 Shiv
Shanks a lot for the info ::fft fft::
Living With a Nerd
We wait around while the W3C tries to pull it's thumb out of it's ass.
How hard is it to decide on a new standard? Do the members not check their email more than once a year?
"My God...it's full of trolls!"
Is HTML 5 still structured like XHTML? I hope that it is, because one of the biggest pains in the HTML standard was the inconsistent syntax. I think a strength of strict XHTML was that it could be easily parsed by an XML parser, and if we are going back to the syntax of HTML 4 I think that's a step backwards.
Beware of bugs in the above code; I have only proved it correct, not tried it.
Is also a great resource. With less ads, things broken up by chapter, examples, how to detect if something is enabled, etc.
http://diveintohtml5.org/
But why do I have a sinking feeling that adoption of this new standard will be held back by Internet Explorer's atrocious handling of it?
I think between Google Chrome Frame and HTML 5 Shiv, MS will have a lot less power to hold back Web standards than they usually wield.
I predict that in a single year from now, the vast majority of browsers being run will be html5 ready; it's only been in the past few years that the browsers began self-updating; everyone wants html5, and so developers will be firmly able to count on it existing very soon.
slashdot: where everyone yells sarcastic metaphors to themselves to understand the issue
IE8 is a lot further along than IE7; and IE9, which should hit beta later this year, supports all HTML5 elements.
Climate Progress - Hell and High Water
IE8 was released last year and passes Acid2. IE9 will be released soon, and it performs much better than IE8 on Acid3 (the latest preview scores 83/100). Yes, they are still lagging behind, but they're at least trying to keep up with the pack.
What a fool believes, he sees, no wise man has the power to reason away.
HTML is not a finished standard. Should this prevent people from starting to use it? No, in fact, hell no, we should start using it right now to increase the uptake and motivate the developments of better technologies for utilizing it. A trial by fire will by itself weed out the un-needed portions of HTML 5 and perhaps show the usefulness of features that would otherwise be left out. Should IE's abysmal standards compliance prevent you from writing properly formated code? No, again, you should always motivate the use of new web technologies for helping to implement an advanced and open web.
(Read the "print" version of the article, instead of the "tiny blocks of text spread over many pages of ads" version.)
I have misgivings about HTML5. It gives the page more control, and the user less. That's been a trend in HTML for years, and it's getting worse.
I'm dreading "canvas". Ad blockers need to get smarter. Noticed that popups are winning over Firefox's popup blocking? We're also going to see pages that use 100% of the CPU just for display. We're going to need a browser option for "don't run canvas code for windows that aren't on top.
The "input type" mechanism for forms is lame. There are a number of standard types like "tel", but it's just text with no line breaks. They should have provided for either regular expressions or syntax like the COBOL Picture clause ("CREDIT_CARD_NUMBER PIC 9999-9999-9999-9999").
Dynamically-loaded fonts have been working for some time now in all the mainstream browsers. (IE6 and Firefox 3.5 were the last mainstream browsers not to have it.) We've been playing with that for our steampunk site. Downloadable fonts without anti-aliasing turn out to look ugly for small font sizes, because most of the display-type fonts have too much detail and not enough hinting for small font sizes. (In an annoying piece of Apple incompatibility, the iPad requires fonts in SVG, of all things. Everybody else, including Microsoft, is going to Web Open Font Format.) I'd recommend against using this feature much unless you have a good sense of typography. (Bad example: our steampunk search engine.)
I have to ask what you mean by "minority". I hate IE as much as anyone, but the fact is, it is used by more people than all other browsers put together. I don't tailor my view of reality based on what I like, and you should get out of the habit.
Whoa - I went looking for a link to give my claims some weight - and I found this:
http://www.w3schools.com/browsers/browsers_stats.asp
I guess if you are only measuring home users and technical users, you might get figures like that! But, when you include ALL COMPUTERS, you get quite different results.
http://marketshare.hitslink.com/browser-market-share.aspx?qprid=0
"Windows is like the faint smell of piss in a subway: it's there, and there's nothing you can do about it." - Charlie Br
You have to wonder what's going on when having a broken out of date IE6 is considered a feature in corporate environments on account of how badly it breaks facebook and youtube.
Who mods this crap up? IE is still over 50% and by far the most popular browser. Mainstream web developers need to test in IE or have a workaround for IE. IE's dominance is still a huge influence on Web development. The difference is, there are now practical ways to rewrite code on the fly for IE, or install a plug-in in IE that makes it behave as though it were standards compliant for a site.
...and IE9, which should hit beta later this year, supports all HTML5 elements.
Citation?
Smith steps through several HTML5 features that can already be implemented, while noting several other presentation features that will soon be on their way.
So - I'm supposed to start implementing cutting edge changes for my production sites, when the browsers that support those changes are "soon to be released"?
Smith also discusses IE work-arounds, such as HTML 5 Shiv and Google Chrome Frame."
Soo... now I'm already having to code workarounds before the standard is even official? Again - thanks, no. I'll wait until it's ratified as a standard, and the first revision of major browsers offers compliance.
Ever thought about sending a report to the owners of the pages that crash your browser? Tell 'em Flash sucks, and tell 'em why.
"Windows is like the faint smell of piss in a subway: it's there, and there's nothing you can do about it." - Charlie Br
At this point IE is a minority browser. I haven't tested any web site I've developed in the last 5 years in IE. It's just not worth the time to develop for a broken and ancient browser like IE.
Just because you're not testing ofr it doesn't mean that people aren't using it. It looks like it largely depends on the type of site -- more technically-oriented sites will typically have it as a minority; while mainstream and ecommerce sites will more often show it at the majority (in the US) or close to majority.
Multi-column (even with basic support), and full support of font-face, is going to go finally enable real layout.
Can you imagine inDesign, or Quark (or Pagemaker, etc..) without multi-column support?
Are there ANY newspapers that don't support multi-column layout?
Meanwhile, I'd like to see varying width/varying shape columns, with reflows, and proper column break hints.
The current support in Firefox/Safari/Chrome is much appreciated, though. (IE doesn't have it at all!)
Example multi-column layout with font-faces: http://www.futureclaw.com/articles/visionary-futurist-syd-mead.html
At this point IE is a minority browser.
You have a curious definition of "minority" if it matches "65% of the market".
Sure, it may well be a minority browser for your audience, it it's an overly technical one, or if you live in Eastern Europe. But most people aren't so lucky.
I don't understand the point of having multi-column as part of HTML. Multi-column layouts exist because of a number of properties of print layout that do not apply to the web. Web pages are not fixed size. They are not restricted in any direction, but they are commonly expected to not have a limited vertical dimension. Assumptions of fixed sizes have a tendency to get broken on web pages. And multiple pieces of complete content rarely appear on a single page. Multi-column is a print concept, but the web is not print.
I can't even remember the last time Flash crashed Firefox on me. In fact the last time it crashed was on an AJAX site. While I don't doubt Flash can cause issues too laying blanket blame on Adobe doesn't seem correct.
It's because page-width is variable that multi-columns are needed. There is a visual usability limit to column sizes, about 5-10 words or so.
It is a mistake to think that print properties do not apply to web. The same visual rules apply to web, or anywhere.
No, IE9 passes all of Microsoft's HTML5 tests.
Which is very different than supporting all HTML5 elements. (And even more different than meaningfully supporting all HTML5 elements.)
Agreed. Right in TFA, it clearly shows IE is running WAAAY behind every other browser by far.
If you can read this... 01110101 01110010 00100000 01100001 00100000 01100111 01100101 01100101 01101011
It is quite simple and always error free! Ideal for blogs and flash pages where content is not paramount.
/>
<!doctype html>
<html
Once you start despising the jerks, you become one.
Ugh... wall of text with two columns? That means the user has to scroll down a dozen screens, then back up, then down a second time. It works when you're reading a magazine or your monitor is tall enough to have all the text on one screen, but neither is the case for most web sites.
Actually, that page is an excellent example of why you shouldn't use a display font for normal text.
With a system that does anti-aliasing of text (Windows 7, Vista(?), newer MacOS, newer Linux, etc.) it's not too bad. If your system doesn't, it looks awful. It looks terrible in Windows XP and earlier, even if you have a current browser. It's definitely not something ready for wide scale deployment given the current state of client platforms. I'm trying it for the amusement of the steampunk community.
Those are actual 19th century fonts, scanned in from a book of type styles circa 1900 and vectorized.
Are there any good photo / video web albums that use HTML5 to good effect yet?
I'm kinda hooked on http://marginalhacks.com/Hacks/album/ , which has the simplest, most straightforward interface of all the other things I've tried. And it makes a good attempt at handling video. I have a simple shell script that imports pics from my Canon camera, converts the mjpegs to .mp4, and tosses it into my ~/public_html/pictures directory indexed by Album.
http://gallery.menalto.com/ is also one of my favorites, but it's a bit too labor intensive for a photo archive... I do try to load some of the nicest shots in it, though, for all the comments and other features..
Have you actually tried reading multi-column pages on the web? It is a pain in the ass. Instead of just scrolling down as you read, you scroll down to the bottom of the first column, then scroll back up to the top, then scroll down again to read the next column, etc. It is pointless, and offers zero advantages to the reader. The only people clamoring for it seem to be layout artists raised on print layout; I can't think of a single case as a reader where I would prefer multi-column over single-column layout for an article. Yes, there may be a usability limit to column width - but on the web there is no limit to the vertical dimension, so this really doesn't matter.
The one place multiple columns in an electronic medium makes sense is where you can fit everything on a single page by doing so, and in order to be readable that means knowing the size of the screen your readers will be using - if you can't guarantee that, just use a single column. Pretty much everyone is used to scrolling down as they read, it is quite easy and seamless.
Multi-column has nothing to do with page width - yes, there will be significant space "wasted" in a single-column layout, but so what? It is much better than the alternative of having to scroll up and down as you read.
if you want multi column that bad its just an extra 42 chars for two columns and additional 9 per column.
$ unzip, strip, touch, finger, grep, mount, fsck, more, yes,fsck,fsck,fsck,umount, sleep
Multi-column can actually prevent scrolling entirely, by using the horizontal space instead of forcing you to scroll vertically.
Don't blink. Blink and you're dead. They are fast, faster than you could believe, don't turn your back, don't look away, and don't blink. Good luck.
Well ain't that a big fuck you to the user. No web design should ever disable features the user finds useful.
Give me Classic Slashdot or give me death!
It's because page-width is variable that multi-columns are needed. There is a visual usability limit to column sizes, about 5-10 words or so.
That does not follow. Yes, a 60 character column is optimal, but that doesn't mean you have to shove a bunch of columns right next to each other. One article should be one long column. Scrolling is easy, and it doesn't force us to keep moving our eyes from top to bottom like multi-column does. A single column would leave lots of whitespace, but so what? I'm not looking at the whitespace, I'm looking at the column. If anything, having more than one column is distracting.
Give me Classic Slashdot or give me death!
HTML 5 really only makes sense for backends where I/T can dictate browser policies. For instance at my last two jobs I/T has dictated the use of the latest version of FireFox, its been pretty sweet. Unfortunately, most web designers and developers still need to do things the IE 6 way on frontends.
Isn't HTML5 a freaking working draft...? Wake me up when we have a real spec
IE9, which should hit beta later this year, supports all HTML5 elements.
Not even close. No browser is even close. Large swathes of the HTML5 spec are totally unimplemented. If you restrict yourself solely to new elements and not other new features (I don't know why you would), no browser implements <progress>, <meter>, <details>, <menu>, and several others. Some elements are implemented by at least one browser but not by IE9, like <keygen>, <datalist>, <output>, maybe a couple others.
Overall, IE9 is a huge step forward from IE8 and drastically closes the standards-compliance gap with other browsers, but it's still behind.
MediaWiki developer, Total War Center sysadmin
Indeed.
Users are the least capable of determining the quality of their own experience.
If what you said is true, newspapers would all end up being one long scroll.
It is easier to scan across several short columns, than to go down one long column.
Newspapers have physical limitations that web pages do not. Ideally a newspaper would be several long scrolls, one per article. We have the freedom to do that on the web and we should.
Give me Classic Slashdot or give me death!
Please go work on Gnome or something. The rest of us will be enjoying features we like.
Give me Classic Slashdot or give me death!
Huh? That would be a scrolling nightmare.
Sure enough, looking at the link provided, it's totally unreadable. The information on the page is out of context with the rest of the information on the page, the text providing context is off screen below. Instead of being able to quickly read or skim any of it, I gave up and closed the tab, returned here to report.
You might only have a hammer in your toolbox, and believe everything you see is a nail, but it's not. Newspapers needed the crutch of multiple columns because their format was hopelessly wide. Web pages have the opposite problem, they are infinitely tall. (One of the wonderful attributes of the Readability tool is to increase a web pages width to fill the screen.)
Worse, more web access is being done on mobile devices, thankfully that site was one column in Opera mini, I suppose we'll have to spoof to make it readable on other browsers?
It's not a mistake to think that print properties do not apply to the web, it's a mistake to misapply properties designed to overcome one liability, to media that has the opposite liability!
PS: Below you claim, "Multi-column can actually prevent scrolling entirely, by using the horizontal space instead of forcing you to scroll vertically." Seemingly to overlook the obvious extra white space required between multiple columns that isn't normally wasted--multiple columns add length.
...at least not in its non-XML form (check out the doctype for starters). If you've wanted to cope with your typical "in the wild" web page over at least the past 10 years, you've needed a special HTML parser anyway - SGML wasn't enough.
What HTML5 has tried to do is codify how to recover from errors so hopefully if you do choose to make non-validating HTML5 pages there is a greater chance that all browsers will recover the same way.
WOFF is in Chromium's webkit but seemingly not mainline webkit.
But globally, you're right. Unfortunately. I guess most of us want to go "North Korea" on IE: http://gs.statcounter.com/#browser-KP-monthly-200906-201007 (Kim Jong-il must have stopped using the web in septembre 2009 :)
No, it's not. Not until browsers implement a real hyphenation and line-breaking algorithm like that found in TeX. Until then, web typography will continue to look like the crude output of a word processor, no matter how many pretty fonts you make your readers download.
One of the wonderful attributes of the Readability tool is to increase a web pages width to fill the screen.
The eye most easily reads columns that are no longer than 80 characters (width: 40em in CSS). But modern PC monitors are 2560 pixels wide. At the default font-size: 16px, that's 320 characters or 160em, and the eye has a hard time finding the start of the next line of text. That's why on monitors at least 1600 pixels wide, I tend to split the screen down the middle. Windows 7's window manager has the "snap" feature, and Windows XP's has Ctrl+right click other window > Tile Vertically.
Seemingly to overlook the obvious extra white space required between multiple columns that isn't normally wasted--multiple columns add length.
But narrower columns also reduce the amount of leading (space between lines) needed to keep the eye from jumping the track. So even if you do need 2em of space between columns, you might still break even.
The one place multiple columns in an electronic medium makes sense is where you can fit everything on a single page by doing so, and in order to be readable that means knowing the size of the screen your readers will be using - if you can't guarantee that, just use a single column. Pretty much everyone is used to scrolling down as they read, it is quite easy and seamless.
Actually, there's at least one more case: where the user isn't reading sequentially at all. Wikipedia often uses multiple columns for footnotes, and that works excellently. They take up less vertical space, and it's no harder to read (since you're only reading one footnote at a time anyway, and probably not reading any at all).
MediaWiki developer, Total War Center sysadmin
Seemingly to overlook the obvious extra white space required between multiple columns that isn't normally wasted--multiple columns add length.
FYI, white space is a major boon to reading retention. YesIcouldwriteallmysentenceswithnowhitespace orpunctuationasthatwouldminimizethetotal spacerequiredbutitseemstomelikeitmightbeabadidea.
Just to prove my point, /. would not allow me to type the last sentence with no spaces. So, I had to add two just to pass their filter. For additional fun, try reading ancient Hebrew, where they understood that not only were spaces unnecessary, but so were vowels and punctuation.