Sémantický element
<figure>
Obrázek, graf nebo ukázka kódu, ke kterým patří popisek.
V náhledu vidíte, kam se dostaneme. Skrolujte dolů a postavíme to krok za krokem.
Zápis
Kontejner pro obrázek
figure je párový tag. Uvnitř je samotný obsah, tady obrázek img.
Obrázek je širší než okno a přetéká. Opravíme to za chvíli pomocí CSS.
Zápis
Popisek figcaption
Popisek patří dovnitř figure, jako první nebo poslední prvek. Prohlížeč pak ví, že text popisuje právě tento obrázek.
Atributy
alt, width a height
figure má jen globální atributy. Důležité atributy má obrázek uvnitř:
alt popisuje, co na obrázku je, pro ty, kdo ho nevidí. width a height řeknou prohlížeči rozměry dopředu, takže stránka při načítání neposkakuje.
alt není totéž co popisek. Popisek vidí všichni, alt obrázek nahrazuje.
Styl
Obrázek, který se vejde
Tři řádky CSS, které patří na každý web. Obrázek nikdy nebude širší než jeho kontejner a zachová si poměr stran.
Tohle je první krok k responzivitě: stejný obrázek se vejde do desktopu i do telefonu.
Styl
Margin a popisek
Prohlížeč dává figure velký výchozí margin. Ten zrušíme a popisek ztlumíme.
V kontextu
Obrázek v textu článku
V článku můžeme obrázek posunout doprava, aby ho text obtékal. K tomu slouží float.
Responzivita
Na mobilu přes celou šířku
Na telefonu by vedle obrázku zbyl jen úzký sloupeček textu. Obtékání proto zrušíme a obrázek roztáhneme.
Přepněte náhled na desktop klávesou M a porovnejte.
Shrnutí
Kdy použít figure
Ano
- obrázek, fotka nebo ilustrace s popiskem
- graf, schéma, tabulka
- ukázka kódu nebo citace s uvedením zdroje
Ne
- dekorativní obrázek bez popisku. Tam stačí samotný
img. - logo nebo ikona v menu