- August 11, 2011
I have a new crush and its name is figcaption
- @jennlukas
- Interactive Development Director
When it comes to HTML5 elements, do you ever feel like you’re reaching for a carrot on a stick?
The promise of those tasty elements, hanging right in front of you, taunting you, so close, yet just out of reach. What you wouldn’t give for just one bite of a section, one taste of a succulent aside, one thirst-quenching datalist. I bet no one told that donkey it was going to have to wait ’til 2022 to eat that carrot.
There has been a lot of hesitancy from folks to go beyond the HTML5 doctype and start implementing new elements on their sites. Fixes like inserting div wrappers as fallback for styling unrecognized elements don’t go over well with those who want to avoid extra markup. Some developers are also hesitant to use the html5shiv since it requires JavaScript. Depending on the site and your audience, I can see points for and against these fixes. I don’t mind the JavaScript solution if the content is still accessible without it.
Why hello there…
Two new HTML5 elements that I’ve fallen in love with and have been longing to use are the figure and figcaption elements. I’ve found the need for the pair in almost all of the templates I have worked on. The semantics offered with these versus a div with a class of “caption” or an image in a paragraph tag or an image and caption paired with a table is quite motivational to start using these elements. There’s always a risk that the spec might change, but that’s a risk some might not mind taking. For a comprehensive look on when to use them, check out The figure & figcaption elements by Richard Clark.
I created a test page to see how figure and figcaption would degrade for users without Javascript. I hoped that since it’s just an image with a paragraph, it would still look okay. If you disable JavaScript in older versions of Internet Explorer, you’ll notice that the smaller image lost its float. It’s not perfect but I wouldn’t call this broken.
Screenshot of test page with figure and figcaption in Internet Explorer 6.
What about everyone else?
This got me thinking about other new elements everyone else is using. A while back I took a look at which sites were using the HTML5 doctype. I revisited those sites to see which elements—old and new—they were using. What follows is a quick audit of the homepages of those sites. I included Facebook as they have updated their doctype since the last time I looked. I removed Wikipedia as only the landing page has an HTML5 doctype.
| Site | Elements and quantities used |
|---|---|
| a(38), br(5), center(3), div(51), font(1), form(1), h1(1), h2(1), iframe(1), img(2), input(8), li(33), ol(5), span(43), table(4), td(7), textarea(5), tr(5) |
Facebook a(37), br(2), div(76), form(2), h2(2), img(5), input(32), label(12), li(11), option(160), p(2), select(6), span(4), table(2), tbody(1), td(23), tr(11), ul(1)
YouTube a(199), br(2), button(07), div(486), em(16), form(3), h2(12), h3(5), iframe(2), img(218), input(9), li(36), ol(2), p(3), span(415), ul(11)
Yahoo a(150), area(2), b(1), button(33), div(243), dl(1), dt(3), em(2), fieldset(1), form(3), h1(1), h2(15), h3(4), h4(2), img(34), input(9), label(3), legend(1), li(134), map(1), ol(6), p(8), span(158), strong(2), ul(20)
Baidu a(23), area(1), b(1), div(3), form(1), img(2), input(3), li(4), map(1), p(8), span(3), ul(1)
Twitter a(51), br(2), button(2), div(54), em(4), fieldset(4), form(7), h1(1), h2(1), h3(2), i(3), img(30), input(21), label(4), li(44), p(7), span(26), strong(3), ul(5)
Taobao a(828), article(5), aside(4), b(34), br(1), button(2), div(126), em(2), figure(1), font(1), footer(1), form(2), h3(7), h4(19), h5(72), header(1), iframe(4), img(110), input(11), label(1), li(306), nav(3), ol(3), p(34), s(33), section(7), span(206), strong(18), textarea(15), ul(51) LinkedIn a(68), div(21), fieldset(2), form(4), h1(2), h2(1), h3(2), hr(1), img(4), input(22), label(8), legend(2), li(74), ol(1), p(6), span(15), strong(3), ul(9)
Taboao, a Chinese language shopping site, is the only top 20 Alexa site rocking the new elements. This surprised me a bit so I decided to delve deeper into the top 100. As I went through, I kept getting no results, until I got to MySpace. I then skipped around a bit and what follows is a look at some popular sites that are using HTML5 elements.
| Site | Elements and quantities used |
|---|---|
| MySpace | a(116), article(8), aside(9), button(21), div(94), fieldset(2), footer(2), form(2), h1(1), h2(1), h3(8), h4(1), h5(6), header(1), iframe(1), img(15), input(20), label(7), li(95), nav(1), p(35), section(30), span(28), strong(4), time(2), ul(26) |
Apple a(31), article(2), aside(2), div(14), footer(1), form(1), h1(2), iframe(1), img(8), input(1), label(1), li(21), nav(1), p(3), span(9), ul(4)
About.com a(236), br(2), button(2), div(17), fieldset(2), footer(1), form(2), h1(2), h2(5), h3(4), h4(2), header(2), hgroup(2), img(24), input(2), label(2), li(234), nav(4), ol(3), p(2), section(3), ul(9)
Friendster a(106), article(24), aside(1), button(3), div(75), fieldset(1), footer(1), form(2), h1(8), h2(8), header(3), hr(3), img(53), input(20), label(3), li(28), option(147), p(25), section(27), select(3), span(60), ul(10)
Slashdot a(292), article(20), aside(16), b(1), blockquote(1), br(21), cite(3), div(123), em(2), fieldset(2), footer(17), form(4), h2(20), h3(1), h4(1), header(22), hgroup(1), hr(1), i(15), img(21), input(35), label(11), legend(1), li(51), menu(22), nav(4), p(8), section(10), span(204), strong(18), table(1), td(8), time(15), tr(4), ul(7)
Barackobama.com a(14), div(22), footer(1), form(1), header(1), iframe(1), img(2), input(3), li(16), nav(1), ul(3)
Nike Better World a(15), article(26), aside(1), br(19), canvas(12), div(11), figure(1), footer(1), h1(27), h2(8), header(26), img(2), mark(1), nav(3), p(26), section(48), span(2)
It’s exciting to look around and see sites using new semantics. Even the mark element is getting some action! Are you using new elements? Which ones do you feel safe to implement?