Use HTML's <figure> and <figcaption> to add caption text to images or media intuitively and semantically. 1. <figure> is used to wrap independent media content, such as pictures, videos or code blocks; 2. <figcaption> is placed as its explanatory text, and can be located above or below the media; 3. They not only improve the clarity of the page structure, but also enhance accessibility and SEO effects; 4. When using it, you should pay attention to avoid abuse, and apply to content that needs to be emphasized and accompanied by instructions, rather than ordinary decorative images; 5. The alt attribute of cannot be ignored, which is different from figcaption; 6. The figcaption is flexible and can be placed at the top or bottom of the figure as needed. Using these two tags correctly helps to build semantic, easy-to-understand web content.

When adding caption text to images or media, using HTML <figure></figure> and <figcaption></figcaption> is a very intuitive and semantic approach. They not only help organize page structure, but also improve accessibility and SEO performance. The key is to understand the purpose and correct way of writing these two tags.

Basic structure: How to connect pictures and explanatory texts

The <figure></figure> tag is used to wrap an independent content block, such as pictures, charts, videos, etc.; while <figcaption></figcaption> is its "title" or "explanation text", which is usually placed in <figure></figure> and can appear in front or behind the content.

For example:

 <figure>
  <img src="/static/imghw/default1.png"  data-src="example.jpg"  class="lazy" alt="example picture">
  <figcaption>This is a brief description of the picture</figcaption>
</figure>

In this way, the browser and screen readers will know that this text is a description of the image. You can also place <figcaption> at the top of <figure> and let the caption text be displayed above the picture.

Various media are suitable, not just pictures

Although the most common one is to use it with <img src="/static/imghw/default1.png" data-src="example.mp4" class="lazy" alt="How to associate captions with images or media using the html figure and figcaption elements?" > , <figure> and <figcaption> are also suitable for other types of media, such as audio, video, or code blocks.

For example, embed a video with instructions:

 <figure>
  <video controls>
    <source type="video/mp4">
    Your browser does not support video playback.
  </video>
  <figcaption>This is a demonstration video showing the product usage process</figcaption>
</figure>

For example, show a piece of code:

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

As long as the content is a "independent unit", you can consider wrapping it with <figure></figure> and adding instructions with <figcaption></figcaption> .

Several details to pay attention to in practical applications

• Don't abuse it : If it's just a normal inline picture (such as the decorative picture in the article), there is no need to use <figure></figure> . It is more suitable for media content that requires separate emphasis and description.
• Semantic priority : These tags are mainly used to enhance document semantics rather than style layout. Although you can use CSS to customize the style, don't force it to apply it for the sake of typography.
• alt text is still important : even if there is <figcaption></figcaption> , don't forget the alt attribute of <img alt="How to associate captions with images or media using the html figure and figcaption elements?" > . They do differently: alt is the alternative text when the image itself is not visible, while figcaption is an additional description.
• Flexible location : <figcaption></figcaption> can be placed at the top or bottom of the inside of <figure></figure> , depending on whether you want it to appear above or below the media.

Basically that's it

Overall, <figure></figure> and <figcaption></figcaption> are a very practical set of tags in HTML that are used to add instructions to media content. Not only do they make the structure clearer, they also help accessibility and search engines identify content intent. Pay attention to semantics and scenes when using them, and don’t overuse them.

The above is the detailed content of How to associate captions with images or media using the html figure and figcaption elements?. For more information, please follow other related articles on the PHP Chinese website!