org-mode export images to html as figures, not img

Question

Currently my images are exported with org-html-publish-to-html, and they end up as inlined <img src=''/>. I want them inside figures, so I'm working around this my problem by injecting the following in my org document:

#+BEGIN_HTML
<figure>
<img src="./the_image_path.png"/>
<figcaption style="font-size:0.8em">This is a caption.</figcaption>
</figure>
#+END_HTML

This solution isn't ideal, since I may want to generate images on the fly with org-babel, and I'll want to target them with CSS.

How can I tell org-mode to export links to images as figures?

EDIT:

It turns out setting the following on my project-alist does the trick.

     :html-html5-fancy t
     :html-doctype "html5"

However, the output is still messed up because org-mode adds an unnecessary p tag to the image:

<figure>
<p><img src="../media/dog.jpg" alt="dog.jpg" width="60%">
</p>
<figcaption><span class="figure-number">Figure 1:</span> This is a dog.</figcaption>
</figure>

The culprit is the following function from ox-html. Note the suspicious <p> tags:

(defun org-html--wrap-image (contents info &optional caption label)
  "Wrap CONTENTS string within an appropriate environment for images.
INFO is a plist used as a communication channel.  When optional
arguments CAPTION and LABEL are given, use them for caption and
\"id\" attribute."
  (let ((html5-fancy (org-html--html5-fancy-p info)))
    (format (if html5-fancy "\n<figure%s>%s%s\n</figure>"
          "\n<div%s class=\"figure\">%s%s\n</div>")
        ;; ID.
        (if (org-string-nw-p label) (format " id=\"%s\"" label) "")
        ;; Contents.
        (format "\n<p>%s</p>" contents)
        ;; Caption.
        (if (not (org-string-nw-p caption)) ""
          (format (if html5-fancy "\n<figcaption>%s</figcaption>"
            "\n<p>%s</p>")
              caption)))))

So I redefine the function on my web-config.el and remove the

tags, and everything works ok. But is there a better way to do it? Perhaps with an advice?

Answer 1

The relevant variables are

(setq org-html-html5-fancy t
      org-html-doctype "html5")

To publish the document with org-html-publish-to-html you can also use the :html-doctype and :html-html5-fancy keys in the plist argument (or in your org-publish-project-alist).