HTML <figure> tag
HTML <figure> tag : Definition
• The <figure> tag defines self-contained contents, like illustration, diagram, photo or a code snippet that is referenced in the main text, etc
• The figure, the caption , and its contents are referenced as a single unit.
• When the content of the <figure> element is related to the main flow, even then its position is independent of the main flow, and if removed it should not be affecting the flow of the document.
<figure> tag example :
<!DOCTYPE html> <html> <body> <style> figure { border: thin #c0c0c0 solid; display: flex; flex-flow: column; padding: 5px; max-width: 220px; margin: auto; } img { max-width: 220px; max-height: 150px; } figcaption { background-color: #222; color: #fff; font: italic smaller sans-serif; padding: 3px; text-align: center; } </style> <h1>The figure element example</h1> <figure> <img src="/media/examples/elephant-660-480.jpg" alt="Learn web designing"> <figcaption>Learn web designing.</figcaption> </figure> </body> </html>