Make WordPress Core

Opened 14 years ago

Closed 4 months ago

#12097 closed defect (bug) (wontfix)

Inserting image captions sometimes results in malformed HTML

Reported by: essday's profile essday Owned by:
Milestone: Priority: normal
Severity: normal Version: 2.9.1
Component: Media Keywords: needs-patch needs-testing
Focuses: Cc:


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:

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="
t/uploads/BlurredTVIcon.png"><img class="size-full wp-image-3
" title="Blurred TV Icon" src="
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="
ploads/BlurredTVIcon.png"><img class="size-full wp-image-3" titl
e="Blurred TV Icon" src="
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>

For a live example, see

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.

Change History (12)

#1 @essday
14 years ago

  • Summary changed from Inserting image captions sometimes result in malformed HTML to Inserting image captions sometimes results in malformed HTML

#2 @nmarcisso
14 years ago

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=""><img class="size-medium wp-image-3787" title="Blackslope1-H" src="" alt="" width="300" height="214" /></a>[/caption]

Published Code

<a href="" title="Blackslope1-H" rel="lightbox[3785]"><img class="size-medium wp-image-3787" title="Blackslope1-H" src="" alt="" width="300" height="214" /></a>

#3 @nacin
14 years ago

  • Milestone changed from Unassigned to 3.1

#4 @nacin
13 years ago

  • Keywords reporter-feedback added
  • Milestone changed from Awaiting Triage to Awaiting Review

#5 @ocean90
13 years ago

  • Keywords reporter-feedback removed
  • Milestone changed from Awaiting Review to Future Release

#6 @davehope
13 years ago

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="" 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

Last edited 13 years ago by davehope (previous) (diff)

#7 @davehope
13 years ago

  • Version changed from 2.9.1 to 3.2.1

#8 @dd32
13 years ago

  • Version changed from 3.2.1 to 2.9.1

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

#9 @ocean90
11 years ago

  • Keywords needs-patch added

It's still an issue in 3.6.

#10 @nhuja
11 years ago

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">...`

Version 1, edited 11 years ago by nhuja (previous) (next) (diff)

#11 @chriscct7
8 years ago

  • Keywords needs-testing added

#12 @joedolson
4 months ago

  • Resolution set to wontfix
  • Status changed from new to closed

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.

Note: See TracTickets for help on using tickets.