dexblog.ro
Acces rapid: Învață AI Învață Programare Specificații Dispozitive Comparații
HTML Toate tagurile HTML

și
în HTML

Linkuri și multimedia HTML5

Grupează o imagine, o diagramă sau un bloc de cod împreună cu legenda sa explicativă (figcaption).

Sintaxă tag 
<figure>
  <img src="grafic.png" alt="...">
  <figcaption>Figura 1: Evoluția traficului</figcaption>
</figure>

Ce face <figure> și <figcaption>

Tagul semantic <figure> marchează un conținut autonom (ilustrație, fotografie, diagramă sau extras de cod) la care se face referire din textul principal.

Tagul <figcaption> este legenda asociată, afișată de regulă dedesubtul sau deasupra imaginii. Legătura semantică este recunoscută direct de motoarele de căutare și cititoarele de ecran.

Exemple

Exemplul 1: Imagine tehnică cu legendă explicativă

figure izolează imaginea și legenda ca o unitate logică.

<figure>
  <img src="/imagini/schema-html.png" alt="Arborele DOM în HTML5" width="600" height="300">
  <figcaption>Figura 1: Reprezentarea ierarhică a arborelui DOM.</figcaption>
</figure>

Ce afișează browserul

Imaginea este centrată, iar sub ea apare textul cursiv și mai mic: „Figura 1: Reprezentarea ierarhică a arborelui DOM.”

Greșeli frecvente

  • Plasarea a mai mult de un tag
    în interiorul aceluiași
    (este permis cel mult unul, fie primul, fie ultimul element copil).

Comenzi înrudite

  • <img>: Inserează o imagine în pagină; element vid cu atribute obligatorii src (calea) și alt (textul alternativ).
  • <picture>: Container flexibil pentru imagini responsive: oferă formate moderne (AVIF, WebP) și variante adaptate la mărimea ecranului.
  • <blockquote>: Reprezintă un citat lung dintr-o altă sursă, afișat de obicei indentat sau cu o bară verticală.