2.7. Параграфы и заголовки
Web-странички – представляют собой текст. Читать сплошной текст гораздо труднее, чем разделенный на параграфы и тематические подразделы. В HTML за такое структурирование текста отвечает несколько тегов.
Тег <P> или разбиваем страницу на параграфы (абзацы)
Тег <P> отвечает за создание параграфов на HTML-странице, и он является блочным элементом. Кроме того, что он создает перед собой и после себя переносы строк в начало — еще он устанавливает сверху и снизу себя небольшие поля (внешние отступы) пустого пространства, благодаря чему и происходит визуальное разделение текста на абзацы. Высота этих полей равна одной пустой строке.
Тег <P> может содержать только элементы уровня строки (встроенные) и никакие больше. Поэтому, например, он не может содержать другой параграф, так как сам <P> является блочным элементом (любой текст без тегов тоже считается встроенным элементом).
Пример параграфов в HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Параграфы в HTML</title>
</head>
<body>
<p>Первый параграф.</p><p>Второй параграф.</p>
</body>
</html>
Результат в браузере
Закрывающий тег </P> ставить не обязательно — как только браузер встретит следующий параграф, он автоматически закроет предыдущий. Но, как я уже говорил, лучше закрывать все необязательные теги.
У тега <P> есть один необязательный атрибут align, который устанавливает положение текста внутри блока. то есть можно сделать так, чтобы каждая строка параграфа располагалась по центру страницы или прижималась к правой стороне, а не к левой, как обычно. Атрибута align нет в строгой версии HTML и, возможно, в скором будущем его перестанут поддерживать современные браузеры.
Теги <H1> — <H6> или заголовки HTML-страницы
Заголовки играют очень важную роль в HTML, используя их можно разделить текст страницы на логические части, подчеркивая степень важности каждой, что позволяет посетителям быстрее находить нужную информацию. К тому же поисковики (Яндекс, Google и т.п.) придают больший «вес» тексту в заголовках. Существует их шесть типов, где <H1> самый важный заголовок (первого уровня, верхний), а <H6> наименее значимый (шестого уровня, нижний). Например, <H1> может быть заголовком страницы, <H2> — ее разделов, <H3> — подразделов и т.д.
Теги заголовков являются блочными элементами и, как и параграфы, могут содержать только теги уровня строки и текст. Браузеры выделяю текст заголовков полужирным шрифтом, разным размером (в зависимости от тега) и добавляют поля пустого пространства сверху и снизу, опять же, как у параграфов.
Синтаксис написания заголовков в HTML
<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвертого уровня</h4>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>
У заголовочных тегов есть два необязательных атрибута — это уже знакомый вам устаревший align и атрибут title, выводящий «всплывающую» подсказку при наведении курсора мыши на заголовок. Как и в случае с параграфами, мы не будем использовать align.
Пример использования заголовков в HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Заголовкив HTML</title>
</head>
<body>
<h1>Заголовок первого уровня</h1>
<p>Параграф.</p>
<h2 title="Заголовок второго уровня">Заголовок второго уровня</h2>
<p>Параграф.</p><p>Параграф.</p>
</body>
</html>
Результат в браузере
