теги HTML <h1> до <h6>

  • Предыдущая страница <frameset>
  • Следующая страница <head>

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

<h1> до <h6> теги используются для определения заголовков HTML.

<h1> определите наиболее важный заголовок.<h6> определите наименее важный заголовок.

Внимание

каждая страница использует только один <h1> - Это должно представлять собой основное заголовок/тема всего страницы. Кроме того, не пропускайте уровень заголовка - <h1> Start, then use <h2>and so on.

Since h elements have a specific semantic, please choose the appropriate tag level carefully to construct the document structure. Therefore, do not use heading tags to change the font size in the same line. Instead, we should use CSS to achieve a beautiful display effect.

If you want to learn more about the selection and use of HTML tags, please read the book《Web quality》。

See also:

HTML tutorial:Заголовки HTML

HTML DOM reference manual:Heading object

Example

Пример 1

Six different HTML headings:

<h1>This is title 1</h1>
<h2>This is title 2</h2>
<h3>This is title 3</h3>
<h4>This is title 4</h4>
<h5>This is title 5</h5>
<h6>This is title 6</h6>

Попробуйте сами

Пример 2

Set the background color and text color of the title (using CSS):

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<h2 style="color:Tomato;">Hello World</h2>

Попробуйте сами

Пример 3

Set the alignment of the title (using CSS):

<h1 style="text-align:center">This is title 1</h1>
<h2 style="text-align:left">This is title 2</h2>
<h3 style="text-align:right">This is title 3</h3>
<h4 style="text-align:justify">This is title 4</h4>

Попробуйте сами

Global attributes

<h1> - <h6> The tag also supports Global attributes in HTML.

Event attributes

<h1> - <h6> The tag also supports Event attributes in HTML.

Default CSS settings

Большинство браузеров будут использовать следующие значения по умолчанию для отображения <h1> Элемент:

Пример 1

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

Попробуйте сами

Большинство браузеров будут использовать следующие значения по умолчанию для отображения <h2> Элемент:

Пример 2

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> Элемент:

Пример 3

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

Попробуйте сами

Большинство браузеров будут использовать следующие значения по умолчанию для отображения <h4> Элемент:

Пример 4

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

Попробуйте сами

Большинство браузеров будут использовать следующие значения по умолчанию для отображения <h5> Элемент:

Пример 5

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

Попробуйте сами

Большинство браузеров будут использовать следующие значения по умолчанию для отображения <h6> Элемент:

Пример 6

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

Попробуйте сами

Поддержка браузеров

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка
  • Предыдущая страница <frameset>
  • Следующая страница <head>