Text si Imagini

HTML pune la dispozitie 6 niveluri de titluri , de la <h1> (cel mai mare si mai important) la <h6> (cel mai mic). Aceste tag-uri sunt esentiale pentru organizarea continutului pe o pagina web, exact cum capitolele si subcapitolele organizeaza o carte.

Gandeste-te la titluri ca la un cuprins. <h1> este titlul cartii (apare o singura data), <h2> sunt capitolele mari, <h3> sunt subcapitolele, si tot asa. Un site bine structurat foloseste titlurile in ordine ierarhica, fara sa sara de la h1 direct la h4.

<h1>Titlu Principal (cel mai mare)</h1>
<h2>Subtitlu - Capitol</h2>
<h3>Sectiune din capitol</h3>
<h4>Subsectiune</h4>
<h5>Detaliu</h5>
<h6>Cel mai mic titlu</h6>

O regula importanta: foloseste <h1> o singura data pe pagina . Acesta este titlul principal si ii spune atat utilizatorului, cat si motoarelor de cautare (Google, Bing) despre ce este pagina. Daca ai doua tag-uri h1 pe aceeasi pagina, Google nu stie care este subiectul principal si pagina ta poate aparea mai jos in rezultatele cautarii.

Browserul afiseaza fiecare nivel de titlu cu o dimensiune diferita: h1 este cel mai mare, h6 cel mai mic. Insa dimensiunea vizuala se poate schimba cu CSS - ceea ce conteaza cu adevarat este ierarhia semantica . Un h2 spune "aceasta este o sectiune importanta", chiar daca il faci vizual mai mic cu CSS.

In practica, cele mai folosite niveluri sunt h1, h2 si h3. Rareori vei avea nevoie de h5 sau h6, decat pe pagini foarte complexe cu multe niveluri de continut, ca de exemplu documentatia tehnica a unui limbaj de programare.

Un exemplu concret: pe un site de stiri, <h1> este titlul articolului ("Echipa Romaniei castiga medalia de aur"), <h2> sunt sectiunile mari ale articolului ("Parcursul competitiei", "Reactii"), iar <h3> sunt subsectiunile ("Rezultatele din semifinale", "Declaratiile antrenorului"). Aceasta structura ajuta atat cititorul sa navigheze rapid, cat si Google sa inteleaga despre ce este articolul.

Titlurile sunt si un instrument de accesibilitate . Persoanele care folosesc cititoare de ecran (screen readers) pot naviga rapid prin pagina saltand de la titlu la titlu, la fel cum tu scanezi vizual o pagina cautand titlurile ingrosite. Daca titlurile sunt bine structurate, navigarea devine rapida si intuitiva pentru toti utilizatorii.

Nu folosi niciodata tag-uri de titlu doar pentru a face textul mai mare sau mai ingrosit. Daca vrei text mare fara semnificatie de titlu, foloseste CSS ( font-size si font-weight ). Titlurile au un rol structural precis si folosirea lor gresita deruteaza atat motoarele de cautare, cat si utilizatorii care depind de tehnologii asistive pentru navigare. Retine: HTML = structura si semnificatie, CSS = aspect vizual.

Tag-ul <p> (de la "paragraph") creeaza un paragraf de text . Este cel mai folosit tag din HTML - aproape tot textul de pe o pagina web se afla in interiorul unor paragrafe. Browserul adauga automat un spatiu (margin) deasupra si dedesubt fiecarui paragraf, pentru a le separa vizual.

<p>Acesta este primul paragraf. Browserul il afiseaza
ca un bloc de text cu spatiu deasupra si dedesubt.</p>

<p>Acesta este al doilea paragraf. Observa spatiul
automat dintre cele doua paragrafe.</p>

Un lucru important de inteles: HTML ignora spatiile multiple si enter-urile din codul sursa. Chiar daca apesi Enter de 10 ori intre doua cuvinte in codul HTML, browserul le va afisa pe acelasi rand, separate de un singur spatiu. Aceasta se numeste "whitespace collapsing" (comprimarea spatiilor albe).

De exemplu, daca scrii in HTML: Salut     lume cu 5 spatii intre cuvinte, browserul va afisa doar "Salut lume" cu un singur spatiu. Pentru a forta spatii sau randuri noi, trebuie sa folosesti tag-uri speciale pe care le vei invata in continuare ( <br> pentru rand nou).

In interiorul unui paragraf poti folosi tag-uri de formatare inline: <strong> pentru text bold , <em> pentru text italic , <u> pentru text subliniat si <mark> pentru text evidentiat (ca un marker galben). Aceste tag-uri nu creeaza un bloc nou, ci formatteaza textul in cadrul paragrafului.

Sfat practic: nu folosi paragrafe goale ( <p></p> ) pentru a adauga spatiu pe pagina. In loc, foloseste CSS (proprietatea margin ) pentru a controla spatiul dintre elemente. Paragrafele goale sunt considerate o practica proasta in dezvoltarea web profesionala.

Un alt tag util pentru text este <blockquote> , care creeaza un citat vizual distinct - browserul il indenteaza automat si il separa de restul textului. Se foloseste pentru citate dintr-o carte, declaratii ale unor persoane sau fragmente din alte surse. Exemplu: <blockquote>Internetul este cea mai mare biblioteca din lume.</blockquote> .

Pentru textul preformatat (unde spatiile si enter-urile chiar conteaza), exista tag-ul <pre> (preformatted text). In interiorul lui, browserul pastreaza toate spatiile si intreruperile de rand exact cum le-ai scris. Este folosit frecvent pentru a afisa cod sursa pe paginile web, deoarece indentarea si spatiile sunt importante in programare.

HTML ofera mai multe tag-uri pentru a formata textul in interiorul paragrafelor. Cele mai importante sunt <strong> , <em> si <mark> . Fiecare are atat un efect vizual, cat si o semnificatie semantica (adica ii spune browserului si motoarelor de cautare ce rol are acel text).

<p>Acest cuvant este <strong>foarte important</strong>.</p>
<p>Acest cuvant este <em>accentuat</em>.</p>
<p>Acest cuvant este <mark>evidentiat</mark>.</p>
<p>Acest cuvant este <u>subliniat</u>.</p>
<p>Acesta este <small>text mai mic</small>.</p>

<strong> face textul bold (ingrosit) si semnaleaza ca textul este important. Motoarele de cautare acorda atentie suplimentara cuvintelor din <strong> . Exista si tag-ul <b> care face textul bold vizual, dar fara importanta semantica. In practica moderna, se prefera <strong> .

<em> (de la "emphasis") face textul italic si semnaleaza ca textul este accentuat, ca si cum l-ai pronunta cu accent in vorbire. Similar, exista si <i> care face textul italic fara semnificatie semantica - folosit de obicei pentru titluri de carti, termeni straini sau nume stiintifice.

<mark> evidentiaza textul cu un fundal galben, ca un marker pe hartie. Este util pentru a atrage atentia asupra unor informatii cheie, cum ar fi un termen nou sau un raspuns important. Culoarea de evidententiere poate fi schimbata cu CSS.

Aceste tag-uri se pot combina : <strong><em>text bold si italic</em></strong> . Ordinea nu conteaza, dar asigura-te ca le inchizi in ordine inversa (tag-ul deschis ultimul se inchide primul). Aceasta regula se numeste "proper nesting" (imbricare corecta).

Alte tag-uri utile de formatare sunt: <sub> pentru text subscript (de exemplu formule chimice: H ₂ O se scrie H<sub>2</sub>O ) si <sup> pentru text superscript (de exemplu puteri matematice: x ² se scrie x<sup>2</sup> ). Tag-ul <code> afiseaza text cu font monospaced, ideal pentru fragmente de cod in texte tehnice.

Uneori ai nevoie sa treci pe un rand nou fara sa incepi un paragraf complet nou, sau sa adaugi o linie de separare intre doua sectiuni. HTML ofera doua tag-uri speciale pentru aceste situatii: <br> si <hr> .

Tag-ul <br> (de la "break") forteaza o linie noua . Este util in situatii precum adrese postale, poezii sau texte de cantece unde trebuie sa pastrezi formatarea pe randuri. Este un tag "self-closing" - nu are tag de inchidere, se scrie doar <br> fara </br> .

<p>
  Strada Libertatii, nr. 42<br>
  Apartament 5, Etaj 3<br>
  Bucuresti, Romania
</p>

Tag-ul <hr> (de la "horizontal rule") adauga o linie orizontala pe toata latimea paginii. Este folosit pentru a separa vizual doua sectiuni de continut diferit, ca o "linie de demarcatie". La fel ca <br> , este self-closing.

<h2>Capitolul 1</h2>
<p>Continutul primului capitol...</p>

<hr>

<h2>Capitolul 2</h2>
<p>Continutul celui de-al doilea capitol...</p>

O greseala frecventa a incepatorilor este sa foloseasca mai multe tag-uri <br> consecutive ( <br><br><br> ) pentru a crea spatiu vertical pe pagina. Aceasta este o practica proasta. In schimb, foloseste CSS (proprietatea margin ) pentru a controla spatiul. Tag-ul <br> trebuie folosit doar cand ai nevoie de un rand nou in cadrul aceluiasi bloc de text.

Aspect vizual: <hr> apare implicit ca o linie subtire gri, dar poti schimba aspectul cu CSS - poti modifica culoarea, grosimea, stilul (continua, punctata, intrerupta) si chiar latimea liniei. Multe site-uri moderne folosesc <hr> stilizat ca element decorativ intre sectiuni.

Un alt tag self-closing pe care il vei intalni este <wbr> (Word Break Opportunity), care sugereaza browserului un loc posibil de intrerupere a unui cuvant foarte lung. De exemplu, un URL lung poate fi intrerupt pe mai multe randuri folosind <wbr> in locurile potrivite, fara a folosi <br> care forteaza intreruperea mereu.

Listele sunt un mod excelent de a organiza informatia in format usor de citit. HTML ofera doua tipuri principale de liste: liste neordonate (cu buline) si liste ordonate (cu numere). Ambele folosesc tag-ul <li> (list item) pentru fiecare element din lista.

Lista neordonata ( <ul> - Unordered List) afiseaza elementele cu buline (puncte). Se foloseste cand ordinea elementelor nu conteaza, de exemplu: o lista de cumparaturi, ingredientele unei retete sau caracteristicile unui produs.

<h3>Lista de cumparaturi:</h3>
<ul>
  <li>Paine</li>
  <li>Lapte</li>
  <li>Mere</li>
  <li>Branza</li>
</ul>

Lista ordonata ( <ol> - Ordered List) afiseaza elementele cu numere (1, 2, 3...). Se foloseste cand ordinea conteaza, de exemplu: pasii unei retete, un clasament sau instructiuni de instalare.

<h3>Cum faci o pagina web:</h3>
<ol>
  <li>Creeaza un fisier .html</li>
  <li>Scrie structura HTML</li>
  <li>Adauga continut</li>
  <li>Deschide in browser</li>
</ol>

Poti crea si liste imbricate (liste in liste) punand un <ul> sau <ol> in interiorul unui <li> . Aceasta tehnica este utila pentru meniuri de navigare cu subcategorii sau pentru organizarea ierarhica a informatiei, la fel ca structura de foldere de pe calculator.

Stilul bulinelor (pentru ul) sau al numerotarii (pentru ol) poate fi schimbat cu CSS folosind proprietatea list-style-type . De exemplu, poti folosi patrate in loc de cercuri, litere in loc de numere, sau chiar sa elimini complet bulinele (foarte util pentru meniuri de navigare stilizate).

Un aspect important: nu pune text direct in <ul> sau <ol> - continutul trebuie sa fie mereu in interiorul tag-urilor <li> . Codul <ul>Text</ul> este invalid; corect este <ul><li>Text</li></ul> . Validatorul HTML va semnala aceasta greseala daca o faci.

In dezvoltarea web moderna, listele neordonate ( <ul> ) sunt folosite foarte frecvent pentru meniuri de navigare . Fiecare link din meniu este un element <li> , iar cu CSS se elimina bulinele si se aranjeaza elementele pe orizontala. Aceasta este practica standard pe aproape toate site-urile profesionale.

Exista si un al treilea tip de lista, mai putin cunoscut: lista de definitii ( <dl> - Definition List). Aceasta foloseste <dt> (Definition Term) pentru termen si <dd> (Definition Description) pentru explicatie. Este ideala pentru glosare, FAQ-uri sau orice structura de tip intrebare-raspuns sau termen-explicatie.

Tag-ul <img> afiseaza o imagine pe pagina web. Este unul dintre cele mai folosite tag-uri in HTML si are doua atribute esentiale: src (sursa imaginii) si alt (textul alternativ). Tag-ul <img> este self-closing - nu are tag de inchidere.

<img src="pisica.jpg" alt="O pisica portocalie dormind">

Atributul src (de la "source" - sursa) contine calea catre imagine . Aceasta poate fi o cale relativa (un fisier din acelasi folder: src="poze/pisica.jpg" ) sau un URL complet catre o imagine de pe internet (de exemplu: src="https://exemplu.com/imagine.jpg" ).

Atributul alt (de la "alternative" - alternativ) contine o descriere textuala a imaginii. Acest text apare in doua situatii: cand imaginea nu se poate incarca (fisier lipsa, conexiune lenta) si cand un utilizator cu deficiente de vedere foloseste un cititor de ecran (screen reader) care citeste acest text cu voce tare.

Scrierea unui text alt bun este o abilitate importanta. Nu scrie doar "imagine" sau "poza" - descrie ce se vede in imagine: "Elevi lucrind la calculatoare in laboratorul de informatica" este mult mai util decat "poza". Pentru imagini decorative care nu adauga informatie (de exemplu un chenar ornamental), poti folosi alt="" (alt gol).

Formatele de imagine suportate de browsere sunt: JPG/JPEG (ideal pentru fotografii, dimensiune mica), PNG (ideal pentru grafice, suporta transparenta), GIF (suporta animatii simple), SVG (grafice vectoriale, se redimensioneaza fara pierdere de calitate) si WebP (format modern, dimensiune foarte mica cu calitate buna).

O greseala frecventa a incepatorilor este sa confunde atributele src si href . Retine: src se foloseste pentru resurse incorporate in pagina (imagini, video, audio - lucruri care apar direct pe pagina), pe cand href se foloseste pentru link-uri (legaturi catre alte pagini sau resurse). Deci imaginile au src , link-urile au href .

Tag-ul <img> este un element inline , ceea ce inseamna ca nu ocupa un rand intreg - alte elemente pot sta langa el pe acelasi rand. Daca vrei ca o imagine sa apara singura pe rand (ca un bloc), o poti pune intr-un <figure> sau ii poti adauga regula CSS display: block; . Aceasta distinctie dintre elementele inline si block este importanta si o vei aprofunda in lectiile urmatoare despre CSS.

Accesibilitatea web inseamna sa faci site-ul utilizabil de catre toata lumea, inclusiv persoanele cu dizabilitati. Atributul alt la imagini este cel mai simplu si important pas catre un site accesibil. Fara el, persoanele nevazatoare nu pot intelege ce reprezinta imaginile de pe pagina ta.

Cand o imagine nu se poate incarca (fisierul a fost sters, calea este gresita, conexiunea la internet este lenta), browserul afiseaza in locul imaginii textul din atributul alt . De aceea este esential sa scrii descrieri relevante - utilizatorul trebuie sa inteleaga ce continea imaginea chiar si fara sa o vada.

<!-- Alt BUN - descriptiv -->
<img src="echipa.jpg" alt="Echipa de robotica prezentand proiectul la concurs">

<!-- Alt SLAB - prea generic -->
<img src="echipa.jpg" alt="poza">

<!-- Alt pentru imagine decorativa -->
<img src="ornament.png" alt="">

In afara de accesibilitate, atributul alt ajuta si la SEO (Search Engine Optimization). Google nu "vede" imaginile - citeste textul alt pentru a intelege ce contine imaginea si o indexeaza in Google Images. O descriere buna in alt poate aduce trafic suplimentar pe site-ul tau din cautarile de imagini.

Exista si situatii in care ar trebui sa lasi alt-ul gol ( alt="" ), dar niciodata sa il omiti complet. Alt-ul gol se foloseste pentru imagini pur decorative (chenaruri, fundaluri, icoane care au deja text asociat). Daca omiti complet atributul alt, validatorul HTML va marca o eroare si cititorii de ecran vor citi numele fisierului (de exemplu "DSC_0047.jpg"), ceea ce este confuz si neprofesional.

Un test simplu: inchide ochii si cere cuiva sa iti citeasca textul alt. Daca intelegi ce era in imagine fara sa o vezi, ai scris un alt bun. Daca nu, rescrie-l cu mai multe detalii descriptive.

Accesibilitatea nu este optionala - in multe tari, inclusiv in Uniunea Europeana, exista legi care obliga site-urile publice (institutii, scoli, spitale) sa fie accesibile. Directiva Europeana de Accesibilitate Web (2016/2102) cere ca toate site-urile institutiilor publice sa respecte standardul WCAG (Web Content Accessibility Guidelines). Atributul alt este primul pas in respectarea acestor norme.

Pe langa accesibilitate, atributul alt ajuta si in situatii practice de zi cu zi. De exemplu, cand conexiunea la internet este lenta (pe telefon, in metrou sau in zone rurale), imaginile se incarca greu sau deloc. Textul alt apare instant si permite utilizatorului sa inteleaga continutul paginii chiar si fara imagini. Aceasta experienta este mult mai buna decat un spatiu gol sau o iconita de eroare fara explicatie.

Imaginile pot fi afisate la dimensiunea lor originala sau le poti redimensiona folosind atributele width (latime) si height (inaltime). Valorile sunt in pixeli si se scriu fara "px" cand sunt atribute HTML (dar cu "px" cand sunt in CSS).

<!-- Dimensiune fixa in pixeli -->
<img src="poza.jpg" alt="Descriere" width="300" height="200">

<!-- Doar latimea - inaltimea se calculeaza proportional -->
<img src="poza.jpg" alt="Descriere" width="300">

<!-- Cu CSS (metoda preferata) -->
<img src="poza.jpg" alt="Descriere" style="width: 50%;">

Un sfat important: daca setezi doar width fara height , browserul calculeaza automat inaltimea pentru a pastra proportiile originale ale imaginii. Aceasta este de obicei ce vrei sa obtii. Daca setezi ambele atribute cu valori care nu respecta proportia originala, imaginea va fi deformata (intinsa sau comprimata).

De ce sa setezi width si height chiar daca vrei dimensiunea originala? Pentru performanta . Cand browserul stie dimensiunile imaginii inainte sa o descarce, poate rezerva spatiul corect pe pagina. Fara aceste atribute, pagina "sare" pe masura ce imaginile se incarca, ceea ce este deranjant pentru utilizator. Aceasta problema se numeste "layout shift".

In practica moderna, dimensionarea imaginilor se face mai des prin CSS decat prin atribute HTML. CSS ofera mai mult control: max-width: 100%; face imaginea responsiva (nu depaseste containerul), width: 50%; o face sa ocupe jumatate din container, iar object-fit: cover; permite taierea imaginii pentru a umple exact un spatiu dat.

O regula de aur: nu incarca imagini uriase pe care le redimensionezi in HTML/CSS . Daca afisezi o imagine la 300x200px, nu folosi un fisier de 4000x3000px - browserul trebuie sa descarce intreaga imagine, ceea ce incetineste pagina. Foloseste un editor de imagini pentru a salva imaginea la dimensiunea apropiata de cea la care o vei afisa.

Pentru a face o imagine responsiva (sa se adapteze la dimensiunea ecranului), cea mai simpla metoda CSS este: img { max-width: 100%; height: auto; } . Aceasta regula face ca imaginea sa nu depaseasca niciodata latimea containerului, micsorandu-se automat pe ecrane mici, dar pastrand proportiile corecte. Este una dintre cele mai folosite reguli CSS in web design modern.

Un instrument gratuit si util pentru optimizarea imaginilor este Squoosh (squoosh.app), dezvoltat de Google. Il poti folosi direct in browser fara instalare - tragi imaginea pe pagina, alegi formatul si calitatea dorita, si descarci varianta optimizata. Poate reduce dimensiunea unui fisier imagine cu 70-90% fara pierdere vizibila de calitate, ceea ce face pagina ta sa se incarce mult mai repede.

Cand specifici sursa unei imagini in atributul src , ai doua optiuni: o cale relativa (relativa la pozitia fisierului HTML curent) sau o cale absoluta (URL-ul complet de pe internet). Intelegerea diferentei este esentiala pentru a evita imaginile "lipsa" (broken images).

<!-- Cale relativa - imagine in acelasi folder -->
<img src="pisica.jpg" alt="Pisica">

<!-- Cale relativa - imagine intr-un subfolder -->
<img src="poze/pisica.jpg" alt="Pisica">

<!-- Cale relativa - imagine in folderul parinte -->
<img src="../imagini/pisica.jpg" alt="Pisica">

<!-- Cale absoluta - URL complet de pe internet -->
<img src="https://exemplu.com/poze/pisica.jpg" alt="Pisica">

Cu cai relative , pozitia imaginii se calculeaza pornind de la fisierul HTML care o foloseste. Daca fisierul HTML si imaginea sunt in acelasi folder, scrii doar numele fisierului. Daca imaginea e intr-un subfolder, scrii subfolder/imagine.jpg . Daca imaginea e in folderul parinte, folosesti ../imagine.jpg (doua puncte si slash inseamna "un nivel mai sus").

Cu cai absolute , scrii URL-ul complet incepand cu https:// . Aceasta metoda se foloseste pentru imagini gazduite pe alte site-uri. Dezavantajul este ca daca site-ul respectiv sterge imaginea sau se inchide, imaginea ta dispare. De aceea, pentru proiecte serioase, este mai bine sa descarci imaginea si sa o pui in folderul propriu.

O structura buna de proiect are un folder dedicat pentru imagini. De exemplu: folderul principal contine index.html si un subfolder img/ cu toate imaginile. Asa, toate caile relative sunt de forma img/imagine.jpg , ceea ce este clar si organizat. Aceasta conventie este folosita pe toate site-urile profesionale.

Atentie la literele mari si mici in numele fisierelor! Pe Windows, Pisica.jpg si pisica.jpg sunt acelasi fisier, dar pe serverele web (care ruleaza de obicei Linux), sunt fisiere diferite. Regula de aur: foloseste mereu litere mici, fara spatii si fara caractere speciale in numele fisierelor (ex: pisica-portocalie.jpg nu Pisica Portocalie.jpg ).

Un truc util pentru cai relative: simbolul ./ (punct si slash) inseamna "folderul curent". Deci src="./poze/pisica.jpg" si src="poze/pisica.jpg" sunt echivalente. Simbolul ../ (doua puncte si slash) inseamna "folderul parinte" - un nivel mai sus in ierarhia de foldere. Poti folosi mai multe ../ consecutive: ../../imagine.jpg urca doua niveluri mai sus.

Gandeste-te la cai ca la indicatii de drum. O cale relativa este ca "mergi la stanga, apoi a doua cladire" (depinde de unde esti), pe cand o cale absoluta este ca "Strada Victoriei, numarul 42, Bucuresti" (functioneaza de oriunde). Ambele au rolul lor, dar pentru fisiere locale din proiectul tau, caile relative sunt mereu de preferat.

Iata o structura tipica de proiect web si cum arata caile relative corespunzatoare:

proiect/
  index.html          <!-- pagina principala -->
  despre.html         <!-- alta pagina -->
  img/
    logo.png          <!-- din index.html: src="img/logo.png" -->
    banner.jpg        <!-- din index.html: src="img/banner.jpg" -->
  pagini/
    contact.html      <!-- din contact.html catre logo: src="../img/logo.png" -->

Tag-urile <figure> si <figcaption> sunt folosite pentru a grupa o imagine cu o legenda (caption) descriptiva. Aceasta este metoda corecta semantic de a asocia un text explicativ cu o imagine, un grafic sau un exemplu de cod.

<figure>
  <img src="apus.jpg" alt="Apus de soare peste mare">
  <figcaption>Apus de soare fotografiat pe plaja din Vama Veche, august 2024</figcaption>
</figure>

Gandeste-te la <figure> ca la o fotografie dintr-o carte sau un ziar. Sub fotografie exista mereu un text mic care explica ce se vede in imagine, cine a facut fotografia sau cand a fost facuta. Acesta este rolul lui <figcaption> .

Diferenta fata de a pune pur si simplu un <p> sub o imagine este semnificatia semantica . Cu <figure> si <figcaption> , browserul si motoarele de cautare stiu ca textul este o legenda asociata imaginii, nu un paragraf oarecare. Cititorii de ecran vor anunta "Figura: Apus de soare fotografiat pe plaja..." ceea ce este mult mai clar.

<figure> nu este limitat doar la imagini. Il poti folosi si pentru: grafice, diagrame, exemple de cod, citate sau orice continut care poate fi referit din textul principal. In articole stiintifice online, de exemplu, vei vedea frecvent "vezi Figura 3" - tocmai tag-ul <figure> face posibila aceasta structura.

Un detaliu practic: <figcaption> poate fi plasat fie la inceputul, fie la sfarsitul elementului <figure> . Cel mai des se pune la sfarsit (sub imagine), dar exista si situatii in care legenda apare deasupra imaginii. CSS-ul poate apoi sa stilizeze legenda - text mic, italic, centrat, culoare mai subtila - pentru un aspect profesional.

Poti pune chiar si mai multe imagini intr-un singur <figure> , de exemplu o serie de fotografii ale aceluiasi eveniment cu o singura legenda comuna. Aceasta este o tehnica frecvent folosita in articolele de presa online si in portofoliile fotografilor.

<!-- Mai multe imagini cu o singura legenda -->
<figure>
  <img src="etapa1.jpg" alt="Echipa la start">
  <img src="etapa2.jpg" alt="Echipa in actiune">
  <img src="etapa3.jpg" alt="Echipa la premiere">
  <figcaption>
    Echipa de robotica la Concursul National, mai 2025
  </figcaption>
</figure>