7. HTML — Фразовые теги для текста

Фразовые теги для текста были выделены для определенных целей, хотя они отображаются аналогично другим базовым тегам типа <b>, <i>, <pre> и <tt>, которые Вы видели в предыдущей главе. В этом уроке мы рассмотрим все важные в HTML теги для текста, поэтому давайте начнем.

Наклонный текст

Все, что расположено в теге <em>...</em>, отображается как наклонный текст. С помощью тега наклонного текста в HTML выделяют текст, на котором хотят акцентрировать внимание читателя.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример наклонного текста в HTML</title>
  </head>
  <body>
    <p>В следующем слове <em>применяется</em> наклонный шрифт.</p>
  </body>
</html>

Получим следующий результат:

Пример наклонного текста в HTML, наклонный шрифт, наклонный текст, <em>

Выделенный текст

Все, что расположено в теге <mark>...</mark>, выделяется желтым фоном. С помощью этого тега можно в HTML выделить текст, который нуждается во внимании читателя.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример выделенного текста в HTML</title>
  </head>
  <body>
    <p>Следующее слово <mark>выделено</mark> желтым фоном.</p>
  </body>
</html>

Получим следующий результат:

Пример выделенного текста в HTML, выделенный шрифт, выделенный текст, <mark>

Жирный текст

Все, что расположено в теге <strong>...</strong>, отображается жирным текстом. С помощью этого тега можно в HTML выделить текст жирным шрифтом, тем самым указав на важные слова в тексте.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример жирного текста в HTML</title>
  </head>
  <body>
    <p>Следующее слово <strong>выделено</strong> жирным шрифтом.</p>
  </body>
</html>

Получим следующий результат:

Пример жирного текста в HTML, жирный шрифт, жирный текст, <strong>

Текст аббревиатура

Вы можете создавать аббревиатуры с помощью тега <abbr>...</abbr>, помещая в его текст. Если присутствует атрибут title, то он должен содержать полное описание и ничего больше.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример аббревиатуры в HTML</title>
  </head>
  <body>
    <p>Вы изучаете <abbr title = "HyperText Markup Language">HTML</abbr>.</p>
  </body>
</html>

Получим следующий результат:

Пример аббревиатуры в HTML, аббревиатура, <abbr>

Элемент сокращения

Элемент <acronym> позволяет указать, что текст заключенный между тегами <acronym>...</acronym>, является сокращением (аббревиатурой).

В настоящее время основные браузеры не меняют внешний вид содержимого элемента <acronym>.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример сокращения в HTML</title>
  </head>
  <body>
    <p>Вы изучаете <acronym>HTML</acronym>.</p>
  </body>
</html>

Получим следующий результат:

Пример сокращения в HTML, аббревиатура, <acronym>

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

Тег <bdo> — используется для переопределения текущего направления текста и имеет двунаправленное переопределение. В предыдущем уроке мы рассматривали похожий атрибут dir, который позволяет указать браузеру направление потока текста.

Пример

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

Получим следующий результат:

Пример направления текста в HTML, направвление текста, <bdo>

Специальные условия

Тег <dfn> — позволяет указать, что Вы вводите специальный термин, он еще называется в HTML элемент определения. Его использование похоже на курсивный шрифт в середине абзаца.

Как правило, Вы должны использовать элемент <dfn> при первом вводе ключевого слова. Последние версии браузеров отображают содержимое элемента <dfn> курсивом.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример специального условия в HTML</title>
  </head>
  <body>
    <p>Следующее слово <dfn>специальное</dfn> условие.</p>
  </body>
</html>

Получим следующий результат:

Пример специального условия в HTML, специальное условие, <dfn>

Цитата в тексте

Если Вы хотите процитировать отрывок из другого источника, то должны поместить его между тегами <blockquote>...</blockquote>.

Текст внутри тега цитаты <blockquote> обычно имеет отступы от левого и правого краев окружающего текста и иногда использует курсивный шрифт.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример оформления цитаты в HTML</title>
  </head>
  <body>
    <p>Ниже представлен текст цитаты:</p>
    <blockquote>Этот текст заключен в тег цитаты.</blockquote>
  </body>
</html>

Получим следующий результат:

Пример цитаты в HTML, цитата, <blockquote>

Короткие цитаты или двойный кавычки в HTML

Тег цитаты <q>...</q> используется, когда Вы хотите добавить в HTML двойную кавычку в предложение.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример двойных кавычек в HTML</title>
  </head>
  <body>
    <p>Следующий текст <q>помещен в двойные кавычки</q>.</p>
  </body>
</html>

Получим следующий результат:

Пример двойных кавычек в HTML, двойные кавычки, <q>

Цитирование в HTML

Если Вы цитируете текст, то можете указать источник, размещающий его между открывающим тегом <cite> и закрывающим тегом </cite>.

Как правило, в публикации для печати содержимое тега цитирования <cite> отображается по-умолчанию курсивом.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример цитирования в HTML</title>
  </head>
  <body>
    <p>Следующий текст <cite>будет процитирован</cite>.</p>
  </body>
</html>

Получим следующий результат:

Пример цитирования в HTML, цитирование текста, цитирование, <cite>

Программный код

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример программного кода в HTML</title>
  </head>
  <body>
    <p>Узнайте программный код: <code>h1, h2, h3 { font-size: 20px; } </code>.</p>
  </body>
</html>

Получим следующий результат:

Пример программного кода в HTML, программный код, код, <code>

Клавиатурный текст

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример клавиатурного текста в HTML</title>
  </head>
  <body>
    <p>Нажмите сочетание клавиш <kbd>CTRL+F5</kbd>, чтобы обновить веб-страницу и очистить кеш.</p>
  </body>
</html>

Получим следующий результат:

Пример клавиатурного текста в HTML, клавиатурный текст, <kbd>

Переменные программирования

Тег <var> указывает, что содержимое этого элемента является переменной, часто используется вместе с элементами <pre> и <code>.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример переменных в HTML</title>
  </head>
  <body>
    <p><code>document.write("<var>name</var>")</code></p>
  </body>
</html>

Получим следующий результат:

Пример переменных в HTML, переменные, <var>

Результат программы

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример результата программы в HTML</title>
  </head>
  <body>
    <p>В результате программа выведит на экран сообщение <samp>Hello World!</samp></p>
  </body>
</html>

Получим следующий результат:

Пример результата программы в HTML, результат программы, <samp>

Текст адреса

Тег <address>...</address> используется для размещения адреса.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример текста адреса в HTML</title>
  </head>
  <body>
    <address>141411, г.Москва, ул.Пахучкина, д.8</address>
  </body>
</html>

Получим следующий результат:

Пример текста адреса в HTML, адрес, <address>
Поделитесь:

О сайте

Все материалы сайта proglang.su являются результатом труда его авторов. Копирование материалов в некоммерческих целях без указания источника в виде прямой ссылки на сайт proglang.su запрещено. Использование материалов в коммерческих целях разрешено только с письменного согласия автора. Нарушение авторских прав преследуется по закону. Мы это делаем, чтобы защитить плоды своих трудов от воровства. © 2014-2017

Присоединяйтесь


Обратная связь