Using the HTML5 figure and figcaption elements correctly.
Jul 02, 2025 pm 04:25 PMIn web development, <code><figure></figure> and <code><figcaption></figcaption> are semantic tags used to organize multimedia content and their titles. Many people mistakenly think that they can only be used for pictures, but in fact they are more applicable and can improve the clarity and accessibility of the page structure.

What are <code><figure></figure> and <code><figcaption></figcaption> ?
<code><figure></figure> is a semantic tag used to wrap independent content blocks, such as pictures, charts, videos, code snippets, etc. <code><figcaption></figcaption> is its "partner" used to add titles or explanatory text to the content in <code><figure></figure> . It is usually placed at the beginning or end inside <code><figure></figure> .

These two tags are not necessary, but using them can make HTML more readable and semantic when it comes to emphasizing the association between content and titles.
In what cases should I use <code><figure></figure> and <code><figcaption></figcaption> ?
Not all images need to be wrapped in <code><figure></figure> . Here are some scenarios that are suitable for using them:

- Illustrations, photos, charts: especially those with illustration
- Referenced code block (with <code><pre class="brush:php;toolbar:false"></pre> or <code><code> )
- Video or audio embedding, especially with descriptions
- Content modules that exist independently in the page, even if there is no title
For example, if you have a schematic diagram explaining a certain concept and have a paragraph of explanatory text, it is very suitable to wrap it in <code><figure></figure> and then add a title with <code><figcaption></figcaption> .
How to use them correctly?
It is very simple to use, but there are several details to pay attention to:
- <code><figcaption></figcaption> should appear as a child element of <code><figure></figure>
- Can appear at the beginning or end of <code><figure></figure> , and determine the position according to visual logic
- Do not nest multiple <code><figcaption></figcaption> in the same <code><figure></figure>
- <code><figure></figure> is a block-level element by default, and the style can be customized as needed
<figure> <img src="/static/imghw/default1.png" data-src="chart.png" class="lazy" alt="sales data trend chart"> <figcaption>Quarterly sales trend in 2023</figcaption> </figure>
In the example above, the image and title form a complete semantic unit, which is also more friendly to screen reader users.
What are some common misunderstandings?
Although the usage is simple, many people still make the following mistakes:
- ? Put the entire picture and text combination into <code><figcaption></figcaption>
- ? The <code>alt attribute is not used reasonably, resulting in the loss of image information
- ? Force <code><figure></figure> to each picture, even if it is just a decorative picture
- ? Use <code><figcaption></figcaption> alone outside <code><figure></figure>
It is particularly important to note that decorative or non-content pictures do not require the use of <code><figure></figure> at all. It is only suitable for use when the content itself has independent meaning and needs to be assigned a title.
Basically that's it. Mastering the use of <code><figure></figure> and <code><figcaption></figcaption> can make your HTML clearer and more professional, while also helping with SEO and barrier-free access.
The above is the detailed content of Using the HTML5 figure and figcaption elements correctly.. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

The settings.json file is located in the user-level or workspace-level path and is used to customize VSCode settings. 1. User-level path: Windows is C:\Users\\AppData\Roaming\Code\User\settings.json, macOS is /Users//Library/ApplicationSupport/Code/User/settings.json, Linux is /home//.config/Code/User/settings.json; 2. Workspace-level path: .vscode/settings in the project root directory

To correctly handle JDBC transactions, you must first turn off the automatic commit mode, then perform multiple operations, and finally commit or rollback according to the results; 1. Call conn.setAutoCommit(false) to start the transaction; 2. Execute multiple SQL operations, such as INSERT and UPDATE; 3. Call conn.commit() if all operations are successful, and call conn.rollback() if an exception occurs to ensure data consistency; at the same time, try-with-resources should be used to manage resources, properly handle exceptions and close connections to avoid connection leakage; in addition, it is recommended to use connection pools and set save points to achieve partial rollback, and keep transactions as short as possible to improve performance.

DependencyInjection(DI)isadesignpatternwhereobjectsreceivedependenciesexternally,promotingloosecouplingandeasiertestingthroughconstructor,setter,orfieldinjection.2.SpringFrameworkusesannotationslike@Component,@Service,and@AutowiredwithJava-basedconfi

itertools.combinations is used to generate all non-repetitive combinations (order irrelevant) that selects a specified number of elements from the iterable object. Its usage includes: 1. Select 2 element combinations from the list, such as ('A','B'), ('A','C'), etc., to avoid repeated order; 2. Take 3 character combinations of strings, such as "abc" and "abd", which are suitable for subsequence generation; 3. Find the combinations where the sum of two numbers is equal to the target value, such as 1 5=6, simplify the double loop logic; the difference between combinations and arrangement lies in whether the order is important, combinations regard AB and BA as the same, while permutations are regarded as different;

fixture is a function used to provide preset environment or data for tests. 1. Use the @pytest.fixture decorator to define fixture; 2. Inject fixture in parameter form in the test function; 3. Execute setup before yield, and then teardown; 4. Control scope through scope parameters, such as function, module, etc.; 5. Place the shared fixture in conftest.py to achieve cross-file sharing, thereby improving the maintainability and reusability of tests.

java.lang.OutOfMemoryError: Javaheapspace indicates insufficient heap memory, and needs to check the processing of large objects, memory leaks and heap settings, and locate and optimize the code through the heap dump analysis tool; 2. Metaspace errors are common in dynamic class generation or hot deployment due to excessive class metadata, and MaxMetaspaceSize should be restricted and class loading should be optimized; 3. Unabletocreatenewnativethread due to exhausting system thread resources, it is necessary to check the number of threads, use thread pools, and adjust the stack size; 4. GCoverheadlimitexceeded means that GC is frequent but has less recycling, and GC logs should be analyzed and optimized.

Use classes in the java.time package to replace the old Date and Calendar classes; 2. Get the current date and time through LocalDate, LocalDateTime and LocalTime; 3. Create a specific date and time using the of() method; 4. Use the plus/minus method to immutably increase and decrease the time; 5. Use ZonedDateTime and ZoneId to process the time zone; 6. Format and parse date strings through DateTimeFormatter; 7. Use Instant to be compatible with the old date types when necessary; date processing in modern Java should give priority to using java.timeAPI, which provides clear, immutable and linear

TheJVMenablesJava’s"writeonce,runanywhere"capabilitybyexecutingbytecodethroughfourmaincomponents:1.TheClassLoaderSubsystemloads,links,andinitializes.classfilesusingbootstrap,extension,andapplicationclassloaders,ensuringsecureandlazyclassloa
