Jeśli kiedykolwiek patrzyłeś na listę elementów HTML, mógłbyś zapytać "co to jest cytat blokowy?" Element blockquote to para tagów HTML, która służy do definiowania długich cytatów. Oto definicja tego elementu zgodnie ze specyfikacją W3C HTML5:
Element blockquote reprezentuje sekcję cytowaną z innego źródła.
Jak korzystać z cytatów bloków na stronach internetowych
Podczas pisania tekstu na stronie internetowej i tworzenia układu strony, czasami chcesz wywołać blok tekstu jako cytat. Może to być cytat z innego miejsca, np. Referencje klientów, które towarzyszą studium przypadku lub historii sukcesu projektu. Może to być również projekt, który powtarza ważny tekst z samego artykułu lub treści. W publikowaniu jest to czasami nazywane przyciągającym cytatem. W projektowaniu stron internetowych, jednym ze sposobów na osiągnięcie tego celu (i sposobu, w jaki omawiamy ten artykuł) jest tzw. Cytat blokowy.
Spójrzmy zatem, w jaki sposób użyć znacznika blockquote do zdefiniowania długich cytatów, takich jak ten fragment "The Jabberwocky" autorstwa Lewisa Carrolla:
"Twas brillig i slithey tovesGrawerował i walczył w walce:Wszystkie mimsy były borowkami,I math raths outgrabe.
(autor: Lewis Carroll)
Przykład użycia znacznika Blockquote
Tag blockquote to znacznik semantyczny, który informuje przeglądarkę lub program użytkownika, że zawartość jest długimi cytatami. W związku z tym nie należy umieszczać tekstu, który nie jest cytatem wewnątrz znacznika blockquote. Pamiętaj, że "cytat" to często rzeczywiste słowa, które ktoś powiedział lub tekst z zewnętrznego źródła (jak tekst Lewisa Carrolla w tym artykule), ale mogą także pojęcie pullquote, które omówiliśmy wcześniej. Kiedy się nad tym zastanowić, ta ciągówka jest cytatem z tekstu, po prostu pochodzi z tego samego artykułu, w którym pojawia się cytat.
Większość przeglądarek internetowych dodaje wcięcie (około 5 spacji) do obu stron cytatu blokowego, aby odróżnić go od otaczającego tekstu. Niektóre bardzo stare przeglądarki mogą nawet uczynić cytowany tekst kursywą. Pamiętaj, że jest to po prostu domyślna stylizacja elementu blockquote. Dzięki CSS masz pełną kontrolę nad tym, jak będzie wyświetlany Twój cytat. Możesz zwiększyć lub nawet usunąć wcięcie, dodać kolory tła lub zwiększyć rozmiar tekstu, aby dodatkowo wywołać cytat. Możesz przenieść ten cytat na jedną stronę strony i oblewać go innym tekstem, który jest powszechnym stylem wizualnym używanym do ciągłych cytatów w drukowanych czasopismach. Masz kontrolę nad pojawieniem się cytatu z CSS, o czym porozmawiamy nieco później. Na razie spójrzmy, jak dodać samą wycenę do znaczników HTML.
Aby dodać tag blockquote do tekstu, po prostu otocz tekst będący cytatem za pomocą następującej pary tagów -
Na przykład:
"Twas brillig i slithey toves Grawerował i walczył w walce: Wszystkie mimsy były borowkami, I math raths outgrabe.Jak widać, wystarczy dodać parę tagów blockquote wokół samej treści cytatu. W tym przykładzie użyliśmy także niektórych znaczników przerwania (), aby dodać przerwy pojedynczych wierszy tam, gdzie jest to właściwe w tekście. Dzieje się tak dlatego, że odtwarzamy tekst z wiersza, w którym ważne są te konkretne przerwy. Jeśli tworzyłeś cytat z referencjami klientów, a linie nie musiały się łamać w określonych częściach, nie chcesz dodawać tych tagów break i zezwalać przeglądarce na owijanie i łamanie według potrzeb na podstawie rozmiaru ekranu.
Nie używaj cytatów z bloku do wcięcia tekstu
Przez wiele lat ludzie używali tagu blockquote, jeśli chcieli wprowadzić wcięcie tekstu na swojej stronie internetowej, nawet jeśli ten tekst nie był ciągnąc. To jest zła praktyka! Nie chcesz używać semantyki blockquote wyłącznie ze względów wizualnych. Jeśli potrzebujesz wcięcia tekstu, powinieneś użyć arkuszy stylów, a nie tagów blockquote (chyba, że to, co próbujesz wciskać, to cytat!). Spróbuj umieścić ten kod na swojej stronie internetowej, jeśli próbujesz po prostu dodać wcięcie:
To będzie tekst, który jest wcięty.
Następnie możesz kierować tę klasę ze stylem CSS
.indented {
wypełnienie: 0 10 pikseli;}
Powoduje to dodanie 10 pikseli wypełnienia do każdej strony akapitu.
