Структура HTML‑документа: правильный head для начинающих и продолжающих
Правильная структура HTML‑документа — это фундамент быстрой, доступной и предсказуемой страницы. Если в head бардак, страница может рендериться медленно, ломаться относительные ссылки, а поисковики неверно интерпретируют содержимое. Разберём «скелет» документа и лучшие практики head: от charset и viewport до base, link и script.
Минимальный каркас страницы
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Моя первая страница</title>
</head>
<body>
<h1>Привет, мир!</h1>
</body>
</html>
Здесь всё по минимуму: декларация doctype включает стандартный режим, атрибут lang помогает технологиям доступности и поисковикам, а meta viewport делает страницу адаптивной на мобильных.
Тег html: lang и dir
Указывайте язык документа и направление текста. Это важно для озвучивания экранными читалками и корректного переноса слов.
<html lang="ru"> ... </html>
<!-- Для арабского справа-налево: -->
<html lang="ar" dir="rtl"> ... </html>
Head по пунктам
1) meta charset и meta viewport
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
- charset первым, чтобы избежать «кракозябр».
- viewport обязателен для мобильной вёрстки; не используйте user-scalable=no без необходимости — это ухудшает доступность.
2) title: один на страницу
<title>Каталог — Веломагазин «Ротор»</title>
- Содержательный и уникальный на каждой странице.
- Избегайте шаблонов вроде «Главная — Главная».
3) base: используем осторожно
Тег base задаёт базовый URL и/или target для всех относительных ссылок и форм на странице. Это удобно при встраивании в подпути или iframe, но легко «сломать» навигацию.
<base href="https://example.com/app/" target="_self">
<!-- Теперь /css/style.css интерпретируется как https://example.com/app/css/style.css -->
- Старайтесь не использовать base без чёткой причины.
- Если используете — держите его единственным и помещайте в начале head.
4) link: стили и не только
Классика — подключение CSS. Но link решает и задачи производительности.
<!-- Основная таблица стилей -->
<link rel="stylesheet" href="/css/styles.css">
<!-- Отложенные стили для печати или больших экранов -->
<link rel="stylesheet" href="/css/print.css" media="print">
<!-- Предзагрузка критического шрифта (быстрое появление текста) -->
<link rel="preload" href="/fonts/Inter-Variable.woff2" as="font" type="font/woff2" crossorigin>
<!-- Ускорение первого запроса к CDN -->
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="dns-prefetch" href="//cdn.example.com">
- preload используйте только для действительно критичных ресурсов.
- preconnect помогает сократить время установки соединения к сторонним доменам.
- dns-prefetch дёшево уменьшает задержку DNS (актуально для старых браузеров).
Иконки и манифест (кратко, для полноты):
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0ea5e9">
5) script в head: defer, async и module
Скрипты без атрибутов блокируют парсинг HTML. В head почти всегда подключайте с defer, чтобы загрузка шла параллельно, а выполнение произошло после парсинга.
<!-- Современный модульный JS -->
<script type="module" src="/js/app.js"></script>
<!-- Фоллбэк для старых браузеров -->
<script nomodule src="/js/app.legacy.js" defer></script>
<!-- Скрипт аналитики: можно async (не гарантируется порядок) -->
<script src="https://www.googletagmanager.com/gtag/js?id=G-XXXX" async></script>
<!-- Ваш бандл без модулей -->
<script src="/js/bundle.js" defer></script>
- defer сохраняет порядок загрузки, выполняется после парсинга, перед DOMContentLoaded.
- async хорошо для независимых скриптов (аналитика, виджеты).
- type="module" автоматически делает загрузку не блокирующей, поддерживает импорт.
Body: базовый каркас
Не углубляясь в семантическую разметку, покажем типовой каркас. Один h1 на страницу, основные области — header, main, footer.
<body>
<header class="site-header">...</header>
<main id="content" tabindex="-1">
<h1>Каталог</h1>
<!-- Контент страницы -->
</main>
<footer class="site-footer">...</footer>
</body>
Атрибут tabindex="-1" на main помогает быстро перейти к содержимому по ссылке «Пропустить к контенту» — плюс к доступности.
Чеклист «правильного head»
- doctype: <!doctype html>
- <html lang="..."> указан, при необходимости dir="rtl"
- meta charset="utf-8" стоит в начале
- meta viewport задан корректно
- <title> уникален для страницы
- Нет дубликатов meta charset/viewport/title
- CSS подключены через link rel="stylesheet"; критичные шрифты preloaded
- Скрипты не блокируют парсинг: defer / async / module
- preconnect/dns-prefetch добавлены только к реально используемым доменам
- base отсутствует либо настроен осознанно
Частые ошибки и как их избежать
- Отсутствует lang → добавьте <html lang="ru"> для корректной локализации и TTS.
- Дубли meta viewport (особенно в SPA) → оставьте один, самый общий.
- Блокирующие скрипты в head → используйте defer или переносите в конец body.
- Неверное использование base → ломаются относительные пути. Либо не используйте, либо покрывайте тестами ссылки и формы.
- Одинаковые title на всех страницах → ухудшается навигация и кликабельность сниппетов.
- Избыточный preload (всё подряд) → перегруз сети и ухудшение LCP. Прелоадьте только критичное.
Готовый шаблон head для продакшна
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Название страницы — Проект</title>
<meta name="description" content="Короткое описание страницы: что это и зачем пользователю.">
<!-- Иконки и манифест -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0ea5e9">
<!-- Производительность -->
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="dns-prefetch" href="//cdn.example.com">
<link rel="preload" href="/fonts/Inter-Variable.woff2" as="font" type="font/woff2" crossorigin>
<!-- Стили -->
<link rel="stylesheet" href="/css/styles.css">
<!-- Скрипты -->
<script type="module" src="/js/app.js"></script>
<script nomodule src="/js/app.legacy.js" defer></script>
</head>
<body>
<header>...</header>
<main id="content" tabindex="-1">...</main>
<footer>...</footer>
</body>
</html>
Этот шаблон закрывает 90% кейсов: корректная кодировка, адаптивность, быстрый текст за счёт предзагруженного шрифта, неблокирующие скрипты, базовые иконки и манифест.
Практические советы
- Проверяйте head в Lighthouse/Pagespeed: подсказки помогут найти блокирующие ресурсы.
- Если видите «Render‑blocking resources», подумайте о критическом CSS inline и defer для JS.
- Пересматривайте head при каждом релизе: особенно title/description и лишние подключения.
- Держите единый шаблон head (layout), чтобы избежать дубликатов и расхождений.
Что дальше изучить
Закрепить навык и быстро перейти к уверенной вёрстке поможет практический курс. Рекомендую начать с «Вёрстка сайта с нуля 2.0» — там вы шаг за шагом соберёте проект и отработаете структуру документа на реальных макетах. Посмотреть программу и стартовать сегодня »
Итог: чёткая структура HTML‑документа и аккуратный head не только ускоряют загрузку и улучшают доступность, но и делают проект предсказуемым в поддержке. Начинайте с минимума, добавляйте только нужное и регулярно ревизируйте подключённые ресурсы.
-
Создано 01.05.2026 17:01:12
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.