HTML :: Абзац, заголовки и преформатированный текст

Абзацы в HTML

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

Для разбиения текста на абзацы в HTML используется элемент «Абзац», который формируется парным тегом <p> (от англ. paragraph – абзац). И хотя в некоторых случаях спецификация допускает отсутствие закрывающего тега, мы будем применять его всегда, явно формируя элемент «Абзац». Добавим, что абзац относится к блочным элементам, поэтому по умолчанию начинается с новой строки и отделяется от остального содержимого вертикальными отступами.

Заголовки в HTML

Если возникает необходимость как-то назвать часть текста (например, параграф или раздел) и выделить его относительную важность, можно воспользоваться одним из шести заголовков разного уровня, которые формируются парными тегами от <h1> до <h6> (от англ. heading – заголовок) и также относятся к блочным элементам. Заголовок первого уровня отображается самым крупным шрифтом жирного начертания, остальные - поменьше, по мере убывания своей важности.

Преформатированный текст в HTML

А что если нам нужно вывести исходный текст на экран без форматирования? Такая ситуация случается, например, когда нужно сохранить подряд идущие пробелы и переносы строк или просто сохранить исходное форматирование при отображении тех же примеров кода. В таких случаях можно применить элемент «преформатированный текст», который формируется парным тегом <pre> (от англ. preformatted text – предварительно форматированный текст). Браузеры отображают его как блочный элемент.

Рассмотрим наглядный пример использования вышеперечисленных элементов (см. пример №1).

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Абзац, заголовки, преформатированный текст</title>
</head>
<body>
	<h1>Я &ndash; заголовок первого уровня.</h1>
	<p>
		Я &ndash; первый абзац.    Мои подряд идущие пробелы 	и переносы строк 
		преобразуются    браузером в     	один пробел.
	</p>
	
	<h3>Я &ndash; заголовок третьего уровня. У меня шрифт поменьше.</h3>
	
<pre>
А я &ndash; преформатированный      текст,     сколько        пробелов ,
символов табуляции 
	и переносов строк поставлено, столько и будет выведено.
Кстати, мой текст обычно выводится браузерами моноширинным шрифтом.
</pre>
	
	<h6>Я &ndash; заголовок шестого уровня. Поэтому и размер шрифта такой маленький.</h6>	
	
</body>
</html>

Пример №1. Код страницы, содержащей абзацы, заголовки и преформатированный текст

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

Быстрый переход к другим страницам

Блочные и строчные элементы
Абзац, заголовки и преформатированный текст
Теги <br>, <wbr> и <hr>
Вернуться к оглавлению учебника