Заголовки HTML
Заголовки HTML — это заголовки или подзаголовки, которые вы хотите показать на веб-странице. Они создаются с помощью тегов от <h1> до <h6>. <h1> — самый важный заголовок, а <h6> — наименее важный.
Примечание: Браузеры автоматически добавляют немного отступа (margin) до и после каждого заголовка.
Пример
Все шесть уровней заголовков, от самого важного до наименее важного.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Все заголовки</title>
</head>
<body>
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<h3>Заголовок 3</h3>
<h4>Заголовок 4</h4>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>
</body>
</html>
Заголовки важны
Заголовки важны не только для внешнего вида. Поисковые системы используют их, чтобы понять структуру и содержание ваших страниц, а читатели часто просматривают страницу по заголовкам.
Используйте их по порядку, чтобы показать структуру: <h1> для заголовка страницы, <h2> для заголовков разделов, <h3> для подразделов и так далее.
Совет: Используйте только один <h1> на странице; это основная тема или заголовок. Примечание: Используйте заголовки только для заголовков, а не для того, чтобы сделать текст крупным или жирным.
Пример
Заголовки, использованные для построения структуры туристического гида.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Структура заголовков</title>
</head>
<body>
<h1>Путеводитель</h1>
<h2>Европа</h2>
<h3>Франция</h3>
<h3>Италия</h3>
<h2>Азия</h2>
<h3>Индия</h3>
<h3>Таиланд</h3>
</body>
</html>
Более крупные заголовки
У каждого заголовка есть размер по умолчанию, но можно задать любой размер с помощью атрибута style и CSS-свойства font-size.
Пример
<h1>, увеличенный до 60 пикселей.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Увеличенный заголовок</title>
</head>
<body>
<h1 style="font-size:60px;">Заголовок 1</h1>
</body>
</html>