1. Основы структуры HTML5-документа
Основы структуры HTML5-документа
Представьте, что вы пришли в арену перед матчем и видите пустой лёд, трибуны, табло, раздевалки — всё это каркас, на котором строится игра. HTML-документ — это точно такой же каркас, только для веб-страницы. Без него браузер не поймёт, что показывать пользователю. Сегодня вы узнаете, как устроен этот каркас, и напишете свой первый HTML-файл с нуля.
Базовый шаблон HTML5
Каждый HTML-документ начинается с декларации типа документа — <!DOCTYPE html>. Она сообщает браузеру: «Эта страница написана на HTML5, используй современные стандарты». Без неё браузер может перейти в режим совместимости и отобразить страницу некорректно.
Вот минимальный рабочий шаблон:
Разберём каждый элемент по порядку.
Тег <html> — корневой элемент
Тег <html> оборачивает всё содержимое страницы. Это корневой элемент — он единственный на странице и содержит внутри себя все остальные теги. Атрибут lang="ru" указывает, что основной язык страницы — русский. Это важно для поисковых систем и программ чтения с экрана.
> Если вы создаёте страницу на английском, укажите lang="en". Браузер использует этот атрибут для выбора правильной раскладки клавиатуры и словаря проверки орфографии.
Секция <head> — метаданные страницы
Тег <head> содержит информацию о странице, а не сам контент. Пользователь не видит содержимое <head> напрямую, но браузер и поисковые системы используют его постоянно.
Три обязательных элемента внутри <head>:
| Элемент | Назначение | Пример |
|---------|-----------|--------|
| <meta charset="UTF-8"> | Кодировка символов | Позволяет корректно отображать кириллицу, спецсимволы |
| <meta name="viewport"> | Настройка области просмотра | Адаптация под мобильные устройства |
| <title> | Заголовок вкладки браузера | «Хоккейные команды — Главная» |
Кодировка UTF-8 — это международный стандарт, который поддерживает символы практически всех языков мира. Без неё русские буквы на странице превратятся в набор непонятных символов вроде ой.
Viewport — это видимая область страницы в браузере. Мета-тег viewport говорит браузеру: «Установи ширину области просмотра равной ширине экрана и не масштабируй страницу при загрузке». Без него сайт на телефоне будет выглядеть как уменьшенная копия десктопной версии.
Title — это текст, который отображается на вкладке браузера и в результатах поиска. Для сайта о хоккее хорошим заголовком будет что-то конкретное: «ХК Спартак Москва — расписание и статистика», а не просто «Сайт».
Секция <body> — видимый контент
Тег <body> содержит всё, что видит пользователь: текст, картинки, таблицы, ссылки. Именно здесь будет жить ваш контент о хоккейных командах.
Создаём первый файл
Теперь соберём всё вместе. Создайте файл index.html в любом текстовом редакторе — подойдёт даже «Блокнот», но лучше использовать VS Code или Sublime Text с подсветкой синтаксиса.
Сохраните файл и откройте его двойным кликом — он загрузится в браузере. Вы увидите заголовок и абзац текста. Это работает, потому что браузер прочитал структуру, нашёл <body> и отобразил его содержимое.
Отступы и читаемость кода
Обратите внимание на отступы в коде: каждый вложенный элемент сдвигается на один табулятор (или 4 пробела) правее родителя. Это не влияет на отображение страницы, но критически важно для читаемости. Когда ваш файл вырастет до сотни строк, без отступов вы потеряете ориентацию за секунды.
Представьте, что это как нумерация в хоккейной программке: формально можно написать всё подряд, но если расставить номера и позиции — информация читается мгновенно.
Валидность HTML-кода
Валидный HTML — это код, который соответствует стандартам W3C (организации, которая разрабатывает веб-стандарты). Проверить свой код можно на сайте validator.w3.org. Невалидный код может работать, но браузер будет «догадываться» о ваших намерениях, и на разных устройствах результат может отличаться.
Три простых правила валидности:
<meta>, <br>, <img>)Пример неправильной вложенности: <p><strong>Текст</p></strong> — теги пересекаются. Правильно: <p><strong>Текст</strong></p>.
Комментарии в HTML
Комментарий — это заметка для разработчика, которую браузер игнорирует. Синтаксис: <!-- текст комментария -->. Используйте комментарии для разделения логических блоков:
Комментарии помогают ориентироваться в коде, когда вы вернётесь к проекту через неделю и забудете, где что находится.
Теперь у вас есть рабочий HTML-файл и понимание базовой структуры. В следующей статье мы наполним <body> реальным контентом: заголовками, абзацами и списками команд.