Глава 8.9. Цитаты и выделенные мысли в потоке текста

Семантическая вёрстка цитат

Мы учим основам семантической вёрстки в главе «Разметка текста».

Семантическое значение цитаты — внешний контент, то есть <q> — это строчный элемент, содержащий материалы не уникальные, имеющие другой источник. А <blockquote>, соответственно, тег для выделенных, вынесенных в отдельную секцию цитат.

Цитата внутри текста может верстаться тегом <q> и не выходит из абзаца. Такие цитаты могут быть выделены другим начертанием. До и после содержимого тега <q> браузер автоматически проставляет кавычки подходящего для языка документа вида. Для русского языка проставляются „лапки“ или «ёлочки». Переопределить кавычки можно с помощью CSS-свойства quotes:

{ quotes: "открывающая кавычка в юникоде" "закрывающая кавычка в юникоде";}

Вместо <q> можно просто использовать принятые на вашем сайте кавычки, спецификация разрешает это. Использовать <q> для контента, не являющегося цитатой (для сарказма или переводных слов, выделяющихся кавычками) — не семантично.

Цитата встроена в абзац, наклон в источнике — по умолчанию, саму цитату мы выделили цветом

<p>Но, как писал <cite>Кастанеда в «Учении дона Хуана»</cite>, <q>Страхи перед знанием — дело обычное; все мы им подвержены, и тут ничего не поделаешь. Однако каким бы устрашающим ни было учение, ещё страшней представить себе человека, у которого нет знания</q>, и с этим сложно поспорить.</p>p { font-family: "Georgia", "Times New Roman", serif; font-style: normal; font-weight: normal; font-size: 28px; line-height: 46px; color: #333333;} q { quotes: "«" "»"; color: #744ce6;}

Мы же поговорим об отдельных и специальным образом оформленных цитатах.

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

Про работу со спецификацией

Про то, как работать со спецификацией, есть шорт «Спецификация W3C или WHATWG». В целом ничего не изменилось, разве что в мае 2019 принято решение что актуальная спецификация будет в html.spec.whatwg.org.

У цитат есть своя специфика вёрстки. Например, есть атрибут cite, который также может выступать как тег <cite>, оба применяются для указания источника (не только для источника-сайта, но и для автора высказывания, для названия произведения, ссылки на первоисточник). Атрибут cite нужен для соблюдения авторского права, визуально он не отображается:

<blockquote cite="https://aldous-huxley.net">Если бы двери восприятия были чисты, все предстало бы человеку таким, как оно есть – бесконечным.</blockquote>

Вот пример оформленной цитаты:

Цитата сделана отдельным блоком, подпись обособлена, есть рамка слева

Вёрстка элемента

<blockquote class="quote"> <p>Всякий человек нуждается в том, чтобы над ним иногда посмеялись. Иначе мы начинаем относится к себе слишком серьезно.</p> <cite>«Игра престолов», Джордж Р. Мартин</cite></blockquote>.quote { padding-left: 50px; border-left: 4px solid #e2e2e2;

font-family: "Georgia", "Times New Roman", serif;

}

.quote p {

font-style: normal;

font-weight: normal;

font-size: 28px;

line-height: 46px;

color: #333333;

}

.quote cite {

font-style: italic;

font-weight: normal;

font-size: 28px;

line-height: 46px;

color: #aaaaaa;

}

В случае, если это не цитата в полном смысле слова, а акцентная мысль, более важное предложение в потоке текста, будет правильнее верстать такую мысль другими тегами, например, <p> и <strong> с классом, или <figure>.

<!-- Тег <strong> означает что-то срочное, важное --><p>Каждый раз, когда мы размышляем о том, какой тег будет корректнее с точки зрения семантики, в Академии улыбается один наставник.</p><p><strong>Читайте спецификацию, о еноты!</strong></p> <!-- Тег <figure> означает некую автономную сущность внутри потока --><p>Иногда, встречаясь в спецификации с новым знанием, мы загораемся желанием применить именно его, это новое обретённое знание.</p><figure> Сверяйтесь со спецификацией как можно чаще. Браузеры обрабатывают код по спеке, разработчики пишут код по спеке — и у нас всё вместе хорошо работает. <figcaption>Совет по работе со спецификациями</figcaption></figure>

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