1

making a website that utilizes divs with a background-image:(so basically a picture) with a div nested in that that will display text over the picture.

The text and picture divs are both links that would go to the same place. I want my users to be able to click anywhere on the text or picture to navigate away from the page.

Instead of using using two tags that will link to the same thing in the same line of code, I noticed that I can put two divs, both the picture and the text, inside of the same tag and Chrome allows it.. but I don't know how support is on this kind of thing in other browsers.

Here's an example of what I'm doing:

<a href="https://theartofmikeyjoyce.com/">
  <div class="cell E4">
   <div class="text">MIKEY<br/>
       <p>IN THE CLUB II</p>DIGITAL COLLAGE
   </div>
  </div>
</a>

Is this canon?

bumbumpaw
  • 2,522
  • 1
  • 24
  • 54
little tiny man
  • 789
  • 4
  • 10
  • 26

1 Answers1

3

HTML 4.01 specifies that elements may only contain inline elements. A <div> is a block element, so it may not appear inside an <a>.

HTML 5 states that 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)".

Source: Is putting a div inside an anchor ever correct?

Community
  • 1
  • 1
ruizfrontend
  • 371
  • 3
  • 13
  • 1
    Understood! So let's say I use `` instead of `
    `, and set `display:block;` . Can I still have two of those `span`'s inside a single anchor? Using HTML 5 by the way
     – little tiny man Jul 25 '14 at 00:29