Element <blockquote> to semantyczny znacznik HTML do oznaczania bloku dłuższego cytatu zaczerpniętego z innego źródła. Wyraźnie oddziela cytowaną treść od reszty tekstu i nadaje jej właściwą strukturę semantyczną.
Kiedy używać elementu <blockquote>?
Używaj <blockquote> do cytatów obejmujących jeden lub więcej akapitów, gdy chcesz wyodrębnić je jako samodzielny blok. Z kolei krótkie cytaty, wplecione w zdanie, oznaczaj znacznikiem <q> w tym samym akapicie.
Zasada w skrócie: <blockquote> – dłuższe cytaty blokowe; <q> – krótkie cytaty śródliniowe.
Struktura HTML elementu <blockquote>
Podstawowy przykład
Tak może wyglądać poprawnie zbudowany cytat z podaniem źródła i autora:
<blockquote cite="URL_źródła">
<p>Treść cytatu.</p>
<footer><cite>— Autor cytatu</cite></footer>
</blockquote>
Typowy blockquote może obejmować następujące elementy:
- <blockquote> – główny kontener cytatu;
- <p> – akapit lub akapity z treścią cytatu;
- <footer> – obszar z informacjami o autorze lub źródle;
- <cite> – znacznik wskazujący autora, tytuł dzieła lub źródło.
Atrybut cite
Atrybut cite pozwala podać adres URL materiału źródłowego. Nie jest on prezentowany wizualnie – służy narzędziom i skryptom. Jeśli chcesz pokazać źródło użytkownikowi, umieść je w treści, np. w <cite> lub w obszarze autora.
Przykład zastosowania atrybutu cite wraz z wyświetlanym źródłem:
<blockquote cite="https://pl.wikipedia.org/wiki/Richard_Feynman">
<p>Cytat z dzieła Richarda Feynmana.</p>
<footer><cite>— Richard Feynman</cite></footer>
</blockquote>
Stylowanie CSS
Podstawowe style
Oto przykładowe, uniwersalne style, które czytelnie wyróżnią cytat na stronie:
blockquote {
background-color: #FFFFD1;
border-left: 10px solid #87CEFA;
padding: 1em;
margin: 50px auto;
width: 60%;
font-size: 140%;
font-style: italic;
box-shadow: 0px 12px 6px -6px #aaaaaa;
}
blockquote footer {
text-align: right;
font-size: smaller;
}
blockquote cite {
font-weight: 300;
}
Najważniejsze właściwości CSS dla <blockquote> to:
- border-left – lewa krawędź, która wizualnie oddziela cytat od reszty treści;
- padding – wewnętrzne odstępy zapewniające czytelność tekstu;
- background-color – subtelne tło wyróżniające blok cytatu;
- box-shadow – cień dodający głębi i kontrastu;
- font-style: italic – kursywa podkreślająca charakter cytatu;
- margin – kontrola odstępów, np. usunięcie zbędnego marginesu dolnego.
Zaawansowane stylowanie z pseudo-elementami
Do efektownego wyróżnienia możesz użyć pseudo-elementów ::before i ::after, aby dodać dekoracyjne cudzysłowy bez zmiany HTML:
blockquote::before {
color: #008FEA;
content: "\201C";
font-size: 9em;
position: absolute;
top: -35px;
left: 0;
}
blockquote p::before {
color: #ddd;
content: "\201C";
font-size: 100em;
line-height: 0.65em;
position: absolute;
right: 0.095em;
z-index: -1;
}
blockquote span {
color: #008FEA;
display: block;
font-size: 1.4em;
letter-spacing: 1px;
margin-top: 0.5em;
}
W tym przykładzie warto zapamiętać:
- ::before dodaje duży cudzysłów na początku,
- ::after może służyć do wstawienia znaku na końcu,
- pozycjonowanie absolute ułatwia precyzyjne rozmieszczenie dekoracji.
Style obramowania
Możesz zastosować różne warianty obramowania zależnie od stylu projektu:
| Wariant | CSS |
|---|---|
| Lewe obramowanie | border-left: 10px solid #87CEFA; |
| Pełne obramowanie | border: 1px solid #87CEFA; |
| Góra i boki | border-top: 1px solid #87CEFA; border-right: 1px solid #87CEFA; border-left: 10px solid #87CEFA; |
Praktyczne przykłady
Przykład 1 – prosty cytat
Oto minimalny HTML prostego cytatu:
<blockquote>
<p>Porażka to w pewnym sensie droga do sukcesu.</p>
<footer><cite>— John Keats</cite></footer>
</blockquote>
Tak możesz go ostylować w CSS:
blockquote {
background-color: #EDEDED;
border-left: 8px solid #008FEA;
padding: 1.2em 30px;
font-style: italic;
color: #666;
}
Przykład 2 – cytat z linkiem do źródła
Poniżej cytat zawierający zarówno atrybut cite, jak i widoczne źródło:
<blockquote cite="https://pl.wikipedia.org/wiki/Jacek_Piekara">
<p>Nigdy nie zwyciężysz wroga, którego twoja wyobraźnia uczyniła niepokonanym.</p>
<footer>
<cite><a href="https://pl.wikipedia.org/wiki/Jacek_Piekara">Jacek Piekara – Łowcy dusz</a></cite>
</footer>
</blockquote>
Przykład 3 – blockquote z <figure> i <figcaption>
W HTML5 dobrą praktyką jest łączenie <blockquote> z podpisem w <figcaption> w obrębie <figure>:
<figure>
<blockquote cite="URL">
<p>Treść cytatu dotycząca konkretnego tematu.</p>
</blockquote>
<figcaption>— Autor cytatu</figcaption>
</figure>
Różnica między <blockquote> a <q>
Poniższa tabela zestawia najważniejsze różnice między tymi elementami:
| Aspekt | <blockquote> |
<q> |
|---|---|---|
| Przeznaczenie | Długie cytaty | Krótkie cytaty |
| Typ elementu | Blokowy | Liniowy |
| Umiejscowienie | Osobny blok | W tekście akapitu |
| Domyślne cudzysłowy | Nie (dodawane w CSS) | Tak, automatycznie |
Praktyczny przykład zastosowania obu elementów:
<p>Naukowcy mówią, że <q>innowacja jest kluczem do sukcesu</q>, dlatego warto inwestować w badania.</p>
<blockquote>
<p>Innowacja nie jest wynikiem logicznego myślenia, choć bardzo logiczny jest wynik.</p>
<footer><cite>— Albert Einstein</cite></footer>
</blockquote>
Dobre praktyki
Aby Twoje cytaty były poprawne, spójne i dostępne, stosuj poniższe zasady:
- Zawsze oznaczaj źródło – dodaj informację o autorze i/lub tytule w obszarze autora (np. w
<footer>lub<figcaption>); - Stosuj atrybut
cite– jeśli masz wiarygodny URL, umieść go w atrybucieciteprzy<blockquote>; - Łącz z
<figure>w HTML5 – dla pełnej semantyki powiąż cytat z podpisem w<figcaption>; - Nie przesadzaj ze stylami – cytat powinien pozostać czytelny i nie przytłaczać treści strony;
- Zachowaj konsekwencję – ustal spójny wygląd
<blockquote>i stosuj go w całym serwisie; - Dostępność – zapewnij odpowiedni kontrast, strukturę i kolejność treści dla czytników ekranu.