Search code examples
htmlvalidationfancyboxdom-eventsmarkup

Validate href inside a div

I have this type of markup: 

<div class="box" href="pic-gallery/img01.jpg">
  <div>----------</div>
</div>

Now as I am going to validate this it is showing error as href inside a div is not allowed. So how to validate this error? I had used: 

<div class="box" onclick="href='pic-gallery/img01.jpg'"></div>

but it is not opening the image as picture is coming through the fancybox. So please help me out. Any help and suggestions will be highly appreciated.

Solution

  • href isn't a valid attribute for div, just a and area. Your best bet is to use an actual link (an a element). You can use styling (display: block) to make it shown as a block on modern browsers (not, sadly, on some older versions of IE), and since its content model is transparent, you could put a div inside it. All of the examples on the Fancybox howto page show using an a element, not a div.

    So perhaps

    <a class="box" href="pic-gallery/img01.jpg">
  <div>----------</div>
</a>

    ...where the "box" class includes display: block. Or if you use that class places where you don't want block display, break out the display: block and apply it separately (via another class or inline style attribute).