HTML: Теги для текста

Форматирование текста
Тег <pre>
Теги для отображения кода
Тег <address>
Аббревиатуры
Направление текста
Цитаты
Удаленный и вставленный текст

В HTML есть теги для изменения внешнего вида текста, такие как <b> и <i>. Они используются для выделения текста полужирным шрифтом или курсивом, такие теги в HTML называются тегами для форматирования.

Форматирование текста

Этот пример демонстрирует, как вы можете отредактировать текст в HTML документе, используя специальные теги:

<html>
  <body>

    <p><b>Текст</b></p>
    <p><strong>Текст</strong></p>
    <p><em>Текст</em></p>
    <p><i>Текст</i></p>
    <p><small>Текст</small></p>
    <p>Это<sub> нижний индекс</sub> и <sup>верхний индекс</sup></p>

  </body>
</html>

Попробовать »

Тег <pre>

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

<html>
  <body>

    <pre>
      Он сохраняет авторское форматирование текста
      (оставляет без изменений)
      и делает шрифт моноширинным
    </pre>

  </body>
</html>

Попробовать »

Теги для отображения кода

Пример, показанный ниже, демонстрирует разницу вывода содержимого тегов на экран:

<html>
  <body>

    <p><code>Программный код</code>
      <br>
      <kbd>Ввод с клавиатуры</kbd>
      <br>
      <samp>Образец кода</samp>
      <br>
      <var>Выделение переменной</var>
    </p>
    <p>
      Эти теги обычно используются для того, чтобы показать на странице программный код
    </p>

</body>
</html>

Попробовать »

Тег <address>

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

Чаще всего он используется для выделения контактной информации, например адреса электронной почты или способа связи с автором/владельцем документа, статьи или сайта:

<html>
  <body>

    <p>Вы можете найти меня на моем сайте</p>
    <address>
      <a href="www.puzzleweb.ru">Мой сайт для связи</a>
    </address>

  </body>
</html>

Попробовать »

Аббревиатуры

Пример демонстрирует, как можно написать аббревиатуру или сокращение:

<html>
 <body>

    <p><abbr title="Неопознанный Летающий Объект">НЛО</abbr><br><br><br>
      Атрибут title нужен для всплывающей подсказки, она появляется
      при наведении курсора на аббревиатуру.
    </p>

  </body>
</html>

Попробовать »

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

Пример демонстрирует, как можно изменить направление текста:

<html>
  <body>

    <p>
      Тег bdo определяет направление текста - слева направо и наоборот.<br><br>
      <bdo dir="rtl">
        Это наш текст
      </bdo>
    </p>

  </body>
</html>

Попробовать »

Цитаты

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

В отличие от тега <q>, тег <blockquote> является блочным элементом, он предназначен для выделения длинных цитат, которые по объему больше похожи на целые абзацы. В большинстве браузеров текст элемента <blockquote> будет отображаться с небольшим отступом вправо и иметь разрывы строки до и после себя:

<html>
  <body>

    <p>Длинная цитата:</p>
    <blockquote>
      Это очень длинная цитата.Это очень длинная цитата.Это очень длинная цитата.
      Это очень длинная цитата.Это очень длинная цитата.Это очень длинная цитата.
    </blockquote>
    <p><b>Для длинных цитат браузер вставляет отступы со всех сторон. </b>
      <br><br>
      Короткая цитата: 
      <q>Это короткая цитата.</q><br>
      <b>Короткие цитаты заключаются в двойные кавычки.</b>
    </p>

</body>
</html>

Попробовать »

Удаленный и вставленный текст

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

<html>
  <body>

    <p>
      Содержимое тега del, большинство браузеров отображает <del>перечеркнутым</del>, а 
      содержимое тега ins - <ins>подчеркнутым</ins>
    </p>

  </body>
</html>

Попробовать »

Примечание: также подчёркивание и перечёркивание можно задать с помощью CSS свойства text-decoration.