1 <p>In the selfie gallery, each small image preview refers to a separate “photo page”. This photo page contains a full-sized image and a description. It is a fairly stand-alone element, and later we will be able to insert it on any other page of the blog. How can we properly mark up such “pages”?</p>

2 <p>The &lt;figure&gt; tag is perfectly suited for this. This tag is suitable for any illustrative or demonstrative material that can be added to the content of the document. These materials can be graphs, images, code examples, tables, and so on.</p>

3 <p>Usually, this material is accompanied by an explanatory comment or “caption”. Another tag, &lt;figcaption&gt;, is intended to be used to mark up this comment. This is placed as the first or last element inside &lt;figure&gt;. For example:</p>

4 &lt;figure&gt; Graph, image, diagram or code &lt;figcaption&gt;Caption for the content&lt;/figcaption&gt; &lt;/figure&gt;<p>Let’s mark up the photo in our gallery using &lt;figure&gt;.</p>

5 <p>By default, the figure tag uses indents, so we added styles for figure and figcaption, which can be viewed in the tab style.css.</p>