Making whole <li> clickable

Discussion in 'HTML' started by JJ, Nov 20, 2011.

  1. JJ

    JJ Guest

    Suppose you had an unordered list, and each li in the list functioned as
    a link to an article, with a title, a short text snippet and a thumbnail
    image.

    Now suppose that, instead of having just the title as a link to the
    article, you want the entire li to be clickable. I know that this isn't
    allowed:

    <li>
    <a href="somelink">
    <h3>Article title</h3>
    <p>Article snippet...</p>
    <img src="/news/thumb.jpg" alt="">
    </a>
    </li>

    Nonetheless I've seen this quite a lot, although I don't know if the
    authors were deliberately breaking the rules or just doing it out of
    ignorance.

    Still, it seems to me you can understand why people are doing this
    because what are the alternatives? Use Javascript? Or how about adding
    the link to everything in the li:

    <li>
    <h3><a href="somelink">Article title</a></h3>
    <p><a href="somelink">Article snippet...</a></p>
    <a href="somelink"><img src="/news/thumb.jpg" alt=""></a>
    </li>

    And then styling it in such a way that all areas of the li are covered
    by the links' hotspots (then use li:hover etc.) ?

    Neither seems like a good solution to me. What do you guys think is the
    best approach to this sort of thing?
    JJ, Nov 20, 2011
    #1
    1. Advertising

  2. 2011-11-20 16:46, JJ wrote:

    > I know that this isn't allowed:
    >
    > <li>
    > <a href="somelink">
    > <h3>Article title</h3>
    > <p>Article snippet...</p>
    > <img src="/news/thumb.jpg" alt="">
    > </a>
    > </li>


    Yet, browsers support it, and it is being made allowed, according to
    HTML5 drafts.

    However, it doesn't quite work in the sense of making the entire <li>
    element clickable. If that element is wider than the image, clicking on
    the right hand side of the image has no effect. The reason is that the
    <li> element is not contained in the <a> element. If the <li> element
    (which by default occupies 100% of the the available width minus perhaps
    left margin) is wider than the image (which by default has its inherent
    width), then clicking on the right of the image has no effect. it is the
    <li> element's area. The way to overcome this is to introduce an
    intermediary element that has 100% width:
    <li><a href="somelink"><div><h3> ... </div></a></li>

    The main practical problem with this is: how do you convey the idea of a
    single link to the user? That is, the idea that there is a link in the
    first place and that the heading, the text, and the image are all one
    link, pointing to one resource. By default, browsers render the text in
    the heading and in the paragraph as underlined and in link color and
    (depending on browser) a colored border around the image. This conveys
    the link idea, but the elements look like separate links, and there's no
    quick way to see that they all point to the same resource.

    This problem of course exists independently of the techniques you use,
    though the implementation of solutions varies by technique to some
    extent. Here's one idea of a solution: remove the underlining (but keep
    the link color), remove the image border, but draw a border with link
    colors (by state of link) around the entire <li> element, making it look
    like a unit. This takes some CSS code and isn't quite trivial when done
    right, but surely doable.

    > Nonetheless I've seen this quite a lot, although I don't know if the
    > authors were deliberately breaking the rules or just doing it out of
    > ignorance.


    Probably they mostly just don't care about the formal syntax.

    > Still, it seems to me you can understand why people are doing this
    > because what are the alternatives? Use Javascript?


    Using Javascript is one way, and relatively easy. People often implement
    things like this all wrong, making the functionality depend on
    Javascript, instead of e.g. making just the heading text a link (<h3><a
    href="...">...</a></h3>) and assigning an onclick event handler to the
    <li> element so that when Javascript is enabled, the entire element
    effectively acts as a link.

    An alternative is to use just text-level elements inside the <a>
    element, e.g.

    <a href="somelink"><span class="h3">Article title</span><br>
    <span class="p">Article snippet...</span><br>
    <img src="/news/thumb.jpg" alt=""></a>

    It's poor markup, but it is formally correct, and you can style the
    parts as desired. Search engines won't treat the article title as a
    heading, but it is not really known outside their houses how much they
    do that to <h3> either and what the implications might be.

    > Or how about adding
    > the link to everything in the li:


    To text pieces there, you mean. That would make the markup valid, but
    it's a very bad idea for several reasons. Accessibility and usability
    guidelines say that there should not be two links with different link
    texts pointing to the same resource. Separate links would make it even
    more difficult to see that they point to the same resource. Keyboard
    navigation would become awkward. And so on.

    > What do you guys think is the
    > best approach to this sort of thing?


    I think the first question should be whether the idea of making the
    entire <li> element a link is a good one. It's surely better than making
    the heading, the text, and the image separate links to the same resource
    (which is not uncommon), but isn't it simpler to make e.g. just the
    heading text a link?

    There's a point, though, behind the idea. Normally, if a user becomes
    interested either due the heading or the image, he often reads the text
    too and then decides he's really interested. It would be natural to
    click on some point near the place where his eyes were focused on -
    whether it was the heading, the text, or the image.

    (There's also a design that does not make the heading, the text, or the
    image a link but have a separate link after the text, with link text
    like "Read more". That's problematic for several reasons, including the
    problem that the page then contains several links with the same link
    text "Read more" pointing to different resources, and link texts like
    that cannot do good when it comes to search engines.)

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Nov 20, 2011
    #2
    1. Advertising

  3. JJ

    dorayme Guest

    In article <jab7ms$vr6$>,
    "Jukka K. Korpela" <> wrote:

    > An alternative is to use just text-level elements inside the <a>
    > element, e.g.
    >
    > <a href="somelink"><span class="h3">Article title</span><br>
    > <span class="p">Article snippet...</span><br>
    > <img src="/news/thumb.jpg" alt=""></a>


    The <br>s are not necessary in this approach. 'display: block' on
    the style of the inline elements could be used, it even perhaps
    gets more in the spirit of the original intent and allows more
    flexible styling.

    --
    dorayme
    dorayme, Nov 20, 2011
    #3
  4. 2011-11-20 22:23, dorayme wrote:

    > In article<jab7ms$vr6$>,
    > "Jukka K. Korpela"<> wrote:
    >
    >> An alternative is to use just text-level elements inside the<a>
    >> element, e.g.
    >>
    >> <a href="somelink"><span class="h3">Article title</span><br>
    >> <span class="p">Article snippet...</span><br>
    >> <img src="/news/thumb.jpg" alt=""></a>

    >
    > The <br>s are not necessary in this approach.


    They are necessary if you don't want the content to run into one block
    of text when your style sheet is not applied.

    >'display: block' on
    > the style of the inline elements could be used, it even perhaps
    > gets more in the spirit of the original intent and allows more
    > flexible styling.


    Indeed, but the approach ignores the usual CSS caveats
    ( http://www.cs.tut.fi/~jkorpela/css-caveats.html )

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Nov 20, 2011
    #4
  5. JJ

    dorayme Guest

    In article <jabnuu$e5b$>,
    "Jukka K. Korpela" <> wrote:

    > 2011-11-20 22:23, dorayme wrote:
    >
    > > In article<jab7ms$vr6$>,
    > > "Jukka K. Korpela"<> wrote:
    > >
    > >> An alternative is to use just text-level elements inside the<a>
    > >> element, e.g.
    > >>
    > >> <a href="somelink"><span class="h3">Article title</span><br>
    > >> <span class="p">Article snippet...</span><br>
    > >> <img src="/news/thumb.jpg" alt=""></a>

    > >
    > > The <br>s are not necessary in this approach.

    >
    > They are necessary if you don't want the content to run into one block
    > of text when your style sheet is not applied.
    >


    True. It is interesting how delicate we can be when we are doing
    something rather awkward in the first place. Like robbing a bank
    but being mindful to leave as few psychological scars on the
    victims as possible. <g>

    > >'display: block' on
    > > the style of the inline elements could be used, ...


    --
    dorayme
    dorayme, Nov 20, 2011
    #5
  6. JJ

    JJ Guest

    On 20/11/2011 15:51, Jukka K. Korpela wrote:
    > 2011-11-20 16:46, JJ wrote:
    >
    >> I know that this isn't allowed:
    >>
    >> <li>
    >> <a href="somelink">
    >> <h3>Article title</h3>
    >> <p>Article snippet...</p>
    >> <img src="/news/thumb.jpg" alt="">
    >> </a>
    >> </li>

    >
    > Yet, browsers support it, and it is being made allowed, according to
    > HTML5 drafts.


    That's interesting. But how will that work given that a is an inline
    element and the h3 and p above are blocks?

    <snip>
    JJ, Nov 23, 2011
    #6
  7. 2011-11-23 20:54, JJ wrote:

    > On 20/11/2011 15:51, Jukka K. Korpela wrote:
    >> 2011-11-20 16:46, JJ wrote:
    >>
    >>> I know that this isn't allowed:
    >>>
    >>> <li>
    >>> <a href="somelink">
    >>> <h3>Article title</h3>
    >>> <p>Article snippet...</p>
    >>> <img src="/news/thumb.jpg" alt="">
    >>> </a>
    >>> </li>

    >>
    >> Yet, browsers support it, and it is being made allowed, according to
    >> HTML5 drafts.

    >
    > That's interesting. But how will that work given that a is an inline
    > element and the h3 and p above are blocks?


    Browsers implement so that each of the child elements of <a> is an
    active area, and they all act as one link, despite (possibly) consisting
    of separate pieces. You can see this if you mouse over the page. When
    the mouse is over the heading, the pointer is link-indicating, a hand,
    but when you move downwards, it turns to an arrow, then back to a hand.
    The reason is that between the <h3> and <p> elements, there is (by
    default) a margin that does not belong to either of those elements.
    Illogical as it may sound, that margin is not part of the active area.

    Similarly, for the <img> element, only the image is active area, not the
    empty space on the right of it.

    Of course, the <a> element is not really "inline" in this context, and
    "inline" isn't even an HTML5 concept. It's just an element that contains
    various elements.


    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Nov 23, 2011
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. RJN
    Replies:
    1
    Views:
    1,923
    =?Utf-8?B?U2NvdHQgU2ltb25z?=
    Sep 27, 2004
  2. Nathan Sokalski

    Making a TableCell Appear Clickable

    Nathan Sokalski, May 16, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    487
    Eliyahu Goldin
    May 16, 2005
  3. Nick Howes

    Making form labels clickable

    Nick Howes, Apr 29, 2004, in forum: HTML
    Replies:
    5
    Views:
    2,253
    Toby A Inkster
    May 3, 2004
  4. \A_Michigan_User\
    Replies:
    2
    Views:
    871
    \A_Michigan_User\
    Aug 21, 2006
  5. mi
    Replies:
    4
    Views:
    13,424
    dorayme
    May 21, 2008
Loading...

Share This Page