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.