Сite и blockquote: перезагрузка
Недавно в спецификации HTML было изменено определение элементов
Изменения в определении
Контент внутри элемента
Выделение в цитате авторское — прим. редактора.
Что изменения в
значат для разработчиков Скопировать ссылку
Прежде в HTML5 не было принято включать упоминание источника внутрь элемента
Пример использования элементов и внутри
Пример выше показывает, что авторы спецификации, вместо того, чтобы следовать теоретической чистоте, которая, в данном случае, не имеет практического смысла, предпочли изменить определение, чтобы решить реальную проблему используя существующие возможности HTML, а не изобретать колесо.
Редкий случай Скопировать ссылку
Один из аргументов против использования cite и footer внутри blockquote для указания источника цитат состоит в том, что цитируемый контент сам по себе может содержать цитаты и ссылки на источники. Мы можем отбросить этот аргумент по той причине, что такие случаи крайне редки. Отказ от использования и ради такого редкого кейса — другой пример теоретической чистоты, которая не будет служить практическим целям.
Но если у вас возник такой случай, в настоящее время спецификация HTML предлагает вам просто закомментировать указание источника в коде цитаты. (Вопрос все еще открыт и этот совет может измениться):
(Добавлено 6.11.13 — прим. редактора.) В ответ на отзывы, мы решили изменить наше предложение для спецификации так, чтобы использовать атрибут class (который может использоваться для расширения) элемента для обозначения, что это часть источника цитаты.
Изменения в определении Скопировать ссылку
Элемент представляет отсылку к оригинальной работе. Он должен включать название работы или имя автора (персоналию, группу лиц или организацию), или ссылку, которые могут быть в представлены сокращенном виде в соответствии с соглашениями, принятыми при цитировании.
Что изменения в значат для разработчиков Скопировать ссылку
Разработчики выступали против изменений в определении:
Что вы думаете? Скопировать ссылку
Пожалуйста, прочитайте определения в спецификации HTML 5.1, нам интересно ваше мнение!
Огромное спасибо «доктору» Оли, чье исследование помогло подготовить изменения, произошедшие с элементами и
. И «доктору» Брюсу за то, что настаивал на своем праве цитировать свою маму.
Цитирование в HTML: выбираем теги правильно
Хочешь знать больше про веб?
Подпишись на наш телеграм-канал TechRocks WEB-разработка?
Перевод статьи «Quoting in HTML: Quotations, Citations, and Blockquotes».
Неправильное использование HTML-тегов для обозначения цитат встречается слишком часто. В этой статье мы углубимся в эту тему, разберем разные ситуации и рассмотрим, какие теги для них подходят.
При оформлении цитат используются три основных элемента:
Давайте по ним пройдемся.
Элемент
используются для выделения цитаты на фоне остального контента. Мой учитель английского языка в старшей школе крепко вбил мне в голову, что любая цитата длиной в четыре строки и больше должна отделяться от остального текста. В спецификациях HTML таких требований нет, но если у вас есть в тексте цитата и вы хотите, чтобы она была выделена на фоне всего остального, тег
По умолчанию браузеры выделяют цитату при помощи отступа, добавляя margin с каждой стороны.
Как блочный элемент,
может содержать внутри себя другие элементы. Например, мы без проблем можем разбить цитату на абзацы:
Но дело не ограничивается абзацами! Внутри блока
используется для выделения цитат, а не как декоративный элемент дизайна. Пользователи, использующие скринридеры, могут перемещаться между цитатами. Поэтому использование
для чисто эстетических нужд может сбивать этих пользователей с толку. Если вам просто нужно выделить какой-то текст, не являющийся цитатой, пожалуй, лучшим решением будет элемент
Выделение цитаты при помощи тега
Теги предназначены для цитат внутри текста. Мой учитель английского сказал бы, что речь идет о цитатах длиной меньше четырех строк. Многие современные браузеры автоматически добавляют кавычки к цитатам в виде псевдоэлементов, но для более старых браузеров стоит иметь запасной вариант.
See the Pen The Q Tag by CSS-Tricks (@css-tricks) on CodePen.
Атрибут cite
— могут использовать атрибут cite (от англ. «citation» — ссылка). Этот атрибут содержит URL, предоставляющий контекст и/или ссылку на цитируемый материал. В спецификации указано, что URL может быть окружен пробелами. Я не знаю, зачем это отдельно оговаривается, но если вы действительно хотите разозлить божеств семантического кода, вам придется делать нечто большее, чем просто разбрасываться пробелами.
Сам атрибут cite по умолчанию для пользователей не виден. Но вы можете добавить немного CSS-магии, как в приведенном ниже примере. Можно даже сделать так, чтобы источник появлялся при наведении мыши на цитату.
Элемент
Теги должны использоваться для указания произведений, а не на имени человека, написавшего или сказавшего что-либо. Иными словами, этот элемент вообще не предназначен для цитат. Вот примеры из спецификаций:
Если автор этой статьи скажет, что даст вам пирожок, чтобы вы окружили тегами его имя, это будет семантически неправильно, так что пирожка вам не видать. А если вы окружите этими тегами название статьи, в которой вам предлагался пирожок, это будет семантически правильно, но пирожок предлагался не за это, так что очень жаль, но он вам все же не достанется.
По умолчанию браузеры выделяют элемент cite курсивом. Сам элемент не привязан к элементами или
Помещать элемент вне блока цитаты тоже кажется неправильным. Кроме того, если вы захотите стилизовать цитату и источник совместно, вам придется заключить оба элемента в какой-нибудь другой элемент, например, в
Все же есть один способ подписать цитату так, чтобы семантические божества были довольны: вы можете поместить элемент
Несмотря на то что при таком подходе количество необходимых элементов удваивается, он имеет ряд преимуществ:
Ничто из перечисленного не предназначено для оформления диалогов
Все перечисленные элементы предназначены для привлечения внимания. А диалоги это просто обмен репликами между людьми, которые разговаривают или переписываются друг с другом. (Прим. перев.: в английском языке диалоги передаются непрямой речью, при помощи кавычек).
Для диалогов не должны использоваться ни
и знаки пунктуации, а также или для обозначения говорящего.
Доступность цитат
Еще немного о кавычках
можно добавлять кавычки, используя псевдоэлементы CSS. Элемент сам по себе добавляет кавычки, но можно добавить их в виде псевдоэлементов — в качестве костыля для более старых браузеров, где они не добавляются автоматически. Это не повредит отображению цитаты в современных браузерах: они перезаписывают установленные по умолчанию псевдоэлементы, а не просто добавляют дополнительные.
Но не следует предполагать, что так вы точно получите «умные» открывающие и закрывающие кавычки. Даже если браузер поддерживает умные кавычки, порой отображаются просто прямые. Чтобы обезопасить себя, лучше использовать свойство CSS quotes:
Многоуровневое цитирование
Теперь давайте обратим внимание на уровни цитирования. Тег автоматически их учитывает.
Допустим, вы работаете в регионе, где применяется британское соглашение об использовании одинарных кавычек. Вы можете прописать очередность применения разных типов кавычек в правило CSS quotes, указав одинарные кавычки (открывающую и закрывающую) первыми в списке. Вот пример с двумя вариантами:
Вложенность цитирования не ограничена. Вложенные элементы могут быть даже внутри блока
, находящегося внутри другого блока
Если вы добавляете кавычки к цитате, оформленной с помощью элемента
, не забывайте, что в нем не предусмотрена автоматическая смена кавычек в зависимости от уровня цитирования (как в ). Если вы хотите иметь кавычки внутри
, возможно, нужно добавить правило для комбинированного селектора, чтобы элементы внутри
выделялись одинарными кавычками (или двойными, если вы следуете британскому соглашению).
Последний указанный вами вариант кавычек будет использоваться для всех последующих уровней цитирования. Если вы хотите, чтобы во вложенных цитатах чередовались одинарные и парные кавычки, добавьте в свойство quotes побольше уровней.
Висячая пунктуация
Многие эксперты в сфере типографии скажут вам, что висячая пунктуация в цитатах выглядит лучше (и они правы). По сути, висячая пунктуация это кавычки, вынесенные за текст, выровненный по вертикали.
Для достижения такого эффекта можно использовать небольшое отрицательное значение свойства text-indent. Точное значение может варьироваться в зависимости от шрифта, так что обязательно проверьте величину отступа с тем шрифтом, который используете.
Есть и лучший способ сделать висячую пунктуацию: можно использовать CSS-свойство hanging-punctuation. Но на момент написания этой статьи оно поддерживается только в Safari:
Использование hanging-punctuation лучше, потому что это свойство просто работает, если может.
Можно ли анимировать кавычки?
Погодите, возможно, это как раз неплохой вариант для оформления воображаемых кавычек!
Цитирование в HTML
Дата публикации: 2020-01-16
От автора: слишком часто можно увидеть неправильный HTML-код, используемый для цитат в разметке. В этой статье давайте разберемся со всем этим, рассмотрим различные ситуации и разные HTML-теги для этих ситуаций.
В цитатах используются три основных элемента HTML:
blockquote
Теги blockquote используются для того, чтобы цитируемый текст отличался от остального содержимого. Мой учитель английского в десятом классе вложил мне в голову, что любая цитата из четырех или более строк должна быть выделена таким образом. Спецификация HTML не содержит такого требования, но когда текст является цитатой, и вы хотите, чтобы он был отделен от окружающего текста и тегов, blockquote является семантическим выбором.
По умолчанию браузеры вставляют отступы, добавляя поля с каждой стороны.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Как элемент потока (то есть элемент «уровня блока»), blockquote может содержать внутри другие элементы. Например, мы можем без проблем вставить абзацы:
Но это могут быть и другие элементы, такие как заголовок или неупорядоченный список:
Важно отметить, что blockquote должны использоваться только для цитат, а не как декоративный элемент в дизайне. Это также способствует доступности, поскольку пользователи программы чтения с экрана могут переходить между цитатами. Таким образом, элемент blockquote, используемый исключительно для эстетики, может действительно запутать этих пользователей. Если вам нужно что-то более декоративное, выходящее за пределы расширенных цитат, то, возможно, лучше использовать div с классом.
Теги q предназначены для встроенных цитат или, как сказал бы мой учитель в десятом классе, тех, что имеют меньше четырех строк. Многие современные браузеры автоматически добавляют кавычки для цитат в качестве псевдо-элементов, но для старых браузеров может потребоваться резервное решение.
Атрибут cite
HTML Tag
The HTML tag is used for representing a citation in an HTML document.
Text enclosed in tags is intended to represent the title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, etc).
Note that the HTML5 specification allows the to include people’s names while the HTML Living Standard does not. For more information, see below under the heading «Differences Between HTML 4 & HTML 5».
Syntax
The tag is written as with the citation inserted between the start and end tags.
Examples
Title of a Work
In this example, we use the element to cite the title of a piece of work that contains the quote. We use the
Author’s Name
You can include the name of the author (whether it be a person, people, or organization) in your tag.
In this example we use the tag to provide the quote, and the to provide the name of the author.
Important Note: This option is only supported in HTML5 (i.e. the W3C version of HTML). The HTML Living Standard (WHATWG) does not allow people’s names to be included in the tag.
The tag can also contain a URL reference for the quote.
Attributes
Attributes can be added to an HTML element to provide more information about how the element should appear or behave.
The element accepts the following attributes.
| Attribute | Description |
|---|---|
| None |
Global Attributes
For a full explanation of these attributes, see HTML 5 global attributes.
Event Handlers
Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain «event» occurs. Each event handler content attribute deals with a different event.
Most event handler content attributes can be used on all HTML elements, but some event handlers have specific rules around when they can be used and which elements they are applicable to.
HTML-теги и атрибуты, о которых вы, возможно, не знали
Эта статья — шпаргалка по HTML-тегам. Поэтому не будем разглагольствовать, сразу к делу.
address
Тег address определяет контактную информацию об авторе или владельце документа или статьи. Контактная информацию может включать в себя адрес электронной почты, адрес сайта, физический адрес, номер телефона, ссылки на аккаунты в социальных сетях и т.д.
audio
Тег audio используется для встраивания аудио-контента (музыка и др.) в веб-страницу.
video
Тег video используется для встраивания видео-контента (видеоклип и др.) в веб-страницу.
Тег base определяет основной путь ( URL ) и/или цель ( target ) для всех относительных путей в документе. Он должен размещаться в теге head и иметь хотя бы один из следующих атрибутов:
blockquote и cite
Тег cite определяет название какой-либо работы (книги, стихотворения, песни, фильма, картины, скульптуры и т.д.). Он также может представлять из себя ссылку на источник цитаты.
Тег code используется для определения части компьютерного кода:
Для форматирования блока кода code часто используется совместно с тегом pre :
datalist
Тег datalist определяет список возможных вариантов для заполнения поля для ввода текста. Он позволяет реализовать «автозавершение» для элемента input : при установке фокуса на такое поле пользователь видит выпадающий список.
Свойство options объекта Datalist возвращает коллекцию всех элементов списка.
Внутри dd могут размещаться параграфы, изображения, ссылки, списки и т.д.
details
По умолчанию details находится в закрытом состоянии.
Внутри details могут размещаться любые теги.
Индикатором открытого состояния details является атрибут open (этот атрибут может использоваться в качестве CSS-селектора — details[open] или JavaScript-селектора — document.querySelector(‘[open]’) ).
dialog
Тег dialog определяет диалоговое окно. Он используется для создания «попапов» и модальных окон.
По умолчанию dialog находится в неактивном состоянии.
figure
Тег figure определяет обособленный (автономный) контент, такой как иллюстрации, диаграммы, фотографии, примеры кода и т.д.
Несмотря на то, что контент элемента figure формально относится к основному потоку (main flow), его позиция (местонахождение) не зависит от этого потока. Поэтому удаление элемента figure не должно влиять на поток документа.
meter
Тег meter определяет скалярное значение в пределах известного диапазона или дробного значения. Другими словами, meter определяет меру чего-либо (gauge).
Этот тег не должен использоваться в качестве индикатора прогресса.
Так можно записать уровень заряда батареи вашего устройства в значение meter :
progress
Тег progress определяет процесс выполнения задачи.
Этот тег не должен использоваться для определения меры чего-либо.
Так можно реализовать десятисекундный таймер:
output
Тег output используется для представления результата вычислений.
picture
Тег picture предоставляет возможность использования нескольких источников для изображения (нескольких изображений).
Этот тег позволяет использовать разные изображения в зависимости от ширины области просмотра (viewport width) вместо масштабирования одного изображения.
template
Тег template используется в качестве контейнера для разметки, которая не отображается при загрузке страницы.
Этот тег предназначен для хранения разметки, которая используется часто, но в определенных случаях (по запросу).
Тег time определяет конкретное время (или дату и время).
Атрибут datetime используется для представления времени в машиночитаемом формате.
noscript
Другие теги в форме шпаргалок
Семантическое «секционирование» страницы
Стилизация текста
Форма
Поля для ввода данных
Пример валидации адреса электронной почты и пароля:
Таблица
Теги colgroup и col могут использоваться для стилизации определенных колонок таблицы целиком вместо стилизации каждой ячейки и строки по отдельности.
Послесловие
Наши виртуалки можно использовать для разработки веб-сайтов.
Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!
