Error: An a start tag seen but an element of the s

Question

My doctype is html5. I am validating this HTML:

<a class="article-link-block" href="http://localhost/article/231">

    <img src="http://localhost/images/article-image.jpg">

    <div class="article-info">
        <a class="title" href="http://localhost/article/231">Title of the article</a>
        <a class="category" href="http://localhost/category/5">Category</a>
        <div class="views">24x</div>
        <div class="date">13.3.2013</div>
    </div>

</a>

I am getting this error:

Error: An a start tag seen but an element of the same type was already open.

I want the whole div to be an anchor tag ( article-link-block ) and within it another anchor tags to category, user etc. and other divs (the code above is simplified to only article and category link.)

How can I get rid of this error during html validation?

Answer 1

If you want it all to validate you're going to have to choose whether you want the block level link, or the child links. You can't have both. From the spec:

Content model: Transparent, but there must be no interactive content descendant.

Interactive content is:

a audio (if the controls attribute is present) button details embed iframe img (if the usemap attribute is present) input (if the type attribute is not in the Hidden state) keygen label object (if the usemap attribute is present) select textarea video (if the controls attribute is present)

So your options are:

1. Ignore the validator and keep it as it is (you have no right to expect all browsers to behave in the same way in this case)
2. Choose a different markup structure altogether
3. Replace either the block level or child links with normal elements and click events