Как сделать цитату в html

HTML Элементы цитаты и цитирования

Цитата бывшего чемпиона мира по боксу и мэра Киева Виталия Кличко:

HTML элемент <q> для коротких цитат

HTML элемент <q> определяет короткие цитаты.

Браузеры обычно вставляют кавычки вокруг элемента <q> .

Пример

HTML элемент <blockquote> для цитирования

HTML элемент <blockquote> определяет раздел, который цитируется с другого источника.

Браузеры обычно отображают элементы <blockquote> с отступом.

Пример

HTML элемент <abbr> для аббревиатур

HTML элемент <abbr> определяет аббревиатуру или акроним.

Маркировка сокращений может дать полезную информацию для браузеров, систем перевода и поисковых систем.

Пример

HTML элемент <address> для контактной информации

HTML элемент <address> определяет контактную информацию (автор/владелец) документа или статьи.

Элемент <address> обычно отображается курсивом. Большинство браузеров добавляют разрыв строки до и после элемента.

Пример

HTML элемент <cite> для названия работы

HTML элемент <cite> определяет название работы.

Браузеры обычно отображают элемент <cite> курсивом.

Пример

HTML элемент <bdo> для двунаправленного переопределения

HTML элемент <bdo> определяет двунаправленное переопределение.

Элемент <bdo> используется для переопределения текущего направления текста:

Пример

HTML Упражнения

HTML элементы цитаты и цитирования

Тег	Описание
<abbr>	Определяет аббревиатуру или акроним
<address>	Определяет контактную информацию для автора/владельца документа
<bdo>	Определяет направление текста
<blockquote>	Определяет раздел, который цитируется из другого источника
<cite>	Определяет название произведения
<q>	Определяет короткую встроенную цитату

Для получения полного списка всех доступных тегов HTML, посетите HTML Справочник тегов на нашем сайте W3Schools на русском.

Вопросы для самоконтроля

• Какой HTML-элемент определяет короткую цитату?
• Какой HTML-элемент определяет раздел, который цитируется с другого источника?
• Какой HTML-элемент определяет аббревиатуру или акроним?
• Какой HTML-элемент определяет контактную информацию (кто автор/владелец) документа или статьи?
• Какой HTML-элемент определяет название рыботы?
• Какой HTML-элемент определяет двунаправленное переопределение текущего направления текста?

ПАЛИТРА ЦВЕТОВ

ПРИСОЕДИНЯЙТЕСЬ!

Связь с админом

Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:

Топ Учебники

Топ Справочники

Топ Примеры

Веб Сертификаты

Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.

Фразовые теги в HTML

Главная составляющая веба — тексты. Тексты состоят из параграфов, строк и слов с разным форматированием. Какие-то слова выделены курсивом или подчёркнуты, у параграфов есть отступы, а у строк разрывы.

В HTML тексты внутри параграфов и их форматирование называют фразовым контентом. Кроме фразового есть и другие категории контента. Полный список смотрите в Руководстве веб-разработчика.

Фразовый контент может состоять из ссылок, терминов, сокращений, цитат и других фраз. Их обозначают с помощью фразовых тегов. Вы с ними наверняка уже сталкивались. Это теги <em> , <i> , <b> , <strong> , <span> и другие.

Фразовые теги отвечают за форматирование. Форматирование бывает визуальным и логическим.

Визуальное форматирование — любые видимые нам изменения текста. Практически всем фразовым тегам по умолчанию в браузерах заданы стили. Так что напрямую за визуальное форматирование отвечает CSS.

Логическое форматирование — это форматирование на уровне смысла и содержания. Оно нужно браузерам, вспомогательным и голосовым технологиям. Это особенно важно для программ чтения с экранов — скринридеров.

В этой статье расскажу о том, в каких случаях используют фразовые теги и как это правильно делать.

Содержание

Как уже сказала выше, форматирование делится на визуальное и логическое. За визуальное форматирование отвечают теги визуального форматирования, за логическое — теги логического форматирования. Последние называют ещё семантическими.

К тегам визуального форматирования относятся:

• <span> ;
• <mark> ;
• <br> и <wbr> ;
• <i> ;
• <b> ;
• <sup> и <sub> ;
• <ruby> ;
• <u> ;
• <s> .

А это список тегов логического форматирования:

• <a> ;
• <em> ;
• <strong> ;
• <cite> ;
• <code> ;
• <abbr> ;
• <dfn> ;
• <ins> ;
• <del> ;
• <q> ;
• <kbd> ;
• <samp> ;
• <var> ;
• <time> ;
• <small> ;
• <bdi> и <bdo> .

Сейчас расскажу подробнее о каждом фразовом элементе.

<span></span>

span — это контейнер для текста.

span используют, если нужно выделить другим цветом отдельные слова, словосочетания и предложения, изменить размер шрифта, добавить другой фон, обвести рамкой участок текста.

Со span можно использовать атрибуты class="" , title="" , lang="" и xml:lang="" . Последний — это аналог lang в XHTML-документах.

Так отобразится этот текст в браузере:

span не семантический тег и влияет только на внешний вид элементов, если ему заданы стили. Для скринридеров и поисковых роботов он не имеет значения, но есть одно исключение.

Это исключение — трюк с атрибутом lang="" . Если в тексте есть иностранные слова, то можно оборачивать их в span с указанием другого языка. Тогда скринридер прочтёт их с правильным произношением.

В примере сайт на русском языке, но в тексте встречаются слова на английском. Укажем для неё другой язык:

По умолчанию фраза внутри span не будет отличаться от остального текста.

<br> и <wbr>

br (break) переносит строку с текстом точно в том месте, где его поставили. При этом отдельный абзац не создаётся.

br пригодится для форматирования стихов, текстов песен или адресов. Во всех остальных случаях для разбиения на абзацы нужно использовать тег p .

Это одиночный тег и его не нужно закрывать.

В браузере этот текст выглядит так:

wbr (word break opportunity) ставит потенциальный разрыв строки.

Если у вас слишком длинные слова или URL-адреса, то смело используйте wbr . Он подходит для случаев, когда вы не уверены в месте переноса строки.

wbr тоже одиночный тег.

Закрепим: тег br переносит строку сразу. С wbr браузер сначала анализирует ширину контейнера, а уже потом ставит перенос.

Если нужно добавить дефис в местах разрыва строк, то используйте символ мягкого переноса &shy; (-):

Перенос сработает, когда ширина контейнера уменьшится.

С а всё просто. Используйте этот тег для ссылок на другие сайты или внутри одной страницы.

Простой пример использования:

По умолчанию ссылки подчёркнуты. Оттенок синего и стиль подчёркивания зависят от браузера.

Важно, чтобы ссылки точно описывали куда они ведут. Куда вы попадёте, кликнув по «Подробнее» или «Далее»? Нужно прочитать весь текст, чтобы это понять. У пользователей скринридеров тоже возникнут проблемы.

Для тех, кому важно сохранить лаконичность ссылок, Аарон Густафсон предлагает такой выход:

В примере текст ссылки скрывается на уровне CSS. То есть он будет доступен для пользователей со скринридерами, но не отобразится в браузере из-за свойств display: none; или visibility: hidden; .

При клике по ссылке новая страница открывается в том же самом окне. Этим поведение можно управлять с помощью атрибута target="" .

В примере ссылке задано значение _blank . Это значит, что она откроется в новом окне. В этом случае обязательно указывайте rel="noopener noreferrer" . Это поможет пользователям избежать фишинговых атак.

Якорные ссылки — это ссылки внутри одного документа.

Расставить такие ссылки просто. Для слова, к которому ведёт якорь, задайте id="" . Для якоря укажите путь через атрибут href="#нужный-id" . Ссылку для скринридеров можно описать в атрибуте aria-label="" . Закрепим на примере:

Тег a — важная часть логической разметки.

<em></em> и <i></i>

em (emphasis) — эмфатическое ударение.

Эмфатическое ударение — выделение слова интонацией для усиления эмоциональной выразительности.

Используйте em , если нужно сделать на части текста эмоциональный акцент и подчеркнуть его эмоциональную важность. Когда мы говорим, то делаем это при помощи интонации и громкости. В вебе для этого есть тег em .

Эмфатическое ударение может понадобиться при уточнении или исправлении неверного слова, например, когда речь идёт о распространённом заблуждении. Ещё его используют, когда приводится контраргумент, чтобы выделить его значимую часть. Также эмфатическое ударение используется в сарказме. Ещё один случай использования — намёки.

Слово, на котором стоит эмфатическое ударение, может изменить значение всего предложения.

Обычно в тег em оборачивают одно или два слова. Если информация срочная или автор настаивает на своей точке зрения, то em можно выделить всё предложение.

Текст внутри em выделяется курсивом.

Это тег логического форматирования. Поэтому скринридеры и голосовые помощники произнесут слово «он» с особой интонацией.

i (italic) делает текст наклонным.

Этот тег нужен для визуального форматирования. В i оборачивают названия, термины и иностранные слова. Он подходит также для обозначения прямой речи, мыслей, идиом и метафор.

Такой текст выделяется курсивом:

Если пишите слова на иностранном языке, то для i можно задать атрибут lang="" или xml:lang="" в XHTML-документах. Это поможет скринридерам и поисковым роботам.

�� Запомните, em — семантический тег, а i нет.
Об особенностях использования и различиях em и i подробно написал Факундо Коррадини в статье «You’re using <em> wrong».

<strong></strong> и <b></b>

strong — логическое ударение.

Логическое ударение — выделение слова интонацией для усиления его смысла или повышения значимости.

С помощью strong подчёркивают важность слов и предложений.

Пользователь увидит такой текст полужирным, а скринридеры выделят интонацией.

b (bold) делает текст полужирным.

Тег b используют для визуального форматирования. Он не усиливает смысловой вес слов, в отличие от strong .

Используйте b , если нужно выделить названия книг, фильмов, имён, ключевые слова и тому подобное. В статьях с его помощью выделяют лид — первый абзац статьи.

В браузере строчка отобразится так:

�� strong нужен для логического форматирования, а b — для визуального.

<mark></mark>

mark — контекстное выделение текста.

Представьте, что готовитесь к экзамену. Вы распечатали ответы на вопросы и вооружились текстовыделителем, чтобы отметить самое главное. mark похож на текстовыделитель, только в вебе.

Этот тег нужен для визуального выделения слов, которые имеют значимость для конкретного автора и в определённом контексте.

Используйте mark , когда нужно выделить какое-то важное для контекста слово, новый элемент в списке, показать текущую дату в календаре и совпадения с поисковыми запросами.

Хотя с точки зрения семантики mark более значим, чем span , это всё равно тег визуального форматирования.

mark автоматически заданы стили background-color: yellow; и color: black; .

s зачёркивает текст.

Используйте s , когда нужно зачеркнуть неправильный или устаревший текст. Это может быть старая цена или неактуальное предложение. Олдскульные любители форумов и Хабра используют перечёркивание в шутках, построенных на оговорке.

К s применяется свойство text-decoration: line-through; .

Этот тег нужен исключительно для визуального форматирования и не учитывается поисковыми роботами и скринридерами. Чтобы последние объявляли зачёркивание, спецификация рекомендует задавать псевдоклассам ::before и ::after нужное значение свойства content .

Вместо s можно использовать CSS. Задайте элементу text-decoration: line-through; .

В браузере строка отображается так:

Раньше тексты можно было зачеркнуть с помощью тега strike . Сейчас он исключён из спецификации.

�� s не подходит, если нужно нужно определить, когда и почему был удалён текст. В этом случае используйте del .

u (underline) подчёркивает текст.

Случаев использования u не так много. Чаще всего его используют для выделения слов с орфографическими ошибками и для подчёркивания имён собственных в китайском языке. Это могут быть географические названия, организации, имена.

Во втором случае в тег взято название страны 德國 — Германии.

К содержимому u применяется свойство text-decoration: underline; .

Этот тег отвечает за визуальное форматирование.

�� Не используйте u , если подчёркнутый текст можно перепутать со ссылкой.

<ins></ins> и <del></del>

ins (insert) определяет добавленный в документ текст.

Используйте ins когда нужно показать, какой текст был добавлен во время последнего обновления страницы.

С этим тегом можно использовать атрибуты cite="" и datetime="" . В cite пишут адрес документа, который объясняет, почему текст добавлен или отредактирован.
В datetime пишут дату и время редактирования или удаления текста. Формат: год-месяц-деньTчас:минуты:секунды:часовой пояс.

Браузер подчеркнёт этот текст.

del (delete) определяет удалённый или потерявший актуальность текст.

Тег del понадобится, если нужно показать различия между несколькими версиями страницы.

Для del доступны те же атрибуты, что и для ins : cite="" и datetime="" .

В браузере текст отобразится как зачёркнутый.

Когда в документе заменяют часть содержимого, то ins используют вместе с del .

Этот код глазами браузера.

ins и del нужны для логического форматирования.

q (quote) — короткая цитата.

Используйте q , когда дословно цитируете кого-то в предложении.

Для q можно задать атрибут cite="" , в котором указывается источник цитаты.

Тег q нужен для логического форматирования текста. Так поисковый робот поймёт, что в тексте есть цитаты из других источников.

Браузеры добавят для такого текста двойные кавычки.

Так браузер отобразит текст внутри q .

Минутка типографики. Браузеры автоматически ставят английские двойные кавычки “…”. Их используют в английском для оформления цитат.

Русская типографика отличается от английской. Вместо английских кавычек принято использовать французские — ёлочки. Они выглядят так: «…».

Чтобы заменить стандартные кавычки, задайте для свойства quotes значение “\00ab” “\00bb”; .

�� Если нужно выделить большую цитату, которая занимает несколько строк или целый абзац, используйте тег blockquote .

<cite></cite>

cite — источник цитаты.

Оборачивайте в cite цитируемые названия книг, статей, игр, фильмов, сериалов и любые ссылки на другие источники. Исключение — имена авторов. Для имён используйте b .

Содержимое тега cite отображается по умолчанию курсивом.

Тег cite семантический.

<abbr></abbr>

abbr (abbreviation) — аббревиатура или акроним.

Аббревиатура — слово, образованное сокращением слова или словосочетания. Примеры: ГЭС и ФСБ.

Акроним — вид аббревиатуры. Акронимы образуются начальными звуками слов, которые входят в сокращение. Примеры: W3C, A11Y и Бенилюкс.

В abbr можно можно раскрыть аббревиатуру в атрибуте title="" .

Браузер подчеркнёт слово пунктирной линией, а при наведении появится всплывающая подсказка.

В чёрной оптимизации title использовали не по назначению. Из-за этого современные скринридеры игнорируют содержимое атрибута. Поэтому лучше раскрывать аббревиатуру при первом упоминании в самом тексте без title="" .

Тег abbr семантический.

Помните, одна аббревиатура — один abbr . Если сокращение повторяется, то не надо его ещё раз оборачивать в этот тег.

�� Раньше для акронимов использовали отдельный тег acronym , но он был исключён из последней версии стандарта. Так что пользуйтесь abbr и не ломайте голову над видом аббревиатуры.

<dfn></dfn>

dfn (definition) — термин.

Используйте этот тег для терминов, которые упоминаете впервые.

В dfn можно вкладывать abbr , если это термин-аббревиатура.

Вместе с dfn можно использовать атрибут title="" . В нём приводится определение термина.

Во втором примере в dfn вложен abbr . В этом случае аббревиатура раскрывается в атрибуте title="" .

В браузере текст станет наклонным.

dfn — тег логического форматирования.

<code></code>

code — фрагмент компьютерного кода.

Используйте code для названий элементов языков программирования или целых строк кода.

Отображается как текст, написанный моноширинным шрифтом .

code можно использовать внутри pre , если нужно сохранить исходное форматирование. В этом случае сохранятся авторские пробелы и переносы.

Получим такое форматирование:

Тег code нужен для логического форматирования.

<samp></samp>

samp (sample) — результат вывода компьютерной программы или скрипта.

Тег samp полезен, когда в тексте цитируются системные ошибки и приводятся примеры вывода данных системой.

Браузеры сделают текст моноширинным .

samp можно комбинировать с pre и code .

Получим такой текст:

samp — тег логического форматирования.

�� Тег tt (TeleType) выполняет похожую функцию. Не используйте его. Он устарел и исключён из стандарта.

<kbd></kbd>

kbd (keyboard) — названия клавиш.

Используйте kbd , если пишите названия клавиш и голосовые команды.

Если нужно написать сочетание из нескольких клавиш, то вложите дочерние kbd в общий контейнер.

Текст внутри kbd написан моноширинным шрифтом .

kbd может содержать тег samp или быть вложенным в него.

В kbd вкладывают samp , если нужно показать входные данные в виде текста, который отображается системой. Простой пример — это названия кнопок или пунктов и подпунктов меню в программах. В примере так указан путь к нужному пункту меню:

Так отобразит текст браузер.

В samp вкладывают kbd , когда нужно показать как система интерпретировала пользовательский ввод.

Браузер использует для текста всё тот же моноширинный шрифт :

Тег kbd нужен для логического форматирования.

<var></var>

var (variable) — переменная.

Используйте var для математических и программных переменных. В этот тег можно оборачивать любые фразы, которые легко заменить конкретными значениями.

Браузеры выделят var курсивом.

�� Для сложных математических формул и расчётов используйте специальный язык разметки MathML.

<small></small>

small — дополнительная информация.

Используйте small для небольших сносок и комментариев. Это могут быть предостережения, оговорки, информация о лицензии, авторских правах и тому подобное.

Размер small зависит от основного размера шрифта и гарнитуры. К тегу применяется свойство font-size: smaller; , которое уменьшает шрифт на одну условную единицу.

Можно вкладывать один тег small в другой.

В этом случае размер текста будет меньше с каждым уровнем вложенности.

�� Раньше small использовался для физического форматирования вместе с big . В последней спецификации он приобрёл семантическое значение, а big был исключён. Вместо big спецификация рекомендует использовать CSS.

 и 

sup (superscript) — надстрочный текст.

Надстрочным текстом пишут сноски или математические знаки и символы.

Надстрочный текст расположен над базовой линией, а его высота в два раза меньше основного. К sup по умолчанию применяются свойства vertical-align: super; и font-size: smaller; .

sub (subscript) — подстрочный текст.

Подстрочный текст используется в формулах.

Подстрочный текст меньше в высоту и располагается ниже базовой линии. По умолчанию sub заданы свойства vertical-align: sub; и font-size: smaller; .

�� Для сложных математических формул используйте язык разметки MathML.

<ruby></ruby>

ruby — верхняя или нижняя текстовая аннотация.

Тег связан с агатом — типографским шрифтом, размер букв в котором равен 5,5 пунктам.

В теге указывается, как произносятся иероглифы в китайском, японском и других восточно-азиатских языках.

Внутрь ruby вкладываются теги rt и rp .
В rt размещается аннотация к тексту.
Тег rp нужен для аннотаций для браузеров, которые не поддерживают ruby . Если браузер поддерживает ruby , то текст не отобразится.

Браузеры разместят один текст над другим и уменьшат надстрочный шрифт.

Можно вкладывать один элемент ruby в другой. В этом примере указана транскрипция слов на хирагане и английском языке.

Текст в браузере отобразится так:

Тег ruby нужен для визуального форматирования.

<bdo></bdo> и <bdi></bdi>

bdo (bi-directional override) — изменение направления текста.

Тег bdo будет полезен, если на сайте несколько языков, один из которых читается справа налево или наоборот. Справа налево пишут в арабском языке и иврите.

В bdo обязательно нужно указывать атрибут dir="" , который задаёт направление текста:
rtl — справа налево;
ltr — слева направо.

В браузере предложение выглядит так:

bdi (bi-directional isolate) — отмена изменения направления текста.

Используйте bdi для слов, которых не должно касаться изменение направления текста. Это полезно, когда направление текста заранее не известно или есть слова из языка с другим направлением.

В примере в тексте на иврите есть слово на английском, которое нам не нужно разворачивать.

По умолчанию для bdi задан атрибут dir="auto" .

Поведение bdi можно заменить стилями. Примените к span правило unicode-bidi: isolate; . Только помните, что в этом случае браузер не сможет понять семантику, которая передаётся с помощью bdi .

�� На сентябрь 2018 bdi поддерживается браузерами частично.

<time></time>

time — дата и время в машиночитаемом формате.

Используйте time , если в тексте указаны точные даты и время. Это может быть время отправки комментария или сообщения, расписание, архив, календарь.

Этот тег не стоит использовать, если:

• дата неточная;
• дата в формате, который использовался до григорианского календаря.

Внутри time можно использовать несколько атрибутов:
datetime="" — дата и время в машиночитаемом формате;
pubdate="" — дата публикации документа;
title="" — дополнительная информация.

Время указывается внутри time или в атрибуте datetime . Во втором примере в datetime указаны число и месяц.

Браузер отобразит эти строки как обычный текст. Содержимое атрибута title станет всплывающей подсказкой.

Формат времени в datetime="" жёстко определён.

• Год: 1985.
  Должен состоять из четырёх и более цифр.
• Год и неделя: 1984-W38.
  W — номер недели.
• Год и месяц: 1985-10.
• Год, месяц, день: 1985-10-25.
• Месяц и день: 10-25.
• Часы и минуты: 1:15.
• Часы, минуты, секунды: 1:15:39.
• Часы, минуты, доли секунд: 1:54:39.929.
  Доли нужно округлять до трёх знаков.
• Дата и время, разделённые «T» или пробелом: 1985-10-25T1:15. Время можно указывать с секундами и долями секунд: 1985-10-25T1:15:39.
• Часовой пояс можно задать несколькими способами: Z или +0000, +00:00, -0800, -08:00.
  Двоеточие можно не использовать.
• Местная дата и время: 1985-10-25T1:15Z.
• Временной интервал: P2T4H18M3S.
  P, количество дней, T, количество часов (H), минут (M) и секунд (S). Дни и часы можно не указывать.
• Временной интервал можно указать другим способом: 1w 2d 2h 30m 10.501s.
  w — недели, d — дни, h — часы, m — минуты, s — секунды.
  Можно писать слитно, а буквы могут быть в любом регистре.

time нужен для логического форматирования и важен для поисковиков. Благодаря этому тегу ссылки в поисковой выдачи размещаются в хронологическом порядке.

Браузеры автоматически преобразовывают дату из григорианского календаря в другую систему исчисления времени. Например, японский браузер покажет <time>16:00</time> как «16:00時». «時» означает «час».

И немного информационного дизайна. В блоге UX-дизайнера Михаила Озорнина есть советы о том, как писать дату и время в интерфейсах.

Выводы

Фразовые теги — это важная часть HTML-разметки. Эти теги отвечают за визуальное и логическое форматирование. Благодаря этому тексты становятся понятными для пользователей и разных технологий.

Визуальное форматирование помогает пользователям быстрее читать, ориентироваться в текстах и находить важные фразы. Логическое форматирование нужно для браузеров, вспомогательных и речевых технологий и помогает им интерпретировать тексты.

Всего лишь пара фразовых тегов сделает код структурированным и предсказуемым, а страницы доступными.

Если у разметки чёткая структура, то в ней сможете разобраться не только вы, но и другие разработчики. Это избавит команду от лишней головной боли и борьбы с легаси мельницами. Для поисковиков это тоже важно. У страниц с чёткой структурой больше шансов продвинутся вверх в поисковой выдаче.

Предсказуемость разметки означает, что браузеры отобразят страницу так, как это описано в стандартах.

Наконец, благодаря фразовым тегам вспомогательные технологии могут понимать тексты.

Цитирование в HTML

От автора: слишком часто можно увидеть неправильный HTML-код, используемый для цитат в разметке. В этой статье давайте разберемся со всем этим, рассмотрим различные ситуации и разные HTML-теги для этих ситуаций.

В цитатах используются три основных элемента HTML: <blockquote>, <q>, <cite>. Давайте рассмотрим их по порядку.

blockquote

Теги blockquote используются для того, чтобы цитируемый текст отличался от остального содержимого. Мой учитель английского в десятом классе вложил мне в голову, что любая цитата из четырех или более строк должна быть выделена таким образом. Спецификация HTML не содержит такого требования, но когда текст является цитатой, и вы хотите, чтобы он был отделен от окружающего текста и тегов, blockquote является семантическим выбором.

По умолчанию браузеры вставляют отступы, добавляя поля с каждой стороны.

Профессия Frontend-разработчик PRO

Готовим Frontend-разработчиков с нуля

На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…

Как элемент потока (то есть элемент «уровня блока»), blockquote может содержать внутри другие элементы. Например, мы можем без проблем вставить абзацы:

Но это могут быть и другие элементы, такие как заголовок или неупорядоченный список:

Важно отметить, что blockquote должны использоваться только для цитат, а не как декоративный элемент в дизайне. Это также способствует доступности, поскольку пользователи программы чтения с экрана могут переходить между цитатами. Таким образом, элемент blockquote, используемый исключительно для эстетики, может действительно запутать этих пользователей. Если вам нужно что-то более декоративное, выходящее за пределы расширенных цитат, то, возможно, лучше использовать div с классом.

Теги q предназначены для встроенных цитат или, как сказал бы мой учитель в десятом классе, тех, что имеют меньше четырех строк. Многие современные браузеры автоматически добавляют кавычки для цитат в качестве псевдо-элементов, но для старых браузеров может потребоваться резервное решение.

Стандартные кавычки так же действительны для встроенных цитат с элементом <q>. Преимущества использования <q>, однако, заключаются в том, что он включает атрибут cite, автоматическую обработку кавычек и автоматическую обработку уровней кавычек. Элементы <q> не должны использоваться для сарказма. Или собственного описания автора. Но если вы можете четко определить, как размечать подобные цитаты, пожалуйста, дайте мне знать. Потому что это было бы «круто».

Атрибут cite

И <q>, и blockquotes могут использовать атрибут цитирования (cite). Этот атрибут содержит URL, который предоставляет контекст и / или ссылку на цитируемый материал. Спецификация подразумевает, что URL может быть окружен пробелами. (Я не уверен, почему это указано, но если вы хотите разозлить божеств семантического кода, вам придется сделать больше, чем просто выбросить пробелы.)

HTML Quotation and Citation Elements

In this chapter we will go through the <blockquote> , <q> , <abbr> , <address> , <cite> , and <bdo> HTML elements.

Example

Here is a quote from WWF’s website:

HTML <blockquote> for Quotations

The HTML <blockquote> element defines a section that is quoted from another source.

Browsers usually indent <blockquote> elements.

Example

HTML <q> for Short Quotations

The HTML <q> tag defines a short quotation.

Browsers normally insert quotation marks around the quotation.

Example

HTML <abbr> for Abbreviations

The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS", «Mr.", "Dr.", "ASAP", "ATM".

Marking abbreviations can give useful information to browsers, translation systems and search-engines.

Tip: Use the global title attribute to show the description for the abbreviation/acronym when you mouse over the element.

Example

HTML <address> for Contact Information

The HTML <address> tag defines the contact information for the author/owner of a document or an article.

The contact information can be an email address, URL, physical address, phone number, social media handle, etc.

The text in the <address> element usually renders in italic, and browsers will always add a line break before and after the <address> element.

Example

HTML <cite> for Work Title

The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).

Note: A person’s name is not the title of a work.

The text in the <cite> element usually renders in italic.

Example

HTML <bdo> for Bi-Directional Override

BDO stands for Bi-Directional Override.

The HTML <bdo> tag is used to override the current text direction:

Example

HTML Exercises

Test Yourself with Exercises!

HTML Quotation and Citation Elements

Tag	Description
<abbr>	Defines an abbreviation or acronym
<address>	Defines contact information for the author/owner of a document
<bdo>	Defines the text direction
<blockquote>	Defines a section that is quoted from another source
<cite>	Defines the title of a work
<q>	Defines a short inline quotation

For a complete list of all available HTML tags, visit our HTML Tag Reference.