Tagi HTML: article

Tag <article> reprezentuje samodzielną, kompletną jednostkę treści, która ma sens niezależnie od reszty strony i może być potencjalnie rozprowadzana lub ponownie wykorzystana w całości. To element semantyczny HTML5, który porządkuje dokument w sposób zrozumiały dla przeglądarek, narzędzi analitycznych i czytników ekranowych.

Kluczową cechą <article> jest jego samodzielność – zawartość powinna mieć sens bez kontekstu strony. Oto praktyczny test:

„Czy mogę opublikować tę treść w kanale RSS jako osobny dokument?”

Jeśli odpowiedź brzmi „tak”, to <article> jest właściwym elementem.

Typowe zastosowania `<article>`

Element <article> idealnie sprawdza się w następujących sytuacjach:

Post na blogu – główne zastosowanie tego elementu;
Artykuł informacyjny – materiały prasowe lub edukacyjne;
Wpis na forum – pojedyncze wiadomości dyskusyjne;
Komentarz użytkownika – opinie i odpowiedzi;
Opis produktu – w sklepach internetowych;
Interaktywny widżet – aplikacje osadzone na stronie;
Artykuł w gazecie – treści dziennikarskie.

Praktyczne przykłady

Przykład 1 – post na blogu

Oto najpowszechniejsze zastosowanie <article>:

<main> <article class="blog-post"> <header> <h2>Jak efektywnie uczyć się HTML?</h2> <p>Autor: Anna Nowak, Opublikowano: <time datetime="2025-04-30">30 kwietnia 2025</time></p> </header> <p>HTML to język znaczników, który stanowi fundament każdej strony internetowej...</p> <p>Aby nauczyć się HTML efektywnie, warto praktykować codziennie i budować własne projekty.</p> </article> </main>

W tym przykładzie cały post jest niezależną jednostką treści. Element <header> zawiera metadane artykułu, takie jak tytuł, autor i data publikacji. Tag <time> z atrybutem datetime umożliwia maszynową interpretację daty.

Przykład 2 – artykuł z zagnieżdżonymi komentarzami

Bardzo ważna cecha <article> to możliwość zagnieżdżania – artykuły mogą zawierać inne artykuły:

<article class="blog-post"> <header> <h2>Tytuł Posta</h2> <p>Autor: Jan Kowalski</p> </header>


  <p>Treść głównego artykułu...</p>
  <section id="comments">

    <h3>Komentarze</h3>
    <article class="comment">

      <header>

        <p>Autor: Użytkownik1</p>

        <time datetime="2025-05-01">1 maja 2025</time>

      </header>

      <p>Bardzo fajny artykuł, dziękuję za wskazówki!</p>

    </article>

<article class="comment"> <header> <p>Autor: Użytkownik2</p> <time datetime="2025-05-02">2 maja 2025</time> </header> <p>Mógłbyś rozwinąć temat CSS?</p> </article> </section> </article>

W tym przypadku zagnieżdżone elementy <article> reprezentują komentarze powiązane z głównym artykułem. Gdy <article> znajduje się wewnątrz innego <article>, jego treść powinna być tematycznie powiązana z artykułem nadrzędnym.

Przykład 3 – wiele artykułów na stronie głównej

Tak może wyglądać sekcja z wieloma artykułami na stronie głównej:

<main> <section id="latest-posts"> <h2>Najnowsze Posty</h2>


    <article>

      <h3>Podstawy CSS Flexbox</h3>

      <p>Data: 15 marca 2026</p>

      <p>Flexbox to nowoczesny system układu w CSS, który pozwala na elastyczne rozmieszczanie elementów...</p>

      <a href="/flexbox-guide">Czytaj więcej</a>

    </article>
    <article>

      <h3>JavaScript ES6 – funkcje strzałkowe</h3>

      <p>Data: 10 marca 2026</p>

      <p>Funkcje strzałkowe to cukier składniowy JavaScript, który czyni kod bardziej czytelnym...</p>

      <a href="/arrow-functions">Czytaj więcej</a>

    </article>

<article> <h3>Semantic HTML – dlaczego to ważne?</h3> <p>Data: 5 marca 2026</p> <p>Semantyczny HTML nie tylko poprawia SEO, ale także czyni kod bardziej dostępnym...</p> <a href="/semantic-html">Czytaj więcej</a> </article> </section> </main>

Sekcja zawiera wiele niezależnych artykułów, z których każdy mógłby być rozprowadzany oddzielnie.

`<article>` vs `<section>` – kiedy używać którego?

To pytanie często pojawia się przy poznawaniu semantycznych tagów HTML5. Oba elementy tworzą nowe sekcje w dokumencie, ale mają różne zastosowania:

Cecha	`<article>`	`<section>`
Samodzielność	Pełna – treść ma sens sama w sobie	Częściowa – treść tworzy część większej całości
Redystrybuowalność	Może być opublikowana niezależnie (np. w RSS)	Zwykle wymaga kontekstu całej strony
Zastosowanie	Niezależne jednostki treści	Logiczne części większej zawartości
Przykłady	Post bloga, artykuł, komentarz	Sekcja „O nas”, rozdział, część artykułu

Praktyczna reguła – jeśli wyobrażasz sobie treść jako artykuł, który mógłby istnieć samodzielnie – użyj <article>. Jeśli grupujesz powiązaną treść, która tworzy logiczną całość – użyj <section>.

Przykładowa różnica w znacznikach:

 <article> <h2>Mój Artykuł o Web Developmencie</h2> <p>Treść artykułu...</p> </article>

 <section id="o-nas"> <h2>O Naszej Firmie</h2> <p>Jesteśmy firmą z wieloletnim doświadczeniem...</p> </section>

Struktura wewnętrzna artykułu

Artykuł najczęściej zawiera kilka charakterystycznych elementów:

<article>  <header> <h2>Tytuł Artykułu</h2> <p>Autor: Imię Nazwisko</p> <p>Data publikacji: <time datetime="2026-03-20">20 marca 2026</time></p> </header>


  <!-- Główna zawartość -->

  <section>

    <h3>Wstęp</h3>

    <p>Wprowadzenie do tematu...</p>

  </section>
  <section>

    <h3>Główna treść</h3>

    <p>Szczegółowe wyjaśnienia...</p>

  </section>

 <footer> <p>Słowa kluczowe: <span class="tag">HTML</span>, <span class="tag">CSS</span></p> <p>Udostępnij: <a href="#">Facebook</a> | <a href="#">Twitter</a></p> </footer> </article>

`<article>` a `<div>` – co wybrać?

Ważne rozróżnienie: <article> to element semantyczny, podczas gdy <div> to generyczny kontener.

Używaj <div> gdy:

Stylizacja CSS – potrzebujesz kontenera wyłącznie do celów prezentacyjnych;
Brak semantyki – treść nie wnosi znaczenia strukturalnego;
Swobodne grupowanie – łączysz elementy bez logicznego związku treści.

Używaj <article> gdy:

Samodzielna treść – stanowi kompletną jednostkę informacyjną;
Znaczenie semantyczne – element wspiera strukturę dokumentu;
Redystrybuowalność – może być opublikowana niezależnie.

Porównanie niepoprawnego i poprawnego oznaczenia:

 <div class="article"> <h2>Tytuł</h2> <p>Treść...</p> </div>

 <article> <h2>Tytuł</h2> <p>Treść...</p> </article>

Wiele artykułów w dokumencie

Dokument HTML może zawierać więcej niż jeden element <article> – to wręcz zalecane na stronach z wieloma niezależnymi treściami.

Przykładowa struktura strony z wieloma artykułami:

<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>Blog Programistyczny</title> </head> <body> <header> <h1>Mój Blog o Web Developmencie</h1> <nav> <ul> <li><a href="#">Strona główna</a></li> <li><a href="#">Archiwa</a></li> <li><a href="#">O mnie</a></li> </ul> </nav> </header>


  <main>

    <article>

      <h2>Pierwszy Artykuł</h2>

      <p>Treść...</p>

    </article>
    <article>

      <h2>Drugi Artykuł</h2>

      <p>Treść...</p>

    </article>
    <article>

      <h2>Trzeci Artykuł</h2>

      <p>Treść...</p>

    </article>

  </main>

Stylizacja artykułów CSS

Chociaż <article> to element semantyczny, jego wygląd definiujemy w CSS:

/* Podstawowe stylizowanie artykułu */ article { background-color: #ffffff; border: 1px solid #ddd; border-radius: 8px; padding: 20px; margin-bottom: 30px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }


/* Tytuł artykułu */

article h2 {

  color: #333;

  font-size: 28px;

  margin-bottom: 10px;

  border-bottom: 3px solid #007bff;

  padding-bottom: 10px;

}
/* Nagłówek artykułu z metadanymi */

article header {

  margin-bottom: 20px;

  font-size: 14px;

  color: #666;

}
/* Treść artykułu */

article p {

  line-height: 1.6;

  color: #444;

  margin-bottom: 15px;

}
/* Stopka artykułu */

article footer {

  margin-top: 20px;

  padding-top: 15px;

  border-top: 1px solid #eee;

  font-size: 13px;

  color: #999;

}
/* Zagnieżdżone komentarze */

article article {

  background-color: #f9f9f9;

  margin-left: 20px;

  margin-top: 15px;

  padding: 15px;

  border-left: 4px solid #007bff;

}
article article h3 {

  font-size: 18px;

  margin-top: 0;

}

/* Responsive design */ @media (max-width: 768px) { article { padding: 15px; } article h2 { font-size: 22px; } article article { margin-left: 10px; } }

Dostępność i SEO

Używanie semantycznego <article> realnie poprawia dostępność i widoczność w wynikach wyszukiwania:

Czytniki ekranowe – lepiej rozumieją strukturę dokumentu;
SEO – wyszukiwarki dokładniej indeksują powiązane treści;
Urządzenia mobilne – łatwiejsze, automatyczne formatowanie treści;
Kanały RSS – artykuły mogą być automatycznie dystrybuowane.

Typowe zastosowania <article>