HTML Academy · Lekcja

figure i figcaption

Umieszczać obrazy w semantycznych kontenerach figure z podpisami.

figure i figcaption to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.

Czym jest figure?

Element <figure> oznacza samodzielną treść, do której odwołuje się główny tekst:

Obrazy z podpisami
Fragmenty kodu
Diagramy, wykresy i ilustracje
Cytaty

Najważniejsza cecha: po usunięciu z głównego toku dokumentu otaczający tekst nadal ma sens.

figure z figcaption

Element <figcaption> dostarcza podpis figury:

<figure>
  <img src="chart.png" alt="Bar chart showing Q1-Q4 revenue">
  <figcaption>Figure 1: Quarterly revenue growth, 2024.</figcaption>
</figure>
<!-- figcaption can be first or last child of figure -->
<!-- It is visible text that supplements the alt text -->

Położenie figcaption

Element <figcaption> można umieścić przed główną treścią albo za nią:

<figure>
  <figcaption>Listing 1: Hello World in HTML</figcaption>
  <pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;body&gt;Hello, World!&lt;/body&gt;
&lt;/html&gt;</code></pre>
</figure>

Dostępność: alt a figcaption

Należy rozumieć tę różnicę:

alt — opisuje zawartość obrazu dla czytników ekranu i w przypadku uszkodzonych obrazów
figcaption — widoczny podpis, który dostarcza kontekstu, informacji o źródle lub wyjaśnienia

Służą różnym celom i nie należy ich wzajemnie powielać.

<figure>
  <img src="chart.png" alt="Line chart showing 45% growth from January to December">
  <figcaption>Source: 2024 Annual Report, Finance Department.</figcaption>
</figure>

Fragment kodu w figure

Używaj <figure> dla opisanych przykładów kodu:

<figure>
  <pre><code>function greet(name) {
  return `Hello, ${name}!`;
}</code></pre>
  <figcaption>Example 1: A simple greeting function in JavaScript.</figcaption>
</figure>

Cytat w figure

Element <figure> dobrze współpracuje z elementem <blockquote>:

<figure>
  <blockquote>
    <p>The web is for everyone.</p>
  </blockquote>
  <figcaption>— Tim Berners-Lee, inventor of the World Wide Web</figcaption>
</figure>

Wiele obrazów w figure

Figura może zawierać wiele powiązanych obrazów:

<figure>
  <img src="before.jpg" alt="Garden before renovation">
  <img src="after.jpg" alt="Garden after renovation">
  <figcaption>Before and after the 2024 renovation project.</figcaption>
</figure>

figure a div

Kiedy używać <figure>, a kiedy <div>:

Używaj <figure>, gdy treść można przenieść do aneksu
Używaj <figure>, gdy potrzebujesz widocznego podpisu
Używaj <div> jako kontenera układu lub dla grup obrazów, które nie stanowią samodzielnej treści

Odwoływanie się do figur w tekście

Odwołuj się do figur z głównego tekstu:

<p>The growth trend is illustrated in <a href="#fig1">Figure 1</a>.</p>

<figure id="fig1">
  <img src="growth.png" alt="Revenue growth chart 2020-2024">
  <figcaption>Figure 1: Annual revenue growth 2020-2024.</figcaption>
</figure>

Element figure nie jest wymagany dla obrazów

Nie trzeba umieszczać każdego obrazu w elemencie <figure>:

<!-- Decorative or simple content image: just img -->
<img src="avatar.jpg" alt="Profile photo of Jane Doe" class="avatar">

<!-- Image with a caption OR self-contained reference: use figure -->
<figure>
  <img src="diagram.svg" alt="System architecture diagram">
  <figcaption>Figure 3: The three-tier architecture.</figcaption>
</figure>

Stylowanie figure i figcaption

Typowy CSS dla figur:

figure {
  margin: 2rem auto;
  max-width: 100%;
  text-align: center;
}

figcaption {
  font-size: 0.875rem;
  color: #666;
  margin-top: 0.5rem;
  font-style: italic;
}

Szybkie sprawdzenie

Jaka jest najważniejsza różnica między tekstem alt a figcaption?

Podsumowanie: figure i figcaption

Najważniejsze informacje o figurach:

<figure> — samodzielna treść, do której odwołuje się główny tekst
<figcaption> — widoczny podpis, będący pierwszym albo ostatnim elementem potomnym figure
alt — niewidoczny opis dla czytników ekranu
figcaption — widoczny kontekst dla wszystkich użytkowników
Elementy te sprawdzają się w przypadku obrazów, kodu, cytatów i wykresów

Często zadawane pytania

Czy lekcja „figure i figcaption” jest bezpłatna?

Tak — pełny tekst „figure i figcaption” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „figure i figcaption”?

Umieszczać obrazy w semantycznych kontenerach figure z podpisami. Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć HTML Academy?

Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „figure i figcaption”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?

Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do HTML Academy