3

We have a request to have an entire block of content be clickable as opposed to just a link field.

Questions:

  1. Is it good practice to allow for entire block of content to be clickable?
  2. If we wrap content with link, does that ding our SEO page rankings?

Example:

  • Link only clickable

    <div>
  <img src="https://placeimg.com/640/480/arch">
  <p>Appropriately initiate front-end "outside the box" thinking via flexible intellectual capital.</p>
  <a href="https://placeimg.com/640/480/nature">My Link</a>
</div>

  • Entire block element clickable

    <a href="https://placeimg.com/640/480/nature" title="My Link">
  <div>
    <img src="https://placeimg.com/640/480/arch">
    <p>Appropriately initiate front-end "outside the box" thinking via flexible intellectual capital.</p>
  </div>
</a>
Improve this question

2 Answers 2

Reset to default
5

Yes, it is fine and even advisable to put block elements inside an a element where appropriate, as long as the browser supports HTML5 (all modern browsers do):

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).

Text-level Semantics - w3.org

Search engines and browsers will both understand the links just fine.

Further reading:

Is putting a div inside an anchor ever correct? - Stack Overflow

Improve this answer
7
  • Advisable? Why is it advisable? In addition, an <a> element is inline while block level elements aren't. This is now allowed as of HTML5 but there are exceptions related to the flow. That <a> element might need its CSS changed to display:block itself or some CSS changes to its content but this is all off topic here.
    – Rob
    Dec 19, 2018 at 13:40
  • @Rob It's advisable because it makes the size of interactible elements (and thus tap targets) bigger so as to provide a better ux. And the anchor tag doesn't even need to be explicitly set to display: block unless you need to change the way it displays, because block and inline elements are no longer defined as of HTML5.
    – Maximillian Laumeister ♦
    Dec 19, 2018 at 15:37
  • Block and inline are still defined in CSS and that has its own rules about this it must be handled correctly there. That is my point. (Block and inline were never defined in HTML.)
    – Rob
    Dec 19, 2018 at 15:56
  • @Rob True, when wrapping elements in an a tag one must make sure they display satisfactorily, and use CSS to tweak if they don't.
    – Maximillian Laumeister ♦
    Dec 19, 2018 at 15:59
  • 1
    @MaximillianLaumeister for reference purposes, adding Markup Validation Service as it showed no errors and warnings.
    – usernameabc
    Dec 19, 2018 at 23:04
1

I would like to disagree with @MaximillianLaumeister. UX can be achieved with simple javascript and IMHO is even better in case of accessibility (readers will not read entire block as link text). And as second disagreement with your answer I would like to remind, that link text is important in referral links and I can't believe that google will consider content from entire block, therefor is better to have content (what will be really indexed) under my own control and do not rely on some search bot defaults (hopefully first x characters). It is not wrong to place blocks inside anchor tags, but for the best performance I would avoid it.

Improve this answer
4
  • 1
    What JavaScript are you suggesting for this? Can you give an example?
    – Stephen Ostermiller ♦
    Dec 3, 2021 at 13:30
  • I'm not very familiar with how screen readers treat links. Can you explain more how screen readers treat links when there is a lot of anchor text vs a little?
    – Stephen Ostermiller ♦
    Dec 3, 2021 at 13:32
  • 1
    As far as SEO goes, anchor text for inbound and outbound external links are very important, but Google doesn't seems to give much weight at all to keywords used in links between pages of your site. Too much anchor text would only be an SEO problem if it involves an external site.
    – Stephen Ostermiller ♦
    Dec 3, 2021 at 13:33
  • @StephenOstermiller Javascript code relies on the framework which is used. there are many manuals to achieve this (for example this one: stackoverflow.com/questions/46388704/…) Regarding screen readers: the best is to install screen reader to crhome browser and try it on your own. Keep in mind, that disabled people offen do not use mouse at all, so tab is your key ;) :)
    – Eduard Void
    Dec 6, 2021 at 7:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.