HTML — это язык разметки, на котором браузер понимает, где на странице заголовок, где абзац текста, а где ссылка или картинка. Это не язык программирования: в HTML нет переменных, условий и циклов, он только описывает структуру и смысл содержимого. В статье разберем, из чего состоит HTML-документ, чем тег отличается от элемента и атрибута, какие теги нужны новичку в первую очередь и зачем нужна семантическая разметка.
Содержание
Минимальный рабочий HTML-документ
Проще всего разобраться в структуре на одном примере целиком. Сохраните код ниже в файл index.html и откройте его в браузере (двойным кликом или через «Открыть файл»).
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Моя первая страница</title>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это моя первая веб-страница на HTML.</p>
</body>
</html>Результат: во вкладке браузера появится надпись «Моя первая страница», а на самой странице — крупный заголовок «Привет, мир!» и абзац текста под ним. Если вместо заголовка и текста браузер показывает пустую страницу, значит файл сохранен не с расширением .html — проверьте имя файла в проводнике или Finder.
Разберем документ по частям:
<!DOCTYPE html>— объявление, что документ написан по стандарту HTML5. Для HTML5 достаточно ровно этой строки, она всегда пишется первой.<html lang="ru">— корневой элемент, внутри которого находится вся страница; атрибутlangподсказывает браузеру и поисковикам язык контента.<head>— блок служебной информации, которая не отображается на странице напрямую: кодировка, заголовок вкладки, подключение стилей.<meta charset="UTF-8">— кодировка текста. Без этой строки браузер сам угадывает кодировку, и результат зависит от конкретного браузера: кириллица может отобразиться нечитаемым набором символов.<title>— текст, который виден во вкладке браузера и в сниппете поисковой выдачи.<body>— все содержимое, которое видит пользователь: текст, картинки, ссылки, списки.
Тег, элемент и атрибут — в чем разница
Эти три слова часто используют как синонимы, но у них разный смысл.
Тег — это сама разметка в угловых скобках: открывающий <p> и закрывающий </p>. Тег — просто маркер начала или конца.
Элемент — это тег вместе с содержимым между открывающей и закрывающей частью: <p>Текст абзаца</p> целиком — один элемент.
Атрибут — дополнительное свойство внутри открывающего тега, в формате имя="значение". В примере выше lang="ru" — атрибут lang со значением ru.
Отдельно стоят одиночные (их еще называют пустыми) элементы: у них нет содержимого и закрывающего тега, например <img>, <br>, <meta>. В HTML5 закрывающий слэш у таких тегов необязателен: и <br>, и <br /> — рабочий код, разница только в стиле записи.
Базовые теги для текста
Заголовки задаются тегами <h1> — <h6>, где <h1> — самый крупный и главный, <h6> — самый мелкий. На странице обычно один <h1> — главный заголовок, остальные уровни используются для подзаголовков по смыслу, а не по желаемому размеру шрифта.
Абзац текста — тег <p>. Браузер сам добавляет отступы между абзацами, вручную переносы строк внутри текста расставлять не нужно.
Списки бывают двух видов:
<ul>
<li>Маркированный пункт</li>
<li>Еще один пункт</li>
</ul>
<ol>
<li>Первый шаг</li>
<li>Второй шаг</li>
</ol><ul> — маркированный список (буллеты), <ol> — нумерованный. Каждый пункт списка — тег <li>, независимо от типа списка.
Ссылки и изображения
Ссылка задается тегом <a> с атрибутом href, в котором указывается адрес перехода:
<a href="https://otus.ru">Перейти на сайт Otus</a>Текст между <a> и </a> — то, что видит пользователь и на что кликает. Атрибут target="_blank" открывает ссылку в новой вкладке.
Изображение — одиночный элемент <img> с двумя обязательными для практики атрибутами:
<img src="cat.jpg" alt="Рыжий кот спит на подоконнике">src — путь к файлу картинки, alt — текстовое описание на случай, если картинка не загрузится, а также для программ чтения с экрана и для поисковых систем, которые не «видят» изображение напрямую.
Семантическая разметка
Кроме <div> — универсального безликого блока без собственного смысла, HTML5 добавил теги, которые сразу называют роль блока на странице:
| Тег | Назначение |
|---|---|
<header> |
Шапка страницы или раздела |
<nav> |
Блок навигации, меню |
<main> |
Основное уникальное содержимое страницы (один раз на странице) |
<article> |
Самостоятельный блок контента, например статья или карточка товара |
<section> |
Тематический раздел внутри страницы или статьи |
<footer> |
Подвал страницы или раздела |
Технически верстку можно собрать целиком на <div> с классами, и браузер отобразит ее одинаково. Разница проявляется там, где смысл тега важен без визуального вида: программа чтения с экрана объявляет пользователю переход в <nav> или <main>, а поисковый робот при разборе страницы опирается на семантические теги, чтобы понять, где основной текст, а где повторяющееся меню. Div для этого — просто безымянный контейнер.
Упрощенный каркас страницы с семантическими тегами:
<body>
<header>
<h1>Название сайта</h1>
<nav>
<a href="/">Главная</a>
<a href="/about">О нас</a>
</nav>
</header>
<main>
<article>
<h2>Заголовок статьи</h2>
<p>Текст статьи.</p>
</article>
</main>
<footer>
<p>Контакты</p>
</footer>
</body>Где писать код
Для первых опытов подойдет любой текстовый редактор, который умеет сохранять обычный текст: например, «Блокнот» в Windows или TextEdit в режиме обычного текста на macOS. На практике новичку удобнее редактор с подсветкой синтаксиса и подсказками — на 2026 год для этого чаще всего берут VS Code (бесплатный, с расширениями для HTML) либо онлайн-песочницы вроде CodePen, где не нужно ничего устанавливать и результат виден сразу рядом с кодом.
Выводы
- HTML — язык разметки, а не язык программирования: он описывает структуру страницы, а не логику вычислений.
- Тег — это маркер
<p>, элемент — тег с содержимым<p>...</p>, атрибут — свойство внутри открывающего тега вродеhrefилиalt. - Любой HTML5-документ начинается с
<!DOCTYPE html>и содержит<html>,<head>со служебной информацией и<body>с видимым содержимым. - Базовый набор для текста — заголовки
<h1>—<h6>, абзацы<p>, списки<ul>/<ol>/<li>, ссылки<a>и картинки<img>. - Семантические теги (
<header>,<nav>,<main>,<article>,<footer>) дают структуре смысл, который понимают программы чтения с экрана и поисковые роботы, — в отличие от безликого<div>.
Где применяется / связь с практикой
Освойте тему на практике
Разметка из этой статьи — тот минимум, с которого начинается любая веб-страница, и дальше к ней добавляется оформление на CSS и интерактивность на JavaScript. Если хотите разобрать эту связку последовательно и с обратной связью от преподавателя, а не только по статьям, посмотрите курс HTML и CSS в Otus. Проверить формат обучения без обязательств можно на открытых уроках Otus.
FAQ
Обязательно ли писать теги заглавными буквами?
Нет, HTML не различает регистр тегов: <P> и <p> браузер поймет одинаково. Общепринятый стандарт в современном коде — строчные буквы, так исторически сложилось после перехода от XHTML.
Нужно ли закрывать тег <img>?
Нет, <img> — одиночный элемент без содержимого, закрывающий тег ему не нужен. Запись со слэшем на конце (<img />) тоже допустима, это просто вариант стиля, а не отдельное правило.
Что будет, если браузер встретит незнакомый ему тег?
Браузер не выдаст ошибку и не остановит загрузку страницы: он отобразит содержимое незнакомого тега как обычный инлайн-текст, игнорируя сам тег как разметку. Поведение зависит от конкретного браузера, поэтому опечатку в названии тега лучше искать и исправлять, а не полагаться на то, что она останется незамеченной.
