Published in Web Development on Thursday, May 20th, 2004
A Quick poll - semantically speaking, can headings contain links? Go ahead and sound off...
Semantics - fun stuff, but can be controversial. Sematically inclined Anne van Kesteren has thrown down the Gauntlet, proclaiming that 'A header should not be a link, stupid!' (visit his site with a modern browser and hover over a heading).
So, what do you think? Yes or no: Can headings, as defined by the specs, contain links, or be links in their entirety?
Get into 'why?' too, if you're up to it!
Sitepoint's web devlopment books have helped me out on many occasions both for finding a quick solution to a problem but also to level out my knowlegde in weaker areas (JavaScript, I'm looking at you!). I am recommending the following titles from my bookshelf:
I started freelancing by diving in head first and getting on with it. Many years and a lot of experience later I was still able to take away some gems from this book, and there are plenty I wish I had thought of beforehand. If you are new to freelancing and have a lot of questions (or maybe don't know what questions to ask!) do yourself a favor and at least check out the sample chapters.
The author line-up for this book says it all. 7 excellent developers show you how to get your JavaScript coding up to speed with 7 chapters of great theory, code and examples. Metaprogramming with JavaScript (chapter 5 from Dan Webb) really helped me iron out some things I was missing about JavaScript. That said each chapter really helped me to develop my JavaScript skills beyond simple Ajax calls and html insertion with libs like JQuery.
Like the other books listed here, this provides a great reference for the PHP developer looking to have the right answers from the right people at their fingertips. I tend to pull this off the shelf when I need to delve into new territory and usually find a workable solution to keep development moving. This only needs to happen once and you recoup the price of the book in time saved from having to develop the solution or find the right pattern for getting the job done..
Comments and Feedback
It depends on how you define "heading." For instance, I use h1-h3 tags (as well as list elements) in an outline for an upcomming web site. The outline is like the table of contents in a book: It specifies the hierachy of titles for various sections and subsections of the site. And a heading is just a title of a section, so why not! But what use is an outline in hypertext without links? So the headings contain links to their respective sections.
P.S. The outline is styled as a menu for most browsers - even in IE, haha. The site is actually part practical and demostration - hopefully showing how to get web markup out of 1999. ;-)
Okay, I've updated the post a bit and I think I've clarified that issue. Thanks James.
No! :-)
First, Mike please remove my email address from public view. I didn't realize that was visible, and I don't want the spam. :-( I specified a link instead this time.
Now to the meat! The HTML specification says:
Well, the section doesn't have to be below the heading, by that definition. In fact, it seems that the "official" interpretation of heading elements is section titles. That means that they would be acceptable if they are links to their sections or (logical-or) the section directly follows.
Hence, I still disagree with Anne. Then again, semantics seem to be more personal opinion than provable fact. So the general answer is: whatever floats your boat! :-)
I think there is some merit in what Anne is saying, but I think there are exceptions. A header is not expected to be a link by the user, under most circumstances, and so that behavior is best avoided; however, if the section being described is on a different part of a web page (or a different page entirely), then the link behavior is probably just fine. Of course, a header element is ideal as an anchor too.
I use headers as links on my main blog pages, with each linking to their respective permanent versions. I think that is a valid behavior, although I am sure Anne will disagree.
I still think the answer is NO, after I've read the specification.
However in my opinion, the links you want to provide should be in the paragraph that follows the heading. When a word or a sentence (not advisable) occurs that describes an external site (eg. an external article or a company) that should be the link.
Although both Simon and Jimmy have valid statements, you still should avoid them if the heading is describing the paragraph that follows immediately.
This implies that you should not create a table of contents with the heading elements (I think you should use lists for the TOC). Howe ver if you split the heading from the section it describes (so that the heading isbn't immediately following by the paragraph it describes) you are creating a TOC. In my opinion this is incorrect use of the heading element
If you want to generate an anchor - I assume you're talking aboute <a name...> - you should use the id attibute, because an element with an id is automatically seen as an anchor...
Partly true. In all my web designs, I am quite happy using the
idattribute as you suggest; however, some older browsers (like Netscape Navigator 4.x) don't perform as expected. In those cases, and HTML Document Type Declaration should be used, along with the good old<a name...>.Cookies might be nice...
The main reason, which I already send to Mike in private e-mail, was that my clients didn't understand that headers could be links. They thought, although the links were styled exactly the same in headers as in normal text, that it was for decoration and they asked me why the 'more' button was missing.
From semantic point of view, I wouldn't really know. Joe Clark uses it, so it is probably appropriate. XHTML 2.0 provides a mechanism as well, h[href].
Well, that's a question. I myself use linked titles in my weblog. They link to the detailed site and is the permalink.
I think that is the nomal way and it is recognized by many users.
It is not right to have a list of linked headers without even an introduction.
My 2 euro-cents.
Cookies are on their way Anne, I know it's a pain... between that lack of cookies and the markup requirements...
I really can't think of any situations other than permalinks where I would use an anchor tag in a heading (tho I may have in the past!).
That being said, we are trying it on a clients site and measuring the click thrus of the heading-link versus the click thrus of the link in the text below the heading (which itself has an arrow as a visual cue).
Mike, that sounds pretty interesting. Would you mind letting us know the results when it is done?
I think Anne's point is valid and the most important. Don't forget about users in the first place. In the end they don't care if it is semantically correct or not.
Sure Minz, it is interesting stuff. I can tell you right now that it's 36:108 - header:paragraph (for the current data snapshot, we have more). There are a lot of other options on the homepage, we are looking to evaluate this within the context off all of the available options too.
Keep an eye out here. We can actually say something about this site (no NDA, yet), so when it's ready for primetime I think I'll post a "new site!" post here on 54-11. That way you can see the example in its natural environment.
I was curious as to Anne's reasoning for this. And unless I overlooked it, he didn't explain that on his blog.
I disagree with Anne, I think there are uses for it and it is semantically correct. At least, I don't see the problem. On blogs especially, a number of users are now expecting the title of a post to be a permalink as well, taking them to a page with the full post plus comments. I know I do. That's why I also implemented that on my recent redesign of stijlstek.nl.
Well, it's a split issue, really. I believe that in general, you have to look at your audience. Blog readers are typically technically inclined people, that know how to distinguish a link from regular text. They don't have any problem with links in headings, and in fact expect headings to be permalinks or at least links to the full entry in case it's not displayed in complete on the main page - unless there is a permalink or "read full entry" link elsewhere in the entry. Thus it's bad usability to not link headings to the full entry.
However, again look at audience, for a site with a less technically inclined audience. Here, you can't count on the users to recognise links that doesn't appear to clearly be links. Thus, you have to make sure you have all navigation elements as normal-looking links. Because you'll still have a technically inclined audience, however, it's a not a bad idea to combine both the textual links and the logo/header links. Maybe a bit redundant, and it will increase the size of the document, but at the same increase usability span.
Also you have another things to consider. The age of the audience. People born in the seventies or later will almost certainly know how to use a computer, and most of them will be at about as good at handling common concepts on the web at the moment as the technically inclined people I mentioned earlier. Thus, if your audience is more geared towards younger people, you can also expect a much higher degree of tech savvy-ness.