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

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

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

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

Цитата

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

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

Кроме того

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

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

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

Тег q

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Цитата должна отобразиться с немецкими кавычками: «Man sieht nur das, was man weiß». В современных Webkit браузерах проблемы с этим не возникает, а вот в Firefox они есть. В Firefox можно пофиксить с помощью CSS:

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

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

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

Тег Cite

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

Визуально тег <cite> делает текст курсивным, хотя и не должен для этого использоваться вовсе (для этого есть <em> или <i>). <cite> содержит название работы, автора, ссылку (ссылка именно видна в отличие от href). В первом нашем примере <cite> можно использовать так:

Заключение

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

Метки: ,

Похожие статьи:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree