@boblet

Heaven Can Wait, by Charlotte Gainsbourg lyq: This is probably...

Wed, 09 Dec 2009 12:50:53 +0900

Heaven Can Wait, by Charlotte Gainsbourg

This is probably the strangest thing I’ve seen all year.

Super Baozi vs Sushi Man—by Sun Haipeng Super Baozi, being...

Wed, 02 Dec 2009 10:43:51 +0900

Super Baozi vs Sushi Man—by Sun Haipeng

Super Baozi, being tired of being in Catering,is longing for developeing in Recreation. With intense enthusiasm and strong perseverance, he has learned to sing songs and to play nunchakus.Here are two short films of Super Baozi,please enjoy them.

Sweet as.

"Any sufficiently advanced incompetence is indistinguishable from malice."

Fri, 06 Nov 2009 19:35:29 +0900

“Any sufficiently advanced incompetence is indistinguishable from malice.”

- Clark’s Law

Via Adactio’s “Burge Pitch Torrent”.

"The craftman’s spirit, I think, imbues people with a sense of beauty, as in elaboration, delicacy,..."

Wed, 04 Nov 2009 16:01:20 +0900

“The craftman’s spirit, I think, imbues people with a sense of beauty, as in elaboration, delicacy, care, simplicity (words I often use).”

- Kenya Hara On Japanese Aesthetics

Kenya Hara, creative director of MUJI and professor at the Musashino Art University, talking about 職人気質 (taking pride in your work) felt by Japanese people. Translated by iA for a New York article “Beauty and the Bento Box”.

The Horribly Slow Murderer with the Extremely Inefficient Weapon...

Sat, 31 Oct 2009 11:21:41 +0900

The Horribly Slow Murderer with the Extremely Inefficient Weapon by Richard Gale

… and again, and again, and again, and again, and again, and again, and again, and again, and again, and again, and again, and again, and again, and again, and again, and again, and again, and again, and again, and again, and again, and again, and again, and again, and again, and again, and again, and again, and again, and again, andagain, andagain, andagain, andagain, andagain, andagain,andagain,andagain, andagain,andagain,andagain,andagain,andagainandagainand againandagainandagainandagain …

Troubleshooting MySQL installation on Snow Leopard

Wed, 28 Oct 2009 00:50:55 +0900

I installed MySQL 5.1.39 via Hivelogic’s “Compiling MySQL on Snow Leopard” and got the dreaded

$ mysql
ERROR 2002 (HY000): Can’t connect to local MySQL server through socket ‘/tmp/mysql.sock’ (2)

I eventually tracked the problem down, but MySQL doesn’t make things easy. This error can be from a bunch of things, so here’s what helped

Check Console.app—this was showing MySQL trying to start (and failing) every 10 seconds (ouch), but it gave me a pointer to the MySQL log file:
```
10/27/09 10:51:24 PM	com.mysql.mysqld[5198]	091027 22:51:24 mysqld_safe Logging to '/usr/local/mysql/var/My_HD.local.err'.
```
Check the MySQL error log—unfortunately this is inside a chowned folder so I needed to sudo tail -n100 /usr/local/mysql/var/My_HD.local.err
Check your my.cnf—the log pointed to an error in my /etc/my.cnf file. I should have tried checking or removing the text I added earlier

After fixing the typo, I needed to make a link from the actual mysql.sock file (in /private/var/mysql/mysql.sock) to where mysql expects it (which is actually /private/tmp/mysql.sock, as /tmp and /var actually map to /private/tmp and /private/var respectively):

$ ln -s /private/var/mysql/mysql.sock /private/tmp/mysql.sock

Installing gibak on Snow Leopard

Fri, 23 Oct 2009 17:01:00 +0900

Gibak is an OCaml wrapper for Git to make it easier to use Git for backing up your hard disk, or parts thereof. I probably should just start paying for DropBox already, but I still feel a little worried about moving eg ~/Library/ into the Dropbox folder and symlinking it.

Unfortunately the original author Mauricio Fernandez hasn’t been maintaining it recently, but the wonders of Github mean it’s had several collaborative bug fixes. I’ve used a fork by Chris Johnsen.

However I had some trouble getting it to compile, with this error:

*** omake: reading OMakefiles
*** omake: finished reading OMakefiles (0.09 sec)
- build . find-git-repos.o
+ ocamlfind ocamlopt -package fileutils,unix -warn-error A -dtypes
-inline 10 -S -I . -c find-git-repos.ml
File "find-git-repos.ml", line 1, characters 0-1:
Warning X: bad source file name: "Find-git-repos" is not a valid module name.
File "find-git-repos.ml", line 1, characters 0-1:
Error: Error-enabled warnings (1 occurrences)
*** omake: 23/49 targets are up to date
*** omake: failed (0.22 sec, 0/3 scans, 1/7 rules, 1/83 digests)
*** omake: targets were not rebuilt because of errors:
  find-git-repos.cmi
     depends on: find-git-repos.ml
  find-git-repos.cmx
     depends on: find-git-repos.ml
  find-git-repos.o
     depends on: find-git-repos.ml

After getting completely stuck I asked Chris for help, and he very kindly figured out my problem. Due to a change in ocaml-fileutils-0.4.0 I needed to change line 8 of gibak oametastore.ml from open FileUtil.StrUtil to:

open FileUtil

I also needed to change the OMakeFile to include the path to ocaml-fileutils and suppress the module name error ocaml-3.11.0 generates:

INCLUDES += /opt/local/lib/ocaml/site-lib/fileutils
OCAMLFLAGS += -warn-error x

Chris is adding these changes to his gibak fork, so you should just clone that and take it from there (see the wiki for more info). Thanks again for your help Chris, and also to Jay Levitt!

Installing omake-0.9.8.5, ocaml-fileutils-0.4.0 on Snow Leopard

Thu, 22 Oct 2009 17:21:00 +0900

For omake I was getting the error:

Undefined symbols:
  "_caml_sync", referenced from:
      _camlOmake_exec__28 in[==================================================================================== exec.a(omake_exec.o)01161
ld: symbol(s) not found
collect2: ld returned 1 exit status
File "caml_startup", line 1, characters 0-1:
Error: Error during linking

I commented out the reference to caml_sync in omake_exec.ml:

(* external sync : unit -> unit = "caml_sync" *)

Next, I was getting this error for ocaml-fileutlis (which isn’t in MacPorts yet):

/usr/bin/install: illegal option -- t
make: *** [install] Error 64

The makefile contained:

/usr/bin/install -c -d /usr/local/share/doc/ocaml-fileutils/api
/usr/bin/install -c -m 644 -t /usr/local/share/doc/ocaml-fileutils/api \

It seems that -t (which is used for denoting the destination directory) isn’t an option in MacOS X’s /usr/bin/install, so I edited the makefile from:

	$(INSTALL) -d $(htmldir)/api
	$(INSTALL_DATA) -t $(htmldir)/api \
	  $(wildcard $(BUILDDIR)/fileutils.docdir/*)

to:

	$(INSTALL_DATA) $(wildcard $(BUILDDIR)/fileutils.docdir/*) \
	$(htmldir)/api

Seems to have worked…

Torture Memos: Waterboarding, by Jonathan Mann I shared this...

Fri, 16 Oct 2009 17:24:12 +0900

Torture Memos: Waterboarding, by Jonathan Mann

I shared this on Google. I’ve emailed it. I want to mail it via snail mail to my older family members who don’t use email, but I have yet to figure out how to do so.

likeit, via misseffieb

Block-level links, HTML5 and Firefox

Fri, 04 Sep 2009 00:42:00 +0900

Update: Unfortunately this doesn’t seem to be a magic bullet, and there are still problems with the dreaded packet boundary bug. See the Mozilla bug report for more info.

Recently I’ve been experimenting with wrapping block-level elements in (so-called block-level links), as you can see in this page’s header. This has several benefits:

several elements can of course be linked at once, such as an image and it’s caption—historically we’d need to link both the image and caption text individually

Internet Explorer 6 doesn’t allow CSS :hover etc effects on anything other than

making block-level elements into links increases the clickable area

Changing from an inline element to something like that can appear pretty much anywhere is fine in the spec, but what about browser support? Luckily, this behaviour is already unofficially supported in current browsers. However I recently discovered a bug in Firefox; if the block-level link contains any of the new HTML5 semantic elements bizarre stuff happens (Bugzilla: #514122, test case):

Code sample


  
  
    Title
    Subtitle

In Firefox (DOM asplode)


  
  
    Title
    Subtitle

While the contained content is still linked, the HTML5 element is prematurely closed, the link becomes inline for the first element following the HTML5 element, and everything after that is wrapped in a new link. Kind of defeats the purpose huh. This is especially important for

, a new HTML5 element that’s going to be block-linked a lot.

Luckily, there is an easy solution; add a

wrapper

Code sample with wrapper


  
    
      
        Title
        Subtitle

In Firefox (all is right in the DOM)


  
    
      
        Title
        Subtitle

Wow that was easy! Lucky it wasn’t an IE bug huh ;-) There are some other things to watch out for too. Link styles don’t inherit to block-level elements, so you need to explicitly declare them on the contained elements, or use eg {background: inherit;}. This also includes the browser default {text-decoration: underline;} (in Safari browser link styles are applied, but user link styles also need to be declared). Finally, Firefox handles tag mismatch errors in block-level links … poorly. When in doubt, validate.

So in conclusion, if your block-level links contain HTML5 structural elements, add a wrapper

. If you have any questions, feedback, or have found a mistake, please let me know via Twitter (@boblet)…

That Mitchell and Webb Look: Homeopathic A&E (via...

Sat, 29 Aug 2009 00:47:52 +0900

That Mitchell and Webb Look: Homeopathic A&E (via gudbuytjane)

Via adactio

Mameshiba #7 tehehe

Sat, 29 Aug 2009 00:11:21 +0900

Mameshiba #7

tehehe

Bobby McFerrin Demonstrates the Power of the Pentatonic...

Sat, 01 Aug 2009 15:52:08 +0900

Bobby McFerrin Demonstrates the Power of the Pentatonic Scale

from World Science Festival

Bobby McFerrin demonstrates the power of the pentatonic scale, using audience participation, at the event “Notes & Neurons: In Search of the Common Chorus”, from the 2009 World Science Festival, June 12, 2009.

Wow

“Simon’s Cat ‘Fly Guy’ (via simonscat)” I’m sure all cat owners...

Wed, 29 Jul 2009 01:32:00 +0900

“Simon’s Cat ‘Fly Guy’ (via simonscat)”

I’m sure all cat owners can attest to the truth of this. Via adactio

"Again I say: mammals and dinosaurs. Simon, along with everyone else who thinks online subscription..."

Sat, 25 Jul 2009 15:39:00 +0900

“Again I say: mammals and dinosaurs. Simon, along with everyone else who thinks online subscription fees can save the newspaper industry, is effectively arguing that the world will change to support newspapers. The truth is that newspapers must change to adapt to the world. Just because the extinction of newspapers would be a tragic loss doesn’t mean it won’t happen.”

- “Pay Walls”, by John Gruber

“Masters”—The Vanderbilt Republic Foundation Promo for a...

Thu, 23 Jul 2009 16:04:00 +0900

“Masters”—The Vanderbilt Republic Foundation

Promo for a collaborative documentary and photography project on the surviving master performers of Cambodia’s traditional arts, 90% of whom were killed under Pol Pot’s regime. Produced by Cambodian Living Arts and the Vanderbilt Republic Foundation.

Via Daring Fireball

12 common problems with HTML 5

Thu, 23 Jul 2009 11:52:00 +0900

In-page navigation

Browsers don’t support HTML 5
IE doesn’t support HTML 5
HTML 5 won’t be ready until 2022!?
You mean XHTML isn’t the future!?
Now I have to relearn EVERYTHING!?
The HTML 5 spec isn’t understandable/is overly complex
HTML 5 means back to tag soup
HTML 5 means ALL-CAPS element names
But I like XHTML-style closing slashes
HTML 5 contains presentational elements
HTML 5 isn’t as strict/pure/semantic as XHTML 1.x
HTML 5 is only what ‘Supreme Dictator for Life’ Ian Hickson deigns to accept

Recently I’ve been reading a lot of articles on HTML 5 (such as on Zeldman.com and HTML 5 Doctor), and have seen a few reoccurring false perceptions in the comments. While some may seem funny for those following HTML 5’s progress closely, a lot of people aren’t, nor can they be expected to.

So in addition to the WhatWG FAQ, here are some common misunderstandings (and their explanations), written at a less technical level. My apologies for any overuse of the interrobang :)

Browsers don’t support HTML 5 #

While a lot of the new stuff in HTML 5 isn’t widely supported, it’s important to remember one of HTML 5’s core principles is compatibility, eg with current content. Apart from a few minor differences most of the HTML 4/XHTML 1 spec is in HTML 5. For the new parts of HTML 5 (such as structural elements) support can often be added today via CSS and Javascript. Finally, modern browsers (and even IE) are implementing the HTML 5 spec now. While full compliance will take a while, there’s a lot that’s already usable, and support is increasing.

Ref: When will we be able to start using these new features?—WhatWG FAQ
IE doesn’t support HTML 5

Internet Explorer is something of a … rugged individualist, resisting ‘trends’ (like standards support) and doing things it’s own way (cough .EOT cough) ;-). However as stated above because HTML 5 is mainly a well-defined HTML 4/XHTML 1 with sprinkles, all of the ‘old stuff’ still works. Unfortunately due to bugs, IE currently requires a Javascript hack to use new HTML 5 structural elements. For other new parts of the spec, Microsoft has been largely silent, but the IE team has already implemented Cross-origin resource sharing and Web storage in IE8 (IE Team blog), which were both parts of HTML 5 (and have been subsequently released as stand-alone specs). We can only hope that their well-deserved pride in implementing CSS2.1 completely carries over to HTML 5 and other specs.

Ref: What about Microsoft and Internet Explorer?—WhatWG FAQ
HTML 5 won’t be ready until 2022!?

While this statement makes for good WTF-style headlines, it’s just not true. The 2022 date is for two complete implementations, something that has still not happened for HTML 4, XHTML 1.0 or XHTML 1.1. The dates to worry about are 2012 for a completed draft, and October 2009 for a working draft. That’s three months away yo! Also as stated above, browser makers are already implementing some of the new parts of HTML 5, and the rest is backwards compatible.

Ref: When will HTML 5 be finished? and When will we be able to start using these new features?—WhatWG FAQ, and for fun Is HTML 5 Ready Yet? and Is HTML 5 Ready? ;-)
You mean XHTML isn’t the future!?

No, it’s the present. XHTML2 may be dead, but nothing will stop the millions of current XHTML 1.x pages (and any you create in the future) from working. However this probably means it’s a Good Idea™ to find out more about HTML 5 at some stage ;-)

Ref: Differences Between HTML and XHTML; Parsing—WhatWG FAQ
Now I have to relearn EVERYTHING!?

Since HTML 5 is mainly a well-defined HTML 4/XHTML 1, and because both HTML- and XHTML-style syntax is allowed, you need to do very little (maybe only a doctype change) to change current well-made pages into HTML 5. While there are certainly new things to learn, we all like learning, right?

Ref: HTML 5 differences from HTML 4—W3C Working Draft
The HTML 5 spec isn’t understandable/is overly complex

The HTML 5 spec is being written primarily for ‘implementors’—programmers who make web browsers and other tools to use the web. Unlike previous specifications, HTML 5 is defining processing steps and error handling explicitly, which can be a little overwhelming if you’re not a browser programmer :) Luckily a majority of the spec is actually just the HTML 4/XHTML 1 you already know.

Also, there are already many useful articles and resources for author information on HTML 5, such as “A Preview of HTML 5” by Lachlan Hunt on A List Apart, “HTML 5 Reference” by Lachlan Hunt (a version of the spec specifically for authors) on w3.org, “HTML 5: The Markup Language” by Mike™ Smith (a pared down spec that removes implementor details) on w3.org, and sites like HTML 5 Doctor. You can also check out my humble HTML 5 articles :)
HTML 5 means back to tag soup

While the XML strictness in XHTML 1.0 and 1.1 certainly encouraged a move away from the bad old ways of the past, there’s nothing in HTML 5 (or HTML 4 either) that stops you from adding closing elements, correctly nesting elements, using elements appropriately, and generally making good code. HTML 5 is forgiving of mistakes, but you don’t have to make them :) Current HTML 5 validators are also already good (W3C, Validator.nu), and there is even talk of making a user-selectable ‘strict validator mode’, so if you want to write good code there’s nothing to stop you.

Ref: Why does HTML5 legitimise tag soup?—WhatWG FAQ
HTML 5 means ALL-CAPS element names

HTML 5 is case-insensitive; both upper- and lower-case elements are permitted, even ;-) Note that is recommended just in case you ever need to use it in XHTML (which is case-sensitive).
But I like XHTML-style closing slashes

No one will take them away from you! XHTML-style closing slashes on empty elements are valid HTML 5, so you can write either HTML-style or XHTML-style HTML 5 (although it’d be best to consciously choose one and stick to it).

Ref: Should I close empty elements with /> or >?—WhatWG FAQ
HTML 5 contains presentational elements

Some ‘presentational’ elements such as and from HTML 4 have been retained. This is because they now have defined semantic meaning—legalese (‘small print’) and a span of text in an alternate voice or mood, like a word from another language, respectively.

A few of the new structural elements such as
and
can also be perceived as presentational, however the use of these elements should be dictated by their content and not their placement.

Ref: Why are some presentational elements like , and still included?—WhatWG FAQ

HTML 5 isn’t as strict/pure/semantic as XHTML 1.x

Also “HTML validators aren’t as strict as the XHTML validator”. While HTML 5 is more forgiving of mistakes than XHTML sent with a XML mime type, almost everyone used the text/html mime type, and in that case XHTML was treated as strictly as HTML 4 (or HTML 5) by browsers. HTML 5 actually defines element semantics more precisely than XHTML 1, and adds new semantic meanings (for , etc) and elements (
,
etc). HTML 5 is also much more precisely defined, enabling better conformance checkers to be created, and current HTML 5 validators (W3C, Validator.nu) actually seem to be a little stricter than the XHTML 1 validator.

Ref: the differences between HTML and XHTML—WhatWG FAQ

HTML 5 is only what ‘Supreme Dictator for Life’ Ian Hickson deigns to accept

The WhatWG and the W3C HTML 5 working group are using a different process to most other W3 projects—rather than the traditional ‘black box’ approach they accept input from anyone willing to give it, and decisions are not reached via consensus member voting. While this may seem to some like Hixie is basically playing god, he is actually working hard to base the spec on reality and achieve consensus with implementors, as they have the final say on what is implemented. So actually it would be more accurate to say HTML 5 is what the browser makers accept.

Despite the exclusionary image some have, Hixie and other WhatWG & W3 HTML WG members read through and respond to a massive amount of feedback, via the WhatWG email list and W3 HTML email list, IRC, the bug tracker, and even weblog comments. In my experience they have been open to (and frequently requested) improvements. If you have some feedback, by all means engage with the HTML 5 community (preferably after having checked the official FAQ), giving examples of real-world usage and the pros and cons for your idea. If something is confusing ask for more information in a mailing list, or even better in IRC.

Ref: WhatWG and W3C HTML Working Group

I hope that was of use. If you have any questions, feedback, or have found a mistake, please let me know via Twitter (@boblet)…

HTML 5 structure—HTML 4 and XHTML 1 to HTML 5

Tue, 14 Jul 2009 13:53:00 +0900

Other HTML 5 articles

HTML 5 id/class name cheatsheet

HTML 5 structure…

div, section & article

header, hgroup & h1-h6

nav, aside, figure, & footer (plus outlines)

HTML 4 and XHTML 1 to HTML 5

12 common problems with HTML 5

We’ve covered a lot of ground so far. To recap, HTML5 has several new block-level sectioning elements that we can use to give relevant parts of web pages more semantic meaning. These new elements are for ‘chunks of related content’—basically a logical section of the document:

New sectioning elements in a nutshell

—a chunk of related content

—an independent, self-contained chunk of related content, that still makes sense on it’s own (eg in an RSS feed)

—a chunk of content that is tangentially related to the content that surrounds it, but isn’t essential to understanding that content

—navigation for the site or page

(cf.
—a chunk of content with no additional semantics, eg for CSS styling hooks)

With very few exceptions (generally in web applications) these new sectioning elements should have a title, possibly in a
element with any other introductory information. We can use this as a rule of thumb for deciding between
and
:

consciously add a title for each
, even if you then hide the title with CSS (as is generally the case with nav for accessibility). If it seems like content that shouldn’t have a title when CSS is disabled, then it’s most probably not a
(HTML5Doctor; The Section Element)

The new sectioning elements can also contain one or more
elements with additional information, such as author (
) or copyright () info, related links etc. It’s important to note that
and
(&
) apply to the sectioning element they’re in (this is for a page header or footer).
and
can’t contain other
s and
s.

Finally, while the words “header”, “footer” and “aside” all come with preconceptions, their semantic meaning comes from the types of content they contain, not from their presentation or relative placement. For example,
could contain a footnote, and a
containing a ‘Top of Page’ link could appear at both the top and bottom of a section.

Now let’s look at example structures for a basic article page; using the standard layout of a page header (with logo etc), navigation tabs, a main column, a side column, and a page footer.

~~Article Page~~Converting a simple page to HTML 5#

Here’s the outline of the parts of our page:

Page header (site name, logo, search…)

Main navigation

Main content (wrapper)

Article (main column)

Article title

Article metadata

Article content…

Article footer

Sidebar

Sidebar title

Sidebar content…

Page Footer

So let’s write that in standard POSH HTML4:

DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Article (HTML4) "Content-Type" content="text/html; charset=utf-8"> id="branding"> Site name id="nav"> Site navigation id="content"> id="main"> Article title class="meta">Article metadata Article content… class="article-footer">Article footer id="sidebar"> Sidebar title Sidebar content… id="footer">Footer

So let’s write that in standard POSH XHTML1.0:

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> "en" xml:lang="en"> Article (XHTML1) "Content-Type" content="text/html; charset=utf-8" /> id="branding"> Site name id="nav"> Site navigation id="content"> id="main"> Article title class="meta">Article metadata Article content… class="article-footer">Article footer id="sidebar"> Sidebar title Sidebar content… id="footer">Footer

Now let’s convert that to HTML5, using the new structural elements:

DOCTYPE html>"en"> "utf-8">Article (HTML5) id="branding"> Site name Main navigation id="content"> Article title Article metadata Article content… Article footerid="sidebar"> Sidebar title Sidebar content id="footer">Footer

DOCTYPE html>"en"> "utf-8" />Article (HTML5) id="branding"> Site name Main navigation id="content"> Article title Article metadata Article content… Article footerid="sidebar"> Sidebar title Sidebar content id="footer">Footer

Note here we assume that the sidebar contains content not related to the article (such as recent articles etc), so it’s a descendent of (page sidebar) not
. If it only contained content tangentially related to the article we could use
make
a child of
. Also we assume that the doesn’t contain much more than a copyright statement and contact information—a detailed footer with headings etcpage header and footer don’t contain nested
or
elements—a complex page header/footer requiring these would need it’s own
.

doctype, charset & XHTML-style markup#

You’ll notice the doctype and charset are both much simpler. HTML5 is case-insensitive, but WhatWG recommend this style of doctype as it will also work in XHTML (which is case sensitive). While this style charset is recommended, the pre-HTML5 charset declarations are still valid. Also, if you’re viewing XHTML-style code examples (there’s a handy HTML/XHTML code style switcher top right), you’ll note that the charset element still has an XHTML-style trailing slash in the HTML5 example. In fact XHTML-style markup (a closing / on empty elements) like this is also valid HTML5! This makes it very easy to migrate to HTML5 from both HTML and XHTML pages. You should try to avoid mixing HTML and XHTML-style code, however—choose one style and stick with it.

HTML5 or XHTML5? Choose HTML5#

If you currently use XHTML1.x you might be thinking to use XHTML5, the XML-compatible version of HTML5. If your website will have a general audience (=people using IE), don’t. XHTML5 must be sent with an XML mime type (like application/xhtml+xml), and even IE8 still doesn’t support this. However, all of the hallmarks of XHTML coding—writing elements in lower case, correct nesting, closing tags, adding optional elements that add meaning—are all compatible (HTML5 is case-insensitive) or encouraged in HTML5.

Browser support (via CSS and JS)#

So, does it work? Currently the HTML5 structural elements will work in modern browsers (Firefox 3+, Safari 3+, Opera 9+, Chrome 1+) as long as we declare them as block-level elements via this CSS:

/* Declaring HTML5 elements */ article,aside,details,dialog,figure,footer,header,hgroup,menu,nav,section{ display: block; }

and in Internet Explorer 8 and below we need to hack support in via Javascript (I bet you didn’t see that coming ;-)

(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()

The recommended way to add this Javascript is via Remy Sharp’s Google Code-hosted HTLM5 shiv for IE in the page :

So, all together now…

…

…but IE requiring JS means we’re screwed, right?#

You can easily choose to not worry about IE with Javascript turned off on a personal weblog, but if an IE user has JS disabled the new elements (and their associated styling) will be dropped, and the page will ass-plode (feel that déjà vu). While Javascript is becoming more of a requirement with the rise of web apps, IE needing Javascript will probably still be a show-stopper on commercial projects.

You might think that IE’s lack of support without Javascript for these new elements means you can’t use HTML5 at all, but there are two ways we can still benefit from HTML5’s greater semantic richness—by using HTML5 semantic element names as class names on
(so-called HTML4.5), in either HTML4/XHTML1.0 or HTML5. You’re probably already using a standard set of class and id names anyway, and this is in effect a standardised set of semantic class names. HTML5 is basically a superset of HTML4/XHTML1, so as long as you don’t use any new elements HTML5 pages will work in IE. It also has the benefits of simplifying a future move to HTML5, and if you use the HTML5 doctype you can also use the more detailed HTML5 validators.

Adding HTML5’s semantics via
#

Here’s the HTML4 version using HTML5 class names:

DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> "en"> Article (HTML4), with HTML5 class names "Content-Type" content="text/html; charset=utf-8"> id="page-header" class="header"> Site name id="main-nav" class="nav"> Site navigation id="content"> id="main" class="article"> class="header"> Article title Article metadata Article content… class="footer">Article footer id="sidebar" class="aside"> Sidebar title Sidebar content… id="page-footer" class="footer">Footer

Here’s the XHTML1 version using HTML5 class names:

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> "en" xml:lang="en"> Article (XHTML1), with HTML5 class names "Content-Type" content="text/html; charset=utf-8" /> id="page-header" class="header"> Site name id="main-nav" class="nav"> Site navigation id="content"> id="main" class="article"> class="header"> Article title Article metadata Article content… class="footer">Article footer id="sidebar" class="aside"> Sidebar title Sidebar content… id="page-footer" class="footer">Footer

Now in HTML5, again using
with HTML5 class names rather than the new HTML5 elements:

DOCTYPE html> "en"> Article (HTML5), with HTML5 class names "utf-8"> id="page-header" class="header"> Site name id="main-nav" class="nav"> Site navigation id="content"> id="main" class="article"> class="header"> Article title Article metadata Article content… class="footer">Article footer id="sidebar" class="aside"> Sidebar title Sidebar content… id="page-footer" class="footer">Footer

DOCTYPE html> "en"> Article (HTML5), with HTML5 class names "utf-8" /> id="page-header" class="header"> Site name id="main-nav" class="nav"> Site navigation id="content"> id="main" class="article"> class="header"> Article title Article metadata Article content… class="footer">Article footer id="sidebar" class="aside"> Sidebar title Sidebar content… id="page-footer" class="footer">Footer

You may be wondering why these two examples are so similar—after all, only the doctype and charset differ! That’s because one of HTML5’s core principles is compatibility. If we don’t use any new HTML5 elements, a change of doctype might be all that’s required to convert a well-coded HTML or XHTML page to HTML5.

Why bother with HTML5?#

~~So if you’re not going to use HTML5’s new elements, which IE doesn’t support without Javascript~~Hopefully by now you’re feeling excited about using HTML5 for a personal project. But if you’ve decided not to use HTML5’s new elements because IE doesn’t support them without Javascript, what’s the point of thinking about HTML5 now? I see several benefits:

Thinking about HTML5’s structural elements (even if we only express the semantics via class names as described above) will make our code more logical and semantic

HTML5 is defined in far greater detail than previous HTML/XHTML specs, giving us more guidance in creating web pages

Another benefit of this detail is more accurate validators (W3C, Validator.nu), with the potential for more detailed error messages

If you think you might convert to HTML5 in the future, the HTML-5-elements-as-class-names approach should remove a lot of the pain of converting (especially with a little regexp magic)

Now that XHTML2 development will be halted, starting to learn about the official future of HTML is a Good Idea™

Using HTML5 is a sliding scale, not all or nothing. You can get benefits from simply changing the doctype, a five second job.

Because browsers use the same parser for HTML5 as HTML4/XHTML1, and because backwards compatibility is a central tenet, using an HTML5 doctype today has almost no disadvantages (make sure to check HTML5 differences from HTML4, specifically 3.3-3.5).

It’s possible to just change the doctype and get some benefits from having converted to HTML5 (when you use a validator :). However, the more time you put into HTML5 the greater the reward. You’ll get the most benefit from rethinking your site’s semantics from an HTML5 perspective, although for the present I’d recommend adding these extra semantics via the HTML-5-elements-as-class-names approach for commercial projects.

Questions? Feedback? Mistakes? Let me know via Twitter (@boblet)…

Changes:#

2009-07-16 Added notes about doctype, XHTML5 and XHTML-style coding in HTML5, thanks to feedback from @robertdot. Also changed doctype to lower case in HTML5 code examples for consistency (HTML5 is case-insensitive so either is fine).

2009-07-19 Added headings for the doctype, charset & XHTML-style markup and HTML5 or XHTML5? Choose HTML5 sections I added last time, for better scanability. Added more info on the HTML5 shiv plus a copy-paste-able head code block for adding JS and CSS (thanks to HTML5 Doctor for the prompt). Also I added a few more links, a couple more points to “Why bother with HTML5?” (‘sliding scale’ and ‘no disadvantages’), rewrote the conclusion, and added what could be my favourite header ever.

2009-07-22 Added or rewrote these subtitles; Converting a simple page to HTML5 and Adding HTML5’s semantics via
. Changed “HTML5” to “HTML 5” etc.

2009-07-22 Reverted doctype to WhatWG-recommended XHTML-compatible style (although a lower-case doctype is fine in HTML 5!).

2009-09-16 Changed almost everything :)

Living with First-Person Shooter Disease Meet Gene Simpkins,...

Fri, 10 Jul 2009 10:33:30 +0900

Living with First-Person Shooter Disease

Meet Gene Simpkins, sufferer of moto-neural demyelination, or to the layman, Duke Nukem’s Disease…

matthewb: Red Rabbit was written, directed, modeled and almost...

Tue, 07 Jul 2009 10:18:00 +0900

matthewb:

Red Rabbit was written, directed, modeled and almost entirely animated by Egmont Mayer, using Softimage XSI. Fabulous.

@boblet

Heaven Can Wait, by Charlotte Gainsbourg lyq: This is probably...

Heaven Can Wait, by Charlotte Gainsbourg

Super Baozi vs Sushi Man—by Sun Haipeng Super Baozi, being...

Super Baozi vs Sushi Man—by Sun Haipeng

"Any sufficiently advanced incompetence is indistinguishable from malice."

Clark’s Law

"The craftman’s spirit, I think, imbues people with a sense of beauty, as in elaboration, delicacy,..."

Kenya Hara On Japanese Aesthetics

The Horribly Slow Murderer with the Extremely Inefficient Weapon...

The Horribly Slow Murderer with the Extremely Inefficient Weapon by Richard Gale

Troubleshooting MySQL installation on Snow Leopard

Installing gibak on Snow Leopard

Installing omake-0.9.8.5, ocaml-fileutils-0.4.0 on Snow Leopard

Torture Memos: Waterboarding, by Jonathan Mann I shared this...

Torture Memos: Waterboarding, by Jonathan Mann

Block-level links, HTML5 and Firefox

Code sample

Title

Subtitle

In Firefox (DOM asplode)

Title

Subtitle

Code sample with wrapper

Title

Subtitle

In Firefox (all is right in the DOM)

Title

Subtitle

That Mitchell and Webb Look: Homeopathic A&E (via...

Mameshiba #7 tehehe

Mameshiba #7

Bobby McFerrin Demonstrates the Power of the Pentatonic...

Bobby McFerrin Demonstrates the Power of the Pentatonic Scale

from World Science Festival

“Simon’s Cat ‘Fly Guy’ (via simonscat)” I’m sure all cat owners...

“Simon’s Cat ‘Fly Guy’ (via simonscat)”

"Again I say: mammals and dinosaurs. Simon, along with everyone else who thinks online subscription..."

“Pay Walls”, by John Gruber

“Masters”—The Vanderbilt Republic Foundation Promo for a...

“Masters”—The Vanderbilt Republic Foundation

12 common problems with HTML 5

Other HTML 5 articles

In-page navigation

Browsers don’t support HTML 5 #

IE doesn’t support HTML 5

HTML 5 won’t be ready until 2022!?

You mean XHTML isn’t the future!?

Now I have to relearn EVERYTHING!?

The HTML 5 spec isn’t understandable/is overly complex

HTML 5 means back to tag soup

HTML 5 means ALL-CAPS element names

But I like XHTML-style closing slashes

HTML 5 contains presentational elements

HTML 5 isn’t as strict/pure/semantic as XHTML 1.x

HTML 5 is only what ‘Supreme Dictator for Life’ Ian Hickson deigns to accept

HTML 5 structure—HTML 4 and XHTML 1 to HTML 5

Other HTML 5 articles

New sectioning elements in a nutshell

Article title

Sidebar title

Article title

Sidebar title

Site name

Article title

Sidebar title

Site name

Article title

Sidebar title