Вы открываете браузер, смотрите на любой сайт — и за каждой кнопкой, заголовком, картинкой стоит HTML. Это язык разметки, с которого начинается любой веб-проект: он описывает структуру страницы, расставляет блоки по местам и говорит браузеру, что отображать. Не язык программирования — не пугайтесь. HTML для начинающих — пожалуй, самый дружелюбный старт в веб-разработке: никаких условий, никаких алгоритмов, только теги и порядок.
В этом гиде — всё по шагам: что такое HTML, как устроен тег, как собрать рабочий каркас страницы, зачем нужны семантика и CSS, и семь практических заданий, которые можно выполнить прямо сейчас. Первую рабочую html-страницу получится создать за 20 минут — опыт не нужен.
Не знаете, с чего ребёнку начать в IT?
Дайте попробовать разные направления: Python, веб-разработку и робототехнику
HyperText Markup Language (HTML) — язык разметки для создания структуры веб-страниц. Появился в 1991 году как инструмент Тима Бернерса-Ли для обмена документами в интернете. Сегодня стандарт регулируют два органа: W3C (Консорциум Всемирной паутины) и WHATWG (рабочая группа веб-гипертекстовых технологий). Актуальная версия — HTML5, принятая W3C в 2014 году и с 2019-го развивающаяся в формате «живого стандарта» WHATWG.
Главное, что нужно понять: HTML — не язык программирования. В нём нет логики, переменных, условий и циклов. Он не «думает» — он описывает. «Этот блок — заголовок», «это — ссылка», «здесь — изображение». Браузер читает разметку и рисует страницу. Именно поэтому браузер «прощает» ошибки: написали тег неправильно — попробует отобразить хоть что-нибудь. Это идеальная среда для экспериментов.
Языки программирования — например, JavaScript или Python — содержат функции, условия и алгоритмы. HTML этого не умеет. Зато умеет создавать структуру, без которой CSS и JavaScript просто не на что опереться.
Хотите освоить HTML, CSS и программирование с нуля — бесплатно? На курсе «Программирование: Уверенный старт» школьники изучают Python, веб-разработку и робототехнику, создают четыре реальных проекта и формируют портфолио. Онлайн, гибкое расписание, 0 ₽ вместо 50 000 ₽. Узнайте подробнее на странице курса.
Любой сайт держится на трёх технологиях, и у каждой своя роль:
Порядок изучения такой же: сначала HTML, потом CSS, потом JS. Это не случайно: CSS требует HTML-структуры — без разметки некуда применять стили. А JavaScript управляет уже готовыми HTML-элементами.
Реалистичные сроки для тех, кто стартует с нуля:
Не пугайтесь цифр по JS: первые два шага даются легко, и к третьему у вас уже будут работающие страницы.
Для работы с HTML нужны два бесплатных инструмента: браузер Google Chrome и редактор Visual Studio Code от Microsoft (code.visualstudio.com).
Четыре шага для старта:
Почему именно index.html? Это соглашение: когда вы открываете папку в браузере, он ищет файл с именно таким именем первым. Это «главная дверь» любого сайта.
Теперь — главный «вау-момент» для новичка. В VS Code встроен Emmet — инструмент для быстрого написания кода. Введите в пустой файл знак ! и нажмите Tab. Редактор мгновенно развернёт полноценный HTML5-каркас из 11 строк: DOCTYPE, тег <html>, <head> с мета-тегами и <body>. То, что пришлось бы набирать несколько минут — за одну секунду. Emmet встроен в VS Code по умолчанию, устанавливать ничего дополнительно не нужно.
Сохраните файл (Ctrl+S), перетащите его в Chrome — страница откроется. Добавляйте теги, обновляйте браузер и видите результат сразу.
Тег — основная единица HTML. Выглядит так:
<tag атрибут=»значение»>Содержимое</tag>
Разберём на реальном примере — тег ссылки:
<a href=»https://example.com»>Текст ссылки</a>
Атрибуты пишутся только в открывающем теге. Значения — всегда в кавычках. Пропустить кавычки технически можно в простых случаях, но это плохая привычка: браузеры трактуют такой код по-разному.
Большинство тегов — парные: есть открывающий и закрывающий, содержимое — между ними:
<p>Это абзац текста.</p>
<h1>Это заголовок первого уровня</h1>
Одиночные (void-элементы) содержимого не имеют — закрывающий тег не нужен:
<img src=»photo.jpg» alt=»Описание фото»>
<br>
<input type=»text»>
<meta charset=»UTF-8″>
Самая частая ошибка — забыть закрыть парный тег. Браузер попытается угадать структуру, и результат будет непредсказуемым: текст поедет не туда, ссылка «захватит» лишние элементы.
Теги могут содержать другие теги — как матрёшки или коробки в коробках. Это называется вложенностью:
<ul>
<li><a href=»#»>Пункт-ссылка</a></li>
<li>Просто пункт</li>
</ul>
Главное правило: закрывать теги в обратном порядке открытия. Открыли <ul> → <li> → <a> — закрываете </a> → </li> → </ul>. Нарушение этого порядка — «перекрывание тегов» — ломает структуру. Каждый браузер пытается исправить это по-своему, поэтому результат непредсказуем.
Emmet генерирует именно этот шаблон. Разберём каждую строку:
<!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>
<!— Видимый контент страницы —>
</body>
</html>
<!DOCTYPE html> — объявление в самой первой строке. Говорит браузеру: «Это HTML5, читай по современным правилам». Без этой строки браузер переключается в режим совместимости со старыми стандартами 1990-х — страница может отображаться неожиданно.
<html lang=»ru»> — корневой тег, внутри которого находится вся страница. Атрибут lang=»ru» выполняет двойную функцию: поисковые роботы Яндекса и Google используют его как сигнал языка страницы для правильной регионализации результатов; скринридеры (программы для слабовидящих) переключают голос на нужный язык. Большинство учебников упускает этот атрибут — а зря.
<head> — невидимая часть. Пользователь её не видит, но она критична:
<body> — всё, что видит пользователь: заголовки, текст, картинки, формы.
Всё видимое содержимое страницы живёт внутри <body>. Теги делятся на четыре группы: заголовки, текст и медиа, списки, формы. Каждая группа решает свою задачу — разберём по очереди.
HTML предоставляет шесть уровней заголовков — от <h1> (главный) до <h6> (наименее значимый):
<h1>Название страницы</h1>
<h2>Раздел</h2>
<h3>Подраздел</h3>
<p>Это абзац текста. Тег p означает paragraph.</p>
Важное SEO-правило: <h1> — один на странице. Поисковые роботы рассматривают его как главную тему документа. Остальные заголовки (<h2>, <h3>) можно повторять. Иерархия h1→h6 помогает Яндексу и Google понять структуру контента — не пренебрегайте ей.
Внутри текста используются строчные теги: <strong> — жирный, <em> — курсив (акцентный, не просто декоративный).
Два самых используемых тега после заголовков:
<a href=»https://example.com»>Текст ссылки</a>
<img src=»photo.jpg» alt=»Описание фотографии»>
Тег <a> создаёт ссылку. Атрибут href обязателен — без него тег <a> никуда не ведёт. Тег <img> — одиночный, без закрывающего. Требует два атрибута:
Ребенок хочет изучать программирование? Пусть начнёт с реальных проектов
На курсе школьники создают Telegram-бота, сайт и веб-приложение
Атрибут alt выполняет сразу две роли, и это важно. SEO: Яндекс и Google не «видят» изображения напрямую — они читают alt для индексации картинок и понимания контекста страницы. Доступность: скринридеры для слабовидящих пользователей озвучивают alt вслух. Пустой alt — это одновременно потеря позиций в поиске и нарушение стандартов доступности (a11y).
<ul>
<li>Маркированный пункт</li>
<li>Ещё один пункт</li>
</ul>
<ol>
<li>Первый шаг</li>
<li>Второй шаг</li>
</ol>
<ul> — неупорядоченный (маркированный) список. <ol> — упорядоченный (нумерованный). Каждый пункт — <li>. Когда что использовать: <ul> для перечислений без приоритета, <ol> для шагов, рейтингов и последовательностей. Принцип матрёшки: <li> всегда внутри <ul> или <ol>, никогда сам по себе.
<form>
<input type=»text» placeholder=»Введите имя»>
<input type=»email» placeholder=»Email-адрес»>
<button type=»submit»>Отправить</button>
</form>
<form> — контейнер для всех элементов формы. <input> — поле ввода; тип задаётся атрибутом type (text, email, password). Атрибут placeholder показывает подсказку внутри поля до начала ввода. <button type=»submit»> — кнопка отправки.
Важная оговорка: HTML рисует интерфейс формы, но не обрабатывает данные. Без серверного кода или JavaScript кнопка «Отправить» просто перезагрузит страницу — данные никуда не уйдут. HTML отвечает за структуру, логику добавляет JS.
Каждый HTML-элемент принадлежит к одной из двух категорий — и это определяет поведение в браузере ещё до любого CSS.
Блочные элементы занимают всю доступную ширину контейнера и всегда начинаются с новой строки: <div>, <p>, <h1>–<h6>, <ul>, <ol>, <header>, <section>.
Строчные элементы встраиваются в текстовый поток без переноса строки: <a>, <strong>, <em>, <img>, <span>.
| Параметр |
Блочные элементы |
Строчные элементы |
|---|---|---|
| Ширина | Вся доступная ширина | По содержимому |
| Перенос строки | Да — до и после элемента | Нет |
| Примеры тегов | <div>, <p>, <h1>, <ul> | <a>, <strong>, <em>, <span> |
| Типичное применение | Крупные структурные блоки | Выделение внутри текста |
Понимание этого различия помогает избежать классической ошибки верстки: вложить блочный элемент внутрь строчного без понимания последствий. Тип элемента определяет правила вложенности — даже если CSS потом изменит визуальное поведение через display.
Представьте страницу, собранную из сотен безымянных <div> — это так называемый «div-soup». Браузер отобразит её корректно, но поисковый робот не поймёт, где шапка, где главный контент, а где боковая колонка.
HTML5 решил это с помощью именованных тегов:
| <div> (раньше) |
Семантический тег |
Что обозначает |
Польза |
|---|---|---|---|
| <div id=»header»> | <header> | Шапка сайта или раздела | Поисковики и скринридеры определяют верхний блок |
| <div id=»nav»> | <nav> | Навигационное меню | Скринридеры предлагают перейти к навигации |
| <div id=»main»> | <main> | Главный контент страницы | Поисковики приоритизируют контент в <main> |
| <div class=»article»> | <article> | Самостоятельная статья или пост | Помогает агрегаторам и поисковым роботам |
| <div class=»section»> | <section> | Тематический раздел | Структурирует длинный контент |
| <div id=»footer»> | <footer> | Подвал сайта | Скринридеры обозначают конец страницы |
Ключевой инсайт: визуально страница не изменится. Пользователь разницы не заметит. Зато поисковые роботы поймут, что главный контент — внутри <main>, а не в случайном <div>. Скринридеры дадут слабовидящим пользователям возможность перепрыгнуть сразу к нужному блоку. Семантика улучшает SEO и доступность одновременно — без лишней работы.
CSS (каскадные таблицы стилей) — язык стилей, который управляет внешним видом HTML-страницы. Базовый синтаксис прост:
selector {
property: value;
}
Например: p { color: #333; font-size: 16px; } — все абзацы станут тёмно-серыми шрифтом 16 пикселей.
Существуют три способа подключить CSS к HTML:
На ближайшем горизонте после базового CSS — Flexbox (гибкий контейнер): инструмент для управления расположением блоков на странице. После первых двух недель с HTML и базовым CSS Flexbox становится следующим логичным шагом.
Теория без практики не работает. Вот семь заданий нарастающей сложности — страница «О себе», которую вы соберёте шаг за шагом:
Шаг 1. Каркас. Создайте index.html, введите ! + Tab в VS Code, проверьте, что страница открывается в Chrome.
Шаг 2. Структура. Добавьте в <body> тег <h1> с вашим именем и <p> с двумя-тремя предложениями о себе.
Шаг 3. Ссылки и изображения. Добавьте <img src=»photo.jpg» alt=»Моё фото»> и <a href=»mailto:you@example.com»>Написать мне</a>. Проверьте, что alt заполнен.
Шаг 4. Список навыков. Создайте <ul> с <li> для каждого навыка или интереса — это закрепит принцип вложенности.
Шаг 5. Форма обратной связи. Добавьте <form> с полями name, email и кнопкой <button type=»submit»>.
Шаг 6. Семантика. Оберните контент: шапку — в <header>, основное содержимое — в <main>, низ — в <footer>. Структура не изменится визуально, но станет правильной для поисковиков и скринридеров.
Шаг 7. Первый CSS. Создайте styles.css, подключите через <link> в <head>. Задайте body { font-family: sans-serif; max-width: 800px; margin: 0 auto; } — страница сразу выглядит аккуратнее.
Каждый шаг — отдельный результат, который можно показать. После седьмого у вас будет первый мини-сайт с работающими тегами, семантической структурой и подключённым CSS.
HTML — это старт. Вот реалистичный путь дальше:
HTML (1–2 недели) → CSS Flexbox / Grid (2–3 недели) → JavaScript (1–3 месяца) → Фреймворк (React или Vue) → Backend (Python / Node.js)
Каждый этап опирается на предыдущий. Пропустить HTML нельзя — CSS и JS работают поверх разметки, и без её понимания двигаться дальше значительно сложнее.
Что это даёт в профессиональном плане? По данным hh.ru за 2025 год, начинающий специалист (Junior) в веб-разработке зарабатывает от 80 000 ₽, специалист среднего уровня (Middle) — от 120 000 ₽. Заработная плата может существенно варьироваться в зависимости от компании, региона и опыта специалиста.
Если хочется пройти этот путь структурированно — курс «Программирование: Уверенный старт» включает 36 часов онлайн-обучения, четыре реальных проекта в портфолио и охватывает именно этот стек: Python (Модуль 1), HTML + CSS + JavaScript (Модуль 2) с мини-проектом TO-DO List, Flask и базы данных (Модуль 3), Arduino (Модуль 4). Всё это — 0 ₽ вместо 50 000 ₽, гибкое расписание, онлайн из любой точки России.
HTML — язык разметки: он описывает структуру документа тегами, но не содержит никакой логики. Нет условий, переменных, циклов — только инструкции браузеру «покажи это как заголовок, а это как ссылку». JavaScript — настоящий язык программирования с условиями и функциями. Браузер выполняет JS-код, а HTML просто читает и отображает структуру.
Конструкторы генерируют разметку автоматически, но ограничивают гибкость. Знание HTML позволяет исправить SEO-ошибки, ускорить загрузку и добавить нестандартные блоки. Понимание разметки — базовый навык и для маркетолога, и для дизайнера: это общий язык всех, кто работает с сайтами.
Установите VS Code (бесплатно, code.visualstudio.com), создайте файл index.html, введите ! и нажмите Tab — встроенный Emmet сгенерирует полный HTML5-каркас за секунду. Откройте файл в Chrome, добавьте в <body> любой тег, обновите страницу — первый результат увидите мгновенно. Никаких дополнительных установок не нужно.
Alt выполняет две роли. SEO: Яндекс и Google читают alt для индексации изображений и понимания контекста страницы. Доступность: скринридеры озвучивают alt слабовидящим пользователям. Никогда не оставляйте alt пустым — это одновременно потеря позиций в поиске и нарушение стандартов доступности.
Технически браузер отобразит текст, ссылки и изображения с форматированием по умолчанию. Но без CSS сайт выглядит как текстовый документ 1990-х: чёрный шрифт, белый фон, синие подчёркнутые ссылки. CSS необходим для любого визуально современного результата.
<div> — безымянная коробка: браузер и поисковики не понимают, что внутри. <header>, <main>, <nav> говорят сами за себя. Поисковые роботы приоритизируют контент в <main>, скринридеры позволяют незрячим пользователям перепрыгнуть к нужному блоку. Визуально разницы нет — польза скрытая, но значительная.
MDN Web Docs (developer.mozilla.org) — авторитетная бесплатная документация с интерактивными примерами на русском языке. Для структурированного старта с практикой: курс «Программирование: Уверенный старт» — 36 часов онлайн, 0 ₽, Модуль 2 целиком посвящён HTML, CSS и JavaScript с реальным мини-проектом TO-DO List.
Базовый HTML — 1–2 недели при 1–2 часах занятий в день. CSS — ещё 2–3 недели. JavaScript — 1–3 месяца. Главное правило: практика важнее теории. Каждый изученный тег нужно сразу применять в реальном коде, а не просто читать о нём в учебнике.
Блочные (<div>, <p>, <h1>, <ul>) занимают всю доступную ширину и начинаются с новой строки. Строчные (<a>, <strong>, <em>, <img>) встраиваются в текстовый поток без переноса. CSS позволяет изменить это через display, но тип элемента по умолчанию определяет правила вложенности.
Добавьте <meta charset=»UTF-8″> в раздел <head>. Это устанавливает Unicode — кодировку, поддерживающую кириллицу и большинство мировых алфавитов. Также убедитесь, что файл .html сохранён в кодировке UTF-8: VS Code делает это по умолчанию, стандартный Блокнот Windows — нет.
Пусть ребёнок сделает первый IT-проект уже в этом месяце
Бесплатный онлайн-курс с понятной программой, поддержкой и проектами для портфолио
