How to add a figure and figcaption in HTML5

To add figure and figcaption correctly, you need to use <figure> to wrap independent content such as pictures or charts, and use <figcaption> to provide a title or description. <figcaption> can be placed at the first or last position within <figure>. It is often used in scenes such as pictures and code snippets with descriptions. It should be ensured that the alt attribute of the image exists to ensure accessibility. At the same time, the margins, alignment and other styles can be set through CSS to enhance visual expression, and ultimately achieve a content display with clear semantics, reasonable structure and easy to understand.

To add a figure and figcaption in HTML5, you use the <figure></figure> element to wrap self-contained content like an image, diagram, or illustration, and the <figcaption></figcaption> element to provide a caption or description for that content.

Here's how to do it properly:

Use the <figure></figure> and <figcaption></figcaption> tags together

The <figure></figure> element is meant for content that could be moved to a different part of the document (like an appendix) without affecting the main flow. The <figcaption></figcaption> is optional and goes inside the <figure></figure> block. It usually appears either as the first or last child.

Basic syntax:

 <figure>
  <img src="/static/imghw/default1.png"  data-src="image.jpg"  class="lazy" alt="A description of the image">
  <figcaption>Caption describing the image or diagram.</figcaption>
</figure>

Common use cases and best practices

• Images with captions : This is the most common use.

   <figure>
    <img src="/static/imghw/default1.png"  data-src="chart.png"  class="lazy" alt="Sales growth from 2020 to 2023">
    <figcaption>Sales growth over the past three years.</figcaption>
  </figure>

• Positioning the figcaption : You can place <figcaption> at the top or bottom depending on design needs.

   <figure>
    <figcaption>Photo taken during the 2023 company retreat</figcaption>
    <img src="/static/imghw/default1.png"  data-src="retreat.jpg"  class="lazy" alt="Team at the company retreat">
  </figure>

• Other content inside <figure> : It's not just for images. You can include code snippets, diagrams, or quotes. Example with code:

   <figure>
    <pre class="brush:php;toolbar:false"><code>function hello() {
  console.log("Hello, world!");
  }</code>

  <figcaption>Example JavaScript function.

• Semantic meaning : Use <figure> only for content that is referenced from the main flow but can stand alone. Don't wrap every image in <figure> —only those that need a caption or are explicitly mentioned in the text.

• Accessibility : Always include an alt attribute on <img alt="How to add a figure and figcaption in HTML5" > elements even when using <figcaption> . Screen readers rely on alt text, and <figcaption> doesn't replace that need.

Styling tips (CSS)

You can style the figure and figcaption using CSS:

 figure {
  margin: 20px 0;
  text-align: center;
  font-style: italic;
  color: #555;
}

figure img {
  max-width: 100%;
  height: auto;
  border: 1px solid #ddd;
}

This helps visually distinguish the figure block and align the caption properly.

Basically, just wrap your media or content in <figure></figure> , add a <figcaption></figcaption> if needed, and make sure it's both semantically correct and accessible. That's it.

The above is the detailed content of How to add a figure and figcaption in HTML5. For more information, please follow other related articles on the PHP Chinese website!