Каркас HTML-документа

Базовый скелет страницы: doctype, html, head (charset, title, viewport), body и правила стартовой разметки.

Уровень: начальный 8 разделов 1 час

1. Зачем каркас

Каждая страница сайта начинается с одинакового скелета — boilerplate. Он включает кодировку, язык, заголовок, вьюпорт и подключение стилей. Правильный каркас с первых секунд объясняет браузеру и поисковику, что за документ перед ними.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Заголовок страницы | IT Уроки</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <!-- содержимое -->
</body>
</html>

2. DOCTYPE и режим документа

Пишется без аргументов: <!DOCTYPE html>. Он включает «стандартный режим» браузера. Без doctype страница может попасть в quirks-режим с искажениями раскладки.

DOCTYPE обязателен первой строкой;
он не тег и не элемент — просто директива;
являются ли правила: без него могут поломаться блоки, сетки, спецификации.

3. lang и кодировка

lang="ru" на <html> и <meta charset="UTF-8"> в head: язык — для переводчиков и скринридеров, кодировка — чтобы кириллица отображалась корректно.

<html lang="ru">           <!-- язык документа -->
<meta charset="UTF-8">      <!-- кодировка символов -->

4. title и мета-описание

<title>Как выбрать ноутбук — гайд | IT Уроки</title>
<meta name="description" content="Гайд по выбору ноутбука: процессор, память, экран, чек-лист.">

title виден во вкладке и в поиске, description — как сниппет. Оба уникальны на каждой странице.

5. viewport для мобильных

Без viewport-метатекg мобильный браузер рисует страницу в «десктопной» ширине и сам масштабирует. С правильным вьюпортом страница примет ширину устройства 1:1.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width — совпадение с экраном;
initial-scale=1 — без зума по умолчанию;
не запрещайте масштабирование пользователем — это доступность.

6. Подключение ресурсов

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="favicon.ico">
<script src="js/main.js" defer></script>

Стили — в head (блокируют первый экран, поэтому их подключают рано), скрипты — перед закрывающим body или с defer, favicon — в head.

7. favicon

Иконка вкладки: favicon.ico или svg-файл. Современные — одно SVG-изображение в <link rel="icon" type="image/svg+xml">.

<link rel="icon" type="image/svg+xml" href="favicon.svg">

8. Чек-лист каркаса

DOCTYPE первой строкой;
lang="ru" и charset в head;
уникальные title + description;
viewport meta на мобильных;
стили в head, скрипты ниже с defer;
favicon на месте.

Что дальше

Курс завершён.

← Вернуться к курсам