Лекция 02. HTML: структура документа и семантика

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

После этой лекции

После занятия вы должны уметь:

• объяснить, что HTML — язык разметки, а не язык программирования и не средство оформления;
• создать современный каркас HTML-документа;
• читать и писать элементы, атрибуты и корректную вложенность;
• отличать структуру документа от его внешнего вида;
• разметить текст, ссылки, изображения, списки, таблицу и простую форму;
• выбрать подходящий семантический элемент вместо случайного div;
• сделать базовые вещи, важные для доступности: lang, alt, label, заголовки и нативные элементы управления;
• открыть DOM в DevTools и сопоставить его с исходным HTML;
• проверить разметку валидатором и найти документацию элемента в MDN.

1. HTML: не внешний вид и не программа

HTML расшифровывается как HyperText Markup Language — язык гипертекстовой разметки. Это основной язык описания веб-документа. Он сообщает браузеру, из каких частей состоит страница и какое значение у каждой части.

<h1>Расписание занятий</h1>
<p>Здесь опубликованы изменения на неделю.</p>
<a href="/groups">Выбрать группу</a>

В этом фрагменте HTML не задаёт цвет, шрифт и расположение. Он говорит: это главный заголовок, это абзац, а это ссылка.

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

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

Структура и семантика

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

• браузер создаёт из неё документ;
• CSS и JavaScript получают понятные точки для работы;
• экранный диктор может сообщить пользователю о заголовках, навигации и элементах формы;
• поисковые системы и другие программы получают более понятную структуру;
• другой разработчик быстрее понимает страницу.

Место для иллюстрации: один и тот же контент показан как дерево страница → header/nav/main/article/footer и как визуальный макет. Подпись: HTML задаёт смысл и связи, CSS — внешний вид.

Не нужно запоминать: семантика не означает, что для каждого пикселя есть специальный тег. Сначала выбираем элемент по смыслу. Когда у фрагмента нет собственного смысла, используем нейтральный контейнер div или span.

2. Элемент, тег, атрибут

Большая часть HTML состоит из элементов. Обычный элемент записывается открывающим тегом, содержимым и закрывающим тегом:

<p>Это абзац текста.</p>

Теги — запись в исходном тексте. Элемент — понятие документа, которое браузер создаёт по этой записи.

Атрибуты

Атрибут уточняет работу или значение элемента. Он находится в открывающем теге и обычно записывается как имя="значение".

<a href="https://developer.mozilla.org/" title="Справочник MDN">Открыть MDN</a>
<img src="images/campus.jpg" alt="Главный корпус колледжа">

href, src, alt — атрибуты, характерные для конкретных элементов. Значения в кавычках — привычный и безопасный стиль записи; используйте двойные кавычки последовательно.

Некоторые атрибуты логические: самого присутствия достаточно, чтобы включить свойство.

<input type="email" required>
<button disabled>Отправить</button>

Глобальные атрибуты: id, class, data-*

Глобальные атрибуты подходят многим HTML-элементам. На старте важны три.

<section id="contacts" class="section section--contacts" data-office="novgorod">
  <h2>Контакты</h2>
</section>

• id — уникальный идентификатор одного элемента на странице. Он удобен для ссылки на фрагмент (#contacts), связи label с полем и точного обращения из CSS/JavaScript.
• class — имя или несколько имён группы. Обычно CSS использует классы для оформления повторяющихся компонентов. Один класс может быть у многих элементов.
• data-* — собственные данные приложения, например data-office или data-product-id. Браузер не приписывает им готовый смысл: позже JavaScript может их прочитать.

Типичная ошибка: делать id="card" у двадцати карточек. id должен быть уникален в документе. Для повторяющихся частей чаще нужен class.

Пустые элементы

Некоторые элементы не содержат текста или дочерних элементов и не имеют закрывающего тега. Их называют void elements.

<img src="logo.svg" alt="Логотип">
<meta charset="UTF-8">
<br>
<hr>
<input type="text">

Не пишите к ним закрывающие теги вроде </img> или </input>: это неверно. Запись <img /> браузеры понимают, но в обычном HTML она не нужна и не делает тег «самозакрывающим» по какому-то особому правилу. Достаточно <img ...>.

3. Каркас современного HTML-документа

Минимальная заготовка современной страницы выглядит так:

<!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>
    <h1>Расписание</h1>
    <p>Выберите группу, чтобы увидеть занятия.</p>
  </body>
</html>

Разберём её сверху вниз.

<!doctype html>

Это объявление типа документа. В современном HTML всегда используйте короткую строку <!doctype html> первой строкой файла. Она помогает браузеру включить стандартный режим отображения, а не режим совместимости со старыми страницами.

<html lang="ru">

html — корневой элемент документа. Атрибут lang сообщает основной язык страницы: для русской страницы — ru, для английской — en.

Это нужно, в частности, экранным дикторам, проверке орфографии и другим программам. Если в тексте есть крупный фрагмент на другом языке, его можно отметить локально:

<p>Термин <span lang="en">responsive design</span> обычно переводят как «адаптивный дизайн».</p>

<head>: сведения о документе

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Страница курса HTML</title>
  <link rel="stylesheet" href="styles.css">
</head>

• <meta charset="UTF-8"> задаёт UTF-8 — обычную современную кодировку для веб-страниц. Благодаря ей корректно читается кириллица и большинство других символов.
• <meta name="viewport" content="width=device-width, initial-scale=1.0"> помогает мобильному браузеру использовать ширину устройства как ширину области просмотра. Это основа предсказуемой адаптивной вёрстки.
• <title> — название документа во вкладке браузера, истории и закладках. У каждой страницы сайта оно должно быть осмысленным.
• <link rel="stylesheet" href="styles.css"> подключает отдельный CSS-файл. Подробнее — на лекции о CSS.

<body>: содержимое страницы

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

Проверь себя: где будет <title> — в head или body? В head: это название документа, а не видимый заголовок страницы. Видимый заголовок обычно делают через h1 в body.

4. HTML превращается в DOM-дерево

Браузер получает HTML-текст и разбирает его. В памяти он строит DOM (Document Object Model) — дерево документа. Сейчас достаточно понимать три идеи:

1. HTML-элементы образуют дерево, а не линейный список.
2. У элемента могут быть родитель, дети и соседние элементы.
3. DevTools показывает именно обработанный браузером DOM; позже JavaScript сможет его читать и менять.

<main>
  <article>
    <h1>Новости колледжа</h1>
    <p>Открыт набор в волонтёрский корпус.</p>
  </article>
</main>

main
└── article
    ├── h1
    │   └── «Новости колледжа»
    └── p
        └── «Открыт набор в волонтёрский корпус.»

Место для иллюстрации: слева короткий HTML-код, справа DOM-дерево с ветвями html → head/body → main → article → h1/p. Стрелка показывает, что браузер строит дерево из текста.

Корректная вложенность

Если элемент начался внутри другого, он должен завершиться до закрытия родителя. Элементы не должны «перекрещиваться».

<!-- Плохо: теги пересекаются -->
<p>Это <strong>очень <em>важный</strong> текст</em>.</p>
 
<!-- Лучше: каждый элемент закрывается внутри своего родителя -->
<p>Это <strong>очень <em>важный</em> текст</strong>.</p>

Браузеры часто пытаются исправить ошибки автора сами, поэтому страница может «вроде работать». Но DOM при этом способен оказаться не таким, как вы ожидали. Валидатор и панель Elements помогают это заметить.

Типичная ошибка: вкладывать один абзац в другой (<p><p>…). У p есть правила допустимого содержимого; для группировки нескольких абзацев используйте div, section или другой подходящий контейнер.

5. Текст: смысл важнее размера шрифта

Заголовки h1–h6

Заголовки обозначают уровни структуры, как главы и подглавы в книге. h1 — заголовок верхнего уровня, h2 — раздел внутри него, h3 — подраздел и так далее.

<h1>Гайд по подготовке портфолио</h1>
 
<h2>Что включить</h2>
<h3>Учебные проекты</h3>
<h3>Контактные данные</h3>
 
<h2>Как оформить</h2>

Заголовок — не способ сделать текст крупным. Размер настраивается CSS. На обычной странице чаще есть один явный главный h1, но HTML допускает более сложные документы; практическое правило для старта простое: один понятный h1, затем последовательная иерархия без скачков ради дизайна.

<!-- Плохо: выбрать h3 только потому, что он меньше -->
<h1>Курс</h1>
<h3>Занятия</h3>
 
<!-- Лучше: уровень отражает структуру -->
<h1>Курс</h1>
<h2>Занятия</h2>

Экранный диктор умеет переходить по заголовкам. Поэтому хорошая иерархия — это ещё и навигация по странице.

Абзацы, смысловое выделение, перенос и тематическая граница

p создаёт абзац. Не собирайте целый текст из отдельных div или из строк с br.

<p>Семантическая разметка помогает описать документ.</p>
<p><strong>Важно:</strong> начинайте с нативных HTML-элементов.</p>
<p>Термин <em>семантика</em> означает смысл элемента.</p>

• strong показывает важность, серьёзность или срочность фрагмента. Браузер обычно делает текст жирным, но важен именно смысл.
• em обозначает смысловое ударение. Браузер обычно показывает курсивом.
• br — принудительный перенос строки внутри одного смыслового блока, например в стихотворении или почтовом адресе. Он не создаёт отступы.
• hr обозначает смену темы между абзацами: тематический разрыв, а не декоративную линию для макета.

<address>
  Великий Новгород,<br>
  улица Большая Санкт-Петербургская, 41
</address>

Комментарии и специальные символы

Комментарий не показывается на странице, но попадает в исходный код и часто доступен в DevTools. Он должен объяснять решение, а не повторять очевидный код. Комментарии не предназначены для паролей, ключей и внутренних секретов.

<!-- Карточки добавит JavaScript на следующей лекции. -->
<div class="course-list"></div>

Для символов, которые HTML иначе воспримет как разметку, используют символьные ссылки (entities):

<p>Тег пишется так: &lt;main&gt;.</p>
<p>Кофе &amp; выпечка</p>
<p>&copy; Колледж, 2026</p>

Минимум, который стоит помнить: < для <, > для >, & для &. Не нужно заменять entity каждый не-ASCII-символ: UTF-8 позволяет писать кириллицу и другие обычные символы прямо в документе.

6. Ссылки и URL

Ссылка создаётся элементом a; адрес назначения находится в href.

<a href="/schedule">Расписание</a>
<a href="https://developer.mozilla.org/">Справочник MDN</a>
<a href="#contacts">Перейти к контактам</a>

Абсолютные и относительные адреса

Абсолютный URL содержит схему и домен целиком:

https://developer.mozilla.org/en-US/docs/Web/HTML

Относительный URL браузер рассчитывает относительно текущего документа или корня сайта:

<a href="about.html">О проекте</a>
<a href="images/map.png">Карта</a>
<a href="/contacts">Контакты сайта</a>
<a href="#form">К форме на этой странице</a>

Адрес, начинающийся с /, отсчитывается от корня сайта. Адрес без начального / зависит от папки текущей страницы. Это частый источник неработающих ссылок и картинок.

Текст ссылки должен объяснять, куда она ведёт. Вне контекста «Нажмите сюда» ничего не сообщает.

<!-- Плохо -->
<p>Полное расписание <a href="/schedule">здесь</a>.</p>
 
<!-- Лучше -->
<p><a href="/schedule">Открыть полное расписание занятий</a>.</p>

Новая вкладка: target="_blank"

По умолчанию ссылка открывается в той же вкладке. target="_blank" просит браузер открыть новую вкладку или окно.

<a href="https://developer.mozilla.org/" target="_blank" rel="noopener">
  Открыть MDN в новой вкладке
</a>

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

Современные браузеры для target="_blank" не предоставляют новой странице window.opener — поведение noopener применяется неявно. Тем не менее rel="noopener" можно оставлять явно: это делает намерение понятным в коде и сохраняет защитное правило для читателя. rel="noreferrer" — другой атрибут: он также подавляет HTTP-заголовок Referer, поэтому добавлять его «на всякий случай» не нужно.

Важно: target="_blank" — это не средство сделать ссылку «красивой» и не замена нормальной навигации. Его применение — продуктовое решение, а не обязательный шаблон.

7. Изображения: ресурс, описание и размеры

img встраивает изображение. У него обычно есть минимум src и alt.

<img
  src="images/workshop.jpg"
  alt="Студенты собирают макет сайта на практическом занятии"
  width="1200"
  height="800"
>

• src — URL файла изображения.
• alt — текстовая альтернатива; она нужна, когда картинка не загрузилась и пользователю, который не видит её, например при работе с экранным диктором.
• width и height в HTML задают внутреннее соотношение сторон изображения. При адаптивном CSS изображение всё ещё может быть гибким, но браузер заранее резервирует место и страница меньше «прыгает» во время загрузки.

alt описывает смысл картинки в данном контексте, а не просто перечисляет всё, что видно. Не начинайте с «изображение» или «фото»: программа уже знает, что это img.

<!-- Плохо: имя файла ничего не объясняет -->
<img src="IMG_1427.jpg" alt="IMG 1427">
 
<!-- Лучше: описание сообщает полезный смысл -->
<img src="IMG_1427.jpg" alt="Команда колледжа получила диплом на региональном хакатоне">

Если изображение чисто декоративное и не добавляет информации, оставьте alt пустым: alt="". Тогда экранный диктор пропустит его. Не удаляйте сам атрибут alt: отсутствие alt заставляет программу гадать, как объявить изображение.

figure и figcaption

Если изображение, схема, фрагмент кода или таблица образуют самостоятельную иллюстрацию с подписью, удобно использовать figure и figcaption.

<figure>
  <img src="images/dom-tree.svg" alt="Дерево DOM: html содержит head и body">
  <figcaption>Рисунок 1. Упрощённая структура DOM-документа.</figcaption>
</figure>

Проверь себя: у логотипа в шапке страницы alt будет «логотип»? Не обязательно. Если клик по логотипу ведёт на главную, полезнее передать действие: например, поместить картинку в ссылку с доступным названием «На главную». Если логотип рядом с текстовым названием и ничего не добавляет, он может быть декоративным с alt="".

8. Списки

ul — список, где порядок пунктов не важен; ol — список с важным порядком; li — один пункт списка.

<h2>Что понадобится</h2>
<ul>
  <li>Редактор кода</li>
  <li>Браузер</li>
  <li>Доступ к DevTools</li>
</ul>
 
<h2>Как опубликовать страницу</h2>
<ol>
  <li>Создать файл <code>index.html</code>.</li>
  <li>Проверить страницу в браузере.</li>
  <li>Исправить ошибки валидатора.</li>
</ol>

Не рисуйте маркеры вручную символами • и не нумеруйте шаги текстом «1)», «2)», если это действительно список. HTML передаст его смысл браузеру и вспомогательным технологиям, а CSS позже позволит оформить список.

9. Главные области страницы: семантические контейнеры

Семантические элементы описывают назначение крупной области. Они не имеют «магического дизайна»: браузер обычно не сделает из них красивый интерфейс. Их задача — назвать смысл.

<body>
  <header>
    <a href="/">Колледж</a>
    <nav aria-label="Основная навигация">
      <a href="/news">Новости</a>
      <a href="/schedule">Расписание</a>
    </nav>
  </header>
 
  <main>
    <article>
      <h1>День открытых дверей</h1>
      <p>Встречаемся 18 октября.</p>
    </article>
 
    <aside>
      <h2>Также интересно</h2>
      <a href="/admission">Поступающим</a>
    </aside>
  </main>
 
  <footer>
    <p>Контакты приёмной комиссии</p>
  </footer>
</body>

section — не универсальная коробка

<!-- Плохо: section только ради отступа -->
<section class="blue-box">
  <p>Телефон: +7 000 000-00-00</p>
</section>
 
<!-- Лучше: обычная нейтральная группировка -->
<div class="blue-box">
  <p>Телефон: +7 000 000-00-00</p>
</div>

section уместен, когда внутри есть самостоятельная тема: «Контакты», «Программа мероприятия», «Отзывы». Обычно у такой области есть заголовок. Если смысла нет и нужен только контейнер для CSS, используйте div.

div и span

div — нейтральный блочный контейнер, span — нейтральный строчный контейнер. Они нужны и полезны, но не несут собственного значения.

<div class="card">
  <h2>Веб-разработка</h2>
  <p>Курс на один семестр.</p>
</div>
 
<p>Заявка принята: <span class="status">ожидает проверки</span>.</p>

Начните с вопроса «что это?». Если есть нативный элемент — используйте его. Если нет — div или span честнее, чем придумывать семантику.

Типичная ошибка: div soup. Страница из десятков вложенных div может выглядеть правильно, но её трудно читать, поддерживать и использовать с клавиатурой и экранным диктором. Не нужно избегать div любой ценой; нужно не заменять им элементы с готовым смыслом.

10. Таблицы показывают данные, а не строят макет

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

<table>
  <caption>Расписание группы ИС-21 на понедельник</caption>
  <thead>
    <tr>
      <th scope="col">Пара</th>
      <th scope="col">Время</th>
      <th scope="col">Дисциплина</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>09:00–10:30</td>
      <td>Веб-разработка</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>10:45–12:15</td>
      <td>Базы данных</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Аудитория уточняется в день занятия.</td>
    </tr>
  </tfoot>
</table>

thead, tbody и tfoot делают большую таблицу понятнее. scope особенно полезен для доступности: он явно сообщает, заголовком чего является th.

Важно: если на маленьком экране таблица не помещается, проблема не решается заменой её на набор случайных div. Иногда таблицу нужно прокручивать по горизонтали, иногда — показать тот же набор данных другим представлением. Решение зависит от задачи; семантика данных не исчезает из-за узкого экрана.

11. Формы: ввод данных и отправка запроса

Форма собирает данные пользователя. Из первой лекции: после отправки браузер формирует HTTP-запрос; сервер может обработать его и вернуть ответ. Пока наша задача — правильно создать HTML-основу.

<form action="/applications" method="post">
  <div>
    <label for="full-name">Имя и фамилия</label>
    <input id="full-name" name="fullName" type="text" required>
  </div>
 
  <div>
    <label for="email">Электронная почта</label>
    <input id="email" name="email" type="email" required>
  </div>
 
  <div>
    <label for="topic">Тема обращения</label>
    <select id="topic" name="topic">
      <option value="admission">Поступление</option>
      <option value="schedule">Расписание</option>
      <option value="other">Другое</option>
    </select>
  </div>
 
  <div>
    <label for="message">Сообщение</label>
    <textarea id="message" name="message" rows="5" required></textarea>
  </div>
 
  <button type="submit">Отправить обращение</button>
</form>

Что здесь делает каждый элемент

• form объединяет поля в одну форму. action задаёт адрес обработчика; method="post" сообщает, что отправка использует POST. Без JavaScript браузер всё равно умеет отправить эту форму.
• label даёт полю доступное и видимое имя. Атрибут for указывает на id поля. Клик по подписи переводит фокус в поле.
• input — компактное поле ввода. type подсказывает назначение: email для почты, password для пароля, checkbox для флажка, radio для выбора одного варианта.
• textarea — многострочный текст.
• select и option — выбор из подготовленных вариантов.
• name — имя, под которым значение поля попадёт в данные формы. Без name поле может быть видно, но при стандартной отправке его значение не будет передано.
• button type="submit" отправляет форму.

Встроенная проверка браузера

HTML умеет выполнить базовую проверку ещё до отправки:

<input name="email" type="email" required>
<input name="age" type="number" min="14" max="100">
<input name="password" minlength="8" required>

required, подходящий type, min, max, minlength, maxlength, pattern помогают пользователю заполнить форму и уменьшают простые ошибки.

Но это не защита сервера. Пользователь может изменить HTML, отключить JavaScript или отправить запрос другим способом. Сервер обязан повторно проверять все важные данные. Это вернётся на лекциях о backend.

GET и POST: только связь с первой лекцией

• method="get" обычно подходит для действий, которые получают или фильтруют данные: поиск, каталог, расписание. При стандартной отправке значения полей становятся частью URL.
• method="post" обычно используют, когда форма создаёт или изменяет данные: заявка, регистрация, заказ. Это не делает данные автоматически секретными: конфиденциальность обеспечивает HTTPS, а серверная логика всё равно обязана быть безопасной.

Кнопка — это кнопка

<!-- Плохо: div не получает нормальное поведение кнопки сам по себе -->
<div class="button" onclick="sendForm()">Отправить</div>
 
<!-- Лучше: нативный элемент уже умеет фокус, клавиатуру и роль -->
<button type="submit">Отправить</button>

Кнопка сообщает действие. Ссылка сообщает переход к адресу. Не подменяйте их друг другом из-за внешнего вида: CSS способен оформить оба как угодно.

Важно: native HTML first. Нативные элементы уже умеют многое: кнопку можно активировать с клавиатуры, поле формы имеет роль и состояние, ссылка ведёт по URL. ARIA может дополнить недостающую информацию, но не должна без необходимости заменять нативную семантику. «Сначала подходящий HTML, затем ARIA только при реальной потребности» — хорошее правило.

12. Базовая доступность — часть нормальной разметки

Доступность (accessibility) — это возможность пользоваться страницей людям с разными возможностями и в разных условиях: с клавиатурой, экранным диктором, при увеличенном масштабе, временной травме, плохом интернете или маленьком экране.

На этом этапе достаточно устойчивой базы:

• у документа есть правильный lang;
• есть логичная иерархия заголовков;
• для изображения есть осмысленный alt или осознанно пустой alt="";
• у каждого поля формы есть label;
• для действия используется button, для навигации — a;
• ссылка и кнопка доступны с клавиатуры и имеют понятный текст;
• структура страницы выражена нативными элементами, где это возможно.

Мини-проверка: откройте страницу и перемещайтесь клавишей Tab. Видно ли, где фокус? Можно ли дойти до каждой ссылки, кнопки и поля? Понятно ли по их названиям, что произойдёт? Стили фокуса позже будем настраивать CSS, но не нужно их отключать без полноценной замены.

13. Плохие и устаревшие практики

HTML сохраняет совместимость со старым Web, поэтому браузер может отображать очень старую разметку. «Браузер показывает» не означает «так стоит писать».

14. Как проверять HTML

1. Открыть страницу в браузере

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

2. DevTools → Elements

Откройте инструменты разработчика и вкладку Elements (или «Инспектор» в другом браузере). Она показывает DOM, который браузер получил после разбора HTML. Сравните его с файлом: если браузер неожиданно переставил или закрыл элементы, вероятна ошибка вложенности.

3. Валидатор

W3C Markup Validation Service  проверяет HTML на соответствие правилам. Можно проверить URL, загрузить файл или вставить код. Валидатор не заменяет человеческую проверку смысла и доступности, но хорошо ловит опечатки, неверную вложенность и устаревшие элементы.

4. Справочник

Когда сомневаетесь, ищите элемент в MDN Web Docs . Полезно научиться читать четыре части страницы: назначение элемента, разрешённые атрибуты, примеры и раздел accessibility/usage notes. Для точных правил существует WHATWG HTML Living Standard , но на старте MDN обычно понятнее.

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

Резюме

HTML задаёт структуру и смысл документа. Браузер разбирает разметку и строит DOM-дерево. Хорошая страница начинается с современного каркаса (doctype, lang, head, body), использует элементы по назначению, а внешний вид оставляет CSS.

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

Чек-лист перед сдачей HTML-страницы

• Есть <!doctype html>, <html lang="ru">, head и body.
• В head есть meta charset, viewport и осмысленный title.
• Заголовки передают структуру, а не размер текста.
• Нет перекрёстной или случайной вложенности тегов.
• У ссылок есть href и понятный текст.
• У содержательных картинок есть хороший alt; декоративные осознанно имеют alt="".
• Размеры значимых изображений заданы через width и height.
• Таблица показывает табличные данные и имеет заголовки.
• У каждого поля формы есть label, id и name там, где нужно отправлять значение.
• Действия размечены button, переходы — a.
• Страница читается клавишей Tab и не состоит из бессмысленных контейнеров.
• Код проверен в DevTools и валидаторе.

Вопросы для самопроверки

1. Почему h2 нельзя выбирать только потому, что его размер подходит для дизайна?
2. Чем id отличается от class? Когда пригодится data-*?
3. Что делает браузер с HTML до того, как покажет страницу?
4. В чём разница между section, article и div?
5. Когда alt должен быть пустым, а когда — содержательным?
6. Почему у поля формы недостаточно одного placeholder?
7. Почему div с обработчиком клика — не полноценная замена button?
8. Для какой задачи выбрать GET, а для какой POST на базовом уровне?
9. Что проверяет HTML-валидатор и чего он не может определить?

Источники и на какие положения они опираются

• WHATWG HTML Living Standard  — основной действующий стандарт HTML: назначение HTML как семантической разметки, дерево элементов и DOM, синтаксис, элементы, атрибуты, формы, таблицы, устаревшие возможности. Проверено 4 сентября 2026; страница стандарта указывает обновление 3 сентября 2026.
• WHATWG: introduction and quick introduction to HTML  — современный каркас документа, вложенность, атрибуты, DOM как внутренняя модель и разделение HTML/CSS.
• MDN: Basic HTML syntax  — доступное объяснение элементов, атрибутов, void elements и структуры документа.
• MDN: HTML forms  и MDN: <input> — базовые формы, типы полей и встроенная проверка.
• MDN: <img> и W3C WAI: Images tutorial  — alt, декоративные и содержательные изображения, размеры и текстовые альтернативы.
• W3C WAI: Labeling Controls  — необходимость видимой/доступной подписи для полей формы.
• MDN: rel="noopener" — актуальное поведение target="_blank", window.opener, явный noopener и отличие от noreferrer.
• MDN: <table> — структура табличных данных и элементы таблицы.
• W3C Markup Validation Service  — инструмент проверки соответствия HTML-разметки правилам.