> For the complete documentation index, see [llms.txt](https://lewe.gitbook.io/html-and-aui-toolkit-for-confluence/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lewe.gitbook.io/html-and-aui-toolkit-for-confluence/html-macros/html-figure-and-html-figure-caption.md).

# HTML Figure and HTML Figure Caption

#### Description

The HTML Figure and Figure Caption macros can be used to mark up images and photos on your page.

The HTML Figure element provides a body in which you can add an element and a HTML Figure Caption element for the image.

<figure><img src="/files/Jjyt2wteX3SqPH3Aj9Yn" alt=""><figcaption></figcaption></figure>

The above would look something like this:

<figure><img src="/files/tT0uPNCZxwK3jd9357p3" alt=""><figcaption></figcaption></figure>

## Adding the Macros

1. Edit your page.
2. Select “+” => Other macros
3. Type in “html” in the Search box
4. Select the “HTML Figure”, “HTML Img” and “HTML Figure Caption” macros (each at a time)

## Macro Options for HTML Figure and HTML Figure Caption

### **Element ID**

You can specify an element ID here. It must be unique on your page.

### **CSS Classes**

You can specify CSS class names here, separated by blank.

### **Inline Styles**

You can specify inline CSS properties here. Each one has to end with a semicolon.

### **Tooltip Title**

Enter a simple text here that will popup as a tooltip when the mouse is hovered over the element.

### **Custom Attributes**

You can enter fully specified custom attributes here separated by blanks, e.g.: data-animal=”cat” data-color=”red”.