HTML и CSS: что это, где применяется и как освоить

Главная польза навыка для неверстальщика — возможность заглянуть под визуальный редактор. Конструктор сайтов, CMS и сервис рассылок показывают красивую картинку, а браузер, почтовый клиент и поисковый робот читают код за ней. Когда текст «съехал» только на телефоне, а в письме пропала кнопка, редактор ничего не объяснит, а инструменты разработчика в браузере покажут, какое правило CSS сработало и какой тег стоит не на своём месте.

Что делает человек, который владеет HTML и CSS

Для работы «рядом с сайтом» навык раскладывается на три действия. Первое — открыть код элемента: щёлкнуть правой кнопкой по блоку, выбрать «Просмотреть код» и найти, в каком теге лежит текст и какие классы на нём висят. Второе — поправить разметку: сделать из абзацев со звёздочками настоящий список, заменить жирную строку подзаголовком, добавить картинке описание в атрибуте alt. Третье — написать небольшое правило CSS: увеличить межстрочный интервал, выровнять кнопку по центру, скрыть лишний блок на узком экране через медиазапрос.

Для каждой роли набор задач свой. Маркетологу нужен блок «HTML-код» на конструкторе и шаблон письма в сервисе рассылок. Контент-менеджер вычищает лишние span и style, которые визуальный редактор CMS вставляет при копировании из Word. Дизайнеру знание CSS помогает рисовать макет, который соберут без споров: отступы кратны одной сетке, текст не зашит в картинку. SEO-специалист проверяет заголовки, атрибуты alt и микроразметку.

Когда хватает конструктора, а когда нужен код

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

Письма — отдельный случай. Почтовые клиенты поддерживают CSS хуже браузеров, а классический Outlook для Windows отрисовывает письма движком Word. Поэтому в письмах до сих пор строят сетку на таблицах и пишут стили в атрибуте style у каждого элемента, хотя на сайтах так давно не делают.

Другой подход — позвать верстальщика или фронтенд-разработчика. Это разумно, когда нужны логика, работа с данными или скрипты: HTML и CSS описывают структуру и вид, а поведение страницы — зона JavaScript.

Учебный пример: статья в CMS и шесть заголовков первого уровня

Возьмём учебную ситуацию. Контент-менеджер публикует длинную статью о выборе палатки на сайте туристического магазина. Шаблон CMS оборачивает каждый смысловой блок в тег section, и редактор по привычке ставит в начале каждого из шести блоков заголовок h1: «Сколько мест нужно», «Однослойная или двухслойная», «Какой вес допустим». В браузере всё выглядит прилично: заголовки блоков чуть меньше главного, иерархия читается.

Когда-то такая разметка считалась допустимой. В спецификации HTML много лет был описан алгоритм структуры документа (outline algorithm), и по нему h1 внутри section автоматически становился подзаголовком. Ни один браузер и ни одна программа экранного доступа этот алгоритм так и не реализовали. 1 июля 2022 года WHATWG приняла изменение #7829 и заменила его структурой, основанной только на уровнях заголовков. В действующем тексте HTML Living Standard уровень заголовка определяется самим тегом: h1 — первый уровень, h2 — второй, и section его не меняет. Там же записано, что каждый следующий заголовок может быть глубже предыдущего не больше чем на одну ступень. Разметка h1 → h3 без h2 между ними приведена в спецификации как пример ошибки.

Для нашей статьи это значит, что программа экранного доступа видит шесть равноправных заголовков первого уровня, и человек, который перемещается по ним клавишей, не понимает, где название статьи, а где разделы. Меняется и внешний вид: прилично страница выглядела потому, что браузеры уменьшали h1 внутри section встроенными стилями. MDN в апреле 2025 года сообщил, что эти стили удаляют: Firefox выключил их полностью к версии 140, Chrome с версии 136 выводит предупреждение, а Lighthouse снижает за h1 в section без заданного размера шрифта оценку в разделе Best Practices. Если в теме оформления сайта размер h1 не задан явно, заголовки разделов однажды станут такими же крупными, как название статьи.

Исправление займёт пять минут: оставить один h1 с названием, разделы перевести в h2, подпункты внутри них — в h3, а размер каждого уровня задать в CSS самостоятельно. В спецификацию уже добавлен атрибут headingoffset, который сдвигает уровень вложенных заголовков, но MDN помечает его как экспериментальный и не поддержанный основными браузерами. Полагаться на него в рабочей статье пока рано.

В каком порядке осваивать HTML и CSS

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

1. Инструменты разработчика: найти элемент, посмотреть его стили, временно поменять значение.
2. Смысловые теги: заголовки h1–h6, абзацы, списки, ссылки, изображения с alt, формы с подписями к полям.
3. Селекторы и каскад CSS: почему одно правило перебивает другое.
4. Блочная модель: содержимое, внутренний отступ, рамка, внешний отступ и свойство box-sizing.
5. Flexbox и Grid для раскладки карточек и колонок, медиазапросы для узких экранов.
6. Своя специфика: HTML-письма для маркетолога, чистка разметки из визуального редактора для контент-менеджера, передача макета в код для дизайнера.

Первые три пункта реально освоить по бесплатным справочникам за пару недель вечерних занятий, если сразу применять их к рабочим страницам. Системная подготовка нужна, когда хочется собирать страницы с нуля по макету: на курсе Skillbox «HTML и CSS с нуля» за три месяца проходят путь от семантической разметки до адаптивной вёрстки по макетам из Figma, с Flexbox, Grid, Sass и методологией БЭМ, а в обзоре говорится о восьмидесяти с лишним заданиях с проверкой кода.

Упражнения и типичные ошибки новичков

Лучшие упражнения — на своих материалах. Откройте последнюю опубликованную статью и выпишите все её заголовки с уровнями: получится оглавление или каша? Повторите блок из конструктора вручную в песочнице вроде CodePen и сравните с оригиналом.

Самая частая ошибка — выбирать тег по внешнему виду. Жирная строка вместо h2, h4 «потому что шрифт подходящего размера», разрыв строки br вместо нового абзаца. Размер и начертание — забота CSS, а тег сообщает смысл. Вторая ошибка — лечить вёрстку правилом !important: оно перебивает всё, и через месяц никто не понимает, почему кнопка не меняет цвет. Третья — проверять результат только на своём ноутбуке, хотя большинство посетителей лендинга придёт с телефона.

Как проверить свой результат

Проверка складывается из трёх шагов, и все они бесплатны. Валидатор W3C (validator.w3.org) находит незакрытые теги, дубли id и неправильную вложенность. Режим адаптивного просмотра в инструментах разработчика показывает страницу на ширине 360 пикселей, где чаще всего ломаются сетки и вылезают длинные слова. Lighthouse в Chrome оценивает доступность и практики вёрстки и как раз подскажет, если заголовки идут не по порядку.

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

Когда хочется, чтобы результат проверял человек, а не валидатор, ищите обучение с наставником. На курсе Яндекс Практикума «Профессиональная вёрстка на HTML и CSS» задания сначала проверяет автоматический тестировщик, а проектные работы — ревьюеры; среди проектов мобильная текстовая страница и сайт аукциона, а в обзоре отдельно отмечен акцент на доступности.

Как навык влияет на доход

Для маркетолога, контент-менеджера или дизайнера HTML и CSS редко становятся строкой, за которую платят отдельно. В вакансиях он обычно стоит одним из требований: «работа с HTML-шаблонами писем», «базовый HTML для CMS». Без него часть предложений закрыта, но сам по себе он вилку не поднимает. Сопоставимой статистики надбавок за HTML и CSS у неверстальщиков в открытых источниках нет, поэтому называть конкретный процент было бы выдумкой.

Прямее всего навык влияет на доход там, где вы продаёте результат. Маркетолог-фрилансер, который сам правит лендинг и собирает шаблон рассылки, берёт задачу целиком и не делит бюджет с верстальщиком. Email-маркетолог, который верстает письма, может брать проекты по настройке шаблонов, а не только по стратегии рассылок. Чтобы оценить рынок самостоятельно, откройте поиск вакансий по вашей основной профессии, добавьте в запрос слово HTML и сравните вилки с выдачей без него; смотрите медиану по своему городу и опыту, а не максимальные цифры из отдельных объявлений.

Что проверить при выборе обучения

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

Недорогой вариант с понятной границей — курс Бруноям «Вёрстка на HTML и CSS»: девять модулей за три с половиной месяца, от тегов и селекторов до Flexbox, Grid, вёрстки из Figma, кроссбраузерности и CSS-анимаций. JavaScript и препроцессоров в программе нет, а обратная связь по заданиям входит не во все тарифы, поэтому сравните варианты до оплаты.

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

Сравнить программы по длительности, формату и отзывам удобно в рейтинге онлайн-школ с обучением HTML и CSS. Держите в голове свою задачу: если после первых недель вы уверенно открываете код элемента, находите нужное правило и оставляете на странице один h1, базовая часть навыка уже работает на вас.