Для особого оформления цитат используют тег

Обновлено: 06.11.2024

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

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

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

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

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

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

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

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

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

Заголовок 3-го уровня

Заголовок 4-го уровня

Заголовок 5-го уровня

Заголовок 6-го уровня

Фигура. 1. Элементы для заголовков HTML-документа

1.1. Элемент <h1>

Заголовок самого верхнего уровня, на странице рекомендуется использовать только один раз, по возможности частично дублируя заглавие страницы. Элемент <h1> должен быть уникальным для каждой страницы сайта.

Рекомендуется прописывать в начале статьи, используя ключевое слово в тексте заголовка. Размер шрифта в браузере равен 2em, верхний и нижний отступ по умолчанию 0.67em.

1.2. Элемент <h2>

Представляет подзаголовки элемента <h1> . Размер шрифта в браузере равен 1.5em, верхний и нижний отступ по умолчанию 0.83em.

1.3. Элемент <h3>

Показывает подзаголовки элемента <h2> . Размер шрифта в браузере равен 1.17em, верхний и нижний отступ по умолчанию 1em.

1.4. Элементы <h4>, <h5>, <h6>

Обозначают подзаголовки четвёртого, пятого и шестого уровня. Размер шрифта в браузере равен 1em / 0.83em / 0.67em, верхний и нижний отступ по умолчанию 1.33em / 1.67em / 2.33em соответственно.

Для всех элементов доступны ‎глобальные атрибуты.

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

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

По аналогии с тегом <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> курсивом.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Следующая цитата

Цитата — дословная выдержка (отрывок) из какого-либо текста с указанием авторства или источника.
Википедия

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

Элемент имеет следующие стили по умолчанию:

Следующая цитата

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

Элементы для форматирования текста несут смысловую нагрузку и обычно задают для текста, заключенного внутрь, стилевое оформление, например, выделяют текст жирным начертанием или отображают его шрифтом другого семейства (свойство font-family ).

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

HTML-элементы для текста

Содержание:

4. Элементы для оформления цитат и определений

4.1. Элемент <abbr>

Применяется для форматирования аббревиатур. Браузером обычно подчеркивается пунктирной линией. Расшифровка сокращения осуществляется с помощью атрибута title , она появляется при наведении курсора мыши на текст.

4.2. Элемент <bdo>

Используется для изменения текущего направления текста.

Для элемента доступен атрибут dir .

4.3. Элемент <blockquote>

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

Для элемента доступен атрибут cite .

4.4. Элемент <q>

Используется для выделения коротких цитат. Браузерами заключается в кавычки.

Для элемента доступен атрибут cite .

4.5. Элемент <cite>

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

4.6. Элемент <dfn>

Позволяет выделить текст как определение. Несмотря на наличие данного элемента, рекомендуется выделять текст силами CSS.

Для элемента доступен атрибут title .

Заголовок 2-го уровня

1. HTML-элементы для заголовков

Заголовки являются важными элементами веб-страницы, они упорядочивают текст, формируя его визуальную структуру. Элементы <h1>. <h6> должны использоваться только для выделения заголовков нового раздела или подраздела.

При использовании заголовков необходимо учитывать их иерархию, т.е. за <h1> должен следовать <h2> и т.д. Также не рекомендуется вкладывать в заголовки другие элементы.

Следующая цитата

Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий теги содержат имя тега.

Все HTML-элементы делятся на пять типов:

В таблице приведен полный список элементов, поддерживаемых HTML4 и HTML5. Экспериментальные и устаревшие теги исключены. Элементы, добавленные в спецификацию HTML5, выделены бирюзовым цветом.

5. Абзацы, средства переноса текста

5.1. Элемент <p>

5.2. Элемент <br>

Переносит текст на следующую строку, создавая разрыв строки.

5.3. Элемент <hr>

Используется для разделения контента на веб-странице. Отображается в виде горизонтальной линии.

2. Элементы для форматирования текста

2.1. Элемент <b>

Задаёт полужирное начертания шрифта. Выделяет текст без акцента на его важность.

2.2. Элемент <em>

Отображает шрифт курсивом, придавая тексту значимость.

2.3. Элемент <i>

Отображает шрифт курсивом.

2.4. Элемент <small>

Уменьшает размер шрифта на единицу по отношению к обычному тексту.

2.5. Элемент <strong>

Задаёт полужирное начертание шрифта, относится к тегам логической разметки, указывая браузеру на важность текста.

2.6. Элемент <sub>

Используется для создания нижних индексов. Сдвигает текст ниже уровня строки, уменьшая его размер.

2.7. Элемент <sup>

Используется для создания степеней. Сдвигает текст выше уровня строки, уменьшая его размер.

2.8. Элемент <ins>

Выделяет текст в новой версии документа, подчёркивая его.

Для элемента доступны атрибуты cite и datetime .

2.9. Элемент <del>

Перечёркивает текст. Используется для выделения текста, удаленного из документа.

Для элемента доступны атрибуты cite и datetime .

2.10. Элемент <mark>

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

3.1. Элемент <code>

Служит для выделения фрагментов программного кода. Отображает текст моноширинным шрифтом.

3.2. Элемент <kbd>

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

3.3. Элемент <samp>

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

3.4. Элемент <var>

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

3.5. Элемент <pre>

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

Полный список HTML-элементов

Таблица-шпаргалка с тегами

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

Рис. 1. Тематическая таблица тегов

Читайте также: