Cutup #4 Image <figure>

🔮Today, I would like to share with you about the HTML <figure> element.

The HTML <figure> element represents self-contained content, frequently with a caption (<figcaption>), and is typically referenced as a single unit. -MDN

<figure>
    <img src="URL of the image" alt="description of the image" />
    <figcaption>This is a figcaption.</figcaption>
</figure>

Attributes

figure: an image, illustration, diagram, code snippet, etc, with <figcaption>, and is typically referenced as a single unit.

img : embeds an image

alt: a textual description of the image

figcaption : represents a caption or legend for the rest of the contents its parent <figure> element, if any.

Troubleshooting

When you use a <img> tag, you will face a problem, there is a gap between <img> and <figcaption>. To remove this gap, add attributedisplay: block; in <img> tag.

img { 
  display: block;
}

📖 Articles

<figure> MDN

🎈 That’t all for now

💌 Any questions or feedback

I would love to hear your feedback on how I can make it better for you. Please leave your comments below or through my Twitter.

☕️

Lastly, I would love to share <FrontEnd30 /> where I learnt many cool front-end techniques. Big thanks to Ryan Yu for sharing super unique front-end skills with me.

🎉 Happy codesign today 🎉