HTML (HyperText Markup Language) — это основа любого сайта. С его помощью создается структура страницы: заголовки, параграфы, списки, изображения, ссылки и так далее. Код указывает браузеру: «Вот заголовок», «Вот изображение», «А это — список». Каждая страница в интернете начинается именно с HTML.
Например, так выглядит кусочек HTML-кода на странице «Знакомство с HTML»:
<!DOCTYPE html>
<html class='h-100' data-bs-theme='light' lang='ru' prefix='og: https://ogp.me/ns#'>
<head>
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
<meta content='IE=Edge' http-equiv='X-UA-Compatible'>
<meta charset="utf-8">
<title>Знакомство с HTML | Основы HTML, CSS и веб-дизайна</title>
<link rel="alternate" href="https://ru.hexlet.io/courses/html/lessons/first_step/theory_unit" hreflang="ru-RU">
Затем к HTML подключается CSS. CSS (Cascading Style Sheets) отвечает за внешний вид, то есть за цвета, шрифты, отступы, анимации, адаптивность. Если HTML — это фактически «скелет» страницы, то CSS — это его внешний вид.
На примере выше CSS делает следующее:
class='h-100'
растягивает html (и потом body) на всю высоту экрана.data-bs-theme='light'
.lang='ru'
.То есть CSS делает страницу понятной, приятной, читаемой и удобной — для человека. Хотя HTML-код может работать и самостоятельно.
Например, HTML без CSS просто выведет черный текст на белом фоне:
<h1>Привет!</h1>
<p>Это Хекслет — школа программирования для новичков и профессионалов</p>
А вот что нужно сделать, чтобы страница выглядела аккуратнее, фон стал не белоснежным, а мягким светло-серым, шрифт — более современным, сам текст — менее контрастным и приятным для глаз:
body {
background: #f0f0f0;
font-family: sans-serif;
color: #333;
}
h1 {
color: darkblue;
}
Начните изучать HTML прямо сейчас
Бесплатный курс по HTML уже ждёт вас!
Актуальная версия CSS делает сайты адаптивными (подстраивающимися под экран гаджета). А еще добавляет анимации, эффекты наведения, простые интерактивные элементы. И все это без JavaScript, потому что CSS анимирует интерфейс не через логику, а через стили.
Например, вот так можно задать плавное изменение цвета при наведении:
HTML:
<input type="checkbox" id="toggle">
<label for="toggle">Показать блок</label>
<div class="content">Привет!</div>
CSS:
.content {
display: none;
}
#toggle:checked ~ .content {
display: block;
}
Больше о тегах, атрибутах и о том, как они работают, можно почитать в статье «Немного формальностей» — коротко, по делу и с примерами.
Так, при нажатии на чекбокс появится скрытый блок. Без скриптов. CSS использует состояние :checked
, чтобы применить стиль.
Тем не менее CSS не может сработать, как JavaScript. Он не умеет делать «если... то…» — if (...) { ... }
. Хотя может реагировать на события — наведение, нажатие, загрузку. И может к этим событиям привязать стили и анимации.
Впрочем, в первых версиях CSS был гораздо проще: никаких анимаций, адаптивности, эффектов наведения. Можно было задавать только цвета, шрифты, отступы и базовое выравнивание.
Все изменилось с приходом следующих версий CSS. Ниже собрали таблицу с основными отличиями и комментариями.
Версия | Год выпуска | Что появилось | Комментарий |
---|---|---|---|
CSS1 | 1996 (откорректирована в 1999) | Цвета, шрифты, отступы, выравнивание | CSS1 был сильно ограничен: без позиционирования, медиазапросов, анимаций, flexbox и grid, почти без интерактивности и с минимальной поддержкой в браузерах, полной багов |
CSS2 | 1998 | Таблицы, позиционирование, z-index, медиатипы | В CSS2 не было медиазапросов, flexbox, grid, анимаций, переходов и современных возможностей адаптивной верстки |
CSS2.1 | 2004 | Исправления и уточнения CSS2 | В CSS2.1 по-прежнему не было анимаций, переходов, flexbox и grid — только уточнения и исправления предыдущей версии, без кардинальных новшеств |
CSS3 | С 2011 | Модули: анимации, переходы, flexbox, тени, градиенты без использования JavaScript | В CSS3 не было полной поддержки логики и динамики, как в JavaScript: он не умел реагировать на сложные пользовательские действия, выполнять условия или работать с данными |
CSS4* | С 2011 | На начало 2025 года нет полной версии | CSS4 как целостной версии не существует — это скорее маркетинговый ярлык, потому что на самом деле CSS развивается по модулям и единой спецификации нет |
** — В CSS4 как версии нет ничего нового — все нововведения, например :is(), clamp(), container queries, появились в отдельных модулях.*
Также интересно: Как выучить PHP: руководство для начинающих
Дорожная карта верстальщика (markup developer) может выглядеть следующим образом (зависит от методологии курса — иногда верстку отделяют от JS и логики).
Чтобы начать верстать простые сайты на базовом уровне, например личные страницы, лендинги или портфолио, — достаточно бесплатного курса для начинающих на платформе Code Basic «Основы HTML».
Чтобы начать работать по профессии и претендовать на руководящие должности, нужно глубже освоить HTML, CSS и современные подходы к верстке. Обычно такая программа обучения построена от простого к сложному: вы сначала научитесь делать адаптивные сайты, разбираться в архитектуре CSS, использовать фреймворки и работать в команде. Дальше все зависит от ваших целей: можно продолжить развиваться до уровня Middle или перейти к изучению JavaScript и стать frontend-разработчиками. При этом у большинства новичков в верстке путь складывается примерно по одному подходу.
Что нужно уметь:
html
, head
, body
, заголовки, абзацы, списки и т. д.).p
, a
, img
, div
, span
, h1-h6
, ul/li
, form, input
.margin
, padding
, text-align
, color
, font-size
).Пример задачи: сверстать лендинг с заголовком, текстом, изображением и кнопкой. При наведении кнопка должна сменить цвет. На мобильной версии блоки поставить вертикально.
Что нужно уметь:
<section>
, <article>
, <main>
, <nav>
и т. д.).:hover
, :focus
, :nth-child
) и псевдоэлементы (::before
, ::after
).transition
, @keyframes
, animation
).Пример задачи: сверстать карточку товара по макету из Figma. Реализовать переключение вида (список/плитка) через классы. Добавить анимации появления и адаптацию под планшеты и мобильные.
Начните изучать CSS прямо сейчас
Бесплатный курс по CSS уже ждёт вас!
Что нужно уметь:
:is()
, clamp()
, custom properties
, контейнерные запросы.Курсы для Senior-верстальщиков обычно неформальные — это работа над реальными проектами, обучение через практику, менторство, код-ревью и глубокое погружение в детали. Вы сами начинаете видеть, как лучше строить верстку.
Пример задачи: разработать адаптивную компонентную библиотеку для внутренних сервисов с поддержкой светлой и темной темы через CSS custom properties, с документацией, поддержкой на нескольких языках и динамикой без JavaScript.
Если вы только начали интересоваться программированием и по какой-то причине решили сами разобраться в HTML, не спешите гуглить все подряд. Вот несколько советов, которые помогут не запутаться в начале пути:
@keyframes
(описание анимации по кадрам) лучше отложить до уверенного уровня. А вот сложные эффекты типа transition и hover — то, что нужно новичку.Как используется язык программирования Haskell: компиляторы, тестирование, веб-фреймворки и другое. Примеры и особенности.
Платформа .NET от Microsoft для создания веб-приложений, игр, облачных решений и IoT. Преимущества, поддерживаемые языки программирования, примеры использования.