Анатомия веб-страницы: как читать структуру, созданную нейросетью
Анатомия веб-страницы: как читать структуру, созданную нейросетью
Вы просите нейросеть: «Сделай мне красивую кнопку для сайта». В ответ она выдает не просто прямоугольник с текстом, а двадцать строк непонятного кода с угловыми скобками, английскими словами и кавычками. Первая реакция — скопировать, вставить и надеяться, что сработает. Но когда кнопка съезжает влево или не меняет цвет, магия рушится. В вайбкодинге вам не нужно писать код с нуля, но вам жизненно необходимо уметь его читать.
Чтобы управлять нейросетью, нужно понимать, как она видит веб-страницу. Для неё сайт — это не картинка, а строгий текстовый чертёж.
Иерархия: страница как фамильное дерево
Когда искусственный интеллект генерирует разметку, он мыслит не пикселями, а вложенными друг в друга коробками. Эта концепция называется DOM (Document Object Model) — объектная модель документа.
Представьте матрешку: чтобы добраться до самой маленькой фигурки, нужно открыть все внешние. В HTML элементы точно так же вкладываются друг в друга, образуя строгую иерархию — дерево.
В этом дереве действуют родственные связи:
- Родитель (Parent) — элемент, внутри которого находятся другие элементы.
- Потомок, или дочерний элемент (Child) — элемент, находящийся внутри родителя.
- Соседи (Siblings) — элементы, лежащие внутри одного и того же родителя на одном уровне.
Если нейросеть создала карточку товара, то сама карточка — это родитель. Картинка товара, заголовок и цена внутри неё — это потомки. А по отношению друг к другу картинка и цена — соседи.
Понимание этой иерархии — ваш главный инструмент отладки. Если фон применился ко всему экрану, а не к маленькой плашке, значит, нейросеть по ошибке прописала цвет родителю, а не потомку.
Словарь разметки: из чего состоит тег
Вся структура строится из тегов — базовых кирпичиков HTML. Тег — это команда браузеру, объясняющая, чем является данный кусок текста: абзацем, ссылкой или картинкой.
Нейросеть всегда пишет теги по одному и тому же шаблону. Рассмотрим типичную строку, которую вы часто будете встречать:
<a href="https://example.com">Нажми меня</a>
Давайте проведем вскрытие этого элемента:
- Открывающий тег (
<a>): сообщает браузеру, где начинается элемент. Букваa(от англ. anchor — якорь) означает, что перед нами ссылка. - Атрибут (
href="https://example.com"): это скрытая настройка тега. Атрибуты всегда пишутся внутри открывающего тега через пробел. Они состоят из имени (href) и значения в кавычках. В данном случае атрибут указывает, куда именно должна вести ссылка. - Содержимое (
Нажми меня): то, что реально увидит пользователь на экране. - Закрывающий тег (
</a>): сообщает, что элемент закончился. Обратите внимание на слеш/— это стоп-сигнал для браузера.
Существуют и одиночные теги, которым не нужно содержимое, а значит, не нужен и закрывающий тег. Самый частый пример, который генерирует ИИ — это картинка:
<img src="photo.jpg" alt="Мой кот">
Здесь нет текста для вывода на экран, есть только открывающий тег и два атрибута: src (путь к файлу картинки) и alt (текст на случай, если картинка не загрузится).
Обязательный каркас: невидимая часть айсберга
Когда вы просите ИИ написать страницу целиком, он выдаст вам стандартный каркас. Выглядит он пугающе, но на деле это просто бюрократия, которую требует браузер.
<!DOCTYPE html>
<html>
<head>
<title>Мой первый сайт</title>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это текст на странице.</p>
</body>
</html>
Разделим этот каркас на две зоны: то, что видит машина, и то, что видит человек.
<!DOCTYPE html>и<html>— это просто конверт. Они говорят браузеру: «Внутри современный HTML-документ, открывай».<head>(Голова) — это служебная информация. Пользователь её не видит. Сюда нейросеть складывает название вкладки (<title>), шрифты, настройки для мобильных телефонов и ссылки на стили. Если вы просите ИИ изменить структуру текста или добавить картинку, в<head>вам лезть не нужно.<body>(Тело) — это сама страница. Всё, что вы видите на экране (кнопки, тексты, видео), живет строго внутри этого тега.
В вайбкодинге 95% вашего внимания при чтении структуры должно быть направлено внутрь <body>.
Читаем код как рентгеновский снимок
Давайте применим наши знания. Вы попросили нейросеть: «Сделай профиль пользователя с именем и должностью». Она выдала следующий код внутри <body>:
<div class="user-profile">
<img src="avatar.png" alt="Фото Ивана">
<h2>Иван Иванов</h2>
<p>Главный инженер</p>
</div>
Как это прочитать, не вникая в программирование?
- Мы видим тег
<div>. Это универсальный контейнер (о них мы подробно поговорим в следующей главе). У него есть атрибутclass="user-profile". Это бейджик, который ИИ повесил на контейнер, чтобы потом сказать: «Сделай элемент с бейджиком user-profile серым и круглым». - Внутри
<div>лежат три потомка: картинка (<img>), заголовок (<h2>) и абзац (<p>). - Картинка — одиночный тег. Заголовок и абзац — парные, внутри них лежит текст, который увидит пользователь.
- В конце стоит
</div>— контейнер закрылся.
Теперь, если нейросеть ошиблась и добавила кнопку «Написать сообщение» после </div>, вы поймете, почему кнопка визуально отвалилась от карточки профиля — она стала не потомком карточки, а её соседом. Чтобы исправить это, вам достаточно попросить ИИ: «Перемести кнопку внутрь контейнера user-profile».
Вы научились видеть сквозь символы и понимать скелет страницы. Но пока это просто набор элементов, идущих друг за другом сверху вниз. Чтобы строить сложные интерфейсы, эти элементы нужно правильно группировать — именно этим мы займемся далее.