Comments on the 200ok weblog: how to structure html headings and titles

My best recommendation to those learning how to st...

2010-05-11T11:00:01.209+10:00

My best recommendation to those learning how to structure content is to open up a document (word/open office/whatever) and use default styles (lists, headings 1-6) build the page up in the way that is logical with all the components.

That is then the *start* point.

@anon: That's why I've recommended switchi...

2010-03-28T21:59:45.404+11:00

@anon: That's why I've recommended switching the site and section headings to strong tags when you're on an article page. That way the article's heading is the first heading.

The other solution I've seen recommended is to use h2s and just accept the step back up to h1 for the article/page title. Personally I'm less comfortable with that solution, I think it has the potential to be more confusing than helpful.

Reserving H1 for the article's main title make...

2010-03-23T07:47:41.103+11:00

Reserving H1 for the article's main title makes sense but it seems to conflict with the requirement of not skipping levels, since the article is rarely the first item in the document. is there a way to avoid that? For reference:
http://www.maxdesign.com.au/2006/01/17/about-structural-labels/
http://www.usability.com.au/resources/source-order.cfm

@dey: Good points; a simple "Page Title | Sit...

2010-03-21T23:25:11.818+11:00

@dey: Good points; a simple "Page Title | Site name" pattern can work pretty well for some sites. The main limitation is the dedication and copywriting skills of the people maintaining the site (assuming there aren't any technical limitations). Well-crafted headings and titles would remove the need for some recommendations, I suppose the cynic in me was just jumping straight to "when they didn't do that" ;)

Ben, I agree with your thoughts on heading structu...

2010-03-18T10:34:10.119+11:00

Ben, I agree with your thoughts on heading structures, but the page title has a critical role, particularly in search (keyword weighting and reading search results) and I have some comments that differ from your thoughts on that.

I agree that the specific or unique terms need to be first. Users focus most attention down the left edge of the content, so the specific page content needs to be highly visible. The further down the results page they go (which often isn't that far), the less they look across the line.

However, it's often unnecessary to include the section name (and sometimes I've seen a long hierarchy of section and sub-section names, like breadcrumbs). Why?

a) It is merely a repetition (as in your 'About the marketing team | Marketing' example).
b) It can push the organisation name out of view. This might be important secondary information for a user to assess in choosing which search result to click through to.
c) As many users will be reading titles from public search engine results pages, there's no need to identify the section of the site. That's the role of breadcrumbs and other location markers once they're in the site, viewing a particular page.

I think the reason you suggest adding the section name is to compensate for when the H1 lacks context (e.g. 'About us', which could be a page for the marketing or web dev teams). The solution instead is to write a title like 'About marketing, CompanyName'.

The best approach to page titles is to write them for the role they play. Trying to automatically generate them (as many content management systems do) is too risky.

We should be writing page titles primarily for:

* Scan reading in search results
* Keyword indexing in search engines
* Managing pages open in multiple browser tabs
* Finding things added to browser bookmarks or favorites
* Looking for something in the browser history

Oh, and one last thought. On punctuation, I'd be using what reads best or makes the most sense to a user given the context in which people read page titles (ie those listed above).

Very good article!

2010-03-17T19:02:00.143+11:00

Very good article!

@jonas: It's the unanswered questions about ac...

2010-03-16T20:57:48.389+11:00

@jonas: It's the unanswered questions about accessibility and SEO that make HTML5's headings a "wait and see" proposition just for now. I expect the answers will be clear soon enough, and ultimately I think HTML5 will just extend the rules to accommodate more levels (it'll also extend the potential to make a mess ;)).

@niels: I can see what you mean there, I guess sin...

2010-03-16T20:08:21.810+11:00

@niels: I can see what you mean there, I guess since the content is duplicated that makes sense. It's not exactly an exception, so much as repeating the same logic/rule for each duplicate block of information. Interesting case!

In HTML5 every part of the website can have it'...

2010-03-16T20:07:24.816+11:00

In HTML5 every part of the website can have it's own, complete set of headings. For example: can have h1-h6, can have h1-h6, etc...

The only reason not to use headings in all the different parts, is for SEO. I'm not sure Search Engine bots already understand HTML5. However, you can use this technique without breaking the document structure in HTML5.

One little addition to the "only 1 h1 rule&qu...

2010-03-16T19:20:06.041+11:00

One little addition to the "only 1 h1 rule".

I believe that when a page serves multiple languages (landing page, 404 page) that multiple h1s can be used on the same page, especially when the content is simply mimicked in different languages.

Just to say that every rule has its exceptions :)

@niina: Yeah I agree it depends on the site, altho...

2010-03-16T14:07:58.119+11:00

@niina: Yeah I agree it depends on the site, although I think having a good favicon is a must in these days of tabbed browsing. Looking at my browser tabs right now all I can see is favicons! Actually I've also just realised nearly every tab is one of several open for each site. Hovering gives me a preview that truncates the title, so left-to-right works pretty well.

If people are bookmarking I think they're either bookmarking a specific page (ie. specific content is the primary concern) or the whole site (which should mean the homepage, which is just the site name). So I think the scheme should hold up pretty well.

@halans: heheh that's a fair point, this blog does currently break the h1-on-article-heading rule due to earlier templating limitations and legacy content needing a manual overhaul. On the flip side, the News network now follows these rules :)

Practice what you preach? Meh, just stirring the ...

2010-03-16T12:58:55.092+11:00

Practice what you preach?
Meh, just stirring the pot ;p
+1

Great post with good tips. I personally prefer t...

2010-03-16T11:11:03.971+11:00

Great post with good tips.

I personally prefer title tags shown left-to-right because I often have multiple instances of the same site open in tabs and it becomes time consuming to locate the tab I want (I won't go in to Chrome's hover-on-tab-titles!).

When I add URLs to delicious I regularly reverse titles that show the site name first because when I scan through my links the specific page titles are more important to me than the site they belong to.

And the left-to-right for screen readers is a very important point.

However when it comes to an audience using a web site, is a user likely to have multiple instances of the same site open at once? If not, would the site name first be better at helping them if they’re using a tabbed browser? If they’re bookmarking the site in their browser would the site name first be better for their recall purposes as they browse their bookmarks? An obvious favicon might help with the product recognition in both of those instances.

I would suggest that the purpose of a web site may play a big factor in the title order decision, and perhaps some behind-the-scenes work could be done to generate the title order based on the technology being used to access the page. Complicating matters? Sure :)

I wrote an article which touched on the topic of u...

2010-03-16T10:47:51.350+11:00

I wrote an article which touched on the topic of using h1 to h6 headings in HTML documents which compliments this article also.

http://www.flexewebs.com/semantix/semantic-uses-of-h1-h2-h6-html-tags/

@colinmo: yeah, title meaning <title>. I t...

2010-03-15T13:45:57.724+11:00

@colinmo: yeah, title meaning <title>.

I think the potential left-to-right confusion is outweighed by the confusion of having the most specific/important information cut off in the browser's title; and/or annoyance of getting repetitive information first. It's a good point for i18n though, in a right-to-left language the logic would be the same but the effect would be reversed from my English examples.

I did kind of make a jump with the side panel question since I suspect I know the code Ben's thinking of ;) I was thinking of a side panel inserted within the body of an article, providing related links, polls and comments about the story (potentially you could find an example on a news website ;)).

For a nav sidebar, I think on balance I'd probably still go for an h2 (or proximity-correct heading level, eg. if there's already a "sidebar" h2 heading) but that's primarily to avoid conflicting with h1.

I think in many ways the problems of sidebars illustrate why both XHTML 2 and HTML 5 have moved to a system of containers+localised headings. I think XHTML 2 did it better, but that's a moot point these days.

I was going to argue your title section until I re...

2010-03-15T09:58:09.587+11:00

I was going to argue your title section until I realized you meant [title] rather than the English use of title. I will comment that while that works from an SOE/ XML structure, do you find that confuses people when they find the page titles don't match a mental image of Left to Right importance? Perhaps that's some English bias coming in there.

As a comment for the sidebar, would it depend on your Article model of importance? If it is part of the Article, or relevant to it directly, I can see headers for page hierarchy. A side bar of navigation, for example, is not necessarily article relevant but is page utilization relevant. Conflicting.

@lachlan: now internally crossposterised for extra...

2010-03-12T13:45:39.921+11:00

@lachlan: now internally crossposterised for extra shine :)

@ben: We're in a minority - people who actually use pipe symbols for something ;)

For a side panel in an article, I think probably start with the highest subheading level in that article. So, the article heading is ideally h1; so give it an h2. The logic being that heading wise, the sidebar is a section of the article. It's perhaps not perfect but it should be reasonably understandable.

Rich text fields... ideally both, educate users and restrict any obviously-broken options. But I'd say education works for small companies or small user groups; restriction works better when things scale up and you can't catch everyone.

I'd rather see "what you see is what you mean" as an editing paradigm, since "what you see is what you get" has had long enough to prove it's busted :)

Good roundup, though I'm not entirely convince...

2010-03-12T10:58:00.117+11:00

Good roundup, though I'm not entirely convinced on your title separator argument. To me it just reads as:

Page name BITWISE OR Site Name

;)

What are your thoughts where headings aren't directly hierarchical, eg. module headings in the side panel of an article page.

Also, rich-text fields - education or restriction?

Cheers,
Ben

+1 Internal cross-post imminent?

2010-03-12T07:50:10.775+11:00

+1

Internal cross-post imminent?