Фразовые теги для текста были выделены для определенных целей, хотя они отображаются аналогично другим базовым тегам типа <b>, <i>, <pre> и <tt>, которые Вы видели в предыдущей главе. В этом уроке мы рассмотрим все важные в HTML теги для текста, поэтому давайте начнем.
Наклонный текст
Все, что расположено в теге <em>...</em>, отображается как наклонный текст. С помощью тега наклонного текста в HTML выделяют текст, на котором хотят акцентрировать внимание читателя.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример наклонного текста в HTML</title>
</head>
<body>
<p>В следующем слове <em>применяется</em> наклонный шрифт.</p>
</body>
</html>
Получим следующий результат:
Выделенный текст
Все, что расположено в теге <mark>...</mark>, выделяется желтым фоном. С помощью этого тега можно в HTML выделить текст, который нуждается во внимании читателя.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример выделенного текста в HTML</title>
</head>
<body>
<p>Следующее слово <mark>выделено</mark> желтым фоном.</p>
</body>
</html>
Получим следующий результат:
Жирный текст
Все, что расположено в теге <strong>...</strong>, отображается жирным текстом. С помощью этого тега можно в HTML выделить текст жирным шрифтом, тем самым указав на важные слова в тексте.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример жирного текста в HTML</title>
</head>
<body>
<p>Следующее слово <strong>выделено</strong> жирным шрифтом.</p>
</body>
</html>
Получим следующий результат:
Текст аббревиатура
Вы можете создавать аббревиатуры с помощью тега <abbr>...</abbr>, помещая в его текст. Если присутствует атрибут title, то он должен содержать полное описание и ничего больше.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример аббревиатуры в HTML</title>
</head>
<body>
<p>Вы изучаете <abbr title = "HyperText Markup Language">HTML</abbr>.</p>
</body>
</html>
Получим следующий результат:
Элемент сокращения
Элемент <acronym> позволяет указать, что текст заключенный между тегами <acronym>...</acronym>, является сокращением (аббревиатурой).
В настоящее время основные браузеры не меняют внешний вид содержимого элемента <acronym>.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример сокращения в HTML</title>
</head>
<body>
<p>Вы изучаете <acronym>HTML</acronym>.</p>
</body>
</html>
Получим следующий результат:
Направление текста
Тег <bdo> – используется для переопределения текущего направления текста и имеет двунаправленное переопределение. В предыдущем уроке мы рассматривали похожий атрибут dir, который позволяет указать браузеру направление потока текста.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример направления текста в HTML</title>
</head>
<body>
<p>Текст слево направо.</p>
<p><bdo dir = "rtl">Текст справа налево.</bdo></p>
</body>
</html>
Получим следующий результат:
Специальные условия
Тег <dfn> – позволяет указать, что Вы вводите специальный термин, он еще называется в HTML элемент определения. Его использование похоже на курсивный шрифт в середине абзаца.
Как правило, Вы должны использовать элемент <dfn> при первом вводе ключевого слова. Последние версии браузеров отображают содержимое элемента <dfn> курсивом.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример специального условия в HTML</title>
</head>
<body>
<p>Следующее слово <dfn>специальное</dfn> условие.</p>
</body>
</html>
Получим следующий результат:
Цитата в тексте
Если Вы хотите процитировать отрывок из другого источника, то должны поместить его между тегами <blockquote>...</blockquote>.
Текст внутри тега цитаты <blockquote> обычно имеет отступы от левого и правого краев окружающего текста и иногда использует курсивный шрифт.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример оформления цитаты в HTML</title>
</head>
<body>
<p>Ниже представлен текст цитаты:</p>
<blockquote>Этот текст заключен в тег цитаты.</blockquote>
</body>
</html>
Получим следующий результат:
Короткие цитаты или двойный кавычки в HTML
Тег цитаты <q>...</q> используется, когда Вы хотите добавить в HTML двойную кавычку в предложение.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример двойных кавычек в HTML</title>
</head>
<body>
<p>Следующий текст <q>помещен в двойные кавычки</q>.</p>
</body>
</html>
Получим следующий результат:
Цитирование в HTML
Если Вы цитируете текст, то можете указать источник, размещающий его между открывающим тегом <cite> и закрывающим тегом </cite>.
Как правило, в публикации для печати содержимое тега цитирования <cite> отображается по-умолчанию курсивом.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример цитирования в HTML</title>
</head>
<body>
<p>Следующий текст <cite>будет процитирован</cite>.</p>
</body>
</html>
Получим следующий результат:
Программный код
Любой код программирования, который Вы хотите отобразить на веб-странице, должен быть помещен внутри тегов <code>...</code>. Обычно содержимое тега <code> представлено в моноширинном шрифте, как и программный код в большинстве книг по программированию.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример программного кода в HTML</title>
</head>
<body>
<p>Узнайте программный код: <code>h1, h2, h3 { font-size: 20px; } </code>.</p>
</body>
</html>
Получим следующий результат:
Клавиатурный текст
Когда Вы пишите о компьютерах и хотите сообщить читателю, что нужно нажать какую-либо клавишу, то можете использовать элемент <kbd>...</kbd>, чтобы указать, что следует нажать или вводить. Как правило, отображается моноширинным шрифтом.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример клавиатурного текста в HTML</title>
</head>
<body>
<p>Нажмите сочетание клавиш <kbd>CTRL+F5</kbd>, чтобы обновить веб-страницу и очистить кеш.</p>
</body>
</html>
Получим следующий результат:
Переменные программирования
Тег <var> указывает, что содержимое этого элемента является переменной, часто используется вместе с элементами <pre> и <code>.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример переменных в HTML</title>
</head>
<body>
<p><code>document.write("<var>name</var>")</code></p>
</body>
</html>
Получим следующий результат:
Результат программы
Тег <samp>...</samp> указывает, что содержимое этого элемента является результатом выполнения программы, приложения, скрипта и т.д. Опять же, он используется при оформлении программирования или кодирования.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример результата программы в HTML</title>
</head>
<body>
<p>В результате программа выведит на экран сообщение <samp>Hello World!</samp></p>
</body>
</html>
Получим следующий результат:
Текст адреса
Тег <address>...</address> используется для размещения адреса.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример текста адреса в HTML</title>
</head>
<body>
<address>141411, г.Москва, ул.Пахучкина, д.8</address>
</body>
</html>
Получим следующий результат:
