What Is The HTML <figure> Tag?

What Is The HTML Figure Tag

Date First Published: 16th January 2023

Topic: Web Design & Development

Subtopic: Web Development

Article Type: Computer Terms & Definitions

Difficulty: Medium

Difficulty Level: 6/10

Learn more about what the HTML <figure> tag is in this article.

The HTML <figure> tag is used to specify separate content that has no effect on the main flow of the article, such as photos, diagrams, illustrations, sections of code, and more. The content of the figure tag is related to the main flow content, but it is defined as a separate unit.

Note: Info Icon

The <figcaption> tag is used to add a caption for the figure element.

Difference Between The <figure> and <aside> Tags

These two tags are quite different. The <figure> tag is used for content that is directly related to the main content, but defined as a separate unit, whilst the <aside> tag is used for content that is not directly related to the main content and is often placed in a sidebar, such as statistics and links to other pages.

Example Of The Figure Tag

An example of the figure tag can be seen below:

<figure> <img src="/img/cup-of-coffee.jpg" alt="Cup of coffee in a grey ceramic coffee cup" style="width:40%"> <figcaption>Cup of coffee in a grey ceramic coffee cup </figcaption> </figure>
Cup of coffee in a grey ceramic coffee cup
Cup of coffee in a grey ceramic coffee cup


Feedback

  • Is there anything that you disagree with on this page?
  • Are there any spelling, grammatical, or punctuation errors on this page?
  • Are there any broken links or design errors on this page?

If so, it is important that you tell me as soon as possible on this page.