От автора: при правильном использовании часто игнорируемых, а с другой стороны часто злоупотребляемых тегов <blockquote>, <cite> и <q> можно создавать по-настоящему семантически и типографски богатые страницы.
Главная идея, которую стоит держать в голове, в том, что эти элементы используются для разграничения слов или цитат в общем контенте страницы, но не относящихся к контексту. Вот почему теги <blockquote>, <cite> и <q> почти всегда содержат контент от других людей.
Цитата
Тег <blockquote> это блочный элемент и несет в себе развернутую цитату. К примеру:
|
1 2 3 |
<blockquote> Учить тому, как жить без уверенности и в то же время не быть парализованным нерешительностью, – это, пожалуй, главное, что может сделать философия в наш век для тех, кто занимается ею </blockquote> |
Тут стоит отметить пару вещей:
Тег <blockquote> не создает автоматически кавычки вокруг цитаты: если это необходимо, вам придется добавить их самому или как символы, или как спецсимволы HTML, или как генерируемый контент.
По умолчанию тег цитаты отталкивает слегка текст от левого и правого краев. По этой причине его часто используют для отступов. Говорить о том, что лучше так не делать вовсе излишне: если вам нужно подвинуть элемент просто добавьте к нему margin-left в CSS, а не тег <blockquote>.
Тег цитаты используется для цитирования текста, который уже есть на странице в форме ярко оформленных цитат.
Обычно перед применением <blockquote> текст оборачивается в тег <p>. В HTML5 уже можно цитировать и без тега параграфа, но практика пока что сохраняется (смотрите ниже).
Кроме того
Тег цитаты по умолчанию не ссылается на основной источник. Это можно сделать разными способами: первый это атрибут <cite>.
|
1 2 3 |
<blockquote cite="//archive.org/stream/westernphilosoph035502mbp/westernphilosoph035502mbp_djvu.txt"> Учить тому, как жить без уверенности и в то же время не быть парализованным нерешительностью, – это, пожалуй, главное, что может сделать философия в наш век для тех, кто занимается ею </blockquote> |
Но к несчастью, ни один известный мне браузер на сейчас не использует этот атрибут. Как альтернатива атрибуту cite, сослаться на источник можно, добавив тег <footer> и/или тег <cite> внутри цитаты <blockquote>:
|
1 2 3 4 5 6 |
<blockquote> <p>Учить тому, как жить без уверенности и в то же время не быть парализованным нерешительностью, – это, пожалуй, главное, что может сделать философия в наш век для тех, кто занимается ею.</p> <footer> <p>- Бертран Рассел, История западной философии</p> </footer> </blockquote> |
Обычно название книги или имя автора помещается в ссылку. Это делается для того, чтобы читатель мог найти больше информации об авторе.
Тег q
Предназначен для коротких цитат внутри предложений. К примеру:
|
1 2 |
<p>As Voltaire said: <q>Every man is a creature of the age in which he lives and few are able to raise themselves above the ideas of the time.</q> |
Пару замечаний: Тег <q> автоматически создает открывающие и закрывающие одинарные скобки для текста на английском языке. В других языках используются другие знаки, не все из них поддерживаются всеми браузерами. К примеру, цитата на немецком:
|
1 2 |
<html lang="de"> <p>Wie Goethe sagte: <q>Man sieht nur das, was man weiß.</q> |
Цитата должна отобразиться с немецкими кавычками: «Man sieht nur das, was man weiß». В современных Webkit браузерах проблемы с этим не возникает, а вот в Firefox они есть. В Firefox можно пофиксить с помощью CSS:
|
1 |
:lang(de) > q { quotes: "„" "“" "‚" "‘" } |
В википедии можно найти кавычки для других языков. Огромная благодарность Gunnar Bittersmann, что заметили одно исключение. Два замечания:
Важно понять, что тег <q> предназначен для цитирования сторонних источников, а не для выделения части текста или фразы на той же странице.
Как и с тегом <blockquote> к элементу <q> можно добавить атрибут cite, чтобы указать ссылку на источник.
Тег Cite
Крайне смутная информация в HTML об элементе cite, который одновременно является тегом и атрибутом. В качестве тега его используют для ссылки на какую-либо работу: книга, кино, телевизионное шоу, сценическая постановка, музыкальный альбом или программное обеспечение. Чтобы дополнить статью информацией, тег <cite> можно использовать вместе с микроданными.
|
1 2 3 |
<p>Like many thick tomes, <cite>Atlas Shrugged</cite> exists on the shelf of most readers as a book to be bragged about, rather than one to be read or analysed. |
Визуально тег <cite> делает текст курсивным, хотя и не должен для этого использоваться вовсе (для этого есть <em> или <i>). <cite> содержит название работы, автора, ссылку (ссылка именно видна в отличие от href). В первом нашем примере <cite> можно использовать так:
|
1 2 3 4 5 6 7 |
<blockquote> <p>“ Учить тому, как жить без уверенности и в то же время не быть парализованным нерешительностью, – это, пожалуй, главное, что может сделать философия в наш век для тех, кто занимается ею.”</p> <footer> <p>― Бертран Рассел, <cite>История западной философии</cite></p> </footer> </blockquote> |
Заключение
Теги <blockquote>, <cite> и <q> крайне полезны… особенно если их использовать по назначению. В паре с другими тегами HTML, используемых для редактирования текста, вы получаете в свою копилку полный и очень богатый набор инструментов.
Источник: //thenewcode.com/
Редакция: Команда webformyself.
