Tags: html5

AurelioDeRosa/HTML5-API-demos

A collection of device APIs—which, despite the title, are all JavaScript, not HTML. Each API in the list has a link to its spec, an explanatory article, a demo, and the current level of support.

Sharing Podcasts - daverupert.com

Great suggestions from Dave for podcasters keen on allowing easier sharing.

Oh, how I wish Soundcloud would do this and be less of an audio roach motel!

cite and blockquote – reloaded | HTML5 Doctor

The definition of the cite element (and the blockquote element) has been changed for the better in HTML5 …at least in the W3C version anyway.

Bruce Lawson’s personal site  : On citing quotations. Again.

The semantics of the cite element are up for discussion again. Bruce, like myself, still thinks that we should be allowed to mark up names with the cite element (as per HTML 4), and also that cite elements should be allowed inside blockquotes to indicate the source of the quote.

Let’s pave that cowpath.

The thing and the whole of the thing: on DRM in HTML

A great post by Stuart on the prospect of DRM-by-any-other-name in HTML.

The argument has been made that if the web doesn’t embrace this stuff, people won’t stop watching videos: they’ll just go somewhere other than the web to get them, and that is a correct argument. But what is the point in bringing people to the web to watch their videos, if in order to do so the web becomes platform-specific and unopen and balkanised?

HTML5 in six steps by Andy Hume

You’re probably doing each of these already but just in case your’e not, Andy has listed six quick wins you can get from HTML5.

On the styling of forms by Bruce Lawson

Bruce takes a look at the tricky issue of styling native form controls. Help us, Shadow DOM, you’re our only hope!

The importance of HTML5 sectioning elements by Heydon Pickering

A good explanation of HTML5’s sectioning content and outline algorithm.

Interview with Ian Hickson, HTML editor on HTML5 Doctor

Bruce sits down for a chat with Hixie. This is a good insight into the past and present process behind HTML.

Main element - WHATWG Wiki

Tantek has put together a wiki page to document the arguments for and against adding a new “main” element to HTML.

Twitter Engineering: Implementing pushState for twitter.com

A really nice explanation by Todd Kloots of Twitter’s use of progressive enhancement with Ajax and the HTML5 History API. There’s even a shout for Hijax in there.

HTML5 forms (and IE10 (Mobile)) | Andrea Trasatti’s tech notes and more

Andrea looks at support for HTML5 input types in IE10 Mobile.

Accessibility – what is it good for? | Marco’s accessibility blog

A worrying look at how modern web developers approach accessibility. In short, they don’t.

034: With Jeremy Keith - ShopTalk

I had a lot of fun chatting with Chris and Dave on the Shop Talk Show. It is now available for your listening and huffduffing pleasure.

My case for the obsoletion of longdesc (Was: 48-Hour Consensus Call: InstateLongdesc CP Update) from James Craig on 2012-09-15 (public-html-a11y@w3.org from September 2012)

James Craig is a mensch. This is how you give feedback to a working group.

Bruce Lawson’s personal site  : Scooby Doo and the proposed HTML5 element

Bruce’s thoughts on the proposed inclusion of a “content” or “maincontent” element in HTML5.

Personally, I don’t think there’s much point in adding a new element when there’s an existing attribute (role=”main”) that does exactly the same thing.

Also, I don’t see much point in adding an element that can only be used once and only once in a document. However, if a “content” or “maincontent” element could be used inside any sectioning content (section, article, nav, aside), then I could see it being far more useful.

» 4 August 2012, baked by Bruce Lawson @ The Pastry Box Project

Bruce writes about a worrying trend in standards work:

Tossing a specification that you’ve written in-house, in secret and already implemented onto a table at W3C, saying “here, standardise this” as you saunter past isn’t a Get Out of Jail Free card for proprietary misdemeanours. And it isn’t standardisation.

CSS3 Pseudo-Classes and HTML5 Forms | HTML5 Doctor

A look at the new pseudo-classes in CSS3 that go hand-in-hand with the form enhancements introduced in HTML5.

ishida >> blog » HTML5 adds new translate attribute

Richard gives the lowdown on the new translate attribute in HTML.

HTML5 Please

This looks like a handy resource with a shitty, shitty name. Count the number of items that are in HTML (or JavaScript or APIs). Now count the number of items that are in CSS.

Confusion over HTML5 & WAI-ARIA | Karl Groves

This helps to clarify the difference between native semantics and ARIA additions.

The mobile app is going the way of the CD-ROM: To the dustbin of history | VentureBeat

Some future-friendly musings on mobile from Mozilla and Yahoo.

HTML5 and CSS3 Advent 2011

Here’s a geek advent calendar I missed. There are some great CSS techniques here.

Polyfilling The HTML5 Gaps With JavaScript

An in-depth look at browser polyfills: what they are, how they work, and how you can make your own.

Barack Obama

It’s responsive. It looks great. It’s using HTML5 structural elements and microformats.

HTML5 semantics and accessibility | The Paciello Group Blog

This is a great response to my recent post about semantics in HTML. Steve explores the accessibility implications. I heartily concur with his rallying cry at the end:

Get involved!

The Convergence

A fun platform game with a twist.

Goodbye time, datetime, and pubdate. Hello data and value. | HTML5 Doctor

A very even-handed look at the time and data debacle in HTML5.

Why No Time?

A single-serving website expressing the frustration and bewilderment at Hixie’s unilateral decision to drop the time element from HTML.

Dive into HTML5… on HTML5 Doctor | HTML5 Doctor

The HTML5 doctors are hosting a copy Mark Pilgrim’s Dive Into HTML5 at http://diveinto.html5doctor.com/ and they plan to keep it updated via Github.

HTML5 Whiteboard Magnets / Cameron Moll / Designer, Speaker, Author

This is such a great idea: magnetic HTML elements. And now Cameron is sharing the source files so that we can all print our own.

Upperdog Labs: Video Canvas Responsive Design - YouTube

I never expected to see a cross between responsive design and AR, but here ya go:

A silly mashup of HTML5 technologies: We use the canvas to capture the contents of a video element. The canvas then identifies the blue markers and overlays an iframe on top of it. The iframe contains our website (upperdog.se) which has a responsive design.

Of Web Apps and HTML Apps : Jonathan Stark

A real-world anecdote from Jonathan illustrates some of the misconceptions around using HTML instead of going native. A lot of people don’t realise that web apps can store data offline.

Web Standards Hoedown (Full HD / Radio Edit) - YouTube

It’s Opera …but it’s folk.

Mobile HTML5 - compatibility tables for iPhone, Android, BlackBerry, Symbian, iPad and other mobile devices

This just launched at the Breaking Development conference: another site that uses the term HTML5 to include CSS and Ajax. Still, despite its inaccurate nomenclature, it’s a useful compatibility table of device support in mobile browsers.

Stubbornella » Blog Archive » Don’t Style Headings Using HTML5 Sections

Nicole provides a step-by-step explanation of why it will probably benefit you to add classes to your headings to ensure consistent styling without writing overly-verbose CSS.

HTML5 And The Document Outlining Algorithm - Smashing Magazine

A brave attempt to explain the new outline algorithm in HTML (although it inaccurately states that no browsers have support for it—Firefox shipped with it a while back).

You can safely skip the comments: most of them are discouraging, ignorant, and frankly, just plain stupid.

Appcache Facts

A handy one-page cheatsheet for using HTML5’s appcache manifest file for offline storage.

Web Typography for the Lonely

A collection of experiments in typography using canvas, SVG, JavaScript and whatever else it takes.

5 STEPS TO HTML5

A really nice little primer on getting started with HTML5.

Bruce Lawson’s personal site  : HTML5, hollow demos and forgetting the basics

A great reminder from Bruce that we need to remember to use cutting-edge web technology responsibly.

LocalStorage in use on the Fontdeck Website | Fontdeck Blog

Listen to Josh explain a genuinely useful example of HTML5’s local storage that he’s added to Fontdeck.

The Tink Tank » Marking up the current page with HTML5 links

Leonie points to a change in the semantics of the a element in HTML5 that could be very handy for accessible navigation.

Avoiding common HTML5 mistakes | HTML5 Doctor

A great round-up by Richard of some of the most common semantic pitfalls encountered with HTML5.

CreativeJS | The very best of creative JavaScript and HTML5

This is your one-stop shop for envelope-pushing in the browser:

The very best of creative JavaScript and HTML5.

Getting Sourcey – native HTML5 Audio and video | Web Directions

Everything you ever needed to know about adding HTML5 audio and video to your site, courtesy of the mighty John Allsopp.

Google

A fascinating examination by Hixie of web technologies that may have technically been “better” than HTML, but still found themselves subsumed into the simpler, more straightforward, good ol’ hypertext markup language.

The follow-on comments are definitely worth a read too.

Responsive web design from the future — Warpspire

I really like the thinking that’s gone into the design of Github, as shown in this presentation. It’s not really about responsive design as we commonly know it, but boy, is it a great deep dive into the importance of URLs and performance.

>> blog » html5′s new bdi element

An excellent explanation from Richard of the bdi element (bi-directional isolate) for handling a mixture of left to right and right to left languages in HTML5.

HTML5 Rocks - HTML5 vs Native: The Mobile App Debate

An even-handed weighing up of the pros and cons of native and web app development for mobile.

HTML5Pattern

A handy list of regular expressions that you can use in the new pattern attribute on the input element in HTML5.

Document Outlines | HTML5 Doctor

Mike takes on the very tricky task of explaining the new outline algorithm—definitely one of the hardest features of HTML5 to explain, in my opinion.

manifestR - offline web apps made easy (well easier)

A bookmarklet to help you figure out what files you might want to put in your cache manifest for offline storage.

Get off(line) | Web Directions

John has written a very in-depth look at offline storage (using the cache manifest) in HTML5.

[whatwg] The blockquote element spec vs common quoting practices

I’m getting behind Oli’s proposal to allow non-quoted footers within blockquotes in HTML. Here’s where I quote the design principles to support his case.

Which Fish

A handy mobile-friendly list from Mike Stenhouse of which fish are currently having their stocks depleted. It uses offline storage so once you’ve visited once, you’ll be able to pull it up anywhere.

Examples of blockquote metadata ❧ Oli.jp (@boblet)

Now this is how you make progress on getting changes made to a spec: by documenting real-world use cases.

New Mobile Safari stuff in iOS5: position:fixed, overflow:scroll, new input type support, web workers, ECMAScript 5 | David B. Calhoun – Developer Blog

A look at some of the new HTML5/JavaScript additions coming in the next version of Mobile Safari.

Quoting and citing with blockquote, q, cite, and the cite attribute | HTML5 Doctor

An excellent article from Oli on markup patterns for quotations …though I still think that the cite element can be used for people’s names.

Accessibility and HTML5 Block Links — Simply Accessible

Derek runs some tests on how screenreaders behave when block-level elements are wrapped in links, which is now legal in HTML5.

Chloe Weil

Chloe’s redesign/realign is a lovely bit of HTML5 and CSS3 all wrapped up in a responsive layout.

The Story of the HTML5 Shiv « Paul Irish

This dovetails nicely with my recent post about the spirit of distributed collaboration. Here’s a great little bit of near-history spelunking from Paul, all about styling new HTML5 elements in pesky older versions of Internet Explorer.

The hgroup hokey cokey | HTML5 Doctor

A good round-up by Jack Osborne of where things currently stand with the hgroup group.

the html5 switch | the 200ok weblog

Ben Buchanan has a nice round-up of some of the options available when you’re switching over to HTML5.

Translation From MS-Speak to English of Selected Portions of Dean Hachamovitch’s “Native HTML5″ announcement [dive into mark]

Mark Pilgrim translates Dean Hachamovitch’s utterly bizarre and nonsensical announcement of IE10 that kept talking about “native HTML5.”

New Titles in Lending Library! « The Open Library Blog

You can now borrow HTML5 For Web Designers through the Open Library. Nice one, George!

Change Proposal for ISSUE-140 - WHATWG Wiki

An excellent zero-edit counter-proposal from Anne detailing why version numbers are unnecessary and undesirable for HTML.

The State of HTML5 Audio - PhobosLab

A rather vicious evaluation of browser support for the audio element and the audio API. It is divided up into:

  • Browsers From Companies That Actually Care About HTML5 Audio
  • Browsers From Companies That Hate the Web Enough to Not Support Ogg/Vorbis, but do Have an Audio Tag So They Can Say They Have an Audio Tag (Seriously, Fuck You)
  • Browsers That Say They Support HTML5 Audio But Actually Don’t Support HTML5 Audio

a world of tweets

A very pretty visualisation of tweets on a map using canvas.

yepnope.js | A Conditional Loader For Your Polyfills!

A nice’n’small lazy loader that should make life easier when it comes to pollyfilling browser support for nifty HTML5 or CSS3 features.

W3C HTML5 Chinese Interest Group

Some excellent cross-polination between HTML5 and internationalisation — remember the other two Ws that come before Web in WWW.

HTML5 — Edition for Web Developers

A beautifully readable subset of the HTML spec, with an emphasis on writing web apps (and with information intended for browser makers has been removed). Very handy indeed!

HTML5 Accessibility Chops: the placeholder attribute | The Paciello Group Blog

A nice succinct description of the placeholder attribute, with an emphasis on accessibility.

HTML(5) and text-level semantics — CSS Wizardry—CSS, Web Standards, Typography, and Grids by Harry Roberts

A great round-up of some of the humbler new elements in HTML.

New W3C HTML5 Logo: Looks Ok But Inconsistent, Fire W3C Communications Person Who Led Messaging - Tantek

Tantek is as disappointed as I am with the buzzword-compliant definition of HTML5 being pushed by the W3C.

Instead of providing precision and clarity, they’ve muddied the definition of HTML5 further with yet another “here’s our bucket of things we like which we’re going to call ‘HTML5’” message.

The WHATWG Blog — HTML is the new HTML5

The spec previously known as HTML5 is now simply HTML. Good. The W3C are now free to abuse the term “HTML5” to mean everything under the sun.

This W3C/HTML5 logo reminds me of something… | Flickr - Photo Sharing!

The new HTML5 logo is quite versatile.

This W3C/HTML5 logo reminds me of something…

W3C’s new logo promotes HTML5—and more | Deep Tech - CNET News

Curiously, though, the standards group—the very people one might expect to have the narrowest interpretation of what exactly HTML5 means—instead say it stands for a swath of new Web technologies extending well beyond the next version of Hypertext Markup Language.

HTML5 Gains Logo, Loses Meaning | Webmonkey | Wired.com

Lumping everything together is as silly as a carpenter referring to every tool in their toolkit as “a hammer.”

Anna Debenham

Anna’s redesign is beautiful, no matter what browser or device you’re using.

accessifyhtml5.js at master from yatil’s accessifyhtml5.js - GitHub

A great little jQuery script to automatically assign ARIA roles to HTML5 elements with the corresponding semantics.

Getting to work with new web technologies

This is the webpage of a great presentation on HTML5 and CSS3. It is also the presentation itself.

Radi

A Mac app for creating animations with canvas and video.

audio.js

A handy shim for audio: it uses the native implementation where possible and Flash as a fallback.

Bobbie Johnson dot org : Ian Hickson on HTML5: “The W3C lost sight of the fact that they have no power”

Bobbie is publishing the interviews he conducted with various HTML5 bods when he was researching his Technology Review article. First up: Hixie.

20 Things I Learned About Browsers and the Web

A delightful online book that makes excellent use of HTML5's history API.

HTML5 Forms Validation in Firefox 4 - Mounir Lamouri's Blog

A quick run-through of some of the new HTML5 form features coming in Firefox 4.

HTML5 Conformance Test Results

All the tests and all the results, all in one place.

MIX Online:Ai to Canvas Plug-In

A plug-in for Illustrator that allows you to export to canvas.

Position Paper for the W3C Workshop on Web Applications and Compound Documents

Here's a little piece of web history: the proposal that was presented and rejected at the 2004 W3C workshop that led to the formation of the WHATWG.

HTML5 accessibility

A handy table of new HTML5 elements and whether or not they are exposed to assistive technology.

rem @ > 140 characters - Hold off on deploying HTML5 in websites?

I couldn't agree more with this rant from Remy. He took the words right out of my mouth.

The Space Game

By playing this canvas game, you can help the European Space Agency plan missions to the planets of our solar system.

Live style sheet editing!

Edit this page. Then view source.

Biolab Disaster

A great little platform game that is entirely Flash-free. Canvas all the way.

HTML5 for Web Designers by Jeremy Keith available as an EPUB : Threepress Consulting blog

Liza and co. did a fantastic job converting my book. I doff my cap.

HTML5 inputs and attribute support

A very handy page for showing HTML5 form element support in your browser.

Did you have a nice day? - Made by Rattle

A beautiful SVG visualisation (with source code) of the Rattle team's experience of dConstruct 2010.

The Wilderness Downtown

A nifty interactive video for Arcade Fire's "We Used To Wait." It claims to be built in HTML5 but actually uses XHTML 1.0 and HTML 4.01 doctypes throughout. *sigh*

HTML5 Pour Les Web Designers – Jeffrey Zeldman Presents The Daily Report

Zoot alors! Mon book is high in the iTunes Store Français. Quelle surprise!