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

Элементы HTML для цитат и ссылок

В этой главе рассматриваются элементы HTML для цитат и ссылок: <blockquote>, <q>, <abbr>, <address>, <cite> и <bdo>.

HTML <blockquote> для цитат

Элемент <blockquote> отмечает раздел, процитированный из другого источника. Браузеры обычно делают для него отступ. Используйте атрибут cite, чтобы указать, откуда взята цитата.

Пример

Цитата с сайта WWF внутри <blockquote>.

Страница с blockquote, цитирующим сайт WWF (с атрибутом cite, указывающим на URL источника), предваряемая абзацем. Браузеры делают отступ для blockquote.

> Output: полная HTML-страница

Prompt

Страница с blockquote, цитирующим сайт WWF (с атрибутом cite, указывающим на URL источника), предваряемая абзацем. Браузеры делают отступ для blockquote.

Output: полная HTML-страница

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blockquote</title>
</head>
<body>

<p>Вот цитата с сайта WWF:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
На протяжении 60 лет WWF помогает людям и природе процветать. Будучи ведущей в мире природоохранной организацией, WWF работает почти в 100 странах. На каждом уровне мы сотрудничаем с людьми по всему миру, чтобы разрабатывать и внедрять инновационные решения, защищающие сообщества, дикую природу и места их обитания.
</blockquote>

</body>
</html>

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

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

Пример

Короткая цитата внутри абзаца.

Страница с короткой встроенной цитатой, использующей элемент q внутри абзаца: цель WWF — "Построить будущее, в котором люди живут в гармонии с природой." Браузеры добавляют кавычки.

> Output: полная HTML-страница

Prompt

Страница с короткой встроенной цитатой, использующей элемент q внутри абзаца: цель WWF — "Построить будущее, в котором люди живут в гармонии с природой." Браузеры добавляют кавычки.

Output: полная HTML-страница

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Короткая цитата</title>
</head>
<body>

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

</body>
</html>

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

Тег <abbr> отмечает сокращение или аббревиатуру, например «HTML», «CSS» или «ASAP». Разметка сокращений помогает браузерам, инструментам перевода и поисковым системам.

Совет: Используйте глобальный атрибут title, чтобы показать полное описание при наведении курсора.

Пример

Аббревиатура WHO с полным названием в title.

Страница, использующая элемент abbr для обозначения аббревиатуры ВОЗ, с атрибутом title "Всемирная организация здравоохранения", отображаемым при наведении. Предложение: "ВОЗ была основана в 1948 году."

> Output: полная HTML-страница

Prompt

Страница, использующая элемент abbr для обозначения аббревиатуры ВОЗ, с атрибутом title "Всемирная организация здравоохранения", отображаемым при наведении. Предложение: "ВОЗ была основана в 1948 году."

Output: полная HTML-страница

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Abbr</title>
</head>
<body>

<p><abbr title="Всемирная организация здравоохранения">ВОЗ</abbr> была основана в 1948 году.</p>

</body>
</html>

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

Тег <address> отмечает контактную информацию автора или владельца документа или статьи. Это может быть email, URL, физический адрес, номер телефона или аккаунт в соцсети. Текст обычно отображается курсивом, а браузеры добавляют перенос строки до и после него.

Пример

Контактная информация внутри <address>.

Страница, использующая элемент address для контактной информации: написано John Doe, с адресом для посещения. Браузеры отображают его курсивом, с разрывами строк до и после.

> Output: полная HTML-страница

Prompt

Страница, использующая элемент address для контактной информации: написано John Doe, с адресом для посещения. Браузеры отображают его курсивом, с разрывами строк до и после.

Output: полная HTML-страница

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Address</title>
</head>
<body>

<address>
Автор: John Doe.<br>
Посетите нас:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

</body>
</html>

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

Тег <cite> отмечает название творческого произведения, такого как книга, песня, фильм или картина. Имя человека не является названием произведения. Текст обычно отображается курсивом.

Пример

Название картины, отмеченное с помощью <cite>.

Страница, использующая элемент cite для названия творческого произведения: "Крик" Эдварда Мунка, написана в 1893 году. Название отображается курсивом.

> Output: полная HTML-страница

Prompt

Страница, использующая элемент cite для названия творческого произведения: "Крик" Эдварда Мунка, написана в 1893 году. Название отображается курсивом.

Output: полная HTML-страница

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cite</title>
</head>
<body>

<p><cite>Крик</cite>, Эдвард Мунк. Написана в 1893 году.</p>

</body>
</html>

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

BDO означает Bi-Directional Override (двунаправленное переопределение). Тег <bdo> переопределяет текущее направление текста, например, чтобы писать текст справа налево.

Пример

Текст, принудительно направленный справа налево с помощью <bdo>.

Страница, использующая элемент bdo с dir="rtl" для переопределения направления текста: "Этот текст будет написан справа налево".

> Output: полная HTML-страница

Prompt

Страница, использующая элемент bdo с dir="rtl" для переопределения направления текста: "Этот текст будет написан справа налево".

Output: полная HTML-страница

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bdo</title>
</head>
<body>

<bdo dir="rtl">Этот текст будет написан справа налево</bdo>

</body>
</html>

Элементы HTML для цитат и ссылок

Краткий справочник: <abbr> определяет сокращение или аббревиатуру, <address> определяет контактную информацию, <bdo> определяет направление текста, <blockquote> определяет процитированный раздел, <cite> определяет название произведения, а <q> определяет короткую строчную цитату.