<blockquote> w HTML to semantyczny element służący do oznaczania dłuższych cytatów pochodzących z innych źródeł. Jest wyświetlany jako oddzielony blok tekstu (tzw. blokowy cytat), często z domyślnym wcięciem, aby wizualnie wyróżnić go od reszty zawartości strony.
Znaczenie i zastosowania
- Cytowanie źródeł – używaj
<blockquote>, gdy chcesz w czytelny sposób wskazać, że dany fragment tekstu stanowi cytat, np. z książki, artykułu czy wypowiedzi publicznej; - Wydzielenie dłuższych cytatów – element ten jest przeznaczony dla cytatów blokowych — znacznie dłuższych niż pojedyncze słowa czy krótkie frazy, gdzie stosuje się raczej znacznik
<q>; - Poprawa semantyki – znacznik dostarcza wyszukiwarkom, przeglądarkom oraz narzędziom dostępnościowym jasnej informacji o tym, które treści są cytatem;
- Atrybut
cite– pozwala wskazać źródło cytowanego tekstu (np. adres URL), co stanowi cenną informację dla użytkowników i robotów sieciowych, choć ten adres nie jest domyślnie widoczny na stronie.
Podstawowy przykład użycia
<blockquote cite="https://pl.wikipedia.org/wiki/Richard_Feynman">
<p>Richard Phillips Feynman był amerykańskim fizykiem teoretycznym znanym z pracy nad elektrodynamiką kwantową.</p>
<footer><cite>- Wikipedia</cite></footer>
</blockquote>
Powyższy kod utworzy na stronie blok z cytatem. Przeglądarka domyślnie wyświetli cytowaną treść z wcięciem, a informacja o źródle będzie dostępna w kodzie. Jeżeli chcesz, by użytkownik zobaczył źródło, należy dodać je ręcznie, np. poprzez element <footer> i <cite>.
Opcjonalny atrybut cite
Atrybut cite określa źródło cytatu w formie linku. Nie jest on jednak wyświetlany użytkownikom, lecz może być wykorzystywany przez narzędzia automatyczne czy boty indeksujące.
<blockquote cite="https://www.wiedzanaplus.pl/programy/56-libreoffice/310-znak-wodny-libreoffice-writer-kurs.html">
<p>Znak wodny LibreOffice możemy umieszczać m.in. w materiałach reklamowych...</p>
<footer><cite>- Piotr Klimek</cite></footer>
</blockquote>
Dostosowywanie wyglądu za pomocą CSS
Za pomocą CSS możesz nadać cytatom własny styl. Domyślnie <blockquote> jest tylko wcięty, więc warto zadbać o atrakcyjną prezentację, np.:
blockquote {
font-style: italic;
color: #555;
border-left: 4px solid #aaa;
margin: 20px 0;
padding: 10px 20px;
background: #f9f9f9;
}
Efekt – cytat będzie miał pogrubione wcięcie, szare tło i barwną linię z boku, co zwiększa jego czytelność i estetykę.
Dobre praktyki
- Korzystaj z
<blockquote>tylko dla rzeczywiście zacytowanych, dłuższych fragmentów tekstu z innych źródeł, - krótkie cytaty osadzaj z użyciem
<q>, - źródło zawsze staraj się podać — czy to przez atrybut
cite, czy jako element<cite>w stopce cytatu, - dbaj o poprawną semantykę, ponieważ poprawia to zarówno SEO, jak i dostępność strony.
Podsumowanie
<blockquote> jest fundamentalnym narzędziem w HTML do oznaczania cytowanych fragmentów, pozwalając na ich wyraźne wyróżnienie zarówno wizualnie, jak i semantycznie, a także wspierając dobre praktyki związane z cytowaniem i udostępnianiem treści.
