Заголовки в HTML: назначение HTML заголовков и их использование в документах

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

Заголовки в HTML: назначение HTML заголовков и их использование в документах

Заголовки в HTML: назначение HTML заголовков и их использование в документах

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


Для чего нужны HTML заголовки

HTML документ в общем случае представляет собой каким-либо образом отформатированный и структурированный текст. Любой документ, каким бы он ни был имеет заголовки (не путать с названием документа). Заголовки в HTML, как и в любом другом документе, делят текст на разделы, а разделы в свою очередь состоят из абзацев (ранее мы уже говорили про параграфы и абзацы в HTML).

Чтобы было проще понять для чего нужны заголовки в HTML, давайте сравним HTML страницу с книгой. Книга может состоять из частей, название той или иной части – это заголовок. Части в свою очередь делятся на главы, название главы – это тоже заголовок, но уже не такой значимый. Главное назначение частей и глав в книги – разделить ее на крупные разделы, в которых есть какая-то логическая связь.

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

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

Виды HTML заголовков

Аналогия HTML заголовков с главами и частями в книге довольно неплохо демонстрирует деление HTML заголовков на виды или уровни. Всего насчитывается шесть уровней HTML заголовков: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Заголовок первого уровня считается самым важным в HTML, поэтому браузер отображает его самым крупным и жирным шрифтом, соответственно, заголовок <h6> будет отображен, как самый маленький.

Правда, стили отображение HTML заголовков можно изменить при помощи CSS или HTML атрибутов и сделать так, что заголовок <h1> будет отображаться шрифтом, размер которого меньше, чем размер шрифта <h6>.

SEO оптимизаторы рекомендуют использовать один единственный заголовок <h1> в документе, и не более четырех HTML заголовков второго уровня, а дальше уже вам придется исходить из объема текста и необходимости его деления на разделы (ни разу не видел ни одного сайта, где бы использовались HTML заголовки пятого и шестого уровней).

В принципе, утверждение сверху логично: заголовок первого уровня на странице должен быть один (вы же никогда не встречали книгу, на первой странице которой написано название, а потом, где-нибудь посреди повествование автор берет и переименовывает книгу, ведь нет?). Часто HTML заголовок первого уровня совпадает с названием HTML документа, которое указывается в тэге <title>. Заголовков второго уровня может быть несколько, так как ими мы делим документ на части, а заголовков третьего уровня может быть еще больше, так как ими мы делим HTML документ на главы.

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

Такой подход обеспечить вам две вещи: вы будете задумываться о логической структуре текста и, соответственно, будете писать его последовательно, а посетителям вашего сайта будет проще ориентироваться и понимать, о чем ваш текст, благодаря продуманной структуре, которая выделяется при помощи HTML заголовков.

Технические особенности заголовков в HTML

Давайте теперь перечислим особенности HTML заголовков. Первое, что стоит отметить – заголовки относятся к блочными HTML элементам. Второе – все заголовки представляют собой парные HTML тэги. Для HTML заголовков доступны универсальные HTML атрибуты и атрибуты событий.

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

Пример использования HTML заголовков

Мы довольно подробно описали как работают HTML заголовки, их назначение и особенности. Теперь давайте посмотрим примеры HTML заголовков и того, как их обработает браузер. Пример будет сразу с использование выравнивания текста внутри HTML заголовков (более подробно про выравнивание может прочитать в статье HTML абзацы, ссылку на которую я давал ранее). Откройте любой редактор, можно даже Блокнот (но есть множество бесплатных альтернатив: HTML редактор Notepad++, CSS редактор Brackets, PHP редактор IDE NetBeans, позволю порекомендовать один платный JavaScript редактор Sublime Text 3, все они имеют гораздо более широкий функционал и намного удобнее, чем Блокнот), и сохраните код ниже, назвав файл index.html:

Не забывайте использовать пробельные символы для форматирования HTML кода. Откройте получившийся файл в браузере, если вы сделали всё, как в примере, то увидите примерно следующую HTML страницу, созданную браузером:

Пример отображения HTML заголовков на странице в браузере

Пример отображения HTML заголовков на странице в браузере

Здесь мы специально подсветили элемент HTML заголовка H4: светло-жёлтая область – это как раз те самые отступы, которые создает браузер, когда встречает HTML заголовки. На рисунке также видно, как изменяется способ отображения HTML заголовков в зависимости от уровня. И вы можете увидеть, как браузер выравнивает текст внутри HTML заголовка в зависимости от значения атрибута align.

Подведем итого всему, что было сказано про HTML заголовки:

  1. HTML заголовки используются для деления документа на разделы.
  2. В HTML шесть уровней заголовков, которые отображаются в соответствии их значимости.
  3. HTML заголовки – это блочные элементы.
  4. Тэги HTML заголовков парные.
  5. Для HTML заголовков доступны все универсальные атрибуты и атрибуты событий.
  6. Браузер создает вертикальные отступы от HTML заголовков.
  7. HTML заголовки очень любят использовать SEO оптимизаторы для продвижения сайтов.

Текст комментария: