Monday, December 23, 2013

The Truth about “The Truth About Multiple H1 Tags”

HTML5 logo — I am the 'alt,' not the 'title' I'm a bit behind on my reading. There is always some new wiz article on web technologies and it's hard to keep up. Since any chummer can write one, sometimes you have to approach them with caution even if they've survived the meat grinder of public review for as long as a week.

Yesterday I stumbled across The Truth About Multiple H1 Tags in the HTML5 Era at Tuts+ and wasn't sure I was going to get much out of it. Its promises were loft:

With the advent of HTML5 the answer to this question has significantly changed in both SEO and technical regards. It's now not only possible to have multiple <h1> level headings per webpage that will make sense to search engines, but in most cases it's actually the recommended course.

The pre-HTML5 <h1>

The article starts by painting a picture of how the <h1> element has been used in the pre-HTML5 world. It suggests that developers have made web pages where the location of the <h1> changes from page to page. From the header area on one page, to the article title on another, only to have the header area replaced with a <p>.

I take issue with this based on my own experience. Having built web sites since 1994, having worked with dozens of content management platforms, having peaked under the hood of thousands of sites, this just doesn't match my experience. The author, however, makes no effort to back up this assertion, which seems odd given how easy it is to pull data from WebDevData.org.

While it seems like a moot point, it indicated to me that the rest of the post was going to built on shaky ground. Which it is.

The Vaunted Mythical Document Outline

The core thesis of the post is built around the document outline (simply evidenced by the headline Why Headings Matter: Document Outlines).

The problem is that the document outline doesn't really exist. It's not real. In the words of Steve Faulkner, one of the W3C editors of the HTML5 specification,

The HTML5 Document Outline is a dangerous fiction

In that same post, Faulkner also explains:

If you as a developer want to provide a meaningful document structure, use the <h1><h6> elements to express document structure. DO NOT rely upon the HTML5 document outline. By all means use the HTML5 section elements, but do not rely upon them to convey a meaningful structure. If at some point in the future the HTML5 document outline ceases to be a fiction, you will be covered as the use of h1-h6 is backwards compatible.

In fact, the HTML5 specification itself clarifies this in only a few words:

Sections may contain headings of any rank, and authors are strongly encouraged to use headings of the appropriate rank for the section’s nesting level.

Let's forget about what the HTML5 specification says. After all, just because the specification says to not use <center> doesn't mean it's not supported, so maybe we should look to the browsers instead?

The browsers don't support the document outline.

So much of assistive technology (such as screen readers, for example), relies on the browser parsing the page that moving to an all-h1 structure can actually reduce the usability of pages for some users. According to the 2012 WebAIM screen reader user survey, ~82% of users rely on the headings to navigate a page. Creating a flat page structure, via an h1 everywhere approach, can be a huge problem.

This isn't new information, either. Finding articles from two years ago stating as much is pretty easy.

To simplify a best-practices approach, Faulkner even restated it on Twitter this morning (after he saw my Twitter rant last night):

SEO, or the Magical Unsupported Acronym

The introduction to the article also promised a boon to your SEO efforts if you used this HTML5 all-h1 approach.

I challenge you to find any explanation of how this helps SEO, justification, links to evidence, quotes from Google/Bing/Yahoo, etc.

In fact, when asked in the comments how this all relates to SEO, the author essentially backs away from the original assertion and instead discusses schema.org syntaxes and the need for relevant content.

Conclusions

Don't trust articles that don't present you with evidence (or links to evidence). Don't buy into SEO claims that are never justified. Build your heading structure for backward compatibility.

Update: January 5, 2014

This conversation has led to a discussion on the W3C HTML Working Group mailing list to revisit heading advice in the HTML5 specification.

Update: January 25, 2014

The Mozilla Developer Network has updated its article Sections and Outlines of an HTML5 Document with the following statement:

Note: The HTML5 outline algorithm as described below is not implemented in user agents, as a consequence, users who make use of heading semantics are exposed to the HTML 4 document structure. The description of problems solved by HTML5 is theoretical only.

Update: February 24, 2014

A post over at Treehouse, How to Use The HTML5 Sectioning Elements, discusses sectioning elements while avoiding referencing the document outline. At least until the comments. I dived in to try to correct, but it's clear bad advice is still circulating and probably will for quite some time.

Update: APril 17, 2014

As Steve Faulkner reminds us on Twitter, we should not rely on the HTML document outline algorithm. Now it's been codified in the (draft) spec:

There are currently no known implementations of the outline algorithm in graphical browsers or assistive technology user agents, although the algorithm is implemented in other software such as conformance checkers. Therefore the outline algorithm cannot be relied upon to convey document structure to users. Authors are advised to use heading rank (h1-h6) to convey document structure.

Wednesday, December 11, 2013

“Tracking Printed Pages (or How to Validate Assumptions)” at Web Standards Sherpa

Today my second article at Web Standards Sherpa has been posted, Tracking Printed Pages (or How to Validate Assumptions). I fit a lot in there, but the gist is that I show you how to track when and what pages from a site are printed so you can make a better decision about where to invest your effort.

I also draw a comparison to the time we all spend on building carousels for sites, but may not be tracking. After all, if no one uses the carousel and people do print pages from your site, you might just want to change where you are spending your development time.

The article also has the nifty ReadSpeaker feature which means that the page can read the article aloud to you in a voice that is entirely unlike mine (at least it's a male voice by default).

Tracking Printed Pages (or How to Validate Assumptions)
What guides your project decisions? Data or assumptions? Adrian discusses the importance of tracking site features, like print styles, to inform how and where you invest effort. Read it…

Sunday, December 1, 2013

Web Development Advent Calendars for 2013

Photo of an advent calendar with a leg lamp, potted ivy, and small statue of Ganesha.
Ganesha may or may not be stealing chocolate from the advent calendar.

For a few years now web developers around the world have celebrated Saturnalia Christmas with advent calendars covering topics related to the web. Some come and go, but you'll probably recognize a few regulars on this list.

I may have missed some, so please pass them along if you know of any. For those I know are not returning, I have listed them at the end.

1. 24 Ways

24 Ways, the one that most of this think about for web development calendars, is back again. It's been going strong since 2005 and based on its history this year should have some good articles.

2. Perl Advent Calendar

Perl Advent Calendar goes all the way back to 2000 (and back then looked a bit more like a traditional advent calendar, too) and has been dispensing tips for Perl developers ever since.

3. 24 Jours de Web

24 Jours de Web is starting its second year as an advent calendar for web folk. Written in French, it is clearly primarily targeted at French speakers, but a round of Google Translate will open it up to far more readers (like me).

4. UXmas

UXmas is an advent calendar aimed at the user experience community. Coming from Australia, American readers may be thrown just a bit by the schedule. The calendar promises everything from sketches, to articles, to tools, to videos.

5. Webkrauts

Webkrauts has an all German advent calendar, and it also dates back to 2005. It covers general web topics, but being in all-German readers like me will benefit from a Google Translate version of the page.

6. 12 Devs of Xmas

12 Devs of Xmas will also start the day after Christmas and go for 12 days from then. When all the other calendars have wrapped up, you'll still have one to read. The site is silent on its return, but this tweet suggests it's gotten writers and has a plan.

7. Freelancember

Freelancember 2013 is targeted squarely at freelancers. Its daily entries will consist of downloadable gifts in the form of PDF worksheets. Think of this as less about web-tech and more about MadLibs for projects. It has last year's calendar there as well, and so far (as of December 1) I cannot tell the calendar will just be a repeat of last year.

8. Mozilla Developer Network Holidays calendar

Mozilla Developer Network Holidays calendar includes brief links to resources or demos and suggests that you can edit them (if they are MDN resources). It doesn't link to previous years, but you can just hack the URL.

9. SysAdvent

SysAdvent is targeted to systems administrators, but there is a some cross-over to web developers. It has posts dating back to 2008 (and yet I missed it in last year's collection), so there is plenty of good material there if you're too impatient to wait for each day to be revealed.

10. Performance Calendar

Performance Calendar hails this as the speed geek's favorite time of the year, ostensibly because of the tips it has been offering each December since 2009. It isn't just server optimizations you'll find here, so don't shy away because you're not a system admin.

11. Web Accessibility Advent Calendar 2013

Web Accessibility Advent Calendar 2013 is in Japanese, and thanks to the wonderful powers of Google Translate, I can tell you that it is a calendar to make the talk about Web accessibility (based on this statement: Webアクセシビリティに関する話題でつくるカレンダーです。). If you know Japanese, I welcome any corrections. The site Adventar.org appears to host other advent calendars, some about web technologies, some about ramen.

12. Creative Bloq Advent Giveaway

Creative Bloq Advent Giveaway posts aren't collected in one place, so you'll have to find them on the site yourself (I linked the first one). Creative Bloq is the parent of .net Magazine, but you can expect most of its freebies will be targeted toward designers. Also, not all the gifts will be free, some will be discounts.

13. 24 Pull Requests

24 Pull Requests is less an advent calendar than it is an effort to mobilize developers. The goal is to get developers to send a pull request every day in December (up to Christmas), thereby supporting your favorite open source projects. There are even Coderwall badges for those who collect those sorts of things. This entry via Creative Bloq.

Not Returning

A handful of calendars aren't returning this year (so far), but in most cases content from previous years is still available. These include Font Deck's Adfont Calendar (which also skipped 2012), the Fronteers advent calendar (in Dutch, and also skipped 2012), Web Advent (it's taking a year off), HTML & CSS Advent (this is the 2012 calendar), She Said It (no access to old calendar), 12 Days of Podcasts (or at least there is no indication on its site or Twitter).

Not Web Related

ScienceGeek Advent Calendar Extravaganza is not web-related at all, and frankly it isn't promoted nor is it tagged (although I linked to “special” since that tag had the first day and nothing else). It is, however, probably going to be neat stuff given the first day is a giant image of the Christmas Tree Cluster.