Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

Параграфы и заголовки

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

Тег <P> или разбиваем страницу на параграфы (абзацы)

Если помните, то с тегом <P> вы уже встречались в этом учебнике, ну что ж, теперь пришла пора изучит его полностью. Итак, тег <P> отвечает за создание параграфов на HTML-странице, и он является блочным элементом. Надеюсь, что вы уже запомнили, что такое теги уровня блока. Да, но кроме того, что он создает перед собой и после себя переносы строк в начало — еще он устанавливает сверху и снизу себя небольшие поля (внешние отступы) пустого пространства, благодаря чему и происходит визуальное разделение текста на абзацы. Высота этих полей равна одной пустой строке.

Теперь самое главное — тег <P> может содержать только элементы уровня строки (встроенные) и никакие больше. Поэтому, например, он не может содержать другой параграф, так как сам <P> является блочным элементом. Ну, мы к этому еще не раз вернемся. Кстати, любой текст без тегов тоже считается встроенным элементом.

Пример параграфов в HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://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 и, возможно, в скором будущем его перестанут поддерживать современные браузеры. И что же делать? А сделаем мы следующее: в одном из ближайших уроков я вам покажу универсальный способ, с помощью которого можно менять положение содержимого не только внутри параграфов, но и внутри любых блочных элементов 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" "https://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>

Результат в браузере

Заголовок первого уровня

Параграф.

Заголовок второго уровня

Параграф.

Параграф.

Домашнее задание.

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

  1. Откройте в HTML-редакторе страничку из прошлого урока.
  2. При помощи заголовков <H1>, <H2> и <H3> создайте название статьи, двух ее разделов и трех подразделов во втором разделе.
  3. Сделайте так, чтобы при наведении курсора мыши на заголовок статьи выводилась соответствующая надпись.
  4. Напишите в каждом разделе и подразделе по одному параграфу.
Структура HTML-документа← Содержание →Как изменить шрифт?
Учебник HTML