Другими словами: Использование кавычек, цитат и тега q

Другими словами: Использование кавычек, цитат и тега q

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

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

Цитата

Тег <blockquote> это блочный элемент и несет в себе развернутую цитату. К примеру:

<blockquote>
Учить тому, как жить без уверенности и в то же время не быть парализованным нерешительностью, – это, пожалуй, главное, что может сделать философия в наш век для тех, кто занимается ею
</blockquote>

Тут стоит отметить пару вещей:

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

По умолчанию тег цитаты отталкивает слегка текст от левого и правого краев. По этой причине его часто используют для отступов. Говорить о том, что лучше так не делать вовсе излишне: если вам нужно подвинуть элемент просто добавьте к нему margin-left в CSS, а не тег <blockquote>.

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

Обычно перед применением <blockquote> текст оборачивается в тег <p>. В HTML5 уже можно цитировать и без тега параграфа, но практика пока что сохраняется (смотрите ниже).

Кроме того

Тег цитаты по умолчанию не ссылается на основной источник. Это можно сделать разными способами: первый это атрибут <cite>.

<blockquote cite="https://archive.org/stream/westernphilosoph035502mbp/westernphilosoph035502mbp_djvu.txt">
Учить тому, как жить без уверенности и в то же время не быть парализованным нерешительностью, – это, пожалуй, главное, что может сделать философия в наш век для тех, кто занимается ею
</blockquote>

Но к несчастью, ни один известный мне браузер на сейчас не использует этот атрибут. Как альтернатива атрибуту cite, сослаться на источник можно, добавив тег <footer> и/или тег <cite> внутри цитаты <blockquote>:

<blockquote>
<p>Учить тому, как жить без уверенности и в то же время не быть парализованным нерешительностью, – это, пожалуй, главное, что может сделать философия в наш век для тех, кто занимается ею.</p>
<footer>
	<p>- Бертран Рассел, История западной философии</p>
</footer>
</blockquote>

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

Тег q

Предназначен для коротких цитат внутри предложений. К примеру:

<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> автоматически создает открывающие и закрывающие одинарные скобки для текста на английском языке. В других языках используются другие знаки, не все из них поддерживаются всеми браузерами. К примеру, цитата на немецком:

<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:

:lang(de) > q { quotes: "„" "“" "‚" "‘" }

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

Важно понять, что тег <q> предназначен для цитирования сторонних источников, а не для выделения части текста или фразы на той же странице.

Как и с тегом <blockquote> к элементу <q> можно добавить атрибут cite, чтобы указать ссылку на источник.

Тег Cite

Крайне смутная информация в HTML об элементе cite, который одновременно является тегом и атрибутом. В качестве тега его используют для ссылки на какую-либо работу: книга, кино, телевизионное шоу, сценическая постановка, музыкальный альбом или программное обеспечение. Чтобы дополнить статью информацией, тег <cite> можно использовать вместе с микроданными.

<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> можно использовать так:

<blockquote>
    <p>“ Учить тому, как жить без уверенности и в то же время не быть парализованным нерешительностью, – это, пожалуй, главное, что может сделать философия в наш век для тех, кто занимается ею.”</p>
    <footer>						
        <p>― Бертран Рассел, 
        <cite>История западной философии</cite></p>
    </footer>
</blockquote>

Заключение

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

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Курс по HTML5: основы

Изучите HTML5 с нуля!

Смотреть курс

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree