Уровни заголовков

В самом первом уроке упоминался заголовок. Давайте вспомним, с помощью парного тега <h1> мы задали заголовок первого уровня. Всего в html существует 6 уровней заголовков, которые различаются между собой по размеру. Заголовок первого уровня будет иметь самый большой размер, а заголовок шестого уровня – самый маленький. Еще заголовки будут иметь более жирный шрифт и тем самым выделяться среди обычного текста.

Давайте создадим новый html – файл, в котором рассмотрим все уровни заголовков:

<html>
  <head>
    <title>Урок 7. Уровни заголовков</title>
  </head>
  <body>
    <h1>Заголовок первого уровня</h1>
    <h2>Заголовок второго уровня</h2>
    <h3>Заголовок третьего уровня</h3>
    <h4>Заголовок четвертого уровня</h4>
    <h5>Заголовок пятого уровня</h5>
    <h6>Заголовок шестого уровня</h6>
  </body>
</html> 
              

Сохраним и откроем файл в браузере:



Помимо того, что каждый уровень заголовков имеет свой размер, еще каждый из них начинается с новой строки, браузер понимает, что заголовки всегда начинаются с новой строки и после них так же нужно перейти на новую строку!

А для чего вообще нужны заголовки? Да хотя бы для того чтобы текст на web – странице читался легче. Согласитесь, на много удобнее, когда открываешь страницу какого-нибудь сайта и сразу видишь заголовок статьи. В первую очередь это даст понять посетителю, о чем будет идти речь. А если статья довольно объемная, то можно разбить ее на несколько частей и использовать заголовки h2, h3, h4 и тем самым превратить длинный монотонный текст в его логические части, которые будет легче читать и воспринимать. Еще заголовки важны для поисковых роботов, но об этом мы поговорим чуть позже.

Параметры заголовков

У заголовков так же есть атрибуты, с помощью которых можно задать определенные параметры. Если быть точнее, то этот атрибут всего один и он точно такой же, как у абзаца – выравнивание (align). Вспомним, с помощью атрибута align мы могли выравнивать абзац по левому и правому краю, по центру и по обоим краям одновременно, указывая для этого параметры: left, right, center и justify соответственно. Все эти параметры применимы и для заголовков. Рассмотрим очередной пример:

<html>
  <head>
    <title>Урок 7. Параметры заголовков</title>
  </head>
  <body>
    <h1 align="center">Заголовок первого уровня</h1>
    <p>Сегодня мы узнали сколько существует уровней и чем они отличаются между собой.</p>
    <h2 align="right">Заголовок второго уровня</h2>
    <p>Во второй части урока мы познакомились с одним единственным атрибутом заголовка, который точно такой же как у абзаца.</p>
  </body>
</html> 
              

И как всегда посмотрим на результат в окне браузера:

Вот в принципе и все, что вы должны знать об уровнях заголовков и их параметрах, единственное, хочу добавить, что не забывайте ставить закрывающий тег заголовков, в противном случае весь текст до конца страницы будет считаться заголовком соответствующего уровня! И если вы хотите задать для заголовка какие-нибудь другие параметры, то вам придется использовать другие средства, например для изменения цвета заголовка, придется воспользоваться уже известным тегом <font> и его атрибутом color.