HTML Academy · Lekcja

Element article — samodzielna treść

Używanie article do treści, które można niezależnie rozpowszechniać

Element article — samodzielna treść to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 2 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 article?

Element <article> reprezentuje samodzielną treść, którą można niezależnie rozpowszechniać:

Ma sens sama w sobie, poza kontekstem strony
Można ją rozpowszechniać w innych kanałach (RSS, karta w mediach społecznościowych) bez utraty znaczenia

Kiedy używać article

Elementu <article> należy używać w przypadku:

Wpisów na blogu
Artykułów informacyjnych
Wpisów na forum
Kart produktów
Komentarzy (pojedyncze komentarze są artykułami)
Widżetów lub gadżetów

Struktura article

Typowy artykuł zawiera nagłówek, treść i stopkę:

<article>
  <header>
    <h2><a href="/posts/html-guide">HTML5 Complete Guide</a></h2>
    <p>By <a rel="author" href="/authors/jane">Jane Smith</a></p>
    <time datetime="2025-01-15">January 15, 2025</time>
  </header>

  <p>HTML5 brought many semantic improvements to the web...</p>

  <footer>
    <p>Tags: <a href="/tags/html">HTML</a>, <a href="/tags/web">Web</a></p>
  </footer>
</article>

Zagnieżdżone artykuły (komentarze)

Artykuły można zagnieżdżać, aby reprezentować odpowiedzi lub podtreści:

<article class="post">
  <h2>Main Post Title</h2>
  <p>Post content...</p>

  <section class="comments">
    <h3>Comments</h3>

    <article class="comment">
      <p>Great post! — <cite>Alice</cite></p>
    </article>
    <article class="comment">
      <p>Thanks for sharing! — <cite>Bob</cite></p>
    </article>
  </section>
</article>

Karty produktów jako article

Karty produktów lub treści mogą być artykułami:

<ul class="product-grid">
  <li>
    <article class="product-card">
      <img src="widget.jpg" alt="Widget Pro">
      <h2>Widget Pro</h2>
      <p>The best widget for professionals.</p>
      <p>$49.99</p>
      <a href="/products/widget-pro">View Product</a>
    </article>
  </li>
</ul>

article a section

Częste nieporozumienie — article a section:

<article> — samodzielna treść; po wyodrębnieniu ze strony nadal miałaby sens
<section> — grupowanie tematyczne; do zrozumienia wymaga otaczającego kontekstu

<!-- Article: can be shared standalone -->
<article>A blog post about HTML</article>

<!-- Section: a chapter of the post (not standalone) -->
<article>
  <section><h2>Introduction</h2>...</section>
  <section><h2>Deep Dive</h2>...</section>
</article>

article i Schema.org

Połącz article z Schema.org JSON-LD, aby uzyskać rozbudowane wyniki wyszukiwania:

<article>
  <h1 id="title">HTML5 Guide</h1>
  <time datetime="2025-01-15" id="date">Jan 15, 2025</time>
  ...
</article>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "HTML5 Guide",
  "datePublished": "2025-01-15"
}
</script>

Element cite

Elementu <cite> należy używać dla tytułu dzieła lub informacji o jego autorstwie:

<article>
  <h2>Book Review: <cite>Don't Make Me Think</cite></h2>
  <p>By <a rel="author" href="/authors/me">Jane Smith</a></p>
  <p>Steve Krug's book remains essential reading for UX designers...</p>
</article>

rel=author w linkach

Oznaczaj linki informujące o autorstwie wewnątrz article za pomocą rel="author":

<article>
  <p>Written by
    <a href="/authors/jane" rel="author">Jane Smith</a>
  </p>
</article>
<!-- rel="author" helps search engines identify content authorship -->

Wiele artykułów na stronie

Wiele artykułów może pojawić się na liście lub w kanale:

<main>
  <h1>Latest Posts</h1>
  <article>...</article>
  <article>...</article>
  <article>...</article>
</main>
<!-- Each article is independently consumable -->
<!-- This is correct: multiple articles, one main -->

Kiedy nie używać article

Nie należy używać <article> w przypadku:

Ogólnych sekcji strony, które nie mają niezależnego znaczenia
Elementów nawigacyjnych
Sekcji marketingowych na stronie głównej (należy użyć <section>)
Widżetów na pasku bocznym (należy użyć <aside>)

Szybkie sprawdzenie

Jaka cecha definiuje treść, która powinna należeć do elementu article?

Podsumowanie: element article

Najważniejsze informacje o elemencie article:

Samodzielna treść, którą można niezależnie rozpowszechniać
Można ją rozpowszechniać w innych kanałach (RSS, podgląd w mediach społecznościowych) bez utraty znaczenia
Przykłady: wpisy na blogu, artykuły informacyjne, karty produktów, komentarze
Można go zagnieżdżać (wpis z zagnieżdżonymi artykułami będącymi komentarzami)
Na linkach informujących o autorstwie wewnątrz article należy używać rel="author"

Często zadawane pytania

Czy lekcja „Element article — samodzielna treść” jest bezpłatna?

Tak — pełny tekst „Element article — samodzielna treść” 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 „Element article — samodzielna treść”?

Używanie article do treści, które można niezależnie rozpowszechniać Ć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 2 z 4.

Ile czasu zajmuje lekcja „Element article — samodzielna treść”?

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