Читаем HTML

структура, семантика, атрибуты

Что это

HTML — не язык программирования, а разметка: он описывает, из чего состоит страница. Читать его просто, и для работы с ИИ этого достаточно: ты должен понимать, что за структуру он предложил, и уметь сказать, что нужно иначе.

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

<article class="card" data-city="oslo">
  <h2 class="card__title">Осло</h2>
  <p class="card__temp">Сейчас <strong>+4</strong></p>
  <button type="button" aria-label="Удалить подписку">×</button>
</article>

Как это читать

Тег открывается и закрывается: <p> … </p>. Некоторые закрывать не надо: <img>, <input>, <br>.

Вложенность = структура. <strong> внутри <p> внутри <article> — дерево, то самое DOM из статьи 8.1. Отступы в коде ни на что не влияют, важна только вложенность.

Атрибуты — пары имя="значение" в открывающем теге:

Семантика

Теги различаются не видом, а смыслом. <div> ничего не значит; <article>, <nav>, <header>, <button> — значат.

Разница практическая, а не эстетическая:

<div class="btn" onclick="remove()">×</div>   <!-- так не надо -->
<button type="button" onclick="remove()">×</button>

<button> сам доступен с клавиатуры, сам нажимается пробелом и Enter, сам сообщает программам чтения, что это кнопка. <div> не делает ничего из этого — всё придётся добавлять руками, и обычно забывают.

Правило чтения: увидел <div> с обработчиком нажатия — почти всегда там должен быть <button> или <a>.

Формы

<form>
  <label for="city">Город</label>
  <input id="city" name="city" type="text" required minlength="2">
  <button type="submit">Подписаться</button>
</form>

Три вещи, которые надо проверять в формах:

• label связан с полем через for = id. Без этого нажатие на подпись не ставит курсор в поле.
• name — под этим именем значение уйдёт на сервер. Нет name — поле не отправится вообще.
• required, minlength, type="email" — проверка на стороне браузера. Удобно пользователю, но не отменяет проверки на сервере (статья 7.3): запрос можно отправить и мимо формы.

Структура документа

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Погода</title>
    <link rel="stylesheet" href="/style.css">
  </head>
  <body>
    …
    <script src="/app.js"></script>
  </body>
</html>

<head> — служебное, на странице не видно. <body> — то, что видно. lang="ru" влияет на переносы и на произношение программами чтения, а viewport — на то, как страница выглядит на телефоне. Без него мобильный браузер покажет уменьшенную версию десктопной.

Как сказать ИИ

Перепиши эту разметку семантически: div с обработчиками —
в button, блоки навигации — в nav, заголовки по уровням.
Классы и стили не трогай.

Проверь форму: у всех ли полей есть name и связанный label,
стоят ли базовые ограничения. Список проблем, без правок.

Я хочу карточку города: название, температура, кнопка удаления.
Предложи разметку — семантическую, с классами по БЭМ.
Стили пока не нужны.

На что смотреть

<div> вместо кнопки или ссылки. Самая частая проблема в сгенерированной разметке.

Нет alt у картинок. <img src="..." alt=""> — пустой alt допустим для декоративных, отсутствующий — нет.

Заголовки не по порядку. <h1>, потом сразу <h4> — структура документа ломается для тех, кто читает её программой.

Стили прямо в разметке. style="margin-top: 10px" в каждом элементе — менять потом придётся в двадцати местах.

id повторяется. Должен быть уникальным; дубли ломают и CSS, и JS, и связку label с полем.

Разметка на пять уровней вложенности из <div>. Признак, что ИИ строил структуру под внешний вид, а не под смысл.

Шпаргалка