Poznaj Programowanie

Tagi HTML: cite

Piotr Grochal 6 min. czytania

W dzisiejszym wpisie o programowaniu w HTML, CSS i JavaScript zanurzymy się w semantykę cytatów. Tematem przewodnim jest tag <cite> oraz często mylony z nim atrybut cite – kluczowe elementy do poprawnego oznaczania źródeł i tytułów w treściach webowych. Dzięki nim poprawisz czytelność, dostępność (a11y) i wzmocnisz SEO, spełniając standardy HTML5.

Czym jest tag <cite> – podstawy semantyki

Tag <cite> służy do oznaczania tytułu dzieła lub referencji do źródła, takiego jak książka, artykuł, film, piosenka czy raport. Przeglądarki domyślnie renderują go kursywą (podobnie jak <em> lub <i>), ale nie używaj <i> do tytułów – tracisz semantykę i sygnały dla SEO. W HTML5 <cite> jest przeznaczony przede wszystkim do tytułów dzieł, a nie nazwisk autorów.

Najczęstsze zastosowania <cite> obejmują m.in.:

  • tytuły książek, artykułów i raportów,
  • nazwy filmów, seriali i podcastów,
  • tytuły piosenek i albumów,
  • nazwy dzieł sztuki i wystaw,
  • tytuły wpisów blogowych lub sekcji dokumentacji.

Przykład podstawowy:

<p>Ostatnio przeczytałem książkę <cite>PHP i MySQL</cite> autorów Luke'a Wellinga i Laury Thomson.</p>

Efekt – przeglądarka wyróżni tytuł kursywą, a narzędzia indeksujące łatwiej rozpoznają, że to tytuł dzieła.

Rozszerzony przykład z odniesieniem do autora (pamiętaj: preferowanym zastosowaniem <cite> jest tytuł dzieła):

<p>Nasza wiedza ma początek w tym, co czujemy – <cite>Leonardo da Vinci</cite>.</p>

Lepszą praktyką byłoby umieszczenie w <cite> tytułu dzieła/źródła, a samo nazwisko pozostawić jako zwykły tekst.

Atrybut cite – nie myl z tagiem <cite>!

Atrybut cite to URL do oryginalnego źródła cytatu, dodawany m.in. do <blockquote>, <q>, <ins> i <del>. Nie zmienia wyglądu, ale jest kluczowy dla semantyki, wiarygodności i SEO. Używaj go zawsze w połączeniu z właściwym cytatem.

Przykład z <blockquote> (cytat blokowy):

<blockquote cite="https://example.com/ksiazka">Jest to dłuższy cytat blokowy, który zawiera dokładne odwołanie do źródła.</blockquote>

Efekt – przeglądarka doda wcięcie, a atrybut cite wskaże źródło.

Przykład z <q> (cytat śródliniowy):

<p>Jak napisał John Doe, <q cite="https://example.com/artykul">Treść jest kluczem do sukcesu w internecie</q>.</p>

Uwaga – starsze przeglądarki mogą nie dodawać cudzysłowów dla <q>; w razie potrzeby wymuś je w CSS.

Połączenie sił: <cite>, <q> i atrybut cite

Najlepsze rezultaty daje połączenie: tytuł dzieła w <cite>, treść cytatu w <q> lub <blockquote> oraz URL źródła w atrybucie cite.

Kompletny przykład:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Cytaty semantyczne</title>
</head>
<body>
<p>
Ostatnio przeczytałem książkę <cite>PHP i MySQL</cite> autorów Luke'a Wellinga i Laury Thomson. Jak napisali autorzy, książka prezentuje <q cite="https://example.com/ksiazka">metody tworzenia interaktywnych witryn WWW, począwszy od najprostszego formularza zamówienia, a skończywszy na złożonych bezpiecznych witrynach związanych z e-commerce.</q>
</p>
</body>
</html>

Wygląd – tytuł jest kursywą, cytat w cudzysłowach, a źródło wskazane URL-em w cite.

Stylizacja CSS dla cytatów – wizualny efekt

HTML dostarcza semantykę, a CSS nadaje styl i spójność z identyfikacją wizualną.

Przykładowe reguły dla <cite>, <q> i <blockquote>:

cite {
font-style: italic;
color: #666;
font-weight: 500;
}
q {
quotes: "“" "”" "‘" "’";
}
q::before { content: open-quote; }
q::after { content: close-quote; }
blockquote {
margin: 20px 0;
padding: 20px;
border-left: 4px solid #007cba;
background: #f9f9f9;
font-style: italic;
}
blockquote cite {
display: block;
margin-top: 10px;
font-style: normal;
color: #007cba;
font-size: 0.9em;
}

Efekt – eleganckie cytaty z niestandardowymi cudzysłowami i wyróżnionym źródłem. Zawsze testuj w różnych przeglądarkach i motywach systemowych.

Zaawansowany trik z <figure> i <figcaption> (HTML5):

<figure>
<blockquote cite="https://example.com/artykul">
To kluczowy element artykułu.
</blockquote>
<figcaption>
— <cite>Tytuł artykułu</cite>, autor X.
</figcaption>
</figure>

Taka struktura porządkuje treść podobnie jak w publikacjach naukowych i ułatwia stylowanie podpisów.

Najczęstsze błędy i najlepsze praktyki

Poniżej znajdziesz skróconą listę pułapek oraz rekomendacji w pracy z cytatami w HTML:

  • Błąd #1 – mylenie <cite> z atrybutem cite; tag to tytuł dzieła, atrybut to URL źródła;
  • Błąd #2 – używanie <i> zamiast <cite>; tracisz semantykę, SEO i dostępność;
  • Błąd #3 – brak atrybutu cite przy cytatach zewnętrznych; obniża wiarygodność i możliwość weryfikacji źródła;
  • Praktyka #1 – dodawaj cite do <q> i <blockquote> przy cytowaniu zewnętrznych materiałów; to wzmacnia SEO i zaufanie;
  • Praktyka #2 – używaj <q> do krótkich cytatów śródliniowych, a <blockquote> do dłuższych bloków;
  • Praktyka #3 – w publikacjach formalnych stosuj pełną semantykę (tytuł w <cite>, URL w cite); to standard branżowy;
  • Dla programistów JavaScript – generując cytaty dynamicznie, używaj document.createElement('q') i ustawiaj setAttribute('cite', url).

Wpływ na SEO – wyszukiwarki lepiej rozumieją strukturyzowane cytaty z poprawnie użytym <cite> i atrybutem cite, co może zwiększać autorytet oraz widoczność strony.