<blockquote>
Dłuższy cytat z innego źródła, wyświetlany jako osobny blok z wcięciem.
- Wyświetlanie
- block
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Treść przepływu (flow content)
Przykład
#<figure>
<blockquote>
<p>Po trzech miesiącach nauki zbudowałam pierwszą aplikację. Najbardziej pomogły mi krótkie, codzienne zadania.</p>
</blockquote>
<figcaption>Julia, absolwentka kursu JavaScript</figcaption>
</figure>Definicja i zastosowanie
#Element <blockquote> oznacza obszerny cytat z innego źródła: fragment książki, wypowiedź eksperta albo opinię klienta. Przeglądarki wyświetlają go jako osobny blok z marginesami po obu stronach.
Adres źródła możesz zapisać w atrybucie cite, ale przeglądarka go nie pokazuje. Autora i tytuł, które ma zobaczyć czytelnik, umieść poza cytatem, najlepiej w <figcaption> elementu <figure>, który obejmuje cytat. Tytuł dzieła oznacz dodatkowo elementem <cite>.
Krótki cytat wpleciony w zdanie oznacza się elementem <q>. Z kolei <blockquote> nie służy do robienia wcięć: jeśli chcesz tylko odsunąć tekst od krawędzi, użyj CSS.
Składnia
#<blockquote cite="adres-źródła">
<p>Treść cytatu.</p>
</blockquote>Atrybuty
#URL
Adres dokumentu lub strony, z której pochodzi cytat. Nie jest wyświetlany, ale mogą go odczytać skrypty i roboty. Źródło, które ma zobaczyć użytkownik, podaj w widocznej treści.
Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.
Atrybuty w praktyce
#cite
URLAdres dokumentu lub strony, z której pochodzi cytat. Nie jest wyświetlany, ale mogą go odczytać skrypty i roboty. Źródło, które ma zobaczyć użytkownik, podaj w widocznej treści.
<blockquote cite="https://www.codeworlds.com/blog/jak-sie-uczyc">
<p>Codzienne 20 minut daje więcej niż jeden długi weekend nauki raz w miesiącu.</p>
</blockquote>Więcej przykładów
#<blockquote>
<p>Nie ucz się wszystkiego naraz. Zbuduj coś małego, a braki w wiedzy same wyjdą na jaw.</p>
</blockquote>
<p>Z newslettera <cite>Kod na co dzień</cite></p>Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
blockquote {
display: block;
margin-block: 1em;
margin-inline: 40px;
}Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Nie używaj
<blockquote>do wcięć. Odsunięcie tekstu to zadanie dla CSS. - Autora cytatu podaj poza elementem, np. w
<figcaption>wewnątrz<figure>. - Krótki cytat w środku zdania oznacz przez
<q>, a przeglądarka sama doda cudzysłowy.
Powiązane hasła
#- <q>Krótki cytat wpleciony w zdanie. Cudzysłowy dodaje sama przeglądarka.
- <cite>Tytuł dzieła: książki, artykułu, filmu, piosenki, gry albo programu.
- <figure>Samodzielna ilustracja z opcjonalnym podpisem: obraz, wykres, fragment kodu, cytat.
- <figcaption>Podpis ilustracji w elemencie `<figure>`.
- <p>Akapit tekstu.
Widzisz błąd albo brakuje przykładu? Napisz do nas.