HTML теги - от h1 до h6 - определение и примеры использования
Меню
Справочник
Мои услуги на Kwork
HTML теги от h1 до h6

HTML - теги от <h1> до <h6> в HTML являются элементами уровня блока и определяют заголовки, они всегда начинаются с новой строки и занимают всю доступную ширину.


Теги HTML от <h1> до <h6> - синтаксис и код

Теги <h1>-<h6> идут парами, поэтому требуется закрывающий тег:

<h1>Это заголовок 1</h1>
<h2>Это заголовок 2</h2>
<h3>Это заголовок 3</h3>
<h4>Это заголовок 4</h4>
<h5>Это заголовок 5</h5>
<h6>Это заголовок 6</h6>

Определение и использование

  • HTML - теги от <h1> до <h6> используются для определения HTML заголовков;
  • <h1> определяет самый важный заголовок;
  • <h6> определяет наименее важный заголовок.
Примечание: используйте только один <h1> на странице — он должен представлять основной заголовок/тему всей страницы. Также не пропускайте уровни заголовков — начните с <h1>, затем используйте <h2> и так далее.

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

Crome Поддерживает
Edge Поддерживает
Firefox Поддерживает
Safari Поддерживает
Opera Поддерживает

Атрибуты

Глобальные атрибуты

Теги от <h1> до <h6> также поддерживают глобальные атрибуты в HTML.

Атрибуты событий

Теги от <h1> до <h6> также поддерживают атрибуты событий в HTML.


Примеры с использованием CSS

Задайте цвет фона и цвет текста заголовков (с помощью CSS):

<h1 style="background-color:gold;">Привет Мир!</h1>
<h2 style="color:red;">Привет Мир!</h2>

ПРИМЕР

Установите выравнивание заголовков (с помощью CSS):

<h1 style="text-align:center">Это заголовок 1</h1>
<h2 style="text-align:left">Это заголовок 2</h2>
<h3 style="text-align:right">Это заголовок 3</h3>
<h4 style="text-align:justify">Это заголовок 4</h4>

ПРИМЕР


Связанные страницы

Руководство по HTML: заголовки HTML


Настройки CSS по умолчанию

Большинство браузеров отображают элементы h1 - h6 со следующими значениями по умолчанию:

Для элемента <h1>:

h1 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Для элемента <h2>:

h2 {
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Для элемента <h3>:

h3 {
  display: block;
  font-size: 1.17em;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Для элемента <h4>:

h4 {
  display: block;
  font-size: 1em;
  margin-top: 1.33em;
  margin-bottom: 1.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Для элемента <h5>:

h5 {
  display: block;
  font-size: .83em;
  margin-top: 1.67em;
  margin-bottom: 1.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Для элемента <h6>:

h6 {
  display: block;
  font-size: .67em;
  margin-top: 2.33em;
  margin-bottom: 2.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.

 

Поделиться ссылкой