h2:hover::after{
content:"A header should not be a link, stupid!";
}I was curious as to Anne's reasoning for this. And unless I overlooked it, he didn't explain that on his blog.
I have got quite some e-mail about this as well. The above comes from a discussion on Mike his weblog. As of today, the message is gone. Reason why it was here:
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.
The 'more' button in that quote refers to something you see quite often on todays web: click here for the full article
. I continued however:
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].
Other examples of useage were it is appropriate and expected is on the logo of the website, some authors prefer to put the logo of the website in the H1 and make it link to the homepage. I have done this for a couple of websites, now I try to make that part of the navigation (without using the H1 for that, obviously), which doesn't seem to be a bad idea. (Note that it is a problem if your logo or text is clickable on the page it refers too, that will confuse users.)
What exactly is the benefit of having a h1 in a navigation that is probably a list?
and... h1 != logo - title != logo. imho :)
Changed to make it more clear.
Ever since I began using CSS image replacement (way before all the Fahrner fuss), I've used <h1> as both a logo/banner treatment and as a link back to home. Indeed, I think that it is rapidly become expected behavior.
Semantics aside, that last parenthetical note ought to be reviewed.
Whether you choose the <h1> to be the title/siteID or the title of your page, I do believe that the logo/siteID being clickable even on the page it refers to does not confuse users. Rather, it adds to the persistent navigation that users expect and feel comfortable with when perusing a website.
Actually, from what I have read and learned about usability (related to this), links that don't have affect should not be there.
There's at least one good reason why you'd put an <a> on a <hx>: search engine mojo.
If you only link to the full article using a generic "more..." or "full article..." link you don't add any relevant, erm, keywordage.
Right now the only <a href>s to this particular page from other pages on your website are things like "comments (x)", which from a Google standpoint are completely non-relevant.
Indeed, I think that it is rapidly become expected behavior.
I don't buy the logo in the h1 theory. In fact I do it a different way.
I completely agree with Michel about SE-Mojo - And to be clear-ish, in the sense of blogs, it's pretty much an h2 level heading that will contain the link.
After giving it more reflection, I am now convinced that it is just fine for headers to also be links. Michel's comment about search engine mojo is particularly relevant here, because it highlights where semantic preference clashes with usability and accessibility.
To my mind, the relationship of a header element with the section of text that follows it is similar to the relationship of a definition title with its definition description. Anne, do you also think it is inappropriate for the <dt> element to be a link? I'm asking you this because that is what is happening in my styled RSS feed. The XSLT is turning entry titles and entry abstracts into definition titles and definition descriptions, with the titles also behaving as links back to the original entries.
Note that I never said it was evil, I said my clients didn't understood the concept.
Of course, the title of this post might say different, but it is all about content in my opinion. Note also that Google perfectly indexes my posts/articles, not a problem at all.
Anne: I never suggested Google wouldn't index the content, but the fact that a googlebombing like the "miserably failure" incident a while back works does show that the content of an <a> is relevant for Google.
I would typically put a link both on the title and on a "more..."-type mention. And I wouldn't necessarily style the <h2> to make it look like a link--perhaps a simple :hover {text-decoration: underline;}, nothing more than that.
Note that it is a problem if your logo or text is clickable on the page it refers too, that will confuse users.
Wait, what do you mean? It is common practice on websites that a click on the logo image will return you to the index of the site (I do not practise this btw). As such it will rather confuse the user if the logo is not clickable than if the logo is clickable I would say. Or do I miss the point of what you're trying to say...
Frenzie, please tell me the relation between a logo and the index, because I can't find any relations. I also thinks it's pretty confusing when a logo is clickable.
The logo up here says Anne van Kesteren. I see only two things to which that is directly related. Anne himself and annevankesteren.nl. So that's exactly the relation between the logo and the index. Besides, how often would you actually notice that the logo was clickable if you don't expect it to be clickable? So how can it confuse you even if you find out? You see where it points to, I see little confusing in that myself... it's more like a nifty little shortcut to those who know it (although go a level up mouse gesture in Opera beats it in speed of course and it's not faster than a direct link to the index, although in a way it is, it's very big and as such easy to click after all).
I am in the camp of unbelievers. The logo is just that, a logo, a decoration, which happens to convey the "image" of a company. I disagree completely with image replacement methods, of all kinds. Not because of religious (semtnaic) reasons, but because of utter nonsense of the concept. I think that text replaced with an image is a contradiction in terms. Therefore the problem of clickable logos is artificially created by those who already diverge in a dark corner with image replacement of any kind. Thus far, the clickable logos always fail to register in my conscience, and I always miss them, except by accident. The "evidence" that is claimed supposedly in favor of "tradition", is also artificially created and doubtful. It is a sort of self-fulfilling prophecy. That just because of a bad habit people got used to awful (replacement) hacks, and therefore to clickable logos, doesn't make any of this logical, or sensible.
It's the same sort of problem like putting a camel on a horse, and then trying to balance an elephant on a camel. Sure, you can put side sticks so that the camel doesn't swerve, but then there is the elephant you have to think about. Put enough camels on horses, and after enough time, positioning of the elephant will seem the only problem to you.
It's all a matter of perspective.
The logo up here says Anne van Kesteren. I see only two things to which that is directly related. Anne himself and annevankesteren.nl. So that's exactly the relation between the logo and the index. Besides, how often would you actually notice that the logo was clickable if you don't expect it to be clickable? So how can it confuse you even if you find out? You see where it points to, I see little confusing in that myself... it's more like a nifty little shortcut to those who know it (although go a level up mouse gesture in Opera beats it in speed of course and it's not faster than a direct link to the index, although in a way it is, it's very big and as such easy to click after all).
I don't think the site-index & the site-url/site-name & the logo are the same. In my eyes they're all different. So I don't see any relations between the logo and the index
The thing is that people are curious and when they see the pointer change, but they don't know what it is, they want to click it. I think it's stupid to click back to the index by clicking the logo
Well, like I said, I've never used the method, but there is one place where I do use the logo to go back to the index. I see your point, since the logo is about the whole site and of course not just the index. Also I never said it should be the only method, but having it available as an alternative method (see the one place) is pretty nice imo. It is the only thing which makes up a bit for those things which I lack if I have to use Mozilla or IE for some reason. And don't come up with extensions, I'm talking about public places...
I disagree completely with image replacement methods, of all kinds. Not because of religious (semantic) reasons, but because of utter nonsense of the concept.
Image replacement is a technique that has evolved to satisfy design needs. Strip away all the CSS from my website, and beneath is a perfectly usable, accessible site.
It is important to understand what is trying to be achieved with all these funky techniques. By creating web designs that are drop dead gorgeous, or highly flexible, the power of separating structure and content from presentation is being highlighted. Image replacement techniques are necessary to create those kinds of designs that will convince the die-hard old schoolers that such a separation is the way of the future.
There is no question that clickable logos are everywhere. Look at the top 20 websites listed on Alexa, and you will see that almost half of them (including biggies like Amazon, the BBC, and Microsoft) have clickable logos. Perhaps that behavior should be confined pages other than the home page, but that is for another discussion.
What harm is being done by using my <h1> as a banner/logo treatment with a link bank to home?
Please consider that more than 97% of all popular sites are linking to the homepage from the site logo. Visitors are used to click on the logo. I think this a defacto standard for Web site navigation.
Simon, I completely understand that clickable headings are not harmful. I am not arguing they are. And I am fully aware of the power of imagination combined with good CSS skills. A telanted person can make almost any markup both beautiful, and usable thanks to little things that others never see. Also, I have devised four replacement methods myself, so I very well know what is behind the method, and why it works like it does. I also believe that all four methods I devised are superior to any others I have seen. That doesn't stop me from believing that this is wrong.
Now, when I say wrong, I do not evangelize. The heading has a textual content, and one can use lots of techniques to make the presentation stunningly beautiful, including images. That, however, does not include image replacements, because the text is gone in any image replacement method. IR methods can be more or less accessible, and I do not dispute this fact. I am not talking about accessibility. I am talking about common sense. You can have a clickable logo, but that does not mean that this must, or should, or need be included in a heading! A heading, to me, contains information that is lost if it is replaced. Also, for aesthetic reasons I do not accept headless pages with logos plastered instead. The most appalling type of site, for me, is a site where the top heading is replaced with super-sized image spanning almost, or all of the page width, and is quite tall. De gustibus.
Note that I make a distinction between clickable logos and headings. The two, to me, do not go together. And it is irrelevant to me whether or no the design is accesible, because I am talking about a different plane of analysis here. The basic reason to replace the text to begin with.
Tonico, the fact that most companies use a technique doesn't mean cheddar. Most of them also use spacer gifs. Most people happened to have elected criminals and murderers for the office in the past. The majority as "de facto standard" is an oxymoron. A habit, and a bad one, at most. The path to the Purgatory is paved with "de facto standards".
M.
Moose, the <h1> element on my site is 75px high, and 100% wide, with a graphic background (and title attribute) that says the same thing as the text. It is also clickable. The text within it has been moved to one side with text-indent. Are you saying that this method is unacceptable?
To me, that illustrates my point. A header should not be the only solution, nor is it the best or the most perfect solution, but having it as a link is nice after all. As you said yourself Moose, you don't notice it. And don't forget, I don't use it. I don't preach it. I just don't think it's all that bad.
Suppose you had a heading div that was clickable like onclick ? would that be bad?
A heading div? I think <div id="head"> misses the point of what a H1 is supposed to do.
Moose, I agree, de facto standards can be evil. Feel free to replace "defacto standard" with "convention" in my comment above.
Why should I break a convention. Would my visitors like it? Only tests can satisfy this question.
Simon, it is not the point to state whether or not this method is acceptable. It is. The thing I'm after is whether there is a reason to do that at all. It is a more primitive clause than that of the technique used to achieve a desired effect. We are moving in an area of the permissible, accessible, and feasible. Yet from amongst the set of solutions that satisfy these criteria, I'd be loathe to choose a solution that would lead to information being lost, as well as point-by-point redundancy, as is the case with another "guideline" I tend to throw darts at when I'm angry: exact duplication of the page title in H1. Whatever happened to subtitles? to the art of writing headings? The youth these days, it seems, is more keen to observe a principle rather than see it as a challenge. Meaningful, well-composed headings with subheadings can peacefully coexist with heading-external clickable logos, although again, I would not make the latter clickable.
Another point I want to argue - actually another battle of a lone moose against the world full of falsified guidelines - is the concept of image thumbnail galleries. Yet again, the world is against me. Yet I firmly believe that I am right, that the Aristotle is behind my back. To this end, I have decomposed the idea of thumbnail galleries, and came up with this experiment. The I went even further with this. As usual, no superfluous code was used. So, things are possible. I could go on forever on the topic why these two galleries are superior to the "de facto standard", or "conventions", as Tonico would have it now. But, I'd lost the battle before I even gegan, had I not? The convention is against me.
Abandon all hope, ye who challenge the convention and walk thy own paths.
M.
On my site I have 3 h1 headings. One for the content and another for the menu. I've always wonder if you could have more than one h1 in a single page
Tonico, you worry about your visitors — namely whether they would like what you would have done. Please remember that web-design is not limited to business. Not all of us have their hooves and hands tied so severely. If there exists a superior solution, then I implement it regardless of whether a casual surfer will like it or not. It is not my custom, or habit, to respect the tastes of the masses. I'd been cured of that at the seasoned age of seven.
M.
Moose, I think you are an artist - nice to meet you!
BTW: I was not talking about business.
Yet from amongst the set of solutions that satisfy these criteria, I'd be loathe to choose a solution that would lead to information being lost, as well as point-by-point redundancy, as is the case with another "guideline" I tend to throw darts at when I'm angry: exact duplication of the page title in H1.
Actually, there is no exact duplication on my site. On my main blog page, the <title> element contains the text si-blog, and this is the same as the content of my <h2> element. The <h1> always says jessey.net. On all other pages of the si-blog, the <title> element is rewritten dynamically to include post titles.
Another point I want to argue - snip - is the concept of image thumbnail galleries.
Hmmm. I think the idea is interesting, and I certainly like the way the page degrades to just a list; however, most image galleries are dynamic. That would mean that the CSS for the backgrounds would also need to be dynamic. That seems rather awkward to me.
On my site I have 3 h1 headings. One for the content and another for the menu. I've always wonder if you could have more than one h1 in a single page
I have also asked this same question, but haven't recieved any opinions yet.
Another point I want to argue... is the concept of image thumbnail galleries.
I think assigning images using external CSS based on order or patterns is not very practicle. I do like the effect however, and perhaps this is an appropriate situation to use inline styles to dislay the images. This would make it easier to combine with a PHP script.
Simon and Dr: you both point out that this solution is not practical because it doesn't exactly fit into the vision of dynamically generated sites.
True, but then, at the same time you could say that about the overuse of classes. it is always easier to slap a class than to use cascade to the full. Inline styles are universally preferred (not by me) for the same reason.
I am not claiming that this method has business value. Probably it hasn't. It is though more space-efficient, logical, much cleaner, and more accessible by construction. That it forces you to write CSS by hand? I can live with that. After my recent adventures with dynamic blogging software, I keep looking at my own hands, and I see now more than ever, how beautiful they are.
Mass-building of websites will never take full advantage of cascade and cleanest possible code, because of the limitations of the dynamic model itself. There are tradeoffs to everything. It's your choice what you think better for you. I may be wrong, but isn't Anne always talking in the abstract rather than try to find the square peg that would fit into the lowest-common-browser-denominator-business-value model hole?
M.