Znacznik figure HTML przydaje się wtedy, gdy treść ma własny sens i można ją potraktować jako osobny blok: obraz z podpisem, diagram, wykres albo fragment kodu, do którego chcesz dodać opis. Ja traktuję go jak semantyczne opakowanie dla rzeczy, którą da się wyrwać z akapitu bez utraty znaczenia. W tym artykule pokazuję, kiedy ten element ma sens, jak go poprawnie łączyć z figcaption i gdzie łatwo popełnić błąd.
Najważniejsze zasady używania elementu figure
-
-
- Najczęściej używa się go przy ilustracjach, diagramach, wykresach, zrzutach ekranu i listingach kodu.
- Jeśli element jest tylko technicznym kontenerem, lepszy będzie zwykły .
- Przy obrazach nadal potrzebny jest sensowny
alt, nawet jeśli obraz siedzi w- To nie jest trik wizualny, tylko sposób na lepszą semantykę i czytelniejszy kod.
Co oznacza element figure i kiedy ma sens
Najprościej myślę o
Dlatego w
Warto pamiętać o jednym prostym teście: jeśli po wyrwaniu bloku z kontekstu dalej wiadomo, co przedstawia, to zwykle jest dobry kandydat na ten element. Skoro już wiemy, czym on jest, czas zobaczyć, kiedy wygrywa z zwykłym
div.Kiedy figure wygrywa z div, a kiedy lepiej go nie używać
Największy błąd widzę wtedy, gdy ktoś używa
Poniżej trzymam prostą regułę wyboru. Dzięki niej szybciej decyduję, czy dana treść naprawdę zasługuje na
Przypadek Figure Div lub inny element Obraz z podpisem Tak, bo obraz i podpis tworzą jedną całość. Rzadko, chyba że podpis w ogóle nie jest potrzebny. Diagram w artykule technicznym Tak, szczególnie gdy odwołujesz się do niego w tekście. Nie, jeśli to tylko element dekoracyjny w layoucie. Listing kodu z opisem Tak, gdy chcesz dodać podpis albo numer przykładu. Można użyć samego , jeśli podpis nie jest potrzebny.Karta produktu lub kafel UI Zwykle nie. Tak, bo to najczęściej komponent layoutowy, nie samodzielna figura. Box na odstępy, tło, flexa Nie. Tak, bo to wyłącznie warstwa techniczna. Ta różnica ma praktyczne skutki. Dobry wybór elementu poprawia czytelność kodu, ułatwia pracę zespołowi i zmniejsza liczbę domysłów podczas utrzymania projektu. Gdy wybór jest jasny, można przejść do samego zapisu HTML.
Jak poprawnie zapisać figure i figcaption
W kodzie najważniejsza zasada jest prosta:
Logowanie użytkownika w trzech krokach W przypadku kodu układ bywa podobny. Gdy robię materiał edukacyjny, podpis pozwala od razu odróżnić przykład od zwykłego bloku kodu w tekście.
Przykład 1. Prosty układ karty z użyciem semantycznego kontenera Przeczytaj również: Cień w CSS - Jak tworzyć naturalne efekty i unikać błędów?
Frontend starter
Zestaw podstawowych informacji dla początkujących.
Ja pilnuję jeszcze jednej rzeczy: podpis ma mówić coś więcej niż sam obraz czy kod. Jeśli figcaption tylko powtarza to, co już widać, zwykle nie wnosi wartości. To prowadzi nas do tematu, który w praktyce jest równie ważny jak sam HTML, czyli dostępności.
Dlaczego figure pomaga w dostępności i porządku treści
alt, który opisuje sam grafik.Tu często widzę nieporozumienie: ludzie piszą identyczny tekst w
alti w podpisie, a potem zastanawiają się, po co ten podpis w ogóle istnieje. Ja rozdzielam te dwie role.altopisuje zawartość obrazu, a podpis dopowiada kontekst, komentarz albo źródło odniesienia. Dzięki temu użytkownik nie słyszy dwa razy tego samego.-
Dobry
altmówi, co przedstawia grafika. - Dobry podpis wyjaśnia, dlaczego ta grafika jest ważna.
-
Pusty
altma sens przy obrazach dekoracyjnych, ale wtedy zwykle nie potrzebujesz też figury.
W praktyce oznacza to jedno: nie traktuję semantyki jak ozdobnika. Jeśli blok ma realną wartość informacyjną, daję mu właściwy kontekst, bo to poprawia zarówno użyteczność, jak i jakość struktury dokumentu. A skoro już wiemy, co działa, warto nazwać pułapki, które najczęściej psują efekt.
Najczęstsze błędy, które psują sens tego elementu
W projektach frontendowych widzę kilka powtarzalnych błędów. Najgorszy z nich to używanie
Błąd Skutek Lepiej zrobić tak Używanie figury tylko dla wyglądu Semantyka staje się przypadkowa i myląca. Zostawić i stylować go normalnie.Podpis nie opisuje całości Treść wygląda poprawnie, ale jest słabo zrozumiała. Napisać podpis, który dodaje kontekst albo numer przykładu. Brak sensownego altprzy obrazieStrona traci na dostępności. Opisać obraz krótko i konkretnie, bez lania wody. Wrzucenie do jednego Blok przestaje być jedną, spójną jednostką. Podzielić treść na osobne figury albo użyć innego układu. Traktowanie figury jak magicznego boosta SEO Oczekiwania są większe niż realny efekt. Myśleć o strukturze i czytelności, nie o sztuczce rankingowej. Ja patrzę na to dość prosto: jeśli element ma własną historię i można go przywołać jako osobny argument w treści,
Co zapamiętać, zanim użyjesz figure w projekcie
Najlepszy filtr decyzji brzmi: czy ten blok nadal ma znaczenie, jeśli wyjmę go z akapitu i pokażę osobno? Jeśli tak, najpewniej masz przed sobą dobrego kandydata na
,albo sam układ z.W praktyce najbardziej cenię w tym elemencie trzy rzeczy: porządek semantyczny, lepszą dostępność i czytelniejszy kod dla zespołu. To nie jest wielki, spektakularny mechanizm, ale w dobrym frontendzie właśnie takie drobne decyzje robią różnicę. Jeśli budujesz stronę edukacyjną, blog techniczny albo dokumentację, warto sięgać po ten wzorzec świadomie, a nie z przyzwyczajenia.
Najkrócej mówiąc,
- Przy obrazach nadal potrzebny jest sensowny
