Co to jest `q` w HTML?

Znacznik <q> w HTML służy do oznaczania cytatu krótkiego, czyli cytowania fragmentu tekstu w obrębie danego akapitu. Jest to element semantyczny, który pozwala jednoznacznie wskazać cytowaną treść, odróżniając ją od reszty tekstu. Przeglądarki zazwyczaj automatycznie dodają cudzysłowy wokół zawartości <q>, jednak sposób ich wyświetlania może różnić się w zależności od przeglądarki oraz zastosowanych stylów CSS.

Znaczenie i zastosowanie znacznika <q>

• Służy do oznaczania cytatów krótkich – czyli takich, które można umieścić w jednym zdaniu lub ciągu zdań;
• Automatycznie dodaje cudzysłów – wokół zawartości (w większości przeglądarek);
• Umożliwia lepsze zrozumienie treści – przez użytkowników oraz roboty sieciowe, poprawiając semantykę strony;
• Jest korzystny pod względem dostępności – czytniki ekranu mogą wskazywać, że wybrana fraza jest cytatem.

Podstawowa składnia

<p>Albert Einstein powiedział: <q>Wyobraźnia jest ważniejsza od wiedzy.</q></p>

Po wyświetleniu w przeglądarce ten fragment tekstu zostanie automatycznie ujęty w cudzysłowy, np.:

Albert Einstein powiedział: „Wyobraźnia jest ważniejsza od wiedzy.”

Atrybuty znacznika <q>

Najważniejszym atrybutem jest cite, za pomocą którego można wskazać źródło cytatu. Choć przeglądarki nie wyświetlają go użytkownikowi, atrybut ten jest ważny z punktu widzenia semantyki, archiwizacji i pracy automatycznych narzędzi.

<p>Według oficjalnej dokumentacji: <q cite="https://example.com/dokumentacja">Ten znacznik umożliwia cytowanie krótkich fragmentów.</q></p>

Różnica między <q> a <blockquote>

Przykład użycia obu znaczników

<p>Jak powiedział Steve Jobs: <q>Stay hungry, stay foolish.</q></p>
<blockquote cite="https://example.com/steve-jobs-przemowienie">Twój czas jest ograniczony, więc nie marnuj go, żyjąc cudzym życiem...</blockquote>

Zastosowanie CSS ze znacznikiem <q>

Możesz w pełni kontrolować wygląd cudzysłowów, korzystając z właściwości CSS quotes, ::before i ::after. Przykład:

q { quotes: '„' '”' '«' '»'; }
q::before { content: open-quote; }
q::after { content: close-quote; }

Taki kod umożliwi wyświetlanie cudzysłowów zgodnych z polskimi normami typograficznymi.

Najczęstsze błędy i dobre praktyki

• Nie należy stosować <q> do cytowania całych akapitów lub bloków tekstu – do tego służy <blockquote>;
• Nie używaj znacznika <q> tylko po to, by dodać cudzysłów – jego zadaniem jest wskazanie cytatu;
• Jeżeli cytat nie pochodzi z innego źródła, a jest np. powiedzeniem, nie jest konieczne używanie cite.

Podsumowanie i dobre praktyki

• Stosuj <q> wyłącznie do krótkich, inline’owych cytatów;
• Dodawaj atrybut cite wszędzie tam, gdzie możesz wskazać źródło;
• Dla długich cytatów zawsze używaj <blockquote>;
• Opcjonalnie dostosuj wygląd cytatów za pomocą CSS, by przestrzegać zasad typografii języka polskiego.

Stosowanie znaczników takich jak <q> poprawia dostępność, semantykę oraz profesjonalizm tworzonych stron internetowych.