Структура 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">
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 -->
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">
Иконки и манифест (кратко, для полноты):
<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>
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»
Частые ошибки и как их избежать
Готовый шаблон 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% кейсов: корректная кодировка, адаптивность, быстрый текст за счёт предзагруженного шрифта, неблокирующие скрипты, базовые иконки и манифест.
Практические советы
Что дальше изучить
Закрепить навык и быстро перейти к уверенной вёрстке поможет практический курс. Рекомендую начать с «Вёрстка сайта с нуля 2.0» — там вы шаг за шагом соберёте проект и отработаете структуру документа на реальных макетах. Посмотреть программу и стартовать сегодня »
Итог: чёткая структура HTML‑документа и аккуратный head не только ускоряют загрузку и улучшают доступность, но и делают проект предсказуемым в поддержке. Начинайте с минимума, добавляйте только нужное и регулярно ревизируйте подключённые ресурсы.
