Cytaty i kod źródłowy: <blockquote>, <q>, <code>

HTML pozwala na prawidłowe oznaczanie cytatów oraz fragmentów kodu źródłowego. Dzięki temu Twoje treści stają się czytelniejsze, bardziej uporządkowane i dostępne dla użytkowników oraz czytników ekranowych.

Prawidłowe oznaczanie cytatów pomaga również w optymalizacji SEO, a elementy kodu źródłowego są niezbędne, gdy chcesz przekazać instrukcje programistyczne lub fragmenty kodu w czytelny sposób.

Znacznik <blockquote> – Cytat blokowy

Znacznik <blockquote> służy do umieszczania cytatów blokowych, czyli dłuższych cytatów, które wyróżniasz jako osobną sekcję tekstu.

Przeglądarki domyślnie dodają wcięcie do takiego cytatu, aby odróżnić go od reszty treści.

<blockquote>
  "Największą sztuką jest nauczyć się żyć z ludźmi."
</blockquote>

Efekt:

„Największą sztuką jest nauczyć się żyć z ludźmi.”

Warto dodać atrybut cite, który wskazuje źródło cytatu (choć nie jest on widoczny dla użytkownika, przeglądarki mogą go przetwarzać):

<blockquote cite="https://przykladowastrona.pl">
  "Cytat pochodzący z wiarygodnego źródła."
</blockquote>

Znacznik <q> – Cytat liniowy

Znacznik <q> służy do oznaczania krótkich cytatów wbudowanych w tekst. Przeglądarki automatycznie dodają cudzysłowy wokół zawartości znacznika <q>.

Jak powiedział Konfucjusz: <q>Wiedza to skarb, który zawsze podąża za swoim właścicielem.</q>

Efekt:

Jak powiedział Konfucjusz: Wiedza to skarb, który zawsze podąża za swoim właścicielem.

Możesz również dodać atrybut cite, aby wskazać źródło cytatu, np.:

Nauka to potęgi klucz.

Znacznik <code> – Kod źródłowy

Znacznik <code> służy do prezentowania fragmentów kodu źródłowego. Domyślnie przeglądarki stosują dla tego znacznika czcionkę monospace (o stałej szerokości znaków), co ułatwia czytelność kodu.

Znacznika <code> używamy wewnątrz innych elementów, np. w paragrafach <p> lub blokach <pre>.

Aby stworzyć nagłówek w HTML, użyj znacznika <code>&lt;h1&gt;</code>.

Efekt:

Aby stworzyć nagłówek w HTML, użyj znacznika <h1>.

<pre> + <code> – Blok kodu

Jeśli chcesz zaprezentować większy fragment kodu z zachowaniem formatowania (np. wcięć i nowych linii), najlepiej połączyć znacznik <code> z <pre>.

Znacznik <pre> zachowuje białe znaki i łamanie wierszy dokładnie tak, jak wpiszesz to w kodzie HTML.

<h1>Tytuł strony</h1>
<p>To jest przykładowy akapit.</p>

Efekt:

Tytuł strony

To jest przykładowy akapit.

Podsumowanie

• <blockquote> – do dłuższych cytatów blokowych.
• <q> – do krótkich cytatów wewnątrz tekstu, automatyczne cudzysłowy.
• <code> – do oznaczania fragmentów kodu, najlepiej w połączeniu z <pre> dla większych bloków.

🎯 Ćwiczenie w JSFiddle

Przetestuj swoje umiejętności!
Przejdź do JSFiddle i wklej poniższy kod w sekcji HTML:

<h1>Cytaty i kod źródłowy</h1>

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

<blockquote cite="https://przykladowastrona.pl">
  "Sukces to suma niewielkiego wysiłku powtarzanego dzień po dniu."
</blockquote>

<p>Przykład kodu HTML: <code>&lt;h1&gt;Nagłówek strony&lt;/h1&gt;</code></p>

<pre>
<code>
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Przykład</title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Witamy!&lt;/h1&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code>
</pre>

Kliknij przycisk Run i zobacz, jak działa Twój kod!