Category Archives: HTML

Meet HTML, The Spec Formerly Known as HTML5

It won’t be an unpronounceable symbol, but HTML5 is getting a Prince-style name change. From here on out HTML5 will simply be HTML — according to the WHATWG anyway.

Just a day after the W3C unveiled its new HTML5 logo, the Web Hypertext Application Technology Working Group (WHATWG) has announced that it will drop the term “HTML5,”stop the versioning of HTML altogether and instead treat the evolving specification as a “living standard.”

While eliminating the version number from HTML has been part of the WHATWG’s plan from the beginning, the timing of the change is clearly related to the W3C’s attempt to embrace the term “HTML5.” The W3C recently showed off a new HTML5 logo, but the accompanying FAQ used the term HTML5 to cover everything from the actual spec to only tangentially related tools like CSS 3, WOFF and SVG. Many developers saw the W3C’s nebulous use of the term HTML5 as a sign that the term had become, like “AJAX,” just another marketing buzzword.

The W3C has since rewritten its FAQ to clarify and more sharply define just what HTML5 is and is not, but before that happened Ian Hickson, the WHATWG’s editor, announced that the WHATWG was renaming its spec to just HTML. Hickson says the WHATWG was “going to change the name last year but ended up deciding to wait a bit since people still used the term ‘HTML5′ a lot.”

Hickson then makes a not-so-subtle jab at the W3C, saying HTML5 “is now basically being used to mean anything Web-standards-related, so it’s time to move on!”

The W3C has long had a tenuous relationship with the WHATWG. Technically the W3C is the standards body charged with publishing the HTML spec. The WHATWG — a consortium of browser makers — grew out of the W3C’s neglect of HTML and its misguided decision to pursue XHTML 2. Now that both groups are working on the same spec, in theory, their goals are the same. In practice, however, the two groups often butt heads. In other words, just because the WHATWG has decided to abandon the term HTML5, don’t expect it to disappear overnight.

The W3C will continue to work toward “snapshots” that reflect stable milestones of the ever-changing WHATWG version of the spec. For now at least, that means the term HTML5 will be alive and well at the W3C, as the group works through its standard practice of issuing working drafts, holding last calls on changes and finally publishing the spec as a “recommendation.”

Since browser makers have long been well ahead of the W3C when it comes to implementing the latest and greatest parts of the HTML5 spec, they will likely focus on the WHATWG’s HTML spec, which will, like Google’s Chrome browser, follow a “rolling release” schedule.

No doubt the media and marketers will continue to use HTML5 as a buzzword that means far more than just the spec, but even that’s not always a bad thing. There’s no doubt that Apple, Google, the New York Times and everyone else who’s used HTML5 as an analog for the New Shiny has helped HTML5 — and all the other tools it’s come to stand for — gain momentum. As web developer Jeff Croft puts it, “sometimes we just need a word to rally behind.”

While not everyone understands the nuances of what’s HTML5, what’s CSS 3 and what’s just JavaScript, that doesn’t change the fact that everyone is excited about building a better web and that is exactly what HTML(5) is designed to do.

Microsoft Puts H.264 Video Back in Google Chrome, Considers WebM for IE

Microsoft has announced a plug-in for Google’s Chrome web browser that allows Chrome on Windows to play H.264 web video through the HTML5 <video> tag. The new plug-in comes on the heels of Google’s decision to remove H.264 support from Chrome and focus on the company’s competing WebM video codec.

You can grab the new Chrome plugin from Microsoft. Microsoft previously released a similar H.264 plugin for Firefox, which also only supports WebM video.

The video move is the latest sign of a collision between the two tech giants, who now compete directly in search, courtesy of Microsoft’s Bing initiative and mobile, where Google’s Android is taking market share and the new Windows Phone 7 is struggling for a foothold. Google has also launched various cloud-based applications that take aim at Office. This week, the two threw punches over search, with Google claiming Microsoft copies its results, and Microsoft complaining the Google perpetrated a sting worthy of a spy novel.

Now the two are sparring over web video. Google has thrown its weight behind the WebM codec, which the company owns, while Microsoft supports H.264. However, Microsoft says that, provided Google makes some changes, it may be willing to support the WebM codec as well.

While HTML5′s video tag promises a native way to watch video in your browser, video codec support among browsers is divided. Firefox, Opera and Chrome support the WebM codec while Apple’s Safari and Microsoft’s IE9 support H.264. As it stands there is no “it just works” solution, which means most websites still use Flash video players.

Microsoft’s H.264 plug-ins for Firefox and Chrome are part of the company’s attempt to be pragmatic — since Windows includes native support for H.264, users should be able to watch H.264 video even if the browser doesn’t support it. On the other side of the coin, Internet Explorer 9 will be able to play WebM video through a similar third-party plug-in.

However, while Microsoft isn’t including native support for WebM in the next version of IE, it doesn’t appear to totally rule out the idea. As part of the plugin announcement, Dean Hachamovitch, corporate vice president for Internet Explorer, outlines some of Microsoft’s problems with the WebM codec. The main problem is that Microsoft is concerned about WebM’s potential patent risks.

Google insists that it owns all of the patents covering WebM and the VP8 video codec. But the company offers no indemnification for costs incurred should a patent lawsuit arise. That means that anyone distributing WebM/VP8 could be on the hook for any patent-related fees that might come up.

Some have dismissed Microsoft’s patent worries as an example of Microsoft spreading “fear, uncertainty and doubt” about WebM, but Microsoft does have history on its side in this case. As Hachamovitch points out, such patent lawsuits often don’t arise until a technology is in widespread use. So just because no one is suing over WebM now, doesn’t mean they won’t in the future. Hachamovitch cites the JPEG photo compression format, pointing out that JPEG was around for ten years before the first patent lawsuits appeared. Eventually the patents in question were ruled invalid, but not before millions of dollars were spent defending and licensing JPEG.

Of course the same patent threats potentially hang over H.264, but the MPEG-LA consortium — the governing body that oversees the patents surrounding H.264 — provides a kind of legal buffer between H.264 licensees and any lawsuit.

Surprisingly, Hachamovitch says that, if Google is willing to indemnify WebM users against patent lawsuits, “Microsoft is willing to commit that we will never assert any patents on VP8.” Of course that doesn’t mean other companies won’t, but it would be a huge step forward for WebM if Microsoft jumped on the bandwagon. Google did not respond to a request to comment in time for this story.

For now at least Microsoft has chosen a pragmatic approach — plugins. There will be a WebM plugin for Internet Explorer and H.264 plugins for Firefox and Chrome. In the end, Windows users will be able to watch just about any video on the web regardless of which browser they’re using. It might not be an ideal solution, but it is one that, from the user’s point of view, just works.

Review: Adobe’s Edge Offers Web Animation Sans Flash

Adobe has released a preview version of a new HTML animation tool dubbed Edge. Together with Wallaby, Adobe’s Flash-to-HTML conversion app, Edge is part of Adobe’s push to remind the web that the company is more than just its much-maligned Flash plugin.

Edge has been released as a free, beta public preview and is available for download through the Adobe Labs website.

Edge is not intended to replace Adobe Flash. At least not in the short term. Instead Edge is aimed at Flash animators looking for a visual way into the world of HTML, CSS and JavaScript-based animations, particularly the relatively simple animations often currently found in Flash-based advertisements.

HTML, especially some of the new elements in HTML5, combined with CSS 3′s animation syntax offers web designers a way to create sophisticated animations without requiring users to have the Flash plugin installed. That’s a good thing since no iOS user is going to have the Flash plugin.

Unfortunately, HTML, CSS and JavaScript don’t offer any easy way to create animations. Developers comfortable writing raw code in text editors have, thus far, been the driving force behind web standards-based animation. Designers and animators accustomed to development tools like Flash, which offers visual layouts and drag-and-drop animation, have been left out of the web standards animation trend.

Edge is Adobe’s attempt to bring the good parts of the Flash development app — visual animation tools, keyframe-based timelines and a stage where you can drag-and-drop objects — to the world of web standards-based animation. But of course, instead of publishing your animations as Flash files, Edge publishes them as web standard HTML, CSS and JavaScript.

Like Hype (see our review) and other HTML animation apps out there, Edge looks and behaves much like Adobe’s Flash development environment with a timeline, keyframes and editing tools that will look familiar to Flash developers. If you know how to use Flash, you’ll be up to speed with Edge in no time.

Despite Adobe’s marketing efforts, there’s almost nothing about Edge that is HTML5. Adobe is hardly alone in its misleading use of the HTML5 moniker. Both Hype and Sencha Animator claim to be “HTML5″ animation apps and, like Adobe, neither generates much of anything that isn’t in the HTML4 spec.

In its current form Edge will export your animations using div tags, some CSS animations, a fair bit of JSON and a combination of jQuery and some custom JavaScript to hold everything together.

Why go with div and CSS-based animations when there’s Canvas and SVG? Well, for one thing, this is a very early preview and Adobe claims that eventually Edge will support canvas and SVG (in fact Edge already has some support for importing SVG file). A Mozilla developer raised this question in the Adobe forums and Adobe’s Mark Anders chimed in to say that, “we seriously considered canvas, but current performance on mobile browsers (especially iOS) is very bad.”

Anders goes on to note that iOS 5 will remedy much of iOS’s canvas performance woes, and Adobe is clearly looking for developer feedback on where to go with Edge. If you’ve got strong feelings about where Edge should focus its efforts, head over to the forums and let Adobe know.

While Edge is a long way from a finished product, this early release shows considerable promise. If you’re a Flash developer looking to expand your repertoire to include HTML, CSS and JavaScript animations, Edge just might help. For a nice overview of how to use Edge be sure to check out Mark Anders’ Edge overview movie on Adobe TV.

How to Add HTML5 Microdata to Your Website

The Opera Dev blog has posted a nice overview of HTML5 microdata. Webmonkey took a look at microdata last year, showing you how to extend HTML by adding custom vocabularies to your pages. Since then microdata has moved from barely known oddity to mainstream tool, thanks in part to schema.org.

Schema.org is a partnership between the major search engines — Google, Bing and Yahoo — to define a common set of microdata schemas for the web. Thanks to the hundreds of pre-defined schemas on schema.org, adding microdata to your site is just a matter of dropping in the schema that fits your content.

The easiest way to understand microdata is to consider a common use case. Let’s say you want to list details about a business on your page — the name, address, telephone number and so on. To do that you’ll need to use some vocabulary in addition to HTML, since there is no <business> tag. Using microdata, you can create your own custom name/value pairs to define a vocabulary that describes a business listing.

For more details on how to do that see our earlier microdata overview. Also check out the Opera Dev blog for some more microdata examples.

Once you understand the ideas behind microdata, take a look at the various schemas listed at schema.organd add the appropriate markup to your website’s templates.

Another handy tool that’s popped up since we last looked at microdata is Philip Jägenstedt’s live microdata viewer, which is a great way to check your microdata code and even see what it looks like when extracted to JSON.

Also, keep in mind that it isn’t just search engine spiders that stand to benefit from microdata on your pages. The HTML5 spec also defines a set of DOM APIs for web browsers to read and manipulate microdata on your pages. At the moment, very few browser support microdata, but Opera recently released an experimental build with some microdata support. Look for other web browsers to begin adding microdata support in the near future.

The more information you can give the web, the more it can do with that information. Eventually, search engines could use microdata to find your friends on the web (like XRD and WebFinger) and browsers could use it to connect you with those friends no matter what flavor-of-the-month social site they might be using.

W3C Publishes an HTML5 Spec for Web Developers

Chances are, despite embracing the tools therein, you’ve probably never read the HTML5 spec. We don’t blame you. Frankly the worst part of this job is when we have to translate gibberish from the actual HTML5 spec into words normal humans can understand.

The problem is that the HTML5 spec is written for browser makers, not web developers, and contains highly technical and very esoteric language.

Earlier this year the WHATWG released a much more readable “web developer edition” of the HTML5 spec. Now, not to be outdone, the W3C’s HTML Working Group has published a draft of its own more readable spec, the HTML5: Edition for Web Authors.

The W3C’s web developer version of the spec is still more technical than the WHATWG’s version, and nowhere near as nice to look at, but at least you can read the HTML5 spec without all the notes about conformance criteria and other browser maker-specific lingo.