HTML-теги <h1>-<h6>
Элементы <h1>–<h6> используются для определения шести уровней HTML-заголовков, где <h1> — самый высокий (или самый важный) уровень, а <h6> — наименее важный.
TIP
На каждой веб-странице должен быть только один заголовок <h1>. Поскольку поисковые системы используют его для индексации структуры и содержимого веб-документов, обязательно включайте в него ключевые слова.
Пользовательские агенты могут использовать информацию о заголовках для автоматического создания оглавления документа.
Если вы хотите изменить размер текста, лучше не использовать теги заголовков. Вместо этого можно использовать свойство CSS font-size. Рекомендуется не пропускать уровни заголовков (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>) и использовать <h1> только один раз на странице.
Теги заголовков также имеют SEO-ценность. Поисковая система пытается выяснить две вещи о вашей странице: о чём она и насколько она хороша. Одна из главных вещей, на которые поисковые системы обращают внимание при определении содержимого страницы, — это слова внутри тегов заголовков.
Когда страница содержит один основной фрагмент контента, его главный заголовок должен быть в теге <h1>, более крупные разделы должны быть включены в <h2> и так далее. Таким образом можно сделать содержимое более упорядоченным. Следует помнить, что никто не читает каждое слово контента.
Существует два типа страниц с содержимым: страницы с одним фрагментом контента и индексные страницы. На страницах с одним фрагментом контента заголовок этого контента должен находиться в теге <h1> в верхней части <body>. На индексной странице название сайта или имя индекса обычно помещают в <h1>. Затем заголовки всех перечисленных отдельных частей должны использовать теги <h2>.
Поскольку теги <h1>–<h6> являются блочными элементами, они всегда начинаются с новой строки и занимают всю доступную ширину.
По умолчанию теги <h1>–<h6> имеют следующие свойства: margin-left, margin-right, font-weight, display.
HTML <h1>-<h6> Tags
margin-left: 0;
margin-right: 0;
font-weight: bold;
display: block;Синтаксис
Теги <h1>–<h6> идут парами, поэтому закрывающий тег обязателен.
Пример HTML-тегов <h1>–<h6>:
HTML <h1>-<h6> Tags
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>First-level heading</h1>
<h2>Second-level heading</h2>
<h3>Third-level heading</h3>
<h4>Fourth-level heading</h4>
<h5>Fifth-level heading</h5>
<h6>Sixth-level heading</h6>
</body>
</html>Результат
DANGER
Элементы <h1>–<h6> нельзя использовать для разметки подзаголовков, подзаголовков, альтернативных заголовков и слоганов, если только они не предназначены для заголовка нового раздела или подраздела.
TIP
Поскольку атрибут align не поддерживается в HTML5, вместо него используйте CSS-свойство text-align.
Пример тега HTML <h1>:
Пример тега HTML <h1>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: #224cc5;
text-align: center;
}
</style>
</head>
<body>
<h1>First-level heading</h1>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</body>
</html>Пример тега HTML <h2>:
Пример тега HTML <h2>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
color: #22c599;
text-align: right;
}
</style>
</head>
<body>
<h2>Second-level heading</h2>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>Пример тега HTML <h3>:
Пример тега HTML <h3>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h3 {
color: #bc22c5;
font-size: 20px;
padding: 10px 0;
}
</style>
</head>
<body>
<h3>Third-level heading</h3>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>Пример тега HTML <h4>:
Пример тега HTML <h4>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h4 {
color: #1c87c9;
margin: 10px 0;
letter-spacing: 4px;
text-indent: 50px;
}
</style>
</head>
<body>
<h4>Fourth-level heading</h4>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>Пример тега HTML <h5>:
Пример тега HTML <h5>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h5 {
background-color: #1c87c9;
color: #ffffff;
text-transform: uppercase;
padding: 15px 20px;
}
</style>
</head>
<body>
<h5>Fifth-level heading</h5>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>Пример тега HTML <h6>:
Пример тега HTML <h6>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h6 {
font-style: italic;
font-family: sans-serif;
color: #401cc9;
font-size: 16px;
line-height: 1.625;
margin: 0;
}
</style>
</head>
<body>
<h6>Sixth-level heading</h6>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| align | left right center justify | Определяет горизонтальное выравнивание содержимого тега. Не поддерживается в HTML 5. |
Теги <h1>–<h6> поддерживают глобальные атрибуты и атрибуты событий.
Как стилизовать HTML <h1>-<h6> Tags
{
"tag_name": "h1-h6"
}Практика
Что из перечисленного верно относительно HTML-тегов заголовков?