W HTML <article> to semantyczny znacznik służący do oznaczania samodzielnych, niezależnych fragmentów treści, które mogą funkcjonować oddzielnie od reszty dokumentu i mają sens nawet po wyeksportowaniu lub ponownym wykorzystaniu.
Czym jest <article>?
- Definicja – element
<article>reprezentuje niezależny komponent strony lub aplikacji, który stanowi samodzielną całość – np. post na blogu, artykuł prasowy, wpis na forum, pojedynczy komentarz użytkownika czy nawet interaktywny widget; - Cechy kluczowe –
- treść
<article>powinna być samowystarczalna i możliwa do opublikowania niezależnie (np. w RSS, na innej stronie itp.), - może być używany wielokrotnie w jednym dokumencie – każda jednostka treści (np. wpis blogowy, komentarz) powinna mieć własny znacznik
<article>, - pozwala na zagnieżdżanie: np. artykuł blogowy jako nadrzędny
<article>, a w nim komentarze jako podrzędne<article>.
Dlaczego warto używać <article>?
- uporządkowanie i lepsza zrozumiałość kodu,
- większa dostępność stron dla czytników ekranu (np. osób niewidomych),
- wspiera SEO – wyszukiwarki lepiej rozpoznają strukturę i sens treści,
- umożliwia lepsze programistyczne manipulacje (np. automatyczne generowanie spisów treści, eksport poszczególnych wpisów).
Przykładowe zastosowania
Tabela poniżej przedstawia różne przykłady użycia <article>:
| Zastosowanie | Przykład kodu HTML |
|---|---|
| Post na blogu | html<br><article><br> <h2>Jak działa CSS Grid?</h2><br> <p>CSS Grid to zaawansowany system układu siatki...</p><br></article> |
| Newsy i artykuły prasowe | html<br><article><br> <h2>Nowa wersja HTML już dostępna</h2><br> <p>Wydano nową specyfikację języka HTML...</p><br></article> |
| Komentarze | html<br><article><br> <h3>Komentarz użytkownika Jan</h3><br> <p>Świetny artykuł! Bardzo pomogło mi to zrozumieć temat.</p><br></article> |
| Poradniki, analizy | html<br><article><br> <h2>Poradnik: Tworzenie dostępnych stron</h2><br> <section><h3>Krok 1</h3><p>Zadbaj o semantykę...</p></section><br></article> |
Struktura elementu <article>
We wnętrzu <article> możesz używać praktycznie dowolnych elementów HTML:
- Nagłówków (
<h1>do<h6>), - Paragrafów (
<p>), - Obrazów (
<img>), - Sekcji (
<section>, także zagnieżdżonych<article>), - List (
<ul>,<ol>), - innych multimediów, cytatów, kodu itp.
Przykład zagnieżdżania komentarzy:
<article> <h2>Nowy post na blogu</h2> <p>Opis posta...</p> <article> <h3>Komentarz użytkownika</h3> <p>Bardzo ciekawe podejście!</p> </article> </article> Zalecenia i dobre praktyki
- używaj
<article>tylko tam, gdzie treść ma realnie sens jako oddzielny byt, - jeśli fragment jest tylko częścią większej całości i nie ma samodzielnego charakteru (np. sekcja w artykule), użyj raczej
<section>, - stosuj odpowiedni nagłówek na początku każdego
<article>, aby ułatwić nawigację osobom korzystającym z czytników ekranu, - pamiętaj, że sam znacznik nie wpływa na wygląd strony – do stylowania użyj CSS.
Podsumowanie
Element <article> wprowadza do dokumentu HTML logiczną strukturę, czytelność oraz poprawia dostępność i SEO strony internetowej. Poprawne stosowanie tego znacznika to klucz do nowoczesnych, semantycznych i profesjonalnych projektów webowych.
