WordPress 3.0 generated the following code for a gallery in one of my posts —
<!– see gallery_shortcode() in wp-includes/media.php –>
<div id=’gallery-1′ class=’gallery galleryid-1512′>
<dl class=’gallery-item’>
<dt class=’gallery-icon’>
<!– Image and link here –>
</dt>
</dl>
<dl class=’gallery-item’>
<dt class=’gallery-icon’>
<!– Image and link here –>
</dt>
</dl>
<dl class=’gallery-item’>
<dt class=’gallery-icon’>
<!– Image and link here –>
</dt>
</dl>
<br style=”clear: both” />
</div>
Validating the page produced the following errors —
…and the validator quite rightly states, “element dl: Zero or more groups each consisting of one or more dt elements followed by one or more dd elements.”
If you go through explanation of the dl tag in the HTML5 working draft, you’ll see that the dl tag must contain a dd child element (the actual definition) if it contains a dt child element (the definition term).
The dl element represents an association list consisting of zero or more name-value groups (a description list). Each group must consist of one or more names (dt elements) followed by one or more values (dd elements)
WordPress does not generate the dd element if a caption is not specified.
Personally, I feel using definition lists for galleries is inappropriate. WordPress also allows galleries to be displayed using tags other than dl, dt and dd. You’ll find an example at the bottom of this page.
To generate valid HTML5 code for this website, I’ve added the following code to functions.php in my theme —
function html5_gallery($content)
{
//remove space between [ and gallery in the following line
return str_replace(‘[ gallery’, ‘[ gallery itemtag=”div” icontag=”span” captiontag=”p”‘, $content);
}
add_filter(‘the_content’, ‘html5_gallery’);
Galleries are now displayed using div, span and p tags. It’s slightly inefficient since I’m essentially doing a “find and replace” for the gallery shortcode, but for me, it’s the best way to deal with the problem. You can read more about using add_filter here.
If you have any suggestions for a better workaround (other than modifying wp-includes/media.php 
), please leave a comment! 
Facebook
Last.fm
MyOpera
Linked-in
Smashing Magazine
Thanks, you seem to be the only person in the whole google to have tackled this problem! As you say it may be inefficient, but at least I have a html5 valid site now. I have looked all over the place, and I was only able to stick the gallery style tag where it belongs up the , but there was no way to get rid of those DLs and DTs… Great work, shirish!!
Hi Francisco,
I’m so glad it helped! I personally feel the DLs and DTs are a bit unnecessary…
Have a nice day!
“WordPress also allows galleries to be displayed using tags other than dl, dt and dd. You’ll find an example at the bottom of this page.”
Something I doubt …
Thanks, it works! After changing ` and ´ to ‘. Same with “.
I still get one gallery validation error though:
“Element style not allowed as child of element div in this context.”
Do you know how to fix this?
I am getting the same error, but there is no gallery here just pics uploaded onto posts. I am going through your code and trying to alter to fix my problem. Any suggestions?
Thanks,
Renee
Hi Renee,
Your page does contain a gallery, under the “Text-a-holic” post. And it continues to use the dl and dt tags WordPress galleries use by default. Please follow the steps mentioned about to solve your problem.
Cheers!
Due to newer articles my validation error moved to page 2:
http://goo.gl/nysUU
Any ideas?
Hi Stefan,
Did you recently install a Lightbox plugin for WordPress? In your post titled “X-Men: First Class”, the images in the gallery overlap each other a bit, and clicking on the image opens a lightbox. This isn’t the default behaviour of WordPress galleries, and the reason your page isn’t validating is because the plugin has added some extra CSS code to your page (in the BODY section) — something that the W3C Validator is currently complaining about.
You can try different options in your ligthbox plugin to see which setting is causing this inline stylesheet to be generated, or you can edit the plugins code to ensure that the styles are included using wp_enqueue_style()
btw, you have a cool website!
Cheers!
Thanks for your helpful hints! I use the WordPress plugin wp-jquery-lightbox and will check it’s code again.