Inserting image captions sometimes results in malformed HTML

[essday]

When adding an image with a caption to an HTML post, WP generates invalid HTML. In at least the case identified below, WP generates a DIV tag inside a P tag, which violates HTML standards and which results in undefined behavior depending on the browser being used.

For background: ​http://wordpress.org/support/topic/291591

To reproduce:

• install stock WP 2.9.1 from scratch. No changes (eg. no themes and no plugins).
• edit the default first post
• switch to HTML editor view
• upload an image at the beginning of the post, using the same text for the image title, alternate text and caption
• insert the image into the post as a thumbnail
• save the post

The text inside the editor should look like the following when you are done:

[caption id="attachment_3" align="alignnone" width="100" caption=
"Blurred TV Icon"]<a href="http://wptesty.nfshost.com/wp-conten
t/uploads/BlurredTVIcon.png"><img class="size-full wp-image-3
" title="Blurred TV Icon" src="http://wptesty.nfshost.com/wp-con
tent/uploads/BlurredTVIcon.png" alt="Blurred TV Icon" width="100
" height="100" /></a>[/caption]Welcome to WordPress. This is your
 first post. Edit or delete it, then start blogging!

The resulting HTML generated by WP is:

<div class="entry">
<p><div id="attachment_3" class="wp-caption alignnone" style="wi
dth: 110px"><a href="http://wptesty.nfshost.com/wp-content/u
ploads/BlurredTVIcon.png"><img class="size-full wp-image-3" titl
e="Blurred TV Icon" src="http://wptesty.nfshost.com/wp-conten
t/uploads/BlurredTVIcon.png" alt="Blurred TV Icon" width="100" h
eight="100" /></a><p class="wp-caption-text">Blurred TV Icon<
/p></div>Welcome to WordPress. This is your first post. Edit or del
ete it, then start blogging!</p>
</div>

For a live example, see ​http://wptesty.nfshost.com.

NOTE: I am hosting this site myself and I may not leave it up for very long, so if you want to see the bug without having to set up WP yourself, please visit this URL sooner rather than later.

[nmarcisso]

I am getting a similar issue where wordpress is removing the caption tag when being published.

In Editor

[caption id="attachment_3787" align="alignleft" width="300" caption="Twisted fun! Most of the trails at Black Mountain follow the contours of the slope, not the needs of grooming machines. That’s where the fun is! (Tim Jones photo)"]<a href="http://easternslopes.com/wp-content/uploads/2010/02/Blackslope1-H.jpg"><img class="size-medium wp-image-3787" title="Blackslope1-H" src="http://easternslopes.com/wp-content/uploads/2010/02/Blackslope1-H-300x214.jpg" alt="" width="300" height="214" /></a>[/caption]

Published Code

<a href="http://easternslopes.com/wp-content/uploads/2010/02/Blackslope1-H.jpg" title="Blackslope1-H" rel="lightbox[3785]"><img class="size-medium wp-image-3787" title="Blackslope1-H" src="http://easternslopes.com/wp-content/uploads/2010/02/Blackslope1-H-300x214.jpg" alt="" width="300" height="214" /></a>

[ocean90]

#15787

[davehope]

I also encountered this problem if a line break in not inserted before the caption/image. Wordpress generates some code like this:

Consider the below photo taken in center-weighted metering mode.
[caption id="attachment_223" align="aligncenter" width="500" caption="Center-weighted metering sample"]<img src="http://slrschool.net/wp-content/uploads/2011/08/Center-Weighted-Metering.jpg" alt="Center-weighted metering sample" title="Center-Weighted Metering" width="500" height="331" class="size-full wp-image-223" />[/caption]

Which results in a <p> tag, my text followed by a <br/> tag and then the <div> etc.

By adding a line break after by text, before the [caption..] the xhtml is not malformed.

Wordpress 3.2.1

[dd32]

The version field is used to track the earliest reported version which an issue affects.

[ocean90]

It's still an issue in 3.6.

[nhuja]

I cannot seem to replicate this issue. @ocean90, do you have an example setup? I did notice this before but now I get a proper HTML. I do not see p tag before div. tried several posts and pages in 2013.

EDIT: ah.. did as suggested by @davehope and I see the div inside p tag.

<p>Consider the below photo taken in center-weighted metering mode.<br />
<div id="attachment_4098" class="wp-caption alignnone" style="width: 394px">...

[joedolson]

This is still an issue, but it's specific to the classic editor environment. It's a limitation in wpautop, and is a pretty well known issue in many circumstances. Given that this is not an issue with the current editor environment, is fairly easily addressed by adding an additional line break in the editor, and has no accessibility consequences due to the invalid HTML, I'm resolving this issue a wontfix.