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>
    
4

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

  • 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 '18 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 '18 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 '18 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 '18 at 15:59
  • 1
    @MaximillianLaumeister for reference purposes, adding Markup Validation Service as it showed no errors and warnings. – usernameabc Dec 19 '18 at 23:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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