This is a technical question about the way SO implements a feature.

Why does SO use JS to direct the user to the question page if they click on the votes/number/views on the question list on the homepage? Is there an advantage to this other than cleaner HTML?

   <div onclick="javascript:window.location.href='/questions/[question location]'" style="cursor:pointer"> 
        <div class="votes"> 
            <div class="mini-counts">0</div> 
        <div class="status unanswered"> 
            <div class="mini-counts">0</div> 
        <div class="views"> 
            <div class="mini-counts">0</div> 

My guess would be that it's because putting <div>s into a <a> is 1. invalid and 2. doesn't work consistently cross-browser.

It would probably be possible to work around that using display: inline-block somehow, but that is also not consistently supported yet.

| improve this answer | |
  • I think they could still have used to anchor tags inside the div for the same effect? That would be valid? – Ally Jan 23 '10 at 20:50
  • It is valid in HTML5 :P – Macha Jan 23 '10 at 22:11
  • @Macha: HTML5 is still way in the future :) But good to know! - Ally: That might work, but I've tried similar with crappy results, because then you won't consistently be able to give the a full width and height, making parts of the button unclickable. I think using pure JS is totally fine. DisgruntledGoat also makes some very fine points in the other answer. – Pekka Jan 23 '10 at 22:54
  • Using <span> instead of <div> would have prevented that problem. – Konrad Rudolph May 29 '10 at 13:46

I think it could be for SEO purposes:

  • It reduces the total number of links on the page - years ago there were various rumours that having over 100 links on the page is bad.
  • It reduces the link-to-text ratio, which is more of a concern than the above (e.g. Wikipedia articles have hundreds of links, but not every word is linked to something!)
  • To make sure the first link for a question contains the best anchor text. AFAIK search engines ignore subsequent links to the same page, so it's best to link to the question with its title.

The answers about <div> inside <a> may also play a part, but really are invalid since the inner elements don't need to be <div> blocks.

| improve this answer | |
  • Very good points. The point 1 I'm not really sure about, but 2 and 3 are definitely valid. – Pekka Jan 23 '10 at 22:55
  • Nice perspective. – Ally Jan 24 '10 at 16:16

It's because the onclick handler is on a <div> element, not on a simple <a> link.

If you ask me, this question belongs on SO, not on meta.

| improve this answer | |
  • It was asked there but it was moved by the powers that be. Yeah, so do you think that JS is better supported than using an anchor that fills the divider? – Ally Jan 23 '10 at 20:48
  • an anchor tag to fill the divide would add more trouble than it helps. You'll need to handle the default css behavior for anchored text and images (e.g. blue underlined text). Besides, if I recall correctly, an anchor is an inline element, not a block element, so it can't hold other divs inside it – Yoni Jan 23 '10 at 21:06
  • I know it was moved by the powers that be, I was in the middle of answer your question when suddenly the submit button became disabled :) – Yoni Jan 23 '10 at 21:07

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .