Тег blockquote в HTML

Что делает тег blockquote в HTML?

Элементом <blockquote> определяют часть текста, которая является прямой цитатой. В то же время элемент <quote> следует использовать, когда цитата представляется встроенным в окружающий текст. Но когда цитата представляется в виде отдельного абзаца, то тег <blockquote> является более подходящим элементом.

При цитировании более чем нескольких слов в документе необходимо использовать тег blockquote, чтобы
<blockquote>отделить цитируемый текст</blockquote>
от окружающего текста.
где используется тег blockquote

Стилизация элемента blockquote

Ваш стиль применения <blockquote> зависит от вашего конкретного дизайна сайта, но есть несколько вещей, которые стали довольно распространенной практикой. Вам не обязательно следовать за ними, но вы можете обнаружить, что это полезно.  Наиболее распространенной практикой для стилизации <blockquote> является отступ с помощью CSS margin. Обычно это применяется только для левой стороны выделяемого контента, однако в полностью выровненном тексте может быть полезно разместить поля с обеих сторон цитаты.

justified { text-align: justify; } blockquote { margin: 0 45px; }
<div class="justified">
<p>При цитировании более чем нескольких слов в документе необходимо использовать тег blockquote, чтобы</p>
<blockquote>
отделить цитируемый текст
</blockquote>
<p>от окружающего текста.</p>
</div>
использование CSS margin для стилизации элемента blockquote


Другой очень распространенный шаблон стиля — это разместить вертикальную линию или границу вдоль левого края цитаты. Обычно содержимое <blockquote> выставляется в соответствии с краем текста, что требует использования padding вместо margin для достижения правильного отступа. CSS border находятся внутри margin и за пределами padding. Вы также можете установить левое поле (margin) на 0, чтобы переопределить поле по умолчанию. Это хорошо работает независимо от того, оправдан ли текст.

blockquote { padding: 0 45px; margin-left: 0; border-left: 2px solid gray; }
<p>При цитировании более чем нескольких слов в документе необходимо использовать тег blockquote, чтобы</p>
<blockquote>
отделить цитируемый текст
</blockquote>
<p>от окружающего текста.</p>ружающего текста.
применение CSS margin и padding для выделения цитат blockquote

Использование тега <cite> вместо <blockquote>

Некоторые программисты рекомендуют использовать элемент <cite> для определения источника цитаты. Однако это не разрешено в соответствии со стандартом HTML5. Есть некоторые разногласия относительно того, что именно должен содержать элемент <cite>, но и W3C, и WHATWG согласны с тем, что этот элемент не следует использовать для цитат. Элемент <cite> должен использоваться для идентификации названия произведения, а не его автора или источника произвольной цитаты.

Использование тега cite
<blockquote>
Вы должны использовать элемент cite для определения источника цитаты. —
<cite>Some People</cite>
</blockquote>

различия применения тегов blockquote и cite в цитатах
Хотя рекомендация W3C для HTML5 гласит, что элемент <cite> может включать имя автора (вместе с заголовком), лучше всего  следовать стандарту WHATWG и использовать его только для названия произведения.

Элемент <q>

Почти все знают и используют элемент <blockquote>, но очень немногие составители HTML-документов знают или используют  элемент <q>, который представляет собой встроенную цитату. Поскольку знаки препинания в разных регионах различны, вы можете рассмотреть возможность использования тега <q> в качестве альтернативы типографским кавычкам.

1 комментарий к “Тег blockquote в HTML”

  1. Теги blockquote , cite и q крайне полезны особенно если их использовать по назначению. В паре с другими тегами HTML, используемых для редактирования текста, вы получаете в свою копилку полный и очень богатый набор инструментов.

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *