Image wrapping creates invalid markup

  • I’ve been cleaning up some minor issues on my site and came across this one that I can’t get to the bottom of. The validator says correctly that div tags can’t go inside a href tags, but that’s what’s happening when a post is saved. Following is an example:
    <a href="https://www.richardwwood.com/wp-content/uploads/2010/05/honey-jar1.png"> <div class='image_wrap alignleft'><div class='wp-caption'><img src="https://www.richardwwood.com/wp-content/uploads/2010/05/honey-jar1.png" width="325" height="289" alt="Honey jar" title="" /></div></div> </a>

    There was a function in my functions.php file for this, which I have disabled so that the default gets used, but it appears there’s no difference.

    Thanks for any help

Viewing 3 replies - 1 through 3 (of 3 total)

  • Your HTML is invalid, do not place div’s inside the 

    <a></a>

    tag

    Thread Starter rwwood

    (@rwwood)

    Yes, I knew that, and finally figured out that for some reason there was an extra a href tag outside the divs. I remedied that and now have the following:

    <div class='image_wrap alignleft'><div class='wp-caption'><img src="https://www.richardwwood.com/wp-content/uploads/2010/05/honey-jar1.png" width="325" height="289" alt="Honey jar" title="" /></div></div>

    which to me looks fine. Nevertheless, the validator is giving me:

    document type does not allow element “div” here; missing one of “object”, “applet”, “map”, “iframe”, “button”, “ins”, “del” start-tag

    <p><div class=’image_wrap alignleft’><div class=’wp-caption’><img src=”https://w…

    The mentioned element is not allowed to appear in the context in which you’ve placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you’ve forgotten to close a previous element.

    One possible cause for this message is that you have attempted to put a block-level element (such as “<p>” or “<table>”) inside an inline element (such as ““, “<span>”, or “<font>”).

    When you switch to the visual editor after typing in html, the default editor may wrap the html you wrote in a <p></p> …to stop this:

    Edit post, switch to html view, edit html (remove <p></p> wrap),do not switch back to visual view, update post. It may also strip out nested div’s. That said, your HTML is still not what you need, you do not have a caption, so the second div is not required…

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Image wrapping creates invalid markup’ is closed to new replies.