HTML :: Абзац, заголовки и преформатированный текст
Абзацы в HTML
Под форматированием текста понимается процесс изменения внешнего вида текста, который включает в себя разбиение на абзацы, выравнивание текста, определение абзацных отступов, шрифтов, интервалов между строками, словами и отдельными буквами и т.д. В HTML для этого существует достаточное количество тегов, большинство из которых мы и рассмотрим в данной главе.
Для разбиения текста на абзацы в HTML используется элемент «Абзац», который формируется парным тегом <p> (от англ. paragraph – абзац). И хотя в некоторых случаях спецификация допускает отсутствие закрывающего тега, мы будем применять его всегда, явно формируя элемент «Абзац». Добавим, что абзац относится к блочным элементам, поэтому по умолчанию начинается с новой строки и отделяется от остального содержимого вертикальными отступами.
Заголовки в HTML
Если возникает необходимость как-то назвать часть текста (например, параграф или раздел) и выделить его относительную важность, можно воспользоваться одним из шести заголовков разного уровня, которые формируются парными тегами от <h1> до <h6> (от англ. heading – заголовок) и также относятся к блочным элементам. Заголовок первого уровня отображается самым крупным шрифтом жирного начертания, остальные - поменьше, по мере убывания своей важности.
Преформатированный текст в HTML
А что если нам нужно вывести исходный текст на экран без форматирования? Такая ситуация случается, например, когда нужно сохранить подряд идущие пробелы и переносы строк или просто сохранить исходное форматирование при отображении тех же примеров кода. В таких случаях можно применить элемент «преформатированный текст», который формируется парным тегом <pre> (от англ. preformatted text – предварительно форматированный текст). Браузеры отображают его как блочный элемент.
Рассмотрим наглядный пример использования вышеперечисленных элементов (см. пример №1).
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Абзац, заголовки, преформатированный текст</title> </head> <body> <h1>Я – заголовок первого уровня.</h1> <p> Я – первый абзац. Мои подряд идущие пробелы и переносы строк преобразуются браузером в один пробел. </p> <h3>Я – заголовок третьего уровня. У меня шрифт поменьше.</h3> <pre> А я – преформатированный текст, сколько пробелов , символов табуляции и переносов строк поставлено, столько и будет выведено. Кстати, мой текст обычно выводится браузерами моноширинным шрифтом. </pre> <h6>Я – заголовок шестого уровня. Поэтому и размер шрифта такой маленький.</h6> </body> </html>
Пример №1. Код страницы, содержащей абзацы, заголовки и преформатированный текст
При отображении кода примера в браузере хорошо видны вертикальные отступы между заголовками, абзацами, преформатированным текстом, которые браузер по умолчанию добавляет к блочным элементам. Но, опять же повторимся, в HTML нам важна логическая разбивка документа на элементы, а внешний вид мы будем изменять потом при помощи стилей CSS.
Быстрый переход к другим страницам
- Блочные и строчные элементы
- Абзац, заголовки и преформатированный текст
- Теги <br>, <wbr> и <hr>
- Вернуться к оглавлению учебника