Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Цитата html5: Цитаты — Разметка текста — HTML Academy

On

Цитата html5: Цитаты — Разметка текста — HTML Academy

By alexxlab

Содержание

HTML5 блок-цитата с автором — CodeRoad

Привет, я вижу большое количество различных способов реализации blockquote в html, но в его документации не ясно, как я должен правильно форматировать blockquote , скажем , известной цитаты и метиона ее автора, как:

В победе вы заслуживаете шампанского, в поражении оно вам необходимо.

Наполеон Бонапарт

Каков был бы правильный формат этого слова в HTML5?

Должен ли автор находиться внутри или снаружи тега blockquote ?
Должен ли он быть внутри атрибута cite ? (даже зная , что документация указывает URI, а не автор)

html

quote

Поделиться

Источник


zanona    

28 марта 2011 в 14:20

6 ответов

  • Drupal-скрыть блок с кодом PHP

    Я установил модуль- http://drupal.org/project/formblock (позволяет представлять формы создания узлов в блоках) Я включил его для определенного типа контента, а затем выставил этот блок, чтобы показать, когда просматривается узел органической группы. Что я хотел бы сделать, так это скрыть этот…

  • Библиотека с открытым исходным кодом HTML5 JS для блок-схем

    Я планирую написать приложение, которое позволит мне рисовать блок-схемы, подобные диаграммам, которые могут охватывать несколько динамических прямоугольников (узлов), связанных с N уровнем глубины. Очевидная мысль состоит в том, чтобы использовать библиотеку flowchat для достижения этой цели. Мне…

Поделиться


iGEL    

13 мая 2012 в 15:27


17

Вот как Bootstrap делает кавычки в v3.3 .

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Подробнее об элементе нижнего колонтитула из MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer

Элемент HTML <footer> представляет нижний колонтитул для его ближайшего
содержимого секционирования или корневого элемента секционирования (т. е. его ближайшего родителя
<article>, <aside>, <nav>, <section>, <blockquote>, <body>, <details>,
<fieldset>, <figure>, <td> ). Нижний колонтитул обычно содержит информацию
об авторе раздела, данные об авторских правах или ссылки на соответствующие
документы.

Вы также можете рассмотреть возможность использования структурированных данных , таких как микроданные, RDFa и microformats.

Поделиться


skibulk    

04 декабря 2014 в 15:01


15

HTML5 quote attribution

Например, используйте

<small>Napoleon Bonaparte<small>

HTML 5 в документации говорится: «Мелкий шрифт обычно содержит отказ от ответственности, оговорки, юридические ограничения или авторские права. Мелкий шрифт также иногда используется для атрибуции или для удовлетворения лицензионных требований.»

Поделиться


Mat D    

20 апреля 2012 в 00:47

  • Создание блок-схемы в HTML5

    Я хочу создать блок-схему, используя HTML5 с макетом сетки Детальная информация: — Должен быть в состоянии перетащить 5 элементов на лист (событие, условие, действие, данные, конец) — Элементы могут соединяться друг с другом (перетаскивание линии от элемента к элементу) — Элемент условия имеет…

  • Конструктор блок-схем в html5

    У меня есть спецификация для дизайнера потока, и мне трудно найти правильные инструменты, чтобы сделать это с помощью, Мин спецификаций — Перетаскиваемые блоки, которые могут соединяться стрелками каждый блок показывает минимальные детали, при наведении блок должен расти и показывать…


15

UPDATE 2020

WHATWG говорит об элементе blockquote

Атрибуция цитаты, если таковая имеется, должна быть размещена вне элемента
blockquote.

WHATWG говорит об элементе cite

Элемент cite представляет название работы (например, книги, статьи,
[…])

Имя человека не является названием произведения […], и
поэтому элемент не должен использоваться для обозначения имен людей.

Так что следующий HTML все в порядке:

<blockquote>
 <p>In victory, you deserve Champagne, in defeat, you need it.</p>
</blockquote>
<p>— Napoleon Bonaparte</p>

UPDATE 2018

HTML 5.3 Редакционный проект, 9 марта 2018 года

W3C говорит об элементе cite :

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

Так что следующий HTML все в порядке:

<blockquote>
    Those who pass by us, do not go alone, and do not leave us alone; 
    they leave a bit of themselves, and take a little of us.
    <cite>Antoine de Saint-Exupéry</cite>
</blockquote>

Поделиться


SandroMarques    

10 марта 2018 в 18:24


0

Мои предпочтения, и это подтверждает…

<!doctype html>
<html lang="en">
<head><title>Blockquote Test</title></head>
<body>

<div>

<blockquote cite="URL">
In victory, you deserve Champagne, in defeat, you need it.
</blockquote>
<div>
<cite><a href="URL">Napoleon Bonaparte</a></cite>
</div>

</div>

</body>
</html>

Поделиться


justinlabenne    

28 марта 2011 в 21:29


0

Это может быть покрыто элементом Bootstrap 4 <footer>:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<blockquote>
  <p>In the digital age, knowledge is our lifeblood. And documents are the DNA of knowledge.</p>
  <footer>Rick Thoman, CEO, <cite title="Xerox Corporation">Xerox</cite></footer>
</blockquote>

Поделиться


Penny Liu    

25 января 2019 в 03:32

Похожие вопросы:

WordPress двадцать пятнадцать детская тема блок-цитата

Я делаю детскую тему для двадцати пятнадцати с нуля. У меня возникли проблемы с настройкой внешнего вида блокчейна с помощью CSS. Я сделал некоторые пользовательские css для блок-цитат в дочерней…

Цитата не выравнивая

Я разрабатываю адаптивный сайт, что означает изменение макета. При просмотре как можно шире моя блок-цитата переносится на следующую строку. Я хотел бы, чтобы это было на той же линии. Мне удалось…

Как я могу написать две отдельные блок-цитаты в последовательности, используя markdown?

Мне нужно поместить две блок-цитаты последовательно, однако markdown объединяет их в одну блок-цитату. Единственный способ, которым я могу заставить их разделиться, — это поместить между ними…

Drupal-скрыть блок с кодом PHP

Я установил модуль- http://drupal.org/project/formblock (позволяет представлять формы создания узлов в блоках) Я включил его для определенного типа контента, а затем выставил этот блок, чтобы…

Библиотека с открытым исходным кодом HTML5 JS для блок-схем

Я планирую написать приложение, которое позволит мне рисовать блок-схемы, подобные диаграммам, которые могут охватывать несколько динамических прямоугольников (узлов), связанных с N уровнем глубины….

Создание блок-схемы в HTML5

Я хочу создать блок-схему, используя HTML5 с макетом сетки Детальная информация: — Должен быть в состоянии перетащить 5 элементов на лист (событие, условие, действие, данные, конец) — Элементы могут…

Конструктор блок-схем в html5

У меня есть спецификация для дизайнера потока, и мне трудно найти правильные инструменты, чтобы сделать это с помощью, Мин спецификаций — Перетаскиваемые блоки, которые могут соединяться стрелками…

Перетаскивание элементов, связанных между собой блок-схему, используя родной HTML5

Я хочу создать отображение/блок-схему, чтобы элементы отображения / диаграммы можно было свободно перетаскивать по холсту. Различные единицы диаграммы будут соединены, и эти связи также должны…

Git — список файлов, созданных автором

Есть ли способ перечислить файлы, созданные конкретным автором с помощью Git ? Мне также нужно отфильтровать эти результаты либо по имени файла (regex/pattern), либо по папке, в которой они были…

Семантически Правильная Блок-Цитата

У меня есть 3 отзыва, которые я собираюсь использовать на веб-сайте, над которым работаю. Я читал о блочных цитатах и считаю, что этот тег лучше всего подходит для них. Вот базовая блок-цитата,…

Учебник HTML 5. Статья «Элементы цитирования и направление текста»

В этой статье мы с Вами рассмотрим как на языке HTML оформить дословную выдержку из какого-либо текста, или одним словом «цитата», рассмотрим нюансы работаты с разнонаправленным текстом и Восточно-азиатскими символами.

В соответствии с действующим законодательством Российской Федерации допускается без согласия автора или иного правообладателя и без выплаты вознаграждения, но с обязательным указанием имени автора, произведение которого используется, и источника заимствования: цитирование в оригинале и в переводе в научных, полемических, критических или информационных целях правомерно обнародованных произведений в объеме, оправданном целью цитирования, включая воспроизведение отрывков из газетных и журнальных статей в форме обзоров печати.

Цитирование и цитата из высказывания какой-либо авторитетного человека, оформленная в виде прямой речи в информационном, публицистическом или аналитическом материале — это способ сделать текст объективным, серьезным и вызывающим больше доверия у читателя. Давайте рассмотрим как силами HTML оформляются короткие и длинные цитаты.

Короткие цитаты

HTML тег <q> (HTML Quote Element) используется для выделения коротких цитат (строчная цитата). Как правило, все современные браузеры автоматически устанавливают открывающиеся и закрывающиеся кавычки в начале и в конце выделенного текста.

Перейдем к рассмотрению примера:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования элемента <q></title>
	</head>
	<body>
		<p><q cite = "https://ru.wikipedia.org/wiki/Pecunia_non_olet"> Деньги не пахнут </q> - фраза, которую, как считается, произнёс император Веспасиан.</p>
	</body>
</html>

Атрибут cite указывает URL адрес ресурса, из которого была заимствована цитата. Для пользователя этот атрибут не отображается (не видимо его применение). Он может использоваться поисковыми машинами и в статистических целях при работе скриптов на стороне сервера. Допускается указывать как абсолютные адреса (например: <q cite = «http://basicweb.ru/html/tag_q.php»>), так и относительные (например: <q cite = «tag_q.php»>.

Ниже приведён пример, как это отображается в браузере:

Рис. 23 Пример использования коротких цитат в HTML.

Длинные цитаты

HTML тег <blockquote> (HTML Block Quotation Element) используется для определения в документе блочной цитаты (длинная цитата внутри документа). Текст внутри этого тега отображается как выровненный блок с отступами слева и справа (по умолчанию 40 пикселей).

Пример:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования элемента <blockquote></title>
	</head>
	<body>
		<p>Здесь информация с сайта «Википедия»:</p>
		<blockquote cite = "https://ru.wikipedia.org/wiki/Pecunia_non_olet"> 
		Деньги не пахнут - крылатое латинское выражение. Слова, приписываемые императору Веспасиану,
		якобы произнесенные им после получения денег от налога на общественные уборные Рима
		и обращённые к его сыну Титу, который выразил неудовольствие по этому поводу. </blockquote> 
	</body>
</html>

По аналогии с тегом <q> атрибут cite тега <blockquote> указывает URL адрес ресурса, из которого была заимствована цитата. Для пользователя этот атрибут не отображается (не видимо его применение). Он может использоваться поисковыми машинами и в статистических целях при работе скриптов на стороне сервера. Допускается указывать как абсолютные адреса (например: <blockquote cite = «http://basicweb.ru/html/tag_blockquote.php»>), так и относительные (например: <blockquote cite = «tag_blockquote.php»>.

Ниже приведён пример, как это отображается в браузере:

Рис. 23а Пример использования длинных цитат в HTML.

HTML название произведения

HTML тег <cite> (HTML Citation Element) предназначен для выделения названия произведений. Он должен включать название работы или ссылку на творчество (URL-адрес). По умолчанию, браузеры отображают элементы <cite> курсивом.

Пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования элемента <cite><title>
	</head>
	<body>
		<cite>«Горе от ума»</cite> — комедия в стихах А. С. Грибоедова. Первый показ 1825 г.
	</body>
</html>

В браузере это выглядит следующим образом:

Рис. 23б Пример использования названий произведений в HTML.

Направление вывода текста

Тег <bdo> (HTML bidirectional override element) используется для переопределения текущего направления текста (устанавливает направление вывода текста и преимущественно предназначен для использования с языками, где чтение происходит справа налево, например — арабский язык).

Тег <bdo> применяется с атрибутом dir и значениями ltr (left-to-right), или rtl (right-to-left), задающими направление текста слева направо, либо справа налево.

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <bdo></title>
	</head>
	<body>
		<p><bdo dir = "ltr">Направление текста слева направо.</bdo></p>
		<p><bdo dir = "rtl">Направление текста справа налево.</bdo></p>
	</body>
</html>

Результат примера:

Рис. 24 Пример использования тега <bdo> с атрибутом dir (направление текста в HTML).

В HTML 5 тег <bdi> изолирует фрагмент текста, который должен отображаться в другом направлении письма и позволяет браузерам корректно обрабатывать двунаправленный текст. Этот элемент полезно использовать при отображении текста с разной направленностью письма.

Например:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <bdi></title>
	</head>
	<body>
		<h4>Победители европейского забега: </h4>
		<p>Участник № 1 <bdi>ماقسيم</bdi> 99 баллов – 1 место </p>
		<p>Участник № 2 <bdi>دميتري</bdi> 97 баллов – 2 место </p>
		<p>Участник № 3 John Connor 96 баллов – 3 место </p>
	</body>
</html>

Результат нашего примера:

Рис. 25 Пример использования разнонаправленных языков.

Обращаю Ваше внимание, что браузеры Internet Explorer и Edge не поддерживают тег <bdi>.

Нюансы восточно-азиатских символов.

В HTML присутствуют элементы <ruby>, <rt> и <rp>, которые используются для добавления фуриган (фонетические подсказки в японском и восточно-азиатских языках, их также называют — руби или ёмигана).

Фуриганы, как правило, отображаются мелким шрифтом над иероглифами (основным текстом) и содержат подсказки по их произношению и переводу. В элементе <ruby> полезный текст фуриганы обозначается элементом <rt>.

Тег <rp> определяет, что отображать браузеру, который не поддерживает тег <ruby>. Если браузер поддерживает тег <ruby>, то текст, который находится внутри тега <rp> не отобразится для пользователя.

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования элемента <rp></title>
	</head>
	<body>
		<ruby>
			<rp>Ваш браузер не поддерживает отображение фуриган</rp>
			地球<rt>ふるさと</rt>
		</ruby>
	</body>
</html>

Результат нашего примера:

Рис. 26 Использование фуриган в HTML.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:

  • Используя полученные знания составьте следующую HTML страницу:

Практическое задание № 18.

Подсказка: чтобы достичь такого ровного текста, его необходимо выровнять по ширине.

После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно.

HTML Элементы цитаты и цитирования. Уроки для начинающих. W3Schools на русском


Цитата

Цитата бывшего чемпиона мира по боксу и мэра Киева Виталия Кличко:


А сегодня в завтрашний день не все могут смотреть. Вернее смотреть могут не только лишь все, мало кто может это делать…

Попробуйте сами »

HTML элемент <q> для коротких цитат

HTML элемент <q> определяет короткие цитаты.

Браузеры обычно вставляют кавычки вокруг элемента <q>.

Пример


<p>Цель WWF состоит в том, чтобы: <q>Построить будущее, где люди живут в гармонии с природой.</q></p>

Попробуйте сами »

HTML элемент <blockquote> для цитирования

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

Браузеры обычно отображают элементы <blockquote> с отступом.

Пример


<p>Вот цитата с сайта WWF:</p>
<blockquote cite=»http://www.worldwildlife.org/who/index.html»>

В течение 50 лет WWF защищает будущее природы.
Всемирная организация WWF, ведущая природоохранная организация, работает в 100 странах мира, её поддерживают 1,2 миллиона человек в Соединенных Штатах и близки к ней 5 миллионов по всему миру.
</blockquote>

Попробуйте сами »

HTML элемент <abbr> для аббревиатур

HTML элемент <abbr> определяет аббревиатуру или акроним.

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


HTML элемент <address> для контактной информации

HTML элемент <address> определяет контактную информацию (автор/владелец) документа или статьи.

Элемент <address> обычно отображается курсивом. Большинство браузеров добавляют разрыв строки до и после элемента.

Пример


<address>
Автор Саша Грэй.<br>
Посетите нас на:<br>
Example.com<br>

Box 564, Lalaland<br>
USA
</address>

Попробуйте сами »

HTML элемент <cite> для названия работы

HTML элемент <cite> определяет название работы.

Браузеры обычно отображают элемент <cite> курсивом.


HTML элемент <bdo> для двунаправленного переопределения

HTML элемент <bdo> определяет двунаправленное переопределение.

Элемент <bdo> используется для переопределения текущего направления текста:


HTML Упражнения


HTML элементы цитаты и цитирования








ТегОписание
<abbr>Определяет аббревиатуру или акроним
<address>Определяет контактную информацию для автора/владельца документа
<bdo>Определяет направление текста
<blockquote>Определяет раздел, который цитируется из другого источника
<cite>Определяет название произведения
<q>Определяет короткую встроенную цитату

Вопросы для самоконтроля

  • Какой HTML-элемент определяет короткую цитату?

  • Какой HTML-элемент определяет раздел, который цитируется с другого источника?

  • Какой HTML-элемент определяет аббревиатуру или акроним?

  • Какой HTML-элемент определяет контактную информацию (кто автор/владелец) документа или статьи?

  • Какой HTML-элемент определяет название рыботы?

  • Какой HTML-элемент определяет двунаправленное переопределение текущего направления текста?

Цитаты и элементы цитирования HTML уроки для начинающих академия

Предложения

Вот цитата из сайта WWF:

В течение 50 лет WWF защищает будущее природы.
Ведущая в мире природоохранная организация,
WWF работает в 100 странах и поддерживается
1 200 000 членов в Соединенных Штатах и
близко к 5 000 000 в глобальном масштабе.

HTML <q> для коротких котировок

Элемент HTML <q> определяет краткое предложение.

Обозреватели обычно вставляют кавычки вокруг элемента <q>.

Пример

<p>WWFs goal is to: <q>Build a future where people live in harmony with
nature.</q></p>

HTML <blockquote> для предложений

Элемент HTML <blockquote> определяет раздел, который цитируется из другого источника.

Браузеры добавляют отступ <blockquote> элементов.

Пример

<p>Here is a quote from WWF’s website:</p>
<blockquote cite=»http://www.worldwildlife.org/who/index.html»>
For 50 years, WWF has been protecting the future of nature.
The world’s
leading conservation organization,
WWF works in 100 countries and is
supported by
1.2 million members in the United States and
close to 5
million globally.
</blockquote>

HTML <abbr> для сокращений

Элемент HTML <abbr> определяет аббревиатуру или акроним.

Маркировка аббревиатуры может дать полезную информацию для браузеров, переводческие системы и поисковых систем.

Example

<p>The <abbr title=»World Health Organization»>WHO</abbr> was founded in
1948.</p>

HTML <address> для контактной информации

Элемент HTML <address> определяет контактную информацию (автора/владельца) документа или статьи.

Элемент <address> обычно отображается курсивом. Большинство браузеров добавит разрыв строки до и после элемента.

Пример

<address>
Written by html5css.ru.<br>
Visit us at:<br>
html5css.ru<br>
Box 594, Disneyland<br>
USA
</address>

HTML <cite> для названия работы

Элемент HTML <cite> определяет название произведения.

Браузеры обычно отображают <cite> элементы курсивом.

Пример

<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

HTML <bdo> для двунаправленного переопределения

Элемент HTML <bdo> определяет двунаправленное переопределение.

Элемент <bdo> используется для переопределения текущего направления текста:

Пример

<bdo dir=»rtl»>This text will be written from right to left</bdo>

Цитаты и элементы цитирования HTML

ТегОписание
<abbr>Определяет аббревиатуру или акроним
<address>Определяет контактные данные автора/владельца документа
<bdo>Определяет направление текста
<blockquote>Определяет раздел, который цитируется из другого источника
<cite>Определяет название работы
<q>Определяет короткое встроенное предложение

Как использовать семантический HTML5 для структурирования HTML-документа?

На приведенном ниже графике видно, насколько быстро HTML5 набирает популярность. В этой статье мы рассмотрим использование семантического HTML5 для структурирования веб-документов.

Семантические теги предоставляют поисковым роботам более точную информацию о том, какой контент более важен, какой является вспомогательным и многое другое.

HTML

Семантический HTML5
HTML-теги сообщают браузерам, как должен быть представлен контент.

Семантические теги HTML5 четко указывают браузерам на то, какой тип контента содержит этот тег.

Например, тег типа <p> является как семантическим, так и презентационным. Данный тег сообщает браузерам, что это абзац текста, а также поясняет, как его необходимо отображать.

Но такие теги как <b> и <i>, не являются семантическими, поскольку они определяют только внешний вид текста (жирный и курсив), но ничего не сообщают о типе контента.

Яркими примерами семантических тегов HTML являются теги <h> , <code>, <blockquote> и <em>.

Поисковые роботы не видят и не различают части веб-страницы: меню, основной контент, футер. Поэтому важно сообщить краулерам о различных типах контента и какую роль они играют роль.

Семантические теги делают структуру контента сайта полностью понятной для браузера. Эта ясность также позволяет Google правильно представлять ваш контент в поисковой выдаче.

К основным семантическим тегам HTML5 относятся <nav>, <footer> и <section>. Также существует большое количество других семантических тегов. Но мы поговорим о тех, которые нужны для разбиения содержимого веб-страницы на основные части:

  1. <header>;
  2. <nav>;
  3. <main>;
  4. <article>;
  5. <section>;
  6. <aside>;
  7. <footer>

Определение роли каждой части контента с помощью семантических тегов позволяет поисковым системам правильно и быстро проиндексировать страницы сайта.

Многие вебмастера допускают ошибки при использовании следующих семантических тегов:

  • Применение тега<blockquote> для добавления отступа к тексту, который не является цитатой. Так как цитаты по умолчанию выделяются отступом. Вместо этого лучше использовать CSS-свойство margin.
  • Применение <p> для добавления разрывов между элементами веб-страницы. Но этот тег предназначен для определения абзаца текста. Для добавления разрывов лучше применять CSS-свойства padding или margin.
  • Применение<ul> для добавления отступа к тексту. Это семантически неверный и неправильный HTML-код, так как теги <li> используются только вместе с <ul>.
  • <abbr> — сокращение/аббревиатура.
  • <acronym> — акроним.
  • <blockquote> — длинная цитата.
  • <dfn> — определение.
  • <address> — адрес автора (авторов) документа.
  • <cite> — цитата.
  • <code> — часть кода.
  • <div> — блочный элемент.
  • <span> — контейнер для встроенного стиля;
  • <del> — удаленный текст.
  • <ins> — добавленный текст.
  • <em> — акцент, выделение.
  • <strong> — сильный акцент.
  • <h2> — заголовок первого уровня.
  • <h3> — заголовок второго уровня.
  • <h4> — заголовок третьего уровня.
  • <h5> — заголовок четвертого уровня.
  • <h5> — заголовок пятого уровня.
  • <h6> — заголовок шестого уровня.
  • <hr> — тематический разрыв;
  • <kbd> — названия клавиш.
  • <pre> — предварительно отформатированный текст.
  • <q> — короткая встроенная цитата;
  • <samp> — пример вывода.
  • <sub> — подстрочный текст.
  • <sup> — надстрочный текст.
  • <var> — переменная или пользовательский текст.

Пример использования семантических тегов HTML5 приведен ниже.

Пожалуйста, опубликуйте свои комментарии по текущей теме материала. За комментарии, дизлайки, отклики, лайки, подписки огромное вам спасибо!

Сергей Бензенкоавтор-переводчик статьи «The Secrets of Semantic HTML5 for Document Structure»

Справочник по тегам HTML5 для начинающих

Ярлык Описание HTML5
<! -… -> Тег комментариев, используемый для добавления комментариев в документ HTML5.
<! DOCTYPE> Объявляет тип документа для правильного функционирования.
<a> Тег привязки для создания гиперссылок на тексте и изображениях.
<abbr> Используется для определения сокращения.
<аббревиатура> Используется для определения аббревиатуры.
<адрес> Адресная метка для ввода адресных полей.
<апплет> Используется для указания апплета. Устаревший
<area> Используется для указания области на карте изображения.
<статья> Тег для статьи в блоге. да
<сторона> Помимо содержания, как правило, не влияет на основной контент. да
<audio> Вставьте аудиофайлы на свою веб-страницу. да
<b> Текст полужирный.
<база> Базовый URL-адрес для всех гиперссылок на веб-странице.
<basefont> Укажите базовое семейство шрифтов. Устаревший
<bdo> Направление текста на дисплее.
<bdi> Двунаправленный ввод текста, как правило, отличается от окружающего текста. да
<bgsound> Тег для добавления фоновой музыки на страницу.
<большой> Для отображения большего текста.
<blink> Для отображения мигающего текста.
<цитата> Цитата отображается в двойных кавычках.
<body> Основная часть HTML-страницы.
<br> Вставьте разрыв строки.
<кнопка> Создайте элемент кнопки.
<холст> Заполнитель для графики, созданной с помощью JavaScript. да
<заголовок> Для ввода заголовка таблицы.
<центр> Выравнивание текста по центру. Устаревший
<cite> Используется для указания цитирования для цитат.
<код> Используется для указания машинного кода.
<col> Используется для атрибутов столбцов таблицы.
<colgroup> Определите группы для столбца таблицы.
<datalist> Тег для предоставления предопределенных значений для тега <input>.
<dd> Термин определения, используемый для определения термина внутри списка описания.
<del> Используется для обозначения удаленного текстового содержимого.
<подробности> Для отображения дополнительной информации, которую можно показать или скрыть.
<dfn> Определите первый экземпляр термина внутри HTML-документа.
<диалог> Создает всплывающее диалоговое окно или модальное окно. да
<dir> Используется для указания списка каталогов. Устаревший
<div> Раздел или раздел в HTML-документе.
<dl> Создайте список определений или описаний.
<dt> Определяет термин в списке определений или описаний.
<em> Создайте выделенный текст.
<embed> Используется для создания контейнера для встраивания внешних ресурсов на страницу. да
<fieldset> Используется для группировки связанных полей в форме.
<figcaption> Используется для создания заголовка для тега <figure>. да
<рисунок> Контейнер для хранения изображений, фотографий, иллюстраций и т. Д. да
<font> Используется для указания размера шрифта и цвета текстовых элементов. Устаревший
<нижний колонтитул> Добавьте нижний колонтитул в HTML-документ или раздел. да
<форма> Создайте форму.
<кадр> Создайте рамку окна в <frameset>. Устаревший
<frameset> Используется как контейнер для одной или нескольких рамок. Устаревший
от <h2> до <h6> Заголовок 1 — Заголовок 6
<head> Контейнер для всех элементов головы.
<заголовок> Заголовок документа или раздела. да
<hr> Добавьте горизонтальную разделительную линию.
<html> Используется, чтобы сообщить браузеру, что документ является документом HTML.
<i> Выделите текст курсивом.
<iframe> Используется для указания встроенного фрейма.
<img> Тег для добавления изображения.
<вход> Используется для указания поля ввода.
<ins> Отображение вставленного текстового содержимого.
<kbd> Задает текст с клавиатуры.
<keygen> Используется для генерации информации о паре ключей в форме. да
<метка> Определяет метку для элемента <input>.
<легенда> Задает заголовок для тега <fieldset>.
<li> Используется для создания элемента списка.
<ссылка> Используется для связывания внешних таблиц стилей.
<основной> Определите основное содержимое HTML-документа. да
<карта> Создайте карту изображения.
<отметка> Выделите текст для справки. да
<выделение> Прокручиваемый текст.
<menu> Определяет список меню.
<menuitem> Определяет пункт списка меню. да
<meta> Содержит метаинформацию о странице.
<метр> Датчик для скалярного измерения в известном диапазоне.
<nav> Используется для создания раздела навигационных ссылок. да
<noframes> Резервный тег для браузеров, не поддерживающих фреймы. Устаревший
<noscript> Определяет альтернативное содержимое для скрипта.
<объект> Используется для указания встроенного объекта.
<ol> Создать упорядоченный список.
<optgroup> Создайте группу опций в раскрывающемся списке.
<вариант> Определите параметр в раскрывающемся списке.
<выход> Вывод расчета да
<p> Элемент абзаца текста.
<параметр> Используется для указания параметра для элемента <object>.
<картинка> Содержит теги <source> и <img> для указания ресурса изображения.
<pre> Используется для добавления предварительно отформатированного текстового содержимого.
<прогресс> Добавьте индикатор выполнения, показывающий процент выполнения задачи. да
<q> Используется для добавления короткой цитаты.
<rp> Определите текст для браузеров, не поддерживающих рубиновые элементы. да
<rt> Используется для текстовой рубиновой аннотации. да
<рубин> Используется для рубиновой аннотации. да
<s> Отображать неправильный зачеркнутый текст.
<samp> Пример вывода из программы.
<сценарий> Используется для добавления или связывания элементов скрипта на HTML-странице.
<раздел> Определяет раздел документа. да
<выбор> Определяет раскрывающийся список
<маленький> Создает текст меньшего размера.
<источник> Задает несколько медиаресурсов для медиаэлементов. да
<span> Используется для группировки встроенных элементов без каких-либо визуальных изменений.
<удар> Используется для отображения зачеркнутого текста.
<strong> Используется для отображения сильного текста.
<стиль> Используется для добавления встроенных или внутренних определений стилей.
<sub> Добавляет подписанный текст.
<резюме> Добавляет сводку для тега <details>. да
<sup> Добавляет надстрочный текст.
<таблица> Используется для добавления таблицы.
<tbody> Тело стола.
<td> Данные таблицы или ячейка таблицы.
<textarea> Создает текстовую область для ввода пользователем.
<фут> Нижний колонтитул для таблицы.
<th> Ячейка заголовка таблицы.
<thead> Содержимое заголовка группы в таблице.
<время> Задает дату и время. да
<название> Используется для добавления заголовка к элементу или документу.
<tr> Добавить строку таблицы.
<трек> Задает текстовую дорожку для мультимедийных элементов. да
<tt> Создает текст телетайпа Устаревший
<u> Создает подчеркнутый текст. Устаревший
<ul> Создает неупорядоченный список.
<var> Используется для определения переменной.
<видео> Вставить видео на страницу. да
<wbr> Возможность разрыва слова для вставки разрыва строки в текст.

Создание цитат | Yocton

Содержание:

Элемент q может использоваться для выделения цитаты, которая является частью предложения:

<p>Она написала: <q>Ответ:  42.</q>, и все согласились.</p>

Получим:

Она написала: Ответ: 42., и все согласились.

Кавычки не нужно добавлять — они добавляются автоматически.

Атрибут cite может использоваться для ссылки на URL-адрес цитируемого источника:

<p>Она написала: <q cite="http://example.com/blog/hello-world">Ответ:  42.</q>, и все согласились.</p>

Получим:

Она написала: Ответ: 42., и все согласились.

Обратите внимание, что браузеры обычно не отображают этот URL, поэтому, если источник релевантен, вам следует добавить гиперссылку (элемент a).

Элемент blockquote может использоваться для цитаты блочного уровня:

<blockquote>
 <p>Ответ:  42.</p>
</blockquote>

Атрибут cite может использоваться для ссылки на URL-адрес цитируемого источника:

<blockquote cite="http://example.com/blog/hello-world">
 <p>Ответ:  42.</p>
</blockquote>

Получим:

Ответ: 42.

Обратите внимание, что браузеры обычно не отображают этот URL, поэтому, если источник релевантен, вам следует добавить гиперссылку дополнительно, см. ниже.

В версии HTML4.01 и ранее элемент cite не должен быть частью элемента blockquote:

<blockquote cite="http://example.com/blog/hello-world">
    <p>Ответ:  42.</p>
</blockquote>
<p>Источник: <cite><a href="http://example.com/blog/hello-world" rel="external">Привет,
    Мир!</a></cite></p>

Вы можете добавить элемент div, чтобы сгруппировать цитату и ссылку на источник, но он не свяжет их семантически.
Элемент cite может использоваться только для ссылки на источник цитаты (но не для указания имени автора).

В HTML5 и выше ссылка на источник цитаты может быть внутри блока blockquote, но в этом случае она должна быть внутри элемента cite или элемента footer:

<blockquote cite="http://example.com/blog/hello-world">
    <p>Ответ:  42.</p>
    <footer>
        <p>Источник: <cite><a href="http://example.com/blog/hello-world" rel="external">Привет,
    Мир!</a></cite></p>
     </footer>
</blockquote>

Получим:

Ответ: 42.

Источник: Привет,
Мир!

Спецификация W3C утверждает, что ссылка на творческую работу может содержать имя автора, в то время, как WHATWG заявляет, что она не может включать имя человека.

Цитирование и цитирование с помощью,, и атрибута cite

ПРИМЕЧАНИЕ: (11.06.2013) Определения цитируют и цитату в HTML изменились. Последние советы по использованию этих элементов можно найти в цитировании и цитате — reloaded

Учитывая корни HTML в академическом мире, неудивительно, что цитирование хорошо приспособлено к элементам

и с их необязательным атрибутом cite .Кроме того, есть элемент , который за последние девять лет превратился из «семантического лишнего элемента» в один из наиболее спорных элементов в HTML5. Давайте включим эндоскоп и исследуем рубцевание, начиная с

.

Котировка с

#

Мы уже хорошо знакомы с

здесь, так как большинство наших статей содержат выдержки из спецификации HTML5.Смотри, вот один прямо сейчас:

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

— W3C HTML5 спецификация

Легко, правда? На самом деле ничего не изменилось. Помните, что, поскольку

является «элементом уровня блока» ( потокового содержимого ), мы можем поместить в него все, что угодно, включая заголовки, изображения и таблицы, в дополнение к обычным абзацам текста.

Однако в HTML5 есть несколько небольших отличий.

— это корень секционирования , что означает, что любые элементы

–

, которые он содержит, не становятся частью структуры документа. Кроме того, добавление одного абзаца текста без закрывающих тегов

теперь полностью кошерно.

Вот несколько простых примеров

(извинения за поддельный контент):

  
 Это короткая цитата - смотри, Ма, без тегов абзацев!

Это короткая цитата — смотри, Ма, без тегов абзацев!

  
 
 Это более длинная цитата.

  
 Он использует элементы абзаца.

Это более длинная цитата.

Он использует элементы абзаца.

  
 
 Боже мой, заголовок! 

  
     
  •  Блочные цитаты могут содержать больше, чем просто абзацы… 
    •
  • Блочные кавычки могут содержать не только абзацы…

Исторически добавление источника

было семантической головоломкой.Если вы добавите его как содержимое

, то семантически он станет частью цитаты, верно?

(и ) имеют атрибут cite для URL-адреса источника цитаты, чтобы обеспечить контекст. Однако это скрытые данные, и, несмотря на возможность раскрытия атрибута cite через CSS и / или JS, они не так полезны, как видимая ссылка.
Несоответствие означает, что, хотя он будет подтвержден, добавление

, которого нет в источнике цитаты, противоречит спецификации

Похоже, наша давняя конвенция в HTML5 Doctor об использовании

для атрибуции внутри

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

, проблемы и решения, и отправьте отзыв через список рассылки WHATWG, комментарии здесь или через Twitter (@boblet) — ваш отзыв повлияет на , как изменится спецификация !

Я обновлю эту статью после изменения, но до тех пор имейте в виду, что

для атрибуции в

не является строго действительным и может не быть в будущем.В настоящее время спецификация рекомендует включать атрибуцию в контент, окружающий

.

Хикси оставил свой отзыв на мое электронное письмо, и похоже, что наши цитаты

все еще недействительны. Официальная рекомендация — поместить цитату в цифру и добавить атрибуцию в
. Прочтите всю ветку, так как есть несколько интересных комментариев. Подожду, пока пыль немного осядет…

HTML5 приходит нам на помощь с элементом

, позволяющим добавлять семантически отдельную информацию о цитате.Например:

  <цитата>
  
 Ты знаешь золотое правило, не так ли? Правила устанавливают те, у кого есть золото. 

  
 - Сумасшедший горбатый старичок из фильма Аладдин

Ты знаешь золотое правило, не так ли? Те, у кого есть золото, устанавливают правила.

— Сумасшедший горбатый старичок из фильма Аладдин

Из-за этого семантически правильного способа показать источник цитаты, если вы собираетесь добавить атрибут cite в

, сделайте это только в дополнение к для видимой атрибуции.

  


 Ты знаешь золотое правило, не так ли? Правила устанавливают те, у кого есть золото.

Вы слышали о золотом правиле, не так ли? Тот, у кого есть золото, устанавливает правила.

— Сумасшедший горбатый старик в Аладдине

Даже в этом случае атрибут cite , вероятно, стоит того, только если вы можете его автоматизировать (или вы просто сумасшедший ОКР;).Мы вернемся к

чуть позже, но давайте сначала исследуем .

Встроенные котировки с

#

предназначен для цитирования чего-либо в тексте внутри раздела прозы:

Элемент q представляет некоторую фразировку содержимого, процитированную из другого источника.

— W3C HTML5 спецификация

Это означает, что мы не можем использовать для сарказма или другого использования кавычек («») без кавычек.В таких случаях добавьте знаки препинания вручную.

Спецификация продолжается:

Знаки препинания (например, кавычки), заключающие в кавычки содержимое элемента, не должны появляться непосредственно перед, после или внутри q элементов; они будут вставлены в рендеринг пользовательским агентом.

— W3C HTML5 спецификация

Как и в случае с

, вы также можете добавить атрибут cite с URL-адресом источника цитаты (с учетом вышеуказанных предостережений в отношении скрытых данных).Если вы не пользуетесь этими дополнительными функциями, то вам остается только решить, лучше ли , чем простое добавление знаков препинания, таких как «», при вводе.

Хорошо, давайте посмотрим на образцы:

Вложенные цитаты:

  
 Люк продолжил:  А потом она назвала его  неряшливым пастухом-нерфом ! Думаю, у меня есть шанс!  Бедный наивный дурак ...

Люк продолжил: А потом она назвала его неряшливым пастухом-нерфом ! Думаю, у меня есть шанс! Бедный наивный дурак …

Соответствующие языку цитаты (пример обновлен, спасибо Зеву, Бертилу и Янусу): для получения дополнительной информации см. Стилизация иностранных цитат

  
    

  •  彼女 は  日本語 に 猫 は 『に ゃ ん』 と 鳴 く  と 言 っ た。 
    • 

  •   Канодзё ва  Нихонго ни неко ва ‘нянь то наку  то итта. 
    • 

  •  Она сказала:  Японские кошки говорят  nyan  . 
    •
  • 彼女 は 猫 は 『に ゃ ん』 と 鳴 く と 言 っ た。
  • Kanojo wa Nihongo ni neko wa ‘nyan’ to naku to itta.
  • Она сказала В японских кошках говорят ньян .

Цитата с использованием атрибута cite. Обратите внимание, что я также включил ссылку атрибута cite в контент, чтобы он был доступен:

  
  Персонаж Аладдина Джафар  представляет красноречивый трактат о недавнем глобальном экономическом кризисе, когда он заявляет:  Ты знаешь золотое правило, не так ли? Те, у кого есть золото, создают правила.

Персонаж Аладдина Джафар представляет красноречивый трактат о недавнем глобальном экономическом кризисе, когда заявляет: Вы знаете золотое правило, не так ли? Те, у кого есть золото, устанавливают правила.

Давайте посмотрим, как стилизовать эти элементы дальше.

Стиль

и

#

Исторически сложилось так, что браузеры не всегда поддерживали знаки препинания, используемые в . Теперь все наладилось, поэтому мы можем определять вложенную, специфичную для языка и даже определенную автором пунктуацию с помощью CSS.

Браузер поддерживает стилизацию цитат
IE Firefox Safari Хром Opera
По умолчанию знаков препинания¹ 8.0 «» ‘’ 1,5 «» ‘’ 2,0 ​​»»

4.0? «» ‘

 1,0? «» ‘ 4,0 «» ‘’
кавычки с экранированием Unicode 8,0 1,5 5,1² 11,0² 4,0³
цитаты с глифами 8,0 1,5 5,1² 11,0² 4.0³
  1. По умолчанию Поддержка требуется на : до и : после

    2. Поддержка

  2. Webkit была слабой, с жестко запрограммированными «» и «» до Safari 5.1 и Chrome 11. Ссылка: ошибки WebKit 6503 (исправлено) и 3234 (новое).
  3. Opera содержит ошибки, если вы вложите на большую глубину, чем пары котировок в свойстве котировок (тестовый пример)

«Правильная» пунктуация — сложная тема, которая может варьироваться в зависимости от языка, но обычно в ней используются следующие символы:

Цитаты знаков препинания
Глиф Описание Escape Unicode Организация Mac Окна Linux
“ Левая двойная кавычка \ 201C & ldquo; Опция — [ Альтернативный + 0147 AltGr + V
” Правая двойная кавычка \ 201D & rdquo; Опция — Сдвиг — [ Альтернативный + 0148 AltGr + B
‘ Левая одинарная кавычка \ 2018 & lsquo; Опция — ] Альтернативный + 0145 AltGr + Сдвиг + V
’ Правая одинарная кавычка \ 2019 & Rsquo; Опция — Сдвиг — ] Альтернативный + 0146 AltGr + Сдвиг + B
« Двойная кавычка, указывающая влево \ 00AB & laquo; Опция — \ Альтернативный + 174 AltGr + [
» Двойные кавычки с прямым углом \ 00BB & raquo; Опция — Сдвиг — \ Альтернативный + 175 AltGr + ]
‹ Одинарная кавычка, указывающая влево \ 2039 & lsaquo; Опция — Сдвиг — 3 Альтернативный + 0139 –
› Одинарная кавычка, указывающая вправо \ 203A & rsaquo; Опция — Сдвиг — 4 Альтернативный + 0155 –
„ Двойные низкие кавычки, 9 \ 201E & bdquo; Опция — Сдвиг — W Альтернативный + 0132 –
‚ Одиночная кавычка, младшая девятка \ 201A & sbquo; –––
Узкое неразрывное пространство \ 202F & # 8239; –––

Дополнительная информация о сочетаниях клавиш для ввода специальных символов, в том числе о том, как вводить их с помощью escape-кодов Unicode (шестнадцатеричный ввод) на компьютерах Mac и ПК

Если вы используете кодировку UTF-8 (и вы должны быть), мы рекомендуем вам по возможности использовать фактические символы, а не экранирование Unicode в CSS или объекты в HTML.Вы можете ввести большинство из них с помощью клавиатуры — например, “- это Opt — [ на Mac, Alt + 0147 на Windows и AltGr + V на Linux. Избегайте использования «,» или «вместо» «и» «. Внутри французских гильме используется термин» узкое неразрывное пространство «.

В большинстве языков чередуются два вида знаков препинания, поскольку кавычки являются вложенными, например «» и «» в английском языке. Чтобы указать пары вложенных кавычек в CSS, мы должны написать следующее:

  q {quotes: '«' '»' '‘' '’';} / * открытие с последующим закрытием пар котировок * /
/ * Эквивалент с использованием экранирования Unicode:
  q {кавычки: '\ 201C' '\ 201D' '\ 2018' '\ 2019';} * /
q: перед {content: open-quote;}
q: после {content: close-quote;}

К сожалению, браузеры используют последнюю пару цитат в свойстве котировок для более глубоко вложенных цитат.Кроме того, Opera будет использовать неправильные символы кавычек, если у вас больше вложенных , чем ваше кавычек. Свойство определяет уровни цитирования для (тестовый пример ошибки кавычек Opera). Убедитесь, что у вас достаточно уровней, повторяя пары котировок по мере необходимости:

  / * четыре уровня вложенных котировок * /
q {цитаты: '«' '»' '‘' '’' '' '' '' '‘' '’';}

WebKit жестко запрограммировал «» и «» в таблице стилей браузера до Safari 5.1 и Chrome 11, что предотвращало q: before {content: open-quote;} и q: after {content: close-quote;} от работы.Обходной путь — определить начальную и закрывающую пунктуацию вручную, а затем заменить ее с помощью открытой цитаты и закрытой цитаты . Хотя это немного сложнее, поэтому мы используем этот CSS в HTML5 Doctor:

  / * для двух уровней вложенных котировок * /
q {кавычки: '«' '»' '‘' '’';}
 / * определения дополнительного контента для WebKit до 2011 года * /
д: до {содержание: '«'; content: open-quote;}
q: после {content: '”'; content: close-quote;}
д д: перед {содержание: '‘'; content: open-quote;}
д д: после {содержание: '' '; content: close-quote;}
  / * q в цитате * /
цитата q: перед {содержанием: '‘'; content: open-quote;}
цитата q: после {содержимого: '’'; content: close-quote;}
blockquote q q: before {content: '«'; content: open-quote;}
цитата q q: после {content: '”'; content: close-quote;}
  / * цитата, висящая на открытии * /
цитата: до {display: block; высота: 0; содержание: """; маржа слева: -.95em; шрифт: курсив 400% / 1 Кочин, Джорджия, Times New Roman, с засечками; цвет: # 999;}

В более традиционном английском стиле

используется начальная кавычка перед каждым абзацем цитаты и закрывающая кавычка в последнем абзаце. Вы можете сделать это с помощью этого CSS, но вам нужно будет использовать

для содержимого

.

  / * альтернативный стиль цитаты * /
blockquote {цитаты: '«' '»';}
цитата p: перед {содержанием: '«'; content: open-quote;}
цитата p: после {содержимого: ''; content: no-close-quote;}
цитата p: последний ребенок: после {содержимого: '”'; content: close-quote;}

При цитировании иностранного языка мы используем кавычки окружающего языка, поэтому в японской цитате в предложении на английском языке по-прежнему используются английские кавычки:

Все, что он умеет сказать по-японски, это 「わ り ま せ ん」 «わ か り ま せ ん» (я не понимаю).

Если вы имеете дело с многоязычным контентом, вы можете указать свойство кавычек для каждого языка:

  / * котировки для французского, немецкого (два вида) и японского * /
: lang (fr)> q {кавычки: '«' '»' '«' '»';}
: lang (de)> q {цитаты: '„' '«' '‚' '‘';}
: lang (de)> q {quotes: '»' '«' '›' '‹';} / * альтернативный стиль * /
: lang (ja)> q {кавычки: '「' '」' '『' '』';}

Вы можете узнать больше об этом CSS в спецификации: CSS Generated Content Module Level 3.Хорошо, пора надеть резиновые перчатки: на очереди.

Взлеты и падения

#

— знаменитый семантический суперэлемент #

В HTML 2 было , используемым для обозначения названия книги или другой ссылки . Но в HTML 3.2 и HTML 4.01 более свободно определялось как

Cite: Содержит цитату или ссылку на другие источники.

— HTML 4.01 спецификация

Мы можем определить «цитирование» как:

  • ссылка на авторитет или прецедент,
  • цитируемая цитата или
  • упоминание кого-то или чего-то

А «ссылка на другие источники» еще менее конкретна [музыка реплики Jaws]. Примеры спецификации HTML 4.01:

Как Гарри С. Трумэн сказал…

Более подробную информацию можно найти в [ISO-0000]

К сожалению, пример цитирования в академическом стиле не был включен.Некоторые приверженцы стандартов с энтузиазмом приняли за его семантику, а кульминацией стал эпос Марка Пилигрима «Посты по цитированию» (результаты которого, к сожалению, получили 404). В те бурные дни использовалось тремя основными способами:

  1. Для обозначения человека, обычно в связи с некоторой ссылкой или как источник цитаты:
      

     Как пишет  Джордж Р.Р. Мартин  написал в…
  2. Чтобы содержать название работы, на которую ссылаются или цитируются (то, что теперь используется в HTML5 — спасибо Дилану!):
      
      Игра престолов , Джордж Р. Мартин
  3. Чтобы содержать полную цитату в академическом стиле (название плюс автор и, возможно, библиографическая информация):
      

      Игра престолов Джорджа Р.Р. Мартин
    • Исторически это также могло быть размечено как:
        

        Игра престолов ,  Джордж Р. Мартин
    • или как это делает Википедия (с , установленным на font-style: normal; ):
        

        Джордж Р.Р. Мартин,  Игра престолов

«Вау, какой универсал!» Я слышу, как вы говорите. «Есть ли что-то, что не может сделать?» Грязный секрет всего этого — элемент исторически был семантикой ради семантики. Пока что единственное приложение , не зависящее от сайта, — это таблицы стилей браузера по умолчанию, которые форматируют его с использованием шрифта font-style: italic; .Это неплохая вещь, поскольку постоянное использование на вашем собственном сайте позволяет вам делать всевозможные забавные вещи (как продемонстрировал Пилигрим). Но в прошлом он использовался для обозначения трех связанных, но совершенно разных типов данных: заголовков, полных цитат и имен. Это затрудняет использование в Интернете, например в поисковой системе.

фыркает слишком много семантики, проверяет в реабилитационном центре #

Итак, в HTML5 этот семантический перебор получил более… прозаическое определение:

Элемент cite представляет название работы (например,грамм. книга, статья, эссе, стихотворение, партитура, песня, сценарий, фильм, телешоу, игра, скульптура, картина, театральная постановка, спектакль, опера, мюзикл, выставка, отчет о судебном деле и т. д.). Это может быть работа, которая цитируется или на которую подробно ссылаются (т. Е. Цитата), или это может быть просто работа, которая упоминается мимоходом.

Имя человека не является названием работы — даже если люди называют этого человека произведением — , и поэтому этот элемент нельзя использовать для разметки имен людей — Спецификация W3C HTML5

Произведение , хе, это хорошо Это ограничение было несколько… непопулярным.Аргументы в пользу использования для имен (теперь обобщенные на вики-странице WHATWG) были рассмотрены Яном Хиксоном, который решил, что исторического использования недостаточно для оправдания нечеткого определения. В статье Джереми Кейта «24 способа» « Incite A Riot » содержится призыв к гражданскому неповиновению и в стиле HTML 4.01, но спецификация HTML5 не изменилась.

В rs возмущены тем, что есть два варианта использования, которые новое определение оставляет семантически незаполненными — для разметки выступающих в стенограмме или диалоге и для указания говорящего или автора встроенного цитата ( ).Спецификация HTML5 добавляет семантическое оскорбление к травме, говоря:

В некоторых случаях элемент - может подходить для имен; например в статье сплетен… В других случаях, если элемент действительно нужен, можно использовать элемент .

Лучше определив , мы увеличим шансы получить из него полезные данные, хотя теперь нам нужны другие методы, чтобы охватить эти другие применения. На данный момент кажется, что эти варианты использования недостаточно конкретны, чтобы требовать новых элементов.Обратите внимание, что никогда не был элементом общего назначения для разметки человека. Мертворожденный HTML 3.0 действительно пытался ввести элемент , но если вы когда-либо использовали hCard для семантической разметки имени человека, вы знаете, что нам понадобится гораздо больше, чем просто один элемент для отдать должное именам. POSH способ разметки имени заключается в использовании hCard (в микроформатах, микроданных или RDFa) или просто с помощью простой старой ссылки.

Получите ex

d и процитируйте материал #

Оставив в стороне историю и обнадеживающие гневные комментарии, давайте рассмотрим несколько примеров действий в стиле HTML5:

Используйте для названия фильма:

  
  Аладдин  - отличный фильм, даже после 73 просмотров.Разве дети не молодцы?

Аладдин — отличный фильм даже после 73 просмотров. Разве дети не молодцы?

Еще лучше используйте со ссылкой:

  
   Aladdin  < / cite> - отличный фильм, даже после 73 просмотров. Разве дети не молодцы?

Аладдин — отличный фильм даже после 73 просмотров. Разве дети не молодцы?

Используйте для названия книги (но не имени автора):

  
  Игра престолов , Джордж Р.Р. Мартин

Игра престолов , Джордж Р. Мартин

Если вы хотите семантически указать автора, вы можете использовать микроформаты, микроданные или RDFa:

  
  Игра престолов , автор    Джордж   Р. Р.   Мартин

Игра престолов , Джордж Р. Мартин

В этом примере автор и название книги связаны только близостью.Вы можете связать их более явно, используя микроформат hProduct, GoodRelations RDFa, или даже Schema.org, чтобы по-настоящему высохнуть.

Обратите внимание, что здесь нельзя использовать одобренный Google атрибут rel = "author" , так как Джордж Р. Мартин упоминается и не пишет статью. Если вы просто хотите стилизовать имя автора, вы можете использовать (стиль колонки сплетен) или с любым CSS, который вам нравится.

Теперь все вместе #

Ой, давайте начнем смешивать вещи на операционном столе и покажем несколько примеров с

и :

Ролик

с :

  


 Ты знаешь золотое правило, не так ли? Те, у кого есть золото, устанавливают правила.

Ты знаешь золотое правило, не так ли? Те, у кого есть золото, устанавливают правила.

— Сумасшедший горбатый старичок в Аладдин

Добавление атрибута cite к

(и его

):

  


 Ты знаешь золотое правило, не так ли? Правила устанавливают те, у кого есть золото.

Ты знаешь золотое правило, не так ли? Те, у кого есть золото, устанавливают правила.- Сумасшедший горбатый старичок в Аладдин

Цитата из спецификации:

  
 Интересно, подсказали ли отзывы о  & lt; cite & gt;  это: 


 
 Имя человека не является названием работы, даже если люди называют этого человека произведением

Интересно, подсказал ли отзыв о :

Имя человека не является названием произведения, даже если люди называют этого человека произведением.

— HTML5 для веб-разработчиков

Цитирование журнала в академическом стиле:

  
    

  1.  Информационная способность моторной системы человека в управлении амплитудой движения, Пол М.Фиттс (1954).  Журнал экспериментальной психологии , том 47, номер 6, июнь 1954 г., стр. 381–391. 
    2.
  1. Информационная способность моторной системы человека в управлении амплитудой движения, Пол М. Фиттс (1954). Журнал экспериментальной психологии , том 47, номер 6, июнь 1954 г., стр. 381–391

Цитата из книги в академическом стиле:

  


 Ссылки… все включают следующее: автора (или редактор, составитель или переводчик, заменяющий автора), заголовок (и обычно подзаголовок) и дату публикации.

Цитаты… все включают следующее: автора (или редактор, составитель или переводчик, заменяющий автора), заголовок (и обычно подзаголовок) и дату публикации.

— Чикагское руководство по стилю , 15-е издание (Чикаго: University of Chicago Press, 2003), 596

Заключение №

Если вы зашли так далеко, поздравляем! Теперь вы узнали о цитировании и цитировании в HTML5 больше, чем хотели;) Но не храните эти знания при себе — дайте нам знать в комментариях, что вы думаете.Нам также хотелось бы услышать, как вы используете

, и в HTML5. Если вы делитесь фрагментами кода, не забывайте избегать их!

Обновления №

  1. : Кажется, наша давняя конвенция в HTML5 Doctor об использовании
    для атрибуции внутри

    соответствует части

    спецификации, но не с частью

    .Мы расследуем…

  2. : Хикси подтвердила, что использование нами
    в настоящее время не соответствует требованиям —

    в настоящее время может быть включен в

    , если это цитируемое содержание. Однако фраза «содержимое внутри цитаты должно быть процитировано из другого источника» также запрещает другие общие изменения и дополнения к цитатам, поэтому я посмотрю, можно ли это изменить.

  3. : Я написал статью

    проблем и решений об этих проблемах, и первоначальный отзыв от Хикси заключается в том, что есть законные проблемы, и он рассмотрит отзывы через список адресов электронной почты WHATWG .Так что сделай это, пожалуйста! Вы также можете оставить отзыв в комментариях здесь или написать мне в Twitter (@boblet). Кроме того, не пропустите превосходный комментарий Джереми Кейта «Требуется цитирование» по этому вопросу (однако обратите внимание на те s;))

  4. : Я добавил сочетания клавиш для знаков пунктуации в таблицу знаков препинания для стандартных (обычно для США) клавиатур.
  5. Добавил примечание об ответе Хикси на статью.

В стороне от цитаты в HTML5

Выбор правильного элемента для разметки — это не вопрос жизни и смерти. Тем не менее, я думаю, что HTML становится легче поддерживать и легче читать, когда контент размечен более значимым образом в соответствии с новыми разработками в HTML5.

HTML5, как известно большинству из нас, представил новый элемент

.

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

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