Is putting a div inside an anchor ever correct?

Question

I\'ve heard that putting a block element inside a inline element is a HTML sin:

What we have here is a          


        
                      

              相关标签:
       
      

Answer 1

If you want to avoid the semantic trouble of placing divs inside anchor tags, just place the anchor tag on the same level as the divs, wrap them all with a container with position: relative, make your anchor tag position: absolute and expand it to fill the container. Also if it's not on the end of the content flow make sure you throw a z-index in there to place it above the content.

As suggested I have added a markup code:

<div class="div__container>
  <div class="div__one>
  </div>
  <div class="div__two">
  </div>
  <a href="#"></a>
</div>

And the css:

.div__container {
  position: relative; 
}
.div__container a {
  position: absolute;
  top: 0;
  bottom: 0;      
  left: 0;
  right: 0;
  z-index: 999;
}

Answer 2

The W3C doc doesn't use concepts like wrong and sin, but it does use those like provide the means, may be appropriate and discouraged.

Actually, in the second paragraph of section 4, the 4.01 spec itemizes its words as follows

The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in this document are to be interpreted as described in [RFC2119]. However, for readability, these words do not appear in all uppercase letters in this specification.

With that in mind, I believe the definitive statement is in 7.5.3 Block-level and inline elements, where it says

Generally, inline elements may contain only data and other inline elements.

The condition "generally" appears to introduce enough ambiguity to say that HTML 4.01 does allow inline elements to contain block elements.

Certainly, CSS2 has a display property value, inline-block, that appears to be suited to the purpose you describe. I'm not sure if it was ever widely supported, but it seems that someone anticipated the need for that kind of behavior.

The DTD appear to be less forgiving here, but the text of the DTD defers to the spec:

The HTML 4.01 specification includes additional syntactic constraints that cannot be expressed within the DTDs.

In another comment, you suggest that you want to make a block active by wrapping it in an anchor. I don't believe HTML prohibits that, and CSS clearly allows it. So to answer the title question about whether it is ever correct, I say yes. By the standards, it is sometimes correct.

Answer 3

If you change it to a block-style element, then no, it's no longer 'wrong', but it probably won't validate. But it doesn't make much sense to do what you're doing. You should either just keep the anchor tag as a block level element with no inner div, or put the div on the outside.

Answer 4

I think that most of the time when people ask this question, they have build a site with only divs, and now one of the div needs to be a link.

I seen someone use a transparent empty image, PNG, inside an anchor tag just to make a link inside a div, and the image was the same size as the div.

Pretty sad actually...but it works...

Answer 5

Just as an FYI.

If your goal is to make your div clickable you can use jQuery / Java Script.

Define your div like so:

<div class="clickableDiv" style="cursor:pointer">
  This is my div. Try clicking it!
</div>

Your jQuery would then be implemented like so:

 <script type="text/javascript">

    $(document).ready(function () {

        $("div.clickableDiv").click(function () {
            alert("Peekaboo"); 
        });
    });
</script>

This would also work for multiple divs - as per Tom's comment in this thread

Answer 6

With HTML5 specification... It is now possible to put a block-level element inside of an inline element. So now it's perfectly appropriate to put a 'div' or 'h1' inside of an 'a' element.