Когда я только начинал верстать, меня удивляло, что страница в браузере — это не макет из Фотошопа, а обычный текстовый файл с тегами. Именно структура этого файла определяет, где будет заголовок, где абзац, а где кнопка. Если вы хотите собрать свой первый сайт, не нужно сразу лезть в сложные редакторы — начните с понимания каркаса. В этом уроке разберём, из чего состоит первая веб-страница, как выглядит базовый HTML-документ и какие ошибки чаще всего допускают новички. После чтения вы сможете создать свой первый файл и проверить, что он работает.
Что такое HTML и зачем он нужен
HTML — это язык разметки, который задаёт структуру страницы. Он не отвечает за красивый внешний вид, а описывает, **какие элементы есть на странице и в каком порядке они идут**. Когда заказчик говорит «хочу сайт, как у конкурента», он часто имеет в виду дизайн, а не структуру. Но без чёткого HTML даже самый красивый макет не станет работающей страницей.
Проще всего представить HTML как каркас дома:
— заголовки — это основные опоры;
— абзацы — текстовые блоки;
— изображения — отдельные элементы;
— ссылки — переходы между страницами;
— списки — удобная форма подачи информации.
Без HTML браузер не понимает, где на странице заголовок, где основной текст, а где меню. Поэтому изучение HTML всегда начинается именно со структуры документа.
Из чего состоит 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>На первый взгляд тегов много, но логика простая:
— <!DOCTYPE html> сообщает браузеру, что документ написан на HTML5;
— <html> — корневой элемент всей страницы;
— <head> — служебная часть, где хранится информация о странице;
— <body> — видимая часть, которую видит пользователь.
Это минимальный скелет, без которого страница либо не отобразится, либо отобразится криво.
Базовая структура страницы: разбираем по частям
<!DOCTYPE html>
Этот короткий тег ставится в самом начале файла. Он нужен, чтобы браузер понимал: перед ним современный HTML-документ. Если его забыть, браузер может переключиться в режим совместимости со старыми стандартами — тогда некоторые CSS-свойства могут работать не так, как вы ожидаете. В простых проектах это не всегда заметно, но привычку ставить DOCTYPE нужно выработать с первого дня.
<html lang=»ru»>
Это контейнер для всей страницы. Атрибут lang="ru" говорит браузеру и поисковым системам, что контент написан на русском языке. Это влияет на расстановку переносов, проверку орфографии в формах, произношение скринридерами. Если забудете, Яндекс и Google всё равно поймут, но для доступности и качества кода лучше указать.
Зачем это важно:
— улучшает доступность;
— помогает поисковым системам;
— полезно для корректной работы переводчиков и экранных читалок.
Если сайт на русском, lang="ru" нужно ставить обязательно.
<head>
Внутри head лежит служебная информация. Это не контент для пользователя, но без неё страница будет неполной. Частая ошибка новичков — пытаться вставить в head видимый текст или картинки. Запомните: всё, что внутри head, не отображается на странице.
Обычно сюда добавляют:
— кодировку;
— настройки адаптивности;
— заголовок вкладки;
— описание страницы;
— подключение CSS и JavaScript.
<meta charset=»UTF-8″>
Этот тег задаёт кодировку UTF-8. Для русскоязычных сайтов он особенно важен, потому что без него текст может отображаться «кракозябрами». Проверьте прямо сейчас: если вы видите нечитаемые символы вместо русского текста на своей странице, скорее всего, забыли эту строку.
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
Это настройка для мобильных устройств. Она помогает странице нормально масштабироваться на телефонах и планшетах. Без неё страница на смартфоне будет выглядеть как уменьшенная копия десктопной версии — мелкий текст, нужно зумить. Практически все современные сайты его используют, и если вы не добавите viewport, мобильные пользователи просто закроют страницу.
<title>
Это название страницы, которое показывается во вкладке браузера и часто используется поисковыми системами. Хороший title — это не просто «Главная», а конкретное описание. Например:
<title>Урок HTML для начинающих: структура первой веб-страницы</title>Поисковики обращают на него внимание, а пользователи по нему решают, переходить ли на сайт. Не пренебрегайте title, даже на учебной странице.
Хороший title должен быть:
— понятным;
— коротким;
— по делу;
— связанным с содержанием страницы.
<body>
Всё, что находится внутри body, пользователь видит на экране: тексты, кнопки, картинки, списки, формы и другие элементы. Именно здесь вы будете проводить 90% времени при создании страницы. Важно: body должен быть один на странице, и всё видимое содержимое — внутри него.
Именно в body вы размещаете:
— основной заголовок;
— абзацы;
— изображения;
— ссылки;
— списки;
— блоки с контентом.
Минимальная рабочая страница
Если вам нужен самый простой старт, запомните этот шаблон:
<!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>Этого достаточно, чтобы открыть файл в браузере и увидеть результат. Когда я делал первые сайты, я начинал именно с такого шаблона и постепенно добавлял контент. Совет: сохраните этот код как сниппет в редакторе, чтобы быстро разворачивать основу.
Какие теги нужны в первую очередь
Для начала не пытайтесь выучить всё сразу — это как пытаться запомнить весь словарь, начиная учить язык. Освойте базовый набор, а остальные теги будете гуглить по мере необходимости. Я сам до сих пор иногда подсматриваю в спецификацию.
| Тег | Назначение | Пример использования |
|---|---|---|
h1–h6 |
Заголовки разных уровней | Названия разделов |
p |
Абзац текста | Обычный текст статьи |
a |
Ссылка | Переход на другую страницу |
img |
Изображение | Фото, иллюстрация, иконка |
ul / ol |
Списки | Перечни, шаги, пункты |
li |
Элемент списка | Один пункт внутри списка |
div |
Блочный контейнер | Объединение элементов |
span |
Строчный контейнер | Выделение части текста |
Пример использования простых тегов
<h1>Мой первый сайт</h1>
<p>Это абзац с текстом. Здесь можно написать что угодно.</p>
<a href="https://example.com">Перейти на сайт</a>
<ul>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ul>Обратите внимание, что ссылка открывается в той же вкладке — это поведение по умолчанию. Позже вы научитесь управлять этим через атрибут target.
Как выглядит логичная структура первой страницы
Хорошая веб-страница строится не хаотично, а по понятной схеме. Когда я верстаю лендинг для малого бизнеса, я всегда начинаю с разметки смысловых блоков, даже если дизайн ещё не готов. Это помогает понять логику страницы.
Обычно сверху вниз идут такие блоки:
— шапка сайта;
— главное меню;
— основной заголовок;
— вступление;
— основной контент;
— дополнительные блоки;
— подвал страницы.
Для простой первой страницы можно использовать такой каркас:
<header>
<h1>Название сайта</h1>
<nav>
<a href="#">Главная</a>
<a href="#">О нас</a>
<a href="#">Контакты</a>
</nav>
</header>
<main>
<section>
<h2>О компании</h2>
<p>Здесь текст о компании.</p>
</section>
<section>
<h2>Услуги</h2>
<ul>
<li>Услуга 1</li>
<li>Услуга 2</li>
</ul>
</section>
</main>
<footer>
<p>© 2025 Мой сайт</p>
</footer>Такая структура уже ближе к настоящему сайту, а не к учебному черновику.
Почему важно использовать семантические теги
Семантические теги — это элементы, которые сразу показывают смысл блока. Раньше верстали всё на div‘ах, но сейчас это моветон. Поисковики лучше понимают структуру, а скринридеры могут навигировать по разделам. Когда я сдаю проект заказчику, я всегда поясняю, что header, main и footer — это не просто блоки, а ориентиры для роботов и людей с ограничениями. Это повышает качество сайта.
Например:
— header — шапка;
— main — основной контент;
— section — логический раздел;
— footer — подвал;
— nav — навигация.
Почему это полезно:
— код становится понятнее;
— удобнее поддерживать проект;
— браузерам и поисковым системам проще ориентироваться в странице;
— сайт лучше подходит для доступности.
Если пока сложно запомнить все теги, начните с простого правила: **не оборачивайте всё подряд в div, если есть более точный тег**.
Пошагово: как создать первую HTML-страницу
Шаг 1. Создайте файл
Создайте обычный текстовый файл и сохраните его с расширением .html. Можно в Блокноте, но лучше сразу скачать бесплатный редактор типа VS Code — он подсветит теги и покажет ошибки.
Пример имени:
index.htmlЭто главный файл страницы, который браузер открывает первым.
Шаг 2. Вставьте базовый шаблон
Скопируйте минимальную структуру 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>Шаг 3. Сохраните файл
После внесения изменений обязательно сохраните документ. Иначе браузер откроет старую версию. Убедитесь, что кодировка UTF-8, иначе русский текст может сломаться.
Шаг 4. Откройте файл в браузере
Дважды щёлкните по файлу или откройте его через браузер. Если всё сделано правильно, вы увидите заголовок и текст. Если не видно изменений, обновите страницу (Ctrl+F5).
Шаг 5. Меняйте контент и проверяйте результат
Попробуйте:
— заменить заголовок;
— добавить новый абзац;
— вставить список;
— добавить ссылку;
— изменить порядок блоков.
Так вы быстрее поймёте, как работает HTML. Попробуйте специально сломать страницу — удалите закрывающий тег и посмотрите, что будет. Это лучший способ понять, как браузер обрабатывает ошибки.
Типовые ошибки новичков
1. Пропущен закрывающий тег
Однажды я забыл закрыть тег <strong>, и весь последующий текст стал жирным. Хорошо, что заметил до сдачи проекта. Всегда проверяйте парность тегов.
Пример ошибки:
<p>Текст</p>
<p>Ещё текст</p>
<p>И ещё</p>Правильно:
<p>Текст</p>
<p>Ещё текст</p>
<p>И ещё</p>Не все теги требуют закрытия, но большинство — да.
2. Неправильная вложенность
Помню, как новичок вложил <div> внутрь <p> — браузер автоматически закрыл абзац, и структура поехала. Правило простое: блочные элементы не должны быть внутри строчных, если это не предусмотрено спецификацией.
Ошибка:
<p><h2>Заголовок</h2></p>Заголовок нельзя вкладывать в абзац. Структура должна быть логичной.
3. Смешивание структуры и оформления
Заказчики часто просят «сделать текст красным» прямо в HTML. Объясняю, что для цвета есть CSS, а HTML — это скелет. Использовать атрибуты вроде color или bgcolor — устаревший подход. Новички часто пытаются сразу «сделать красиво» с помощью HTML, но HTML отвечает за структуру, а внешний вид задаётся CSS.
4. Отсутствие lang, charset и viewport
Было дело, сделал сайт, а на телефоне он выглядел ужасно — забыл viewport. Теперь это первое, что проверяю в чек-листе. Без этих тегов страница может работать хуже, особенно на мобильных устройствах и при отображении русского текста.
5. Использование div вместо смысловых тегов
Когда я начинал, то лепил div‘ы везде. Потом при поддержке такого кода через полгода сам не мог понять, где шапка, а где подвал. Семантика экономит время. div — универсальный контейнер, но не стоит применять его везде без необходимости.
Чек-лист перед проверкой страницы
Я всегда прохожу по этому списку перед тем, как показать страницу заказчику или опубликовать. Это занимает минуту, но спасает от глупых ошибок.
Перед открытием файла проверьте:
— файл сохранён с расширением .html;
— в начале есть <!DOCTYPE html>;
— тег <html> содержит lang="ru";
— в <head> указана кодировка UTF-8;
— добавлен viewport;
— есть <title>;
— весь видимый контент находится в <body>;
— теги корректно закрыты;
— структура вложенности не нарушена.
Как понять, что структура страницы сделана правильно
Хорошая первая страница должна отвечать на три вопроса:
— где здесь заголовок;
— где основной текст;
— где служебная часть.
Если вы открываете файл и сразу видите логичную иерархию контента, значит базовая структура собрана правильно. Простой тест: отключите CSS (если он есть) и посмотрите на голый HTML. Если структура читается логично — вы всё сделали правильно. Именно так поисковые роботы видят вашу страницу.
Простой тест:
— есть один главный h1;
— разделы оформлены через h2;
— текст разбит на абзацы;
— список оформлен списком, а не набором строк;
— ссылка работает;
— страница не выглядит как сплошной текстовый блок.
Что изучать дальше после первой страницы
Когда базовая структура станет понятной, следующий шаг — научиться:
— оформлять текст более аккуратно;
— добавлять изображения;
— создавать ссылки и навигацию;
— работать с таблицами;
— подключать CSS;
— собирать простую страницу-портфолио или лендинг.
Обычно после первой HTML-страницы лучше сразу перейти к практике: сделать страницу о себе, мини-проект или простой список услуг. Так знания закрепляются быстрее. Я часто предлагаю ученикам сделать страницу с фото, списком навыков и контактами — это даёт быстрый результат, который можно показать.
FAQ
Нужно ли учить все теги сразу?
Нет. Для начала достаточно базового набора: заголовки, абзацы, ссылки, списки, изображения и основные структурные теги. Я до сих пор не помню все, пользуюсь документацией. Главное — понимать структуру.
Можно ли создать страницу только из <body>?
Технически браузер отобразит текст и без head, но это как дом без фундамента: будет работать, но криво. Кодировка может сбиться, поисковики не поймут, о чём страница, а мобильные пользователи увидят мелкий текст. Всегда делайте полную структуру.
Почему на странице не отображается русский текст?
Чаще всего проблема в кодировке. Проверьте, что в head есть <meta charset="UTF-8">. Также убедитесь, что сам файл сохранён в UTF-8, а не в ANSI.
Что важнее на старте: HTML или CSS?
HTML. Без структуры стили не к чему применять. Сначала каркас, потом красота. Я часто вижу, как новички пытаются сразу сделать «красиво» и путаются. Начните с чёрно-белой страницы с правильной разметкой — это база.
Обязательно ли использовать <main>, <header> и <footer>?
Для учебной страницы — не обязательно, но это хорошая привычка. Такие теги делают код понятнее и удобнее. Когда проект разрастётся, вы скажете себе спасибо.
Вывод
Первая HTML-страница строится несложно, если понимать её логику: head хранит служебную информацию, body — видимый контент, а теги внутри страницы задают структуру и смысл блоков. Если сразу привыкнуть писать аккуратный каркас, дальше будет гораздо проще осваивать CSS, адаптивность и более сложные проекты. За годы практики я убедился: те, кто сразу осваивают чистую структуру, в дальнейшем гораздо быстрее разбираются с JavaScript и другими технологиями. Не пренебрегайте фундаментом.
Начните с минимального шаблона, добавьте заголовок, абзац и список, а затем постепенно расширяйте страницу. Именно так HTML перестаёт быть набором непонятных тегов и становится понятным инструментом для создания сайтов.