Вёрстка на HTML и CSS: путь от основ к самостоятельному проекту

Вёрстка — это превращение макета в работающую веб-страницу. Браузер получает текстовый файл с разметкой и стилями и показывает его так, как задумал автор. Разница между страницей, которая «просто выглядит похоже», и страницей, которая корректно работает на любом экране и для любого посетителя, огромна. В статье разберём, какие знания нужны на старте, как устроены семантика, адаптивные сетки и доступность и как проверять результат прямо в браузере.

Содержание

Что нужно знать до начала
Способы обучения
Семантическая разметка
Практический пример: страница статьи
Адаптивные сетки
Доступность
Проверка в браузере
От упражнений к самостоятельному проекту

Что нужно знать до начала

Специальной подготовки не требуется, но несколько навыков заметно упрощают путь:

уверенно работать с файлами и папками: создавать, переименовывать, понимать, что такое путь к файлу и расширение;
пользоваться текстовым редактором для кода и браузером на уровне «открыть, обновить, посмотреть исходный код»;
знать базовые понятия интернета: адрес страницы, ссылка, изображение, форма;

Программирования в привычном смысле HTML и CSS не требуют: это языки разметки и описания оформления.

Способы обучения

Освоить вёрстку можно по-разному: по документации и бесплатным справочникам, по видеоурокам, по учебникам с упражнениями или на онлайн-курсах с проверкой заданий. Если нужны структура и обратная связь, имеет смысл сравнить курсы: вёрстка на HTML и CSS по программе, формату и нагрузке. Один из вариантов — образовательные проекты вроде HTML Academy (актуальные условия обучения лучше уточнять на странице школы). Отдельную тему — подход к шаблонам и повторному использованию кода — затрагивает программа шаблонизаторы HTML (содержание лучше читать в описании самой программы). Каким бы ни был выбор, главное — регулярная практика: прочитанное без собственных страниц быстро забывается.

Если вы только знакомитесь с языком, начните с материала HTML-курс для начинающих: первые шаги в веб-разработке: там разобраны первые теги и структура документа.

Семантическая разметка

Семантика — это выбор тега по смыслу, а не по внешнему виду. Если блок является навигацией, он размечается как nav, а не как безликий div. Основные элементы:

header — вводная часть страницы или раздела;
nav — основные ссылки навигации;
main — главное содержимое, на странице он один;
article и section — самостоятельный материал и тематический раздел;
aside — дополнительные сведения;
footer — завершающая часть;
h1–h6 — заголовки; уровни идут по порядку, без пропусков.

Смысловая разметка помогает поисковым системам разобрать структуру страницы, а программам чтения с экрана — перемещаться по ней. Такой код проще поддерживать: по названию тега понятно, зачем он нужен.

Практический пример: страница статьи

Задача. Нужно сверстать страницу блога: шапка с навигацией, одна статья с заголовком и разделом, боковая заметка и подвал. Условие: без блоков div, где есть подходящий смысловой тег.

Решение.

<header>
  <nav aria-label="Основное меню">
    <a href="/">Главная</a>
    <a href="/blog/">Блог</a>
  </nav>
</header>
<main>
  <article>
    <h1>Как устроена страница</h1>
    <section>
      <h2>Структура</h2>
      <p>Текст раздела.</p>
    </section>
  </article>
  <aside>
    <h2>Заметка</h2>
    <p>Дополнительное пояснение.</p>
  </aside>
</main>
<footer>
  <p>Контакты автора</p>
</footer>

Проверка результата.

На странице ровно один h1, подзаголовки идут по уровням.
Отключите стили или откройте страницу без CSS: порядок содержимого должен оставаться логичным.
Прогоните документ через валидатор разметки W3C: ошибок быть не должно.

Адаптивные сетки

Посетители открывают сайт на телефонах, планшетах и широких мониторах, поэтому вёрстка не может опираться на одну ширину. Адаптивность строится на нескольких приёмах.

Метатег viewport. Без строки <meta name="viewport" content="width=device-width, initial-scale=1"> мобильный браузер масштабирует страницу как десктопную, и остальные усилия теряют смысл.

Гибкие единицы. Вместо жёстких пикселей для ширины блоков используйте проценты, fr, rem и функции min(), max(), clamp(). Изображениям задайте max-width: 100% и height: auto, чтобы они не выходили за контейнер.

Flexbox и Grid. Flexbox удобен для одномерных рядов: меню, карточки в строку. Grid подходит для двумерных сеток, где колонки и строки задаются одновременно. Пример сетки, которая сама меняет число колонок:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

Медиазапросы. Подход «сначала мобильная версия»: базовые стили пишутся для узкого экрана, а для широких добавляются правила вида @media (min-width: 768px).

Критерии проверки адаптивной вёрстки:

нет горизонтальной прокрутки на ширине 320 пикселей;
текст читается без увеличения, размер основного шрифта не меньше 16 пикселей;
при увеличении масштаба до 200% содержимое не перекрывается и не обрезается.

Доступность

Доступность означает, что страницей могут пользоваться люди с разными особенностями: с нарушением зрения, моторики, слуха. Значительная часть требований выполняется уже за счёт правильной семантики, но есть и отдельные приёмы.

Тексты замены для изображений. У содержательной картинки атрибут alt описывает, что на ней важного; у декоративной он остаётся пустым: alt="".
Контраст. Для обычного текста ориентируйтесь на соотношение не ниже 4,5:1 по рекомендациям WCAG 2.1 уровня AA. Светло-серый текст на белом фоне — частая ошибка.
Работа с клавиатуры. Все интерактивные элементы доступны клавишей Tab, порядок перехода логичен, текущий фокус хорошо виден. Не убирайте рамку фокуса через outline: none, не предложив замену.
Настоящие элементы управления. Кнопка — это button, ссылка — a. Блок div с обработчиком клика не получает фокус и не озвучивается как кнопка.
Подписи к полям форм. Каждому полю соответствует label, связанный через for и id.

Проверка в браузере

Современные браузеры содержат инструменты разработчика (обычно открываются клавишей F12). Что в них стоит использовать:

Вкладка элементов. Показывает итоговое дерево документа и применённые стили, позволяет менять значения на лету.
Режим эмуляции устройств. Позволяет задать ширину экрана, проверить портретную и альбомную ориентацию и места перелома сетки. Эмуляция не заменяет проверку на настоящем телефоне.
Аудит доступности и производительности. В Chrome есть встроенный инструмент Lighthouse; его оценки — ориентир, а не окончательный вердикт, поэтому сочетайте их с ручными проверками.
Ручной тест клавиатурой. Пройдите всю страницу клавишей Tab, не прикасаясь к мыши: ничто не должно «застревать» или пропадать из виду.

От упражнений к самостоятельному проекту

Когда базовые приёмы освоены, переходите к цельной работе, например к одностраничному сайту о своём увлечении. Порядок действий простой: сначала продумайте структуру и заголовки, затем напишите семантическую разметку без стилей, после этого добавьте оформление для узкого экрана и лишь потом расширяйте сетку для больших. В конце проверьте доступность по списку выше и выложите результат в публичный репозиторий или на бесплатный хостинг, чтобы получить обратную связь.