# 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="https://3884669180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fs1Vtfb5fcOs06GOHo0WA%2Fuploads%2F92iTjg6ML6oiNtucRrVg%2Fimage2017-11-4_18-48-53-768x208.png?alt=media&#x26;token=8f97916f-e657-46e9-8906-736a88845cb6" alt=""><figcaption></figcaption></figure>

The above would look something like this:

<figure><img src="https://3884669180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fs1Vtfb5fcOs06GOHo0WA%2Fuploads%2FHiIEsYorH4oWlz6kvYir%2Fimage.png?alt=media&#x26;token=be4f8ae4-5a1f-4da2-a881-b63761afdcb8" 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”.