Когда я только начинал, меня пугало количество технологий: казалось, чтобы сделать хоть что-то работающее, нужно выучить JavaScript, разобраться в сборщиках и освоить какой-нибудь фреймворк. На деле для первой страницы нужны всего две вещи — HTML и CSS. HTML описывает структуру и смысл содержимого, а CSS отвечает за внешний вид: цвета, шрифты, отступы, расположение блоков.
В этой статье разберём, как собрать простую страницу с нуля, какие файлы для этого понадобятся, как выглядит базовая структура документа, как правильно подключить стили и какие ошибки чаще всего мешают новичкам получить аккуратный результат.
С чего начать: что такое вёрстка страницы
Вёрстка — это превращение макета или идеи в рабочий код, который браузер может отобразить. В реальных проектах макет обычно приходит от дизайнера в Figma или другом графическом редакторе, но для обучения можно придумать структуру самому или набросать её на бумаге. Основа всегда одна: HTML задаёт каркас и семантику, а CSS делает этот каркас визуально аккуратным и удобным для чтения.
Если упростить до аналогии, которую я часто использую при объяснении новичкам:
- HTML — это каркас дома: стены, перекрытия, комнаты.
- CSS — это отделка, цвет стен, расстановка мебели, шторы и декор.
Для первой страницы не нужно сразу изучать JavaScript, системы управления контентом или фреймворки. Важно сначала научиться собирать понятную структуру и управлять базовым стилем. Именно на этом этапе закладывается фундамент, который потом пригодится и при работе с WordPress, и при написании скриптов.
Какие файлы нужны для первой страницы
Для простого проекта хватит двух файлов:
index.html— главная HTML-страница;styles.css— файл со стилями.
Иногда сразу добавляют папку с изображениями, например images, чтобы не хранить все файлы вперемешку. В реальных проектах структура может быть сложнее: появляются папки для шрифтов, скриптов, дополнительных страниц, но для старта такая минимальная организация — лучший выбор.
Пример минимальной структуры проекта:
project/
├── index.html
├── styles.css
└── images/
└── photo.jpg
Такой подход удобен тем, что проект легко поддерживать: HTML отдельно, стили отдельно, изображения отдельно. Это же разделение ответственности пригодится, когда вы начнёте работать в команде или передавать проект другому разработчику.
Базовая структура HTML-документа
Любая страница начинается с каркаса HTML-документа. Внутри есть обязательные части: <html>, <head> и <body>.
<head>— служебная часть страницы, где подключаются стили, задаётся заголовок вкладки и метаданные. Пользователь её не видит, но браузер и поисковики активно используют.<body>— всё видимое содержимое: заголовки, текст, кнопки, изображения.
Простейший шаблон выглядит так:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Моя первая страница</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это моя первая веб-страница.</p>
</body>
</html>
Что здесь важно
<!DOCTYPE html>сообщает браузеру, что это современный HTML-документ. Без него браузер может переключиться в режим совместимости со старыми стандартами, и вёрстка поплывёт.lang="ru"помогает поисковым системам и программам экранного доступа понимать язык страницы. Мелочь, которая влияет и на SEO, и на доступность.<meta charset="UTF-8">нужен для корректного отображения русского текста. Забудете эту строчку — и все буквы превратятся в кракозябры. Это одна из самых частых ошибок у новичков.<title>— название вкладки в браузере. Его видит пользователь, и оно же попадает в сниппет поисковой выдачи, поэтому заголовок должен быть осмысленным.<link rel="stylesheet">подключает внешний CSS-файл. Атрибутhrefуказывает путь к файлу — если ошибиться в имени или папке, стили не применятся.
Какой должна быть первая страница
Начинать лучше с простой и понятной структуры. Для первой самостоятельной вёрстки я обычно рекомендую собрать типовой лендинг, который часто заказывают представители малого бизнеса. Достаточно таких блоков:
- шапка страницы;
- основной заголовок;
- абзац с описанием;
- список преимуществ или шагов;
- кнопка или ссылка;
- подвал страницы.
Это уже полноценная практика: вы учитесь не просто писать теги, а собирать смысловую композицию страницы. Такой подход сразу приучает думать о структуре, а не о декоративных эффектах.
Пример простой веб-страницы
Ниже — базовый вариант лендинга, который я часто даю новичкам как учебный шаблон. Он содержит все необходимые смысловые блоки и минимальное оформление.
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Простая страница</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Мой первый сайт</h1>
</header>
<main>
<section>
<h2>О проекте</h2>
<p>Это учебная страница, свёрстанная вручную на HTML и CSS.</p>
</section>
<section>
<h2>Преимущества</h2>
<ul>
<li>Простая структура</li>
<li>Чистый код</li>
<li>Подходит для старта</li>
</ul>
</section>
<div>
<a href="#">Связаться</a>
</div>
</main>
<footer>
<p>© 2025 Моя первая страница</p>
</footer>
</body>
</html>
CSS
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
color: #333;
}
header {
background-color: #4a90e2;
color: white;
padding: 20px;
text-align: center;
}
main {
max-width: 800px;
margin: 20px auto;
padding: 0 20px;
}
section {
margin-bottom: 30px;
}
a {
display: inline-block;
padding: 10px 20px;
background-color: #4a90e2;
color: white;
text-decoration: none;
border-radius: 4px;
}
footer {
text-align: center;
padding: 15px;
background-color: #eee;
margin-top: 40px;
}
Обратите внимание: в HTML я намеренно использовал семантические теги <header>, <main>, <section>, <footer> вместо безликих <div>. Это помогает поисковикам и скринридерам понимать структуру страницы. В CSS задан минимальный сброс отступов у body и ограничение ширины контента через max-width с автоматическими боковыми отступами — такой контейнер не даст тексту расползтись на широких экранах.
Как читать этот код без страха
Новички часто смотрят на код как на сплошной набор символов. На самом деле всё логично, если знать назначение основных тегов:
<header>,<main>,<section>,<footer>— смысловые блоки страницы. Они описывают структуру, а не просто «коробки» для содержимого.<h1>,<h2>— заголовки разных уровней.h1обычно один на странице и содержит главную тему,h2— подзаголовки разделов.<p>— абзац текста.<ul>и<li>— маркированный список.<a>— ссылка или кнопка-ссылка. Если убрать атрибутhref, это будет просто текст.<div>— универсальный контейнер для группировки элементов, когда нет подходящего семантического тега. Я использовал его для обёртки кнопки, потому что отдельного смыслового блока здесь не требуется.
Смысл в том, чтобы не лепить всё подряд в один блок, а разбивать страницу на понятные части. Такой подход называется семантической вёрсткой. Код становится легче читать, менять и расширять — хоть вам через неделю, хоть другому разработчику.
Как подключать CSS правильно
Есть несколько способов задать стили, но для начала лучше использовать отдельный файл styles.css, подключённый в <head>. Это самый удобный вариант и для обучения, и для реальных проектов.
Почему так лучше:
- стили не смешиваются с HTML — разметка остаётся чистой;
- легче искать ошибки: вы точно знаете, что всё оформление лежит в одном файле;
- проще поддерживать проект: изменили цвет в одном месте — он применился ко всей странице;
- удобнее переиспользовать стили на других страницах, просто подключив тот же CSS;
- браузер может закешировать внешний файл стилей, что ускоряет загрузку при повторных визитах.
Внутренние стили внутри HTML через тег <style> допустимы в порядке эксперимента, но для первой серьёзной практики отдельный CSS-файл — безальтернативный выбор. В продакшене стили потом минифицируют и объединяют, но на старте важнее понять принцип разделения ответственности.
Базовые принципы хорошей вёрстки
Даже простая страница должна выглядеть аккуратно. Для этого достаточно нескольких принципов, которые я вывел из собственных ошибок и наблюдений за новичками.
1. Структура важнее украшений
Сначала соберите каркас: заголовки, текст, списки, кнопки. Только потом переходите к цветам, отступам и декоративным деталям. Частая история: заказчик просит «сделать покрасивее», а на деле проблема не в отсутствии теней или градиентов, а в том, что контент не структурирован и слипается. Приведите в порядок логику блоков — и страница уже станет выглядеть лучше без всяких украшательств.
2. Не используйте слишком много тегов без смысла
Если можно обойтись одним семантическим блоком, не заменяйте его набором лишних <div>. Семантика помогает браузеру и поисковикам понимать содержимое страницы. Кроме того, вложенность ради вложенности усложняет CSS: вы начинаете плодить длинные селекторы, которые потом трудно переопределить. Простота — признак мастерства.
3. Следите за отступами
Большинство «кривых» страниц у новичков связано не с цветами, а с неправильными margin и padding. Внешние отступы (margin) могут схлопываться, внутренние (padding) увеличивают размер элемента, если не использовать box-sizing: border-box. Всегда проверяйте отступы в первую очередь, когда что-то выглядит не так. Я обычно временно добавляю фоновую заливку блокам, чтобы визуально увидеть их границы.
4. Начинайте с простого шрифта и нейтральных цветов
На первом этапе не стоит использовать слишком много шрифтов, градиентов и анимации. Простая типографика почти всегда выглядит лучше, чем перегруженный дизайн. В реальных проектах я часто ограничиваюсь одним системным шрифтом и двумя-тремя цветами. Это ускоряет разработку и улучшает читаемость. Эксперименты с дизайном оставьте на потом, когда базовая вёрстка перестанет вызывать вопросы.
Типовые ошибки новичков
Ниже — ошибки, которые чаще всего мешают собрать нормальную страницу с первого раза. Я собрал их на основе типичных проблем, которые вижу у начинающих верстальщиков.
| Ошибка | Почему это плохо | Как исправить |
|---|---|---|
Всё содержимое в одном <div> |
Код становится нечитаемым, сложно найти нужный блок | Разделить страницу на смысловые блоки: шапка, секции, подвал |
| Нет подключения CSS | Страница выглядит «сырой», как документ без оформления | Проверить тег <link> в <head> и путь к файлу |
| Неправильная кодировка | Русский текст отображается кракозябрами | Добавить <meta charset="UTF-8"> в <head> |
| Слишком много разных шрифтов | Падает визуальная цельность, страница выглядит аляповато | Использовать 1–2 шрифта максимум, лучше системные |
| Нет контейнера по ширине | Контент растягивается слишком широко на больших экранах, текст неудобно читать | Добавить общий блок с max-width и margin: auto |
| Слабый контраст текста и фона | Текст тяжело читать, особенно людям с ослабленным зрением | Увеличить контрастность: тёмный текст на светлом фоне или наоборот |
Пошаговый план: как сверстать страницу самому
Если нужен понятный маршрут, действуйте так. Я часто даю эту последовательность своим ученикам, и она помогает не утонуть в деталях.
- Определите цель страницы: что она должна рассказать или какую задачу решить.
- Нарисуйте простую структуру на бумаге или в заметках — хотя бы прямоугольники с подписями «шапка», «текст», «кнопка».
- Создайте файл
index.htmlв любом текстовом редакторе (подойдёт даже Блокнот, но лучше VS Code). - Добавьте базовый HTML-каркас с
<!DOCTYPE>,<head>и<body>. - Разбейте содержимое на блоки: шапка, основная часть, подвал. Используйте семантические теги.
- Создайте
styles.cssв той же папке. - Подключите стили через
<link>в<head>. - Настройте шрифт, фон, отступы и ширину контейнера. Начните с минимального оформления.
- Проверьте, как страница выглядит в браузере. Откройте файл напрямую или через локальный сервер.
- Исправьте мелкие ошибки и только потом усложняйте дизайн.
Такой порядок помогает не застрять на этапе «сделать красиво» и довести работу до результата. Проверяйте страницу в браузере после каждого значимого изменения — это сэкономит массу времени.
Чек-лист перед тем, как считать страницу готовой
- Страница открывается без ошибок (в консоли разработчика нет красных сообщений).
- Русский текст отображается корректно, без кракозябр.
- CSS подключён и реально работает: если временно отключить стили в инструментах разработчика, внешний вид изменится.
- Заголовок страницы задан в
<title>и соответствует содержимому. - Контент не прилипает к краям экрана — есть отступы или ограничивающий контейнер.
- Текст легко читается: достаточный размер шрифта, нормальный контраст.
- Блоки логично разделены, визуально понятно, где заканчивается один раздел и начинается другой.
- Страница не выглядит перегруженной: минимум цветов и декоративных элементов.
- На мобильной ширине (просто сузьте окно браузера) ничего не ломается, текст не вылезает за экран. Это первый шаг к адаптивности.
Если хотя бы несколько пунктов не выполнены, страницу стоит доработать. Лучше потратить время сейчас, чем закреплять неправильные привычки.
Когда стоит переходить к следующему уровню
После того как вы уверенно собираете простые страницы и понимаете, как работают HTML и CSS в связке, можно двигаться дальше:
- изучить блочную модель CSS — как размеры, отступы и границы влияют друг на друга;
- освоить flexbox и grid — современные инструменты для раскладки блоков;
- научиться делать адаптивную вёрстку с медиазапросами;
- добавить формы обратной связи;
- попробовать верстать по макету из Figma — это приблизит вас к реальным задачам;
- познакомиться с основами JavaScript, чтобы добавлять интерактивность.
Это естественный путь: сначала базовая разметка, потом оформление, затем интерактивность. Не стоит перепрыгивать через этапы — пробелы в базе потом аукнутся, когда вы столкнётесь с более сложными проектами.
Вывод
Сверстать простую веб-страницу самостоятельно реально даже без большого опыта. Для этого достаточно понять HTML-структуру, научиться подключать CSS и собрать несколько логичных блоков на странице. Главное — не пытаться сделать «сразу красиво». Сначала научитесь делать страницу понятной, аккуратной и технически правильной. Именно на этом этапе закладывается база, которая потом пригодится и в обучении, и в реальных проектах: будь то вёрстка лендинга для клиента или доработка темы WordPress.
FAQ
Что нужно знать в первую очередь для первой вёрстки?
Нужно понимать базовые теги HTML (хотя бы 15–20 штук), структуру документа и основы CSS: селекторы, цвета, отступы и подключение стилей. Этого уже достаточно, чтобы собрать осмысленную страницу.
Можно ли сверстать страницу без JavaScript?
Да, для обычной статической страницы JavaScript не обязателен. Большинство сайтов-визиток и лендингов прекрасно обходятся без скриптов. HTML и CSS уже позволяют сделать полноценную визуальную страницу с читаемым контентом.
С чего лучше начинать: с HTML или CSS?
С HTML. Сначала нужно собрать структуру и содержание, а потом переходить к оформлению. Попытка учить CSS без понимания того, к каким элементам применяются стили, приводит к путанице. Контент первичен.
Нужен ли макет перед вёрсткой?
Желательно да. Даже простой набросок на бумаге помогает быстрее понять расположение блоков и избежать хаоса в коде. Когда я делаю учебные проекты с новичками, мы всегда начинаем с грубого эскиза — это дисциплинирует мышление и экономит время.
Как понять, что страница сверстана нормально?
Если блоки стоят логично, текст читается, отступы выглядят аккуратно, а файл CSS подключён без ошибок — это уже хороший результат для первой страницы. Добавлю субъективный критерий: если страница не вызывает желания немедленно закрыть вкладку, значит, вы на верном пути.