Best Way to Make Entire LI/Span to be Link/Href Clickable

HTML & CSS
1

So that is a screenshot of the grid tile, and the only thing that can be clicked is the title, which eases to a green color. Here is the html

<div class="span3 ">
<section class="lazy-load-box trigger effect-slidefromright " data-delay="200" data-speed="900" style="-webkit-transition: all 900ms ease; -moz-transition: all 900ms ease; -ms-transition: all 900ms ease; -o-transition: all 900ms ease; transition: all 900ms ease;">
<ul class="posts-grid row-fluid unstyled post_type_1 ul-item-0">
<li class="span12 list-item-1">
<figure class="featured-thumbnail thumbnail">
<a href="http://www.traileraddict.com/article/wp-content/uploads/2016/07/img_4.jpg" title="Etiam dictum egestas" rel="prettyPhoto-734346380">
<img  src="http://www.traileraddict.com/article/wp-content/uploads/2016/07/img_4-270x195.jpg" alt="Etiam dictum egestas" />
<span class="zoom-icon"></span>
</a></figure
><div class="clear"></div>
<div class="hidden_block"></div>
<div class="post_content">
<div class="post_head_1"><div class="post_metabox">
<h2><a href="http://www.traileraddict.com/article/etiam-dictum-egestas/" title="Etiam dictum egestas">Etiam dictum egestas</a></h2></div></div>
<p class="excerpt">Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis, lobortis dignissim, pulvinar ac, lorem. Lorem&hellip;</p>
<a href="http://www.traileraddict.com/article/etiam-dictum-egestas/" class="btn btn-primary" title="Etiam dictum egestas">Read more</a>
</div>
<div class="post_meta">
<span class="post_date"><time datetime="2013-02-14T20:26:57">14 February 2013</time></span><div class="block_right"><span class="post_author">by Ryan Milan</a></span>
</div>
</div>
</li>
</ul>
</section></div>

Now how do I make the entire area clickable (while retaining SEO)?

All feedback appreciated.

Cheers
Ryan

2

That’s because the <a> only surrounds the title.

<h2><a href="http://www.traileraddict.com/article/etiam-dictum-egestas/" title="Etiam dictum egestas">Etiam dictum egestas</a></h2>

In html5 the <a> element may now contain block elements, meaning you can wrap it around the whole “box” at a higher level within the nested elements.

3

Alright, let me try that. I did an “a” around the entire thing and it came back not valid in the browser.

In inspector, I edit the html by adding a tag before and /a tag after the <li>

The inspector forces it back out of the Lli

4

It should be valid if you are using html5, in earlier versions the <a> element may only contain in-line elements.
It probably does not want to go around the whole thing, like <a><div class="span3"> but inside one of the elements that contain the whole content such as the <li>.
Be sure to set it to display: block in the css and make it fill the box.

5

I’m not so sure.

My take of the W3C reference is that the permitted content of ul elements is li elements.

https://www.w3.org/TR/html-markup/ul.html#ul

That is, the a element (“flow” content) should go just inside the li elements, not just outside of them.

https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html#kinds-of-content

1 Like
6

Yes, that is what I meant, to put the <a> inside of the <li> as that is the last of the nesting before you get to individual content elements.

<li>
  <a>
     <content>
     <more content>
  </a>
</li>
1 Like
7

Ok, I put the a around the content inside the li and still no effect:

<div class="span3 ">
<section class="lazy-load-box trigger effect-slidefromleft " data-delay="400" data-speed="900" style="-webkit-transition: all 900ms ease; -moz-transition: all 900ms ease; -ms-transition: all 900ms ease; -o-transition: all 900ms ease; transition: all 900ms ease;">
<ul class="posts-grid row-fluid unstyled post_type_1 ul-item-0">
<li class="span12 list-item-1">
<a href="#">
<figure class="featured-thumbnail thumbnail"><a href="http://www.traileraddict.com/article/lg-eg9600-review/" title="LG EG9600 Review" rel="prettyPhoto-1083396156[gallery0]">
<img src="http://www.traileraddict.com/article/wp-content/uploads/2016/08/65eg9600-402x290.jpg" alt="LG EG9600 Review" />
<span class="zoom-icon"></span></a></figure><figure class="featured-thumbnail thumbnail" style="display:none;">
<a href="http://www.traileraddict.com/article/wp-content/uploads/2016/08/65eg9600-display.jpg" title="LG EG9600 Review" rel="prettyPhoto-1083396156[gallery0]">
<span class="zoom-icon"></span>
</a>
</figure>
<div class="clear"></div>
<div class="hidden_block"></div>
<div class="post_content">
<div class="post_head_1">
<div class="post_metabox">
<h2><a href="http://www.traileraddict.com/article/lg-eg9600-review/" title="LG EG9600 Review">LG EG9600 Review</a></h2>
</div></div><p class="excerpt">Thanks to recent price decreases, this LG TV might be the best value... for an OLED.</p>
<a href="http://www.traileraddict.com/article/lg-eg9600-review/" class="btn btn-primary" title="LG EG9600 Review">Read more</a></div><div class="post_meta"><span class="post_date"><time datetime="2016-08-01T15:38:00">01 August 2016</time></span><div class="block_right"><span class="post_author">by Ryan Milan</a>
</span>
</div>
</div>
</a>
</li>
</ul>
</section>
</div>

Scratching my head a bit.

8

You DO realize that you have anchors inside of anchors, don’t you? …which is invalid?

This is a stray closing anchor tag…
<span class="post_author">by Ryan Milan</a></span>

and the outer link around all of the inner links is invalid.

1 Like
9

Nesting <a> inside <a> is not allowed.

Also you need to set it to display:block if you want it to completely fill the <li>

1 Like
10

Sorry, I meant to update this thread. Yes, I yanked out all nested anchors, and am now just having two anchors, one on the image and one on the title and doing a hover to create a better effect.

I’ll show off link to the demo shortly. Trying to dial it in.

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.