Menu
The <figure> and <figcaption> Tags

Barney the mouse
<figure style="width:209px;">
    <img src="mouse_pixabay.jpg" />
    <figcaption>Barney the mouse </figcaption>
</figure>

The <figure> element is a container for an image and optionally for a <figcaption> element that defines a caption for that image.

Barney the mouse
<figure style="width:209px;">
    <img src="mouse_pixabay.jpg" />
    <figcaption>Barney the mouse</figcaption>
</figure>

Note that the <figure> element is a block level element, so if you don't want it to expand horizontally across the entire page, you must use a style to set its width.

Barney the mouse is a very friendly mouse

Note in the example above that if your caption is more than one line, the <figcaption> element automatically wraps your text.


<figure style="border-style:solid; padding:8px; width:209px;">
    <img src="mouse_pixabay.jpg" />
    <figcaption style="text-align:center;">Barney the mouse is a very friendly mouse</figcaption>
</figure>

In the example above I added a border style and a padding style to the <figcaption> element to make it look more like a photograph. I also added the text-align:center style to the <figcaption> element to center the caption under the image.


Learn more at amazon.com

More HTML Code:
• Use Datalist Tag to Specify Pre-defined Text for Input Element
• Creating a Subscript or Superscript with HTML
• HTML Image Basics
• HTML dfn Tag
• Using col and colgroup to Apply Attributes to a Table Column
• HTML abbr and acronym Tag
• Use fieldset to Organize Form Elements
• HTML Textarea Basics
• HTML Frames Basics
• HTML DIV Basics