HTML теги <h1> - <h6>

Поддержка браузерами

Описание

HTML теги <h1>, <h2>, <h3>, <h4>, <h5> и <h6> (h сокращение от англ. слова heading - заголовок) используются для определения заголовков на веб-странице. Каждый из них имеет определенный вес (важность), которая определяется цифрой после буквы h, таким образом <h1> — имеет наибольшую важность, а <h6> - наименьшую.

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

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

Атрибуты

Теги <h1> - <h6> поддерживают Глобальные атрибуты и События

Стиль по умолчанию

h1, h2, h3, h4, h5, h6 {
	display: block;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

h1 {
    font-size: 2em;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
}

h2 {
    font-size: 1.5em;
    margin-top: 0.83em;
    margin-bottom: 0.83em;
}

h3 {
    font-size: 1.17em;
    margin-top: 1em;
    margin-bottom: 1em;
}

h4 {
    font-size: 1em;
    margin-top: 1.33em;
    margin-bottom: 1.33em;
}

h5 {
    font-size: .83em;
    margin-top: 1.67em;
    margin-bottom: 1.67em;
}

h6 {
    font-size: .67em;
    margin-top: 2.33em;
    margin-bottom: 2.33em;
}

Пример

<h1>Заголовок 1 уровня</h1>
<h2>Заголовок 2 уровня</h2>
<h3>Заголовок 3 уровня</h3>
<h4>Заголовок 4 уровня</h4>
<h5>Заголовок 5 уровня</h5>
<h6>Заголовок 6 уровня</h6> 

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