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

В этой главе:

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

  • Тег <pre>

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

  • Тег <address>

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

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

  • Цитаты

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

  • Спецсимволы

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

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

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

Попробуйте сами:

1
2
3
4
5
6
7
8
9
10
11
12
<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>, будет отображаться моноширинным шрифтом.

Попробуйте сами:

1
2
3
4
5
6
7
8
9
10
11
<html>
  <body>
 
    <pre>
      Он сохраняет авторское форматирование текста
      (оставляет без изменений)
      и делает шрифт моноширинным
    </pre>
 
  </body>
</html>

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

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

Попробуйте сами:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
  <body>
 
    <p><code>Программный код</code>
      <br>
      <kbd>Ввод с клавиатуры</kbd>
      <br>
      <samp>Образец кода</samp>
      <br>
      <var>Выделение переменной</var>
    </p>
    <p>
      Эти теги обычно используются для того, чтобы показать на странице программный код
    </p>
 
</body>
</html>

Тег <address>

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

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

Попробуйте сами:

1
2
3
4
5
6
7
8
9
10
<html>
  <body>
 
    <p>Вы можете найти меня на моем сайте</p>
    <address>
      <a href="www.puzzleweb.ru">Мой сайт для связи</a>
    </address>
 
  </body>
</html>

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

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

Попробуйте сами:

1
2
3
4
5
6
7
8
9
10
<html>
 <body>
 
    <p><abbr title="Неопознанный Летающий Объект">НЛО</abbr><br><br><br>
      Атрибут title нужен для всплывающей подсказки, она появляется
      при наведении курсора на аббревиатуру.
    </p>
 
  </body>
</html>

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

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

Попробуйте сами:

1
2
3
4
5
6
7
8
9
10
11
12
<html>
  <body>
 
    <p>
      Тег bdo определяет направление текста - слева направо и наоборот.<br><br>
      <bdo dir="rtl">
        Это наш текст
      </bdo>
    </p>
 
  </body>
</html>

Цитаты

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

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

Попробуйте сами:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
  <body>
 
    <p>Длинная цитата:</p>
    <blockquote>
      Это очень длинная цитата.Это очень длинная цитата.Это очень длинная цитата.
      Это очень длинная цитата.Это очень длинная цитата.Это очень длинная цитата.
    </blockquote>
    <p><b>Для длинных цитат браузер вставляет отступы со всех сторон. </b>
      <br><br>
      Короткая цитата:
      <q>Это короткая цитата.</q><br>
      <b>Короткие цитаты заключаются в двойные кавычки.</b>
    </p>
 
</body>
</html>

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

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

Попробуйте сами:

1
2
3
4
5
6
7
8
9
10
<html>
  <body>
 
    <p>
      Содержимое тега del, большинство браузеров отображает <del>перечеркнутым</del>, а
      содержимое тега ins - <ins>подчеркнутым</ins>
    </p>
 
  </body>
</html>

Спецсимволы

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

Рассмотрим, как это работает. Для каждого символа, который считается специальным или который вы хотите использовать на своей веб-странице, но который невозможно напечатать в вашем редакторе (например, символ авторского права), вы находите аббревиатуру и печатаете ее в html-коде вместо нужного символа. Например, для символа ">" аббревиатура - &gt;, а для символа "<" - &lt;.

Допустим, вы хотели напечатать «Элемент <html> очень важен» на своей странице. Вместо этого вам придется воспользоваться ссылками на нужные вам символы для корректного отображения записи, и в итоге ваша запись в коде должна будет выглядеть так:

1
<p>Элемент &lt;html&gt; очень важен</p>

Еще один специальный символ, о котором вам нужно знать - символ & (амперсанд). Если вы хотите, чтобы он отображался на вашей HTML-странице, используйте ссылку &amp; вместо символа &.

Примечание: ссылки на основные специальные символы можно посмотреть в таблице спецсимволов HTML.