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.

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>

#15787

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

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