Kad i kako se koristi figure tag?
Sa HTML5 standardom mnogo više pažnje posvećujemo semantici kada je u pitanju kreiranje web sajtova ili aplikacija. Semantički elementi daju značenje sadržaju stranice, što omogućava i Google-u da nas lakše indeksira što dodatno utiče na SEO.
Definicija <figure> taga
Figure tag koristimo kada na stranicu želimo da ubacimo sadržaj kao sto su ilustracije, dijagrami, slike, delovi koda i slično.
Razlika između figure i img taga
Ono što moramo znati jeste da figure tag nije zamena za img, ova dva taga se koriste u kombinaciji jedan sa drugim i oba su jednako važna. Ono što razlikuje figure i img tag jeste namena, img tag koristimo kada želimo da embedujemo sliku na stranicu. A figure tag kada želimo semantički da organizujemo sadržaj oko slike.
Zašto onda figure? I šta je figcaption tag?
Najbolje da prođemo kroz primer. Recimo da želim da ubacim sliku na moju stranicu ali dodatno želim ispod slike da imam neki opis. Nekada smo to radili kao što je prikazano na kodu ispod, sliku bismo stavili u img tag i zatim u p tag stavili opis, dodatno zbog stilizacije i organizacije elemenata ova dva taga bismo obuhvatili jednim div tagom.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slika bez figure taga</title>
</head>
<body>
<h1>Menu</h1>
<div>
<img src="pizza.jpg" width="360" height="240">
<p>Pizza Capricciosa</p>
</div>
</body>
</html>Kada pokrenemo kod dobijemo sledeći rezultat:
Dakle, dobili smo sliku sa opisom, i samom korisniku to izgleda kao slika koja ispod ima opis. Ali browser ili Google Search Engine to vidi kao sliku i paragraf, za njega to nema isto značenje kao i za korisnika. Zbog toga uvodimo figure tag, div će sada zameniti figure tag, a p tag figcaption. Opis slike odnosno figcaption tag nije obavezan i možemo ga pisati ili ispred ili iznad slike. Hajde da napišemo i primer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slika sa figure tagom</title>
</head>
<body>
<h1>Menu</h1>
<figure>
<img src="pizza.jpg" width="360" height="240">
<figcaption>Pizza Capricciosa</figcaption>
</figure>
</body>
</html>Evo kako sada izgleda naša stranica. Vidimo da postoje i neke razlike u samoj stilizaciji.
Još malo primera…
Figure tag nije rezervisan samo za slike, već može da se koristi i u drugim slučajevima. Pa tako unutar figure taga mozemo da stavimo delove koda, citate, audio, video elemenate i slično.
Snipeti koda
Citati
Hvala ti što si pročitao/la naš blog post. Prijavi se na naš newsletter i primaj besplatan edukativan sadržaj direktno u inbox!
Happy coding!
