Устройство HTML-документа: структура, теги <!DOCTYPE>, <html>, <head>, <body>
🌍 HTML-документ — это как дом
Представьте, что HTML-документ — это здание. У него есть фундамент (<!DOCTYPE>), каркас (<html>), чердак (<head>) и жилые комнаты (<body>). Давайте разберёмся, из чего состоит этот «дом» и как правильно его строить!
🏗️ Тег <!DOCTYPE> — фундамент документа
Этот тег сообщает браузеру, какая версия HTML используется в документе. Он всегда должен быть первой строкой в вашем коде.
Современный вариант (HTML5):
<!DOCTYPE html>
- Просто и понятно! Никаких сложных версий — только
html. - Если не указать
<!DOCTYPE>, браузер может перейти в режим совместимости (Quirks Mode), и страница отобразится некорректно.
❗ Важно:
- Пишется без закрывающего тега.
- Регистр не имеет значения (<!doctype html> тоже сработает).
📦 Тег <html> — корневой каркас
Это главный контейнер для всего документа. Всё, что находится внутри него (кроме <!DOCTYPE>), и есть ваша веб-страница.
Пример:
<!DOCTYPE html>
<html lang="ru"> <!-- атрибут lang указывает язык документа -->
<!-- Здесь будет всё остальное -->
</html>
🔹 Атрибут lang помогает браузерам и поисковикам понять, на каком языке страница. Например:
- lang="en" — английский
- lang="es" — испанский
🔥 Лайфхак:
Если не указать <html>, браузер всё равно отобразит страницу, но это плохая практика! Всегда соблюдайте структуру.
🧠 Тег <head> — «мозг» документа
В этом блоке хранится служебная информация, которая не отображается напрямую на странице, но критически важна для её работы.
Что обычно лежит в <head>:
- <title> — заголовок вкладки браузера
- <meta> — метаданные (кодировка, описание для поисковиков)
- <link> — подключение стилей и иконок
- <script> — скрипты (обычно подключают в конце <body>)
Пример:
<head>
<meta charset="UTF-8"> <!-- кодировка -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мой первый сайт</title>
<link rel="icon" href="favicon.ico"> <!-- иконка во вкладке -->
</head>
🔹 <meta name="viewport"> — адаптирует страницу под мобильные устройства. Без него на телефоне сайт может выглядеть «уменьшенным».
💃 Тег <body> — «тело» документа
Здесь живёт всё, что видят пользователи: текст, картинки, кнопки, видео. Если <head> — это техническая часть, то <body> — творческая!
Пример:
<body>
<h1>Привет, мир!</h1>
<p>Это мой первый HTML-документ. 🎉</p>
<img src="cat.jpg" alt="Котик">
</body>
🔹 alt в <img> — альтернативный текст. Показывается, если изображение не загрузилось, или для людей с нарушениями зрения.
🧩 Собираем всё вместе
Давайте построим полноценный 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>
<p>Здесь вы узнаете всё о котах и их привычках. 😺</p>
</body>
</html>
Что мы сделали:
1. Объявили тип документа (<!DOCTYPE html>).
2. Создали «коробку» <html> с указанием языка.
3. В <head> добавили кодировку, адаптацию под мобилки и заголовок.
4. В <body> поместили контент, который увидят пользователи.
🚀 Проверь себя
- Что произойдёт, если не указать
<!DOCTYPE html>? - Какой тег отвечает за содержимое, которое видят пользователи?
- Зачем нужен атрибут
langв теге<html>?
Ответы:
1. Браузер перейдёт в режим совместимости, и страница может отображаться некорректно.
2. <body>.
3. Чтобы браузеры и поисковые системы понимали язык страницы.
💡 Дальше — интереснее! Освоили структуру? В следующий раз разберёмся с тегами для текста (<h1>–<h6>, <p>, <span>).
Если хотите глубже погрузиться в вёрстку, посмотрите разборы Данилы Бежина — там много живых примеров!
