What Is HTML5, and Should You Use It?
Now that everyone has finished converting all their pages to xhtml 1.1, the W3C suddenly had a terrible realization: xhtml was all a horrible, ghastly mistake. In one blinding flash they realized that plain old HTML like we used back in the 1990s was better, so they dumped xhtml and redefined html5 as the new standard. To sell the package, they've thrown in everything that anyone might want. The books reviewed below help website designers understand what has changed.
But is there any compelling reason to change to html5? Considering that most
browsers don't yet incorporate all the features, the answer for most people
will be no. But anything that does away with those abominations called
Javascript and Flash is clearly a good thing. CSS3 will do everything that
Javascript used to do, and it also makes it easy to create gradients,
rounded corners, and drop shadows—which makes it a big deal among web
designers. The question “Why would anybody want that?” even
seems to have been asked on a few occasions, and some features, like
acronym
, have been dropped. (Actually, they only changed
the name to abbr
.)
To see why you might not want to switch to HTML5 yet, try viewing this page (which is written in valid html5) with Firefox 3.6.6. You would need to add a statement like "Watch out for falling boxes" to each page. (Update: found a way around that.) IE8 doesn't show any boxes at all, and just renders the page as text on a white background (with a chopped-off title). This is a big problem: these browsers will be in use until the hard drives they're installed on have all crashed, which could take months or even years.
There is an old saying that every application continues to evolve until it can deliver mail. Browsers will eventually become translators, dictionaries, and videophones. Someday Firefox, or its descendant, will probably be implanted in your brain. Or given how browser size is increasing, maybe you will someday be implemented as a feature in Firefox's brain.
Sooner than that, you will be able to add a movie to your web page as easily as adding an image, using code like
<video src="test.mp4" controls></video>
What you get at the moment, if your movie is in mp4 format, is this:
That's the problem with HTML5: most of it does not yet work. Movies and sound clips don't play on most browsers. The canvas API still requires Javascript, which is going away. Animation, 3D transformations, and drag and drop still don't work. At the moment, HTML5 is still a mess with APIs that are more in the spirit of object-oriented languages than HTML. That will change, and HTML5 is already as good as xhtml 1.1. The main limitation is browsers: Linux Firefox doesn't handle antialiased fonts correctly. Opera doesn't do gradients yet. IE runs in Windows.
One of the few things that does work is content-edible tags. If your browser supports it, you should be able to click on the italicized text in the previous sentence yourself and change it to “continent-inedible,” “content-editable,” or whatever you prefer. This will be welcome news for those of us who are driven up the wall whenever someone puts apostrophes inside any word that ends with an 's'. (Even worse is when they put an apostrophe in the word 'want'.)
A critical step in learning the correct syntax is to get an html5 validator. For Linux I recommend tidy-html5-master, which is a fork of html-tidy.
This topic changes rapidly. Avoid books that are over a year old.
Unmet needs in css:
Progress bar
How much progress?
CSS3 now has arithmetic, so you can now do things like
height: calc(3 * 333px);
(although none of the books below mention it). But this is still
not very useful, because there are still no variables. So a line like
height: calc(3 * mybox.height);
(where mybox is an
identifier) doesn't work. That's one reason the vast majority of pages (including
this one) use fixed sizes for everything. We need user-defined functions,
variables, and read access to HTML page parameters. A few functions, such as
rgb() and matrix(), have already been added. As Javascript gets more integrated
into CSS, user demand will undoubtedly force w3c to put more in eventually.
With CSS3, you can finally create upside-down text with a color gradient and specify the degree of transparency of your text. Unfortunately, it only works in some versions of Firefox. IE8 doesn't show it (or any of the html5 features on this page).