如何使用HTML图和图形标签

使用figure和figcaption标签能正确地将媒体内容与标题语义化关联，提升可访问性、SEO和结构；1. figure用于包含独立内容如图片、图表或代码片段；2. figcaption为其提供标题，可置于内部首位或末位；3. 适用于有标题的媒体、正文中引用的图表或可移除而不影响文意的内容；4. 使用时需保留图片alt属性，避免仅用于样式布局，允许多媒体组合但每figure仅一个figcaption；5. 默认无视觉样式，需CSS控制外观，但增强HTML语义性。

The figure and figcaption HTML tags are useful for semantically grouping images, diagrams, code snippets, or other media with their associated captions. Using them correctly improves accessibility, SEO, and the overall structure of your content.

What the figure and figcaption tags do

The <figure></figure> element represents self-contained content that can be moved away from the main content—like illustrations, photos, diagrams, or code examples—without affecting the document’s flow. It’s typically referenced inline but can stand alone.

The <figcaption></figcaption> element provides a caption or legend for the content inside <figure></figure>. It’s optional, but when used, it should be the first or last child of <figure></figure>.

Together, they help screen readers and search engines understand the relationship between media and their descriptions.

When to use figure and figcaption

Use these tags when:

• An image, chart, or code block has a caption.
• The content is referenced from the main text (e.g., “See Figure 1”).
• The media is self-contained and could be removed without breaking the meaning of the surrounding text.

Common use cases:

• Photos with descriptive captions
• Charts or graphs with titles
• Code snippets with explanations
• Illustrations in articles

How to use them: Basic syntax

Here’s a simple example with an image:

<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>

And with a code snippet:

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

You can also place <figcaption> before the content if you want the caption above:

<figure>
  <figcaption>Directory structure of a basic web project.</figcaption>
  <pre class="brush:php;toolbar:false">
project/
├── index.html
├── css/
│   └── style.css
└── js/
    └── main.js
  

Key points to remember

• Always use alt text on images even inside <figure></figure>. The alt attribute describes the image for accessibility, while <figcaption></figcaption> adds context.
• Don’t use <figure></figure> just for styling. It’s a semantic element, not a wrapper for floating images.
• Multiple elements can go in one <figure></figure>, like an image and a chart together with a single caption.
• Only one <figcaption></figcaption> per <figure></figure>, but it can contain multiple sentences or even paragraphs if needed.

These tags don’t change visual appearance by default—styling is up to CSS—but they make your HTML more meaningful.

Basically, if it looks like a figure in a textbook with a caption underneath (or above), <figure></figure> and <figcaption></figcaption> are probably the right choice.

以上是如何使用HTML图和图形标签的详细内容。更多信息请关注PHP中文网其他相关文章！