@boblet

"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

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.

HTML5 structure—nav, aside, figure, & footer

Fri, 03 Jul 2009 20:25: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

Block-level links, HTML5 & Firefox

After talking about
&
, and
& , I’m going to look at
,
,
and
, before looking at sectioning content, heading content and outlines:

—a section of navigation links, either to other pages (site navigation) or to sections on the same page (eg a table of contents for long articles). This is for primary navigation blocks, not just for any group of links. For example content highlights in the page’s footer don’t qualify. Breadcrumbs probably don’t either. (W3C:HTML, WhatWG)

—a section of a page that consists of content that is tangentially related—but separate—to the surrounding content. In print this would be a sidebar, pullquote or footnote. On a weblog article this could be article metadata in the margin or the comments section. (W3C:HTML, WhatWG)

—for content that is essential to understanding, but can be removed from the document’s ‘flow’ (moved to a different place) without affecting the document’s meaning. As the name and the optional child element for a caption imply this can be used for images or video, but it can also be used for any other content, including a graph, code sample, or other media. (W3C:HTML, WhatWG)

—a container element for additional information about a section, such as who wrote it, links to related documents, copyright data, a link to the top of the page etc, that usually appears at the end of a section.
can’t contain ~~heading or sectioning elements~~nested
or
elements—use a
instead for complex footers that need nested
s with
s etc. Also remember to enclose contact information in an
element, as this now applies to a section, not the entire page as in HTML4. (W3C:HTML, WhatWG)

You’re probably already using a
or something similar for site navigation. The
element allows us to explicitly mark up both site and in-page navigation. This has accessibility benefits, eg for users of assistive technology like screen readers. Note you’ll still need the
or
element if you are using a list for your navigation (and you should be—it’s the most appropriate element), but you can also include a heading element (
-
) or other relevant content.

content should be additional to (but not essential to the understanding of) the main content, ie any related content. While the examples of print design can provide inspiration don’t stop at pull quotes. For example a footnote provides extra but unessential information, and a pull quote (while essential content) is a copy of a quote from the main content. However keep in mind the
must be related—having your sidebar in an
in the page’s main
is fine, but site-wide information shouldn’t appear in an article’s
, for example.

content is essential, but it’s placement is not. Any part of a section that you’d currently use CSS positioning for would be a good candidate. Both of these elements provide additional semantic meaning, which allows computers to discern the relationships between the parts of a page (and between pages) more easily. In addition to accessibility, this will also help in indexing and repurposing content.

Choose between
or
by asking yourself if the content is essential to the section’s understanding. If the content is just related and not essential, use
. If the content is essential but it’s position in the flow of content isn’t important, use
. Of course, if it’s position relates to previous and subsequent content, use something else more appropriate! :)

seems to suggest a page footer, however it’s important to remember that like
this element applies to the current section (in the case of a page header or footer the acts as the section). It’s defining feature is containing navigation aids or additional information about the section, rather than it’s placement. If you add contact information for the section’s author remember to enclose it in an
element, as this now applies to a section, not the entire page as in HTML4/XHTML1.

Using
as a page footer

As mentioned above
can’t contain the following elements:

-

This means unless your page footer is very simple (eg inline content like copyright info and a contact email address), you’ll have to use a
instead. This is more restrictive than
, which only forbids descendant
and
s.

Using
as a page footer#

As mentioned above
now can’t contain the following elements (the same as
):

This is more permissive than the earlier “copyright & contact info only” version of
, but may still be too restrictive for a complex page footer. If you require nested sectioning elements with their own headers and footers use
instead.

Sectioning ~~content, heading content~~& heading elements, and outlines#

A new and important aspect of HTML5 is the creation of outlines (think indented list) from an HTML5 page. The four elements
,
,
and
are sectioning elements. They define the major ‘chunks of related content’ on a page, and their order and nesting dictate the relationship between these sections. They generally have a heading (& possibly a footer)~~, and allow the author to explicitly define~~. By using these elements semantically, the scope of headings and footers and
elements, or what content a contained ,
and
applies to, automatically allows a meaningful outline of the page to be made.

Heading elements include the standard
to
plus . The first heading of each section is used as the title of the section, and any subsequent headings (excluding those in the first ) create an implicit enclosing section in the outline. Together with sectioning elements these heading-generated sections define the outline of the document. Note that
is not a sectioning or heading content element, and does not affect the creation of sections or their titles. Authors are encouraged to explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content.

In the next exciting installment, we’ll finally look at the document structures that fall out of the HTML5 spec. Sample templates and code examples ahoy! Also, thanks to the fine folk at Information Architects, whose Web Trend Map is coming like Godzilla to Tokyo…

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

Changes:#

2009-07-13 Added more detail to
regarding page footers

2009-07-14 Moved per-section
use info out of
description, added a section about using
as a page footer, and improved the Sectioning & heading elements, and outlines text

2009-07-23 Changed from HTML5 to HTML 5 etc.

2009-09-12 Changed back from HTML 5 to HTML5 etc :| Made major changes to
after it’s role significantly changed recently (1, 2, 3; important changes ed with a green underline). Also added anchors to titles (on hover) and made a couple of small clarifications.

HTML5 structure—header, hgroup & h1-h6

Fri, 03 Jul 2009 03:08: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

Block-level links, HTML5 & Firefox

In the previous article I discussed the differences between
,
and
. The next pair of new HTML5 elements I’ll discuss are
and :

—a container element for a section’s introductory and navigational content. This typically contains the section’s heading (an
-
element or an element), but can also contain other content, such as a table of contents, a search form, or any relevant logos. Note that this element can be used in any section of the page (except a
or in another
), and is not only for the ‘page header’ containing the logo etc. (W3C:HTML, WhatWG)

—a specialised form of
that must contain a group (at least two) of
-
elements, and nothing else. It is for grouping a title with subtitle(s). Make sure to maintain
-
hierarchy—think of a nested outline. (W3C:HTML, WhatWG)

-
—the heading elements from HTML4 are back and basically unchanged(^*), except for HTML5’s stronger guidance on using them correctly (ie don’t skip levels). Note that a single
-
doesn’t require a
wrapper. (W3C:HTML, WhatWG)

While
and are easy to confuse, remember that can only contain a ‘heading group’ of
-
elements, and is for subtitles, alternative titles, or taglines.
can contain a
-
element or in addition to other elements that introduce the section. If there’s no need for an subtitle or other
content, just use the relevant
-
element.

An article with one title#

Article title Content…

A article header with title and metadata#

Article title (datetime="2009-07-13">13th July, 2009) Content…

An article with an -enclosed subtitle#

Article title Article subtitle Content…

A article with title, subtitle and metadata#

Article title Article subtitle (datetime="2009-07-13">13th July, 2009) Content…

Some examples of use#

An article title with an alternative title

A site name with tagline (branding phrase)

A long article title split into title and subtitle

Using
for the page header#

It’s possible to use
for the page header (and
for the page footer too). However, while
can contain sectioning elements, it can’t contain
or
. For a complex page header or footer that requires nested sectioning elements with their own headers and footers use
instead.

HTML5-style heading element levels#

In HTML authors should use the heading elements
-
rationally—using the levels to indicate nesting and not skipping levels—but this can be a problem in long or complex documents. Also there are some documents that actually need more than six levels of headings! (actually I always wondered what became of poor - :) In HTML5 there are now two ways we can use headings;

as in HTML4 with
being the page or article title (or both—nothing says you must only have one
element) and subsequent headings increasing as required

& a new way where each section begins with
again

This new way is potentially much easier as most sections will only need one heading element, which means
(almost) everywhere. However current browsers won’t interpret this correctly (eg when CSS is disabled), so unless you actually need more than six levels it’s probably best to stick with the old style for the present.

Example of nesting heading element levels#

Article title Article subtitle 3>Section title3> Content… 4>Subsection title4> Content…

Example of new-style heading element levels#

Article title Article subtitle 1>Section title1> Content… 1>Subsection title1> Content…

In the next exciting installment, the last of the structural tags and a look at sectioning elements and outlines…

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

Changes:#

2009-07-07 Added links to some other HTML5 articles I’ve written

2009-07-13 Added text about using
as the page header and improved
’s description

2009-07-14 Added new
&
+ code examples, and removed the unnecessary wrapping
in several code examples (1, 2, 3)

2009-07-22 Added missing elements that had prevented the example code coloring from working for some examples after a CSS change. Changed from HTML5 to HTML 5 etc.
2009-09-12 Changed back from HTML 5 to HTML5 etc :| Also added anchors to titles (on hover) and made a couple of small clarifications.

@boblet

"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

Article title

Article subtitle

Article title

Article subtitle

Article title

Article subtitle