<article>

Samodzielna, zamknięta treść, którą można przeczytać i udostępnić osobno.

Wyświetlanie: block
Znacznik zamykający: Wymagany
Dozwolona zawartość: Treść przepływu (flow content)

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Więcej przykładów
Domyślny CSS
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

HTML

<article>
  <header>
    <h2>Pierwszy tydzień nauki HTML</h2>
    <p>Opublikowano <time datetime="2026-09-14">14 września 2026</time></p>
  </header>
  <p>Zaczęłam od struktury dokumentu i nagłówków. Po trzech dniach miałam już własną stronę-wizytówkę.</p>
  <footer>Tagi: HTML, początki</footer>
</article>

Podgląd

Definicja i zastosowanie

Element <article> oznacza fragment strony, który ma sens także wyrwany z kontekstu: wpis na blogu, artykuł prasowy, komentarz, kartę produktu albo post na forum. Dobry test brzmi tak: czy ten fragment mógłby trafić do czytnika RSS albo zostać wklejony na inną stronę i nadal byłby zrozumiały? Jeśli tak, to jest artykuł.

Artykuł zwykle ma własny nagłówek (<h1>–<h6>), a często też <header> z datą i autorem oraz <footer> z tagami czy informacją o licencji. Artykuły można zagnieżdżać: komentarze pod wpisem to osobne elementy <article> wewnątrz artykułu głównego.

Czytniki ekranu i wyszukiwarki traktują <article> jako punkt orientacyjny, dzięki czemu łatwiej przeskoczyć do właściwej treści. Sam element nie zmienia wyglądu strony, domyślnie jest po prostu blokiem.

Składnia

<article>
  …
</article>

Atrybuty

Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.

Więcej przykładów

Zagnieżdżone artykuły: wpis i komentarze

HTML

<article>
  <h2>Jak wybrać pierwszy język programowania</h2>
  <p>Najważniejsze jest to, co chcesz zbudować.</p>

  <section>
    <h3>Komentarze</h3>
    <article>
      <p><strong>Ola:</strong> Zaczęłam od Pythona i nie żałuję.</p>
    </article>
    <article>
      <p><strong>Kuba:</strong> U mnie HTML i CSS, bo szybko widać efekty.</p>
    </article>
  </section>
</article>

Podgląd

Domyślny CSS

Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:

CSS

article {
  display: block;
}

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Jeśli fragment ma sens tylko jako część większej całości, użyj <section>, a nie <article>.
Datę publikacji zapisz w <time datetime="…">, żeby była czytelna także dla maszyn.
Nie zamieniaj każdego <div> na <article>. Semantyka ma pomagać, a nie opisywać wszystko naraz.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz HTML w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs