Загрузка...

Заголовки HTML

Вы уже умеете писать элементы и атрибуты. Этот урок про заголовки — теги, которые отмечают главный заголовок и заголовки разделов страницы. Хорошие заголовки помогают просматривать страницу и помогают браузерам и вспомогательным средствам понять структуру.

Что такое заголовки HTML?

Заголовки HTML — шесть уровней: h1, h2, h3, h4, h5 и h6. h1 — самый высокий уровень заголовка на странице. h6 — самый низкий. Эти теги для смысла и структуры. Визуальный размер позже можно менять CSS; не выбирайте уровень только потому, что хотите текст крупнее или мельче.

Прямой ответ

Используйте заголовки, чтобы построить ясный план. Предпочитайте один ясный h1 для темы страницы. Используйте h2 для основных разделов под этой темой, затем h3 для подразделов и так далее. Держите уровни по порядку, когда можете — прыжок с h1 сразу на h4 обычно усложняет план.

Уровни заголовков

html

HTML Code

<h1>Главный заголовок страницы</h1>
<h2>Заголовок раздела</h2>
<h3>Заголовок подраздела</h3>
<p>Текст абзаца под подразделом.</p>

Читаем пример

h1 вводит тему всей страницы
h2 начинает основной раздел под этой темой
h3 начинает меньшую часть внутри этого раздела
Абзац — обычный текст тела, не заголовок

Почему важен порядок заголовков

Заголовки создают план документа, похожий на оглавление. Программы чтения с экрана и некоторые SEO-инструменты используют этот план. Если пропускать уровни только ради вида, структура становится запутанной, даже если страница вам «выглядит нормально».

Один h1, затем разделы

Для страниц новичков в этом курсе держите один ясный h1. Затем организуйте содержимое с помощью h2 и более глубоких уровней по необходимости. Более сложные схемы плана будут позже; сначала освойте этот простой читаемый шаблон.

Небольшой план страницы

html

HTML Code

<h1>Путеводитель по городу</h1>
<h2>Как добраться</h2>
<p>Советы по автобусам и поездам.</p>
<h2>Еда</h2>
<h3>Уличная еда</h3>
<p>Быстрые местные закуски.</p>
<h3>Рестораны с посадкой</h3>
<p>Места для более долгого обеда.</p>

Заголовки не для пустого пространства

Не используйте пустые теги заголовков для вертикального пробела. Не оборачивайте каждую жирную фразу в заголовок. Если текст не настоящий заголовок раздела, используйте абзац или другой подходящий элемент.

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

Создайте или откройте HTML-файл с базовым каркасом
Добавьте один h1, называющий тему страницы
Добавьте два раздела h2 с коротким абзацем под каждым
Под одним h2 добавьте h3 и короткий абзац
Сохраните и откройте страницу — проверьте, что план легко просматривать

Частые ошибки

Выбирать уровни заголовков только по размеру шрифта, а не по структуре
Прыгать с h1 на h4 без причины
Использовать много h1 на простой странице новичка, когда хватает одного ясного главного заголовка
Класть длинные абзацы внутрь тегов заголовка
Использовать заголовки как декоративные отступы без настоящего заголовка раздела

Кратко

Заголовки используют h1–h6 для уровней заголовка
Они строят структуру и план, а не только визуальный размер
Предпочитайте один ясный h1, затем упорядоченные разделы h2–h6
Не пропускайте уровни только ради стиля
Держите текст заголовка коротким и похожим на заголовок
Размер стилизуйте позже CSS; держите HTML-заголовки семантическими

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓

Вопросы

🎯

70%

Для Прохождения

♾️

∞

Время

🔄

∞

Попытки

📝 Инструкции

Внимательно прочитайте каждый вопрос
Выберите лучший ответ на каждый вопрос
Вы можете пересдавать тест столько раз, сколько захотите
Ваш прогресс будет показан вверху

Язык