Из чего состоит HTML структурно

\n\n```\n\nКлючевые элементы внутри ``:\n- **``** — метаданные (кодировка, описание, ключевые слова)\n- **``** — заголовок страницы (отображается во вкладке браузера)\n- **`<link>`** — подключение внешних ресурсов (CSS, иконки)\n- **`<style>`** — встроенные CSS-стили\n- **`<script>`** — JavaScript код (обычно с атрибутом `defer` или `async`)\n- **`<base>`** — базовый URL для относительных ссылок\n\n**4. Секция `<body>`: видимое содержимое**\nОсновная часть документа, содержащая весь контент, который видят пользователи:\n\n```html\n<body>\n <header>\n <nav>Навигация</nav>\n </header>\n <main>\n <article>Основной контент</article>\n </main>\n <footer>Подвал сайта</footer>\n</body>\n```\n\n### Семантическая структура `<body>`\n\nСовременный HTML5 ввел семантические теги для лучшей организации контента:\n\n```html\n<body>\n \n <header>\n <h1>Заголовок сайта</h1>\n <nav>\n <ul>\n <li><a href=\"/\">Главная</a></li>\n <li><a href=\"/about\">О нас</a></li>\n </ul>\n </nav>\n </header>\n \n \n <main>\n <article>\n <h2>Заголовок статьи</h2>\n <section>\n <h3>Раздел 1</h3>\n <p>Текст раздела</p>\n </section>\n </article>\n \n <aside>\n Боковая панель с дополнительной информацией\n </aside>\n </main>\n \n \n <footer>\n <p>Копирайт и контактная информация</p>\n </footer>\n</body>\n```\n\n### Принципы вложенности и отношений элементов\n\nHTML следует строгим правилам вложенности:\n- **Блочные элементы** (`<div>`, `<p>`, `<h1>`-`<h6>`, `<section>`) обычно содержат другие элементы\n- **Строчные элементы** (`<span>`, `<a>`, `<strong>`, `<em>`) располагаются внутри блочных\n- Каждый открытый тег должен быть закрыт в правильном порядке (LIFO — Last In, First Out)\n\n**Пример правильной вложенности:**\n```html\n<div class=\"container\">\n <h1>Заголовок <span class=\"highlight\">важный</span></h1>\n <p>Абзац с <a href=\"#\">ссылкой</a> и <strong>выделением</strong></p>\n</div>\n```\n\n### DOM (Document Object Model) представление\n\nБраузер преобразует HTML в древовидную структуру DOM, где:\n- Каждый HTML-элемент становится узлом дерева\n- Текст внутри элементов становится текстовыми узлами\n- Атрибуты становятся узлами атрибутов\n\n```\ndocument\n├── html\n│ ├── head\n│ │ ├── title\n│ │ └── meta\n│ └── body\n│ ├── header\n│ ├── main\n│ └── footer\n```\n\n### Важность правильной структуры для QA\n\nДля инженера по качеству понимание HTML-структуры критически важно, потому что:\n\n1. **Валидация и соответствие стандартам** — проверка правильности разметки\n2. **Доступность (accessibility)** — семантическая разметка улучшает опыт пользователей с ограниченными возможностями\n3. **Кроссбраузерная совместимость** — разная интерпретация структуры браузерами\n4. **SEO-оптимизация** — поисковые системы анализируют структуру документа\n5. **Тестирование верстки** — понимание потоков документа и позиционирования элементов\n6. **Автоматизация тестирования** — построение селекторов для поиска элементов\n\nПравильно структурированный HTML-документ — это основа стабильной, доступной и производительной веб-страницы, что напрямую влияет на качество продукта и пользовательский опыт.","dateCreated":"2026-04-05T16:01:44.964535","upvoteCount":0,"author":{"@type":"Person","name":"deepseek-v3.2"}}}}</script><script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"PrepBro","item":"https://prepbro.ru/"},{"@type":"ListItem","position":2,"name":"Qa","item":"https://prepbro.ru/professions/qa/questions"},{"@type":"ListItem","position":3,"name":"Вопросы","item":"https://prepbro.ru/professions/qa/questions"}]}</script><header class="sticky top-0 z-50 w-full border-b border-border-primary bg-white"><div class="container mx-auto flex h-16 items-center justify-between px-4"><button class="md:hidden p-2 -ml-2" aria-expanded="false" aria-label="Открыть меню"><svg class="h-6 w-6 text-content-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path></svg></button><a class="text-xl absolute left-1/2 -translate-x-1/2 md:static md:translate-x-0" href="/"><span class="font-black text-content-primary">Prep</span><span class="font-black text-primary-500">Bro</span></a><nav class="hidden md:flex items-center gap-6" aria-label="Основная навигация"><a class="text-sm font-medium text-content-primary hover:text-primary-600 transition-colors" href="/professions">Профессии</a><button class="rounded-lg px-5 py-2 text-sm font-semibold text-white bg-primary-600 hover:bg-primary-700 transition-colors">Войти</button></nav><div class="md:hidden w-10 h-10" aria-hidden="true"></div></div><div class="md:hidden"><nav class="fixed inset-y-0 left-0 z-50 w-72 bg-white shadow-xl overflow-y-auto flex flex-col transition-transform duration-300 -translate-x-full" aria-label="Мобильная навигация" aria-hidden="true"><div class="flex h-16 shrink-0 items-center justify-between px-4 border-b border-border-primary"><a class="text-xl" href="/"><span class="font-black text-content-primary">Prep</span><span class="font-black text-primary-500">Bro</span></a><button class="p-2" aria-label="Закрыть панель навигации"><svg class="h-6 w-6 text-content-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg></button></div><div class="flex-1 px-3 py-4"><a class="flex items-center rounded-lg px-3 py-2 text-sm text-content-primary hover:bg-surface-tertiary transition-colors" href="/professions">Профессии</a><div class="border-t border-border-primary pt-4 mt-4"><button class="w-full rounded-lg px-3 py-2 text-sm font-semibold text-white bg-primary-600 hover:bg-primary-700 transition-colors">Войти</button></div></div></nav></div></header><main class="container mx-auto px-4 py-8 max-w-4xl"><div class="mb-6"><nav class="flex items-center gap-1.5 text-sm text-content-secondary" aria-label="Навигация"><span class="flex items-center gap-1.5"><a class="hover:text-link transition-colors" href="/">PrepBro</a></span><span class="flex items-center gap-1.5"><span class="text-content-disabled">/</span><a class="hover:text-link transition-colors" href="/professions/qa/questions">Qa</a></span><span class="flex items-center gap-1.5"><span class="text-content-disabled">/</span><a class="hover:text-link transition-colors" href="/professions/qa/questions">Вопросы</a></span><span class="flex items-center gap-1.5"><span class="text-content-disabled">/</span><span class="text-content-primary font-medium truncate max-w-[200px]">Из чего состоит HTML структурно</span></span></nav></div><div><a class="inline-flex items-center gap-1 text-sm text-content-secondary hover:text-link transition-colors mb-4" href="/professions/qa/questions">← Назад к вопросам</a><h1 class="text-2xl font-bold text-content-primary mb-4">Из чего состоит HTML структурно</h1><div class="flex flex-wrap items-center gap-3 mb-4"><div class="flex items-center gap-2"><div class="h-5 w-5 rounded bg-surface-tertiary animate-pulse" data-testid="solved-checkbox-skeleton"></div><div class="h-4 w-14 rounded bg-surface-tertiary animate-pulse"></div></div><div class="flex items-center gap-2"><div class="h-5 w-5 rounded bg-surface-tertiary animate-pulse" data-testid="seen-checkbox-skeleton"></div><div class="h-4 w-32 rounded bg-surface-tertiary animate-pulse"></div></div><span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium" style="background:hsl(142, 40%, 92%);color:hsl(142, 60%, 30%)">1.0 Junior</span><span class="rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-700" title="Частота на собеседованиях">🔥 21</span><span class="text-sm text-content-secondary">1 комментариев</span></div><div class="flex flex-wrap gap-2 mb-4"><span class="rounded-full bg-surface-tertiary px-2.5 py-0.5 text-xs text-content-primary">#Веб-тестирование</span></div></div><div class="mt-6"><div class="rounded-lg border border-gray-200 bg-white p-4" data-testid="grade-voting-skeleton"><div class="h-4 w-32 rounded bg-surface-tertiary animate-pulse mb-3"></div><div class="flex gap-2"><div class="h-10 w-24 rounded-lg bg-surface-tertiary animate-pulse"></div><div class="h-10 w-24 rounded-lg bg-surface-tertiary animate-pulse"></div><div class="h-10 w-24 rounded-lg bg-surface-tertiary animate-pulse"></div></div></div></div><div class="mt-6"><button class="text-sm text-content-secondary hover:text-link transition-colors">Предложить правку</button><span hidden="" style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none"></span></div><div class="mt-8"><div><div class="mb-4 flex items-center justify-between"><h2 class="text-lg font-semibold text-content-primary">Комментарии (1)</h2><div class="flex gap-1"><button class="rounded-lg px-3 py-1 text-sm transition-colors bg-primary-100 text-primary-700">По лайкам</button><button class="rounded-lg px-3 py-1 text-sm transition-colors text-content-secondary hover:bg-surface-tertiary">По дате</button></div></div><div class="divide-y divide-surface-tertiary"><div class="py-4"><div class="flex items-start gap-3"><div class="flex shrink-0 items-center justify-center rounded-full h-8 w-8 text-sm" style="background-color:#6366f130">🐱</div><div class="min-w-0 flex-1"><div class="flex items-center gap-2 mb-1"><span class="text-sm font-medium text-content-primary">deepseek-v3.2</span><span class="rounded-full bg-primary-100 px-2 py-0.5 text-xs font-medium text-primary-700">PrepBro AI</span><span class="text-xs text-content-tertiary">5 апр. 2026 г.</span><span class="text-xs text-content-tertiary">(ред.)</span></div><p class="text-xs text-content-tertiary mb-2">Ответ сгенерирован нейросетью и может содержать ошибки</p><div><div class="mb-3 inline-flex rounded-lg bg-surface-tertiary p-1 gap-1"><button class="group relative rounded-md px-3 py-1.5 text-sm transition-colors text-content-tertiary hover:text-content-secondary">Code<span class="pointer-events-none invisible absolute bottom-full left-1/2 z-10 mb-2 w-[220px] -translate-x-1/2 whitespace-normal rounded-md bg-[#111] p-1.5 text-center text-xs leading-snug text-white opacity-0 transition-opacity group-hover:visible group-hover:opacity-100">Без форматирования, вывести как код<span class="absolute top-full left-1/2 -translate-x-1/2 border-[5px] border-transparent border-t-[#111]"></span></span></button><button class="group relative rounded-md px-3 py-1.5 text-sm transition-colors bg-white text-content-primary font-medium shadow-sm">Auto<span class="pointer-events-none invisible absolute bottom-full left-1/2 z-10 mb-2 w-[220px] -translate-x-1/2 whitespace-normal rounded-md bg-[#111] p-1.5 text-center text-xs leading-snug text-white opacity-0 transition-opacity group-hover:visible group-hover:opacity-100">Форматировать автоматически (помогает, если нейронка плохо отформатировала текст)<span class="absolute top-full left-1/2 -translate-x-1/2 border-[5px] border-transparent border-t-[#111]"></span></span></button><button class="group relative rounded-md px-3 py-1.5 text-sm transition-colors text-content-tertiary hover:text-content-secondary">Markdown<span class="pointer-events-none invisible absolute bottom-full left-1/2 z-10 mb-2 w-[220px] -translate-x-1/2 whitespace-normal rounded-md bg-[#111] p-1.5 text-center text-xs leading-snug text-white opacity-0 transition-opacity group-hover:visible group-hover:opacity-100">Визуализировать как Markdown<span class="absolute top-full left-1/2 -translate-x-1/2 border-[5px] border-transparent border-t-[#111]"></span></span></button></div><div><h2 class="text-lg font-semibold text-content-primary mt-5 mb-2">Структура HTML-документа: полное руководство</h2> <p class="text-sm text-content-primary mb-3 leading-relaxed">HTML-документ представляет собой иерархическую древовидную структуру, где каждый элемент является узлом этого дерева. Полноценный валидный HTML-файл состоит из нескольких обязательных и опциональных компонентов, которые организованы в определенном порядке.</p> <h3 class="text-base font-semibold text-content-primary mt-4 mb-2">Основные структурные элементы HTML</h3> <p class="text-sm text-content-primary mb-3 leading-relaxed"><strong class="font-semibold text-content-primary">1. Объявление типа документа (DOCTYPE)</strong> Это первая строка любого HTML-документа, которая сообщает браузеру версию HTML и его тип:</p> <pre class="rounded-lg bg-surface-dark p-4 mb-3 overflow-x-auto text-xs leading-relaxed"><code class="text-xs hljs language-html" node="[object Object]"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span> </code></pre> <p class="text-sm text-content-primary mb-3 leading-relaxed">В современном HTML5 используется краткая форма, показанная выше. Это не тег, а инструкция для браузера.</p> <p class="text-sm text-content-primary mb-3 leading-relaxed"><strong class="font-semibold text-content-primary">2. Корневой элемент <code class="rounded bg-surface-tertiary px-1.5 py-0.5 text-xs font-mono text-link-hover" node="[object Object]"><html></code></strong> Весь документ помещается внутрь этого элемента, который является контейнером для всего содержимого:</p> <pre class="rounded-lg bg-surface-dark p-4 mb-3 overflow-x-auto text-xs leading-relaxed"><code class="text-xs hljs language-html" node="[object Object]"><span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"ru"</span>></span> <span class="hljs-comment"></span> <span class="hljs-tag"></<span class="hljs-name">html</span>></span> </code></pre> <p class="text-sm text-content-primary mb-3 leading-relaxed">Атрибут <code class="rounded bg-surface-tertiary px-1.5 py-0.5 text-xs font-mono text-link-hover" node="[object Object]">lang</code> указывает язык документа для доступности и SEO.</p> <p class="text-sm text-content-primary mb-3 leading-relaxed"><strong class="font-semibold text-content-primary">3. Секция <code class="rounded bg-surface-tertiary px-1.5 py-0.5 text-xs font-mono text-link-hover" node="[object Object]"><head></code>: метаинформация</strong> Эта секция содержит служебную информацию о документе, которая не отображается непосредственно на странице:</p> <pre class="rounded-lg bg-surface-dark p-4 mb-3 overflow-x-auto text-xs leading-relaxed"><code class="text-xs hljs language-html" node="[object Object]"><span class="hljs-tag"><<span class="hljs-name">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>></span> <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</span>></span> <span class="hljs-tag"><<span class="hljs-name">title</span>></span>Название страницы<span class="hljs-tag"></<span class="hljs-name">title</span>></span> <span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"styles.css"</span>></span> <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"script.js"</span> <span class="hljs-attr">defer</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span> <span class="hljs-tag"></<span class="hljs-name">head</span>></span> </code></pre> <p class="text-sm text-content-primary mb-3 leading-relaxed">Ключевые элементы внутри <code class="rounded bg-surface-tertiary px-1.5 py-0.5 text-xs font-mono text-link-hover" node="[object Object]"><head></code>:</p> <ul class="list-disc list-inside text-sm text-content-primary mb-3 space-y-1"> <li class="text-sm text-content-primary"><strong class="font-semibold text-content-primary"><code class="rounded bg-surface-tertiary px-1.5 py-0.5 text-xs font-mono text-link-hover" node="[object Object]"><meta></code></strong> — метаданные (кодировка, описание, ключевые слова)</li> <li class="text-sm text-content-primary"><strong class="font-semibold text-content-primary"><code class="rounded bg-surface-tertiary px-1.5 py-0.5 text-xs font-mono text-link-hover" node="[object Object]"><title></code></strong> — заголовок страницы (отображается во вкладке браузера)</li> <li class="text-sm text-content-primary"><strong class="font-semibold text-content-primary"><code class="rounded bg-surface-tertiary px-1.5 py-0.5 text-xs font-mono text-link-hover" node="[object Object]"><link></code></strong> — подключение внешних ресурсов (CSS, иконки)</li> <li class="text-sm text-content-primary"><strong class="font-semibold text-content-primary"><code class="rounded bg-surface-tertiary px-1.5 py-0.5 text-xs font-mono text-link-hover" node="[object Object]"><style></code></strong> — встроенные CSS-стили</li> <li class="text-sm text-content-primary"><strong class="font-semibold text-content-primary"><code class="rounded bg-surface-tertiary px-1.5 py-0.5 text-xs font-mono text-link-hover" node="[object Object]"><script></code></strong> — JavaScript код (обычно с атрибутом <code class="rounded bg-surface-tertiary px-1.5 py-0.5 text-xs font-mono text-link-hover" node="[object Object]">defer</code> или <code class="rounded bg-surface-tertiary px-1.5 py-0.5 text-xs font-mono text-link-hover" node="[object Object]">async</code>)</li> <li class="text-sm text-content-primary"><strong class="font-semibold text-content-primary"><code class="rounded bg-surface-tertiary px-1.5 py-0.5 text-xs font-mono text-link-hover" node="[object Object]"><base></code></strong> — базовый URL для относительных ссылок</li> </ul> <p class="text-sm text-content-primary mb-3 leading-relaxed"><strong class="font-semibold text-content-primary">4. Секция <code class="rounded bg-surface-tertiary px-1.5 py-0.5 text-xs font-mono text-link-hover" node="[object Object]"><body></code>: видимое содержимое</strong> Основная часть документа, содержащая весь контент, который видят пользователи:</p> <pre class="rounded-lg bg-surface-dark p-4 mb-3 overflow-x-auto text-xs leading-relaxed"><code class="text-xs hljs language-html" node="[object Object]"><span class="hljs-tag"><<span class="hljs-name">body</span>></span> <span class="hljs-tag"><<span class="hljs-name">header</span>></span> <span class="hljs-tag"><<span class="hljs-name">nav</span>></span>Навигация<span class="hljs-tag"></<span class="hljs-name">nav</span>></span> <span class="hljs-tag"></<span class="hljs-name">header</span>></span> <span class="hljs-tag"><<span class="hljs-name">main</span>></span> <span class="hljs-tag"><<span class="hljs-name">article</span>></span>Основной контент<span class="hljs-tag"></<span class="hljs-name">article</span>></span> <span class="hljs-tag"></<span class="hljs-name">main</span>></span> <span class="hljs-tag"><<span class="hljs-name">footer</span>></span>Подвал сайта<span class="hljs-tag"></<span class="hljs-name">footer</span>></span> <span class="hljs-tag"></<span class="hljs-name">body</span>></span> </code></pre> <h3 class="text-base font-semibold text-content-primary mt-4 mb-2">Семантическая структура <code class="rounded bg-surface-tertiary px-1.5 py-0.5 text-xs font-mono text-link-hover" node="[object Object]"><body></code></h3> <p class="text-sm text-content-primary mb-3 leading-relaxed">Современный HTML5 ввел семантические теги для лучшей организации контента:</p> <pre class="rounded-lg bg-surface-dark p-4 mb-3 overflow-x-auto text-xs leading-relaxed"><code class="text-xs hljs language-html" node="[object Object]"><span class="hljs-tag"><<span class="hljs-name">body</span>></span> <span class="hljs-comment"></span> <span class="hljs-tag"><<span class="hljs-name">header</span>></span> <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Заголовок сайта<span class="hljs-tag"></<span class="hljs-name">h1</span>></span> <span class="hljs-tag"><<span class="hljs-name">nav</span>></span> <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"/"</span>></span>Главная<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> <span class="hljs-tag"><<span class="hljs-name">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"/about"</span>></span>О нас<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> <span class="hljs-tag"></<span class="hljs-name">nav</span>></span> <span class="hljs-tag"></<span class="hljs-name">header</span>></span> <span class="hljs-comment"></span> <span class="hljs-tag"><<span class="hljs-name">main</span>></span> <span class="hljs-tag"><<span class="hljs-name">article</span>></span> <span class="hljs-tag"><<span class="hljs-name">h2</span>></span>Заголовок статьи<span class="hljs-tag"></<span class="hljs-name">h2</span>></span> <span class="hljs-tag"><<span class="hljs-name">section</span>></span> <span class="hljs-tag"><<span class="hljs-name">h3</span>></span>Раздел 1<span class="hljs-tag"></<span class="hljs-name">h3</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Текст раздела<span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"></<span class="hljs-name">section</span>></span> <span class="hljs-tag"></<span class="hljs-name">article</span>></span> <span class="hljs-tag"><<span class="hljs-name">aside</span>></span> Боковая панель с дополнительной информацией <span class="hljs-tag"></<span class="hljs-name">aside</span>></span> <span class="hljs-tag"></<span class="hljs-name">main</span>></span> <span class="hljs-comment"></span> <span class="hljs-tag"><<span class="hljs-name">footer</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Копирайт и контактная информация<span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"></<span class="hljs-name">footer</span>></span> <span class="hljs-tag"></<span class="hljs-name">body</span>></span> </code></pre> <h3 class="text-base font-semibold text-content-primary mt-4 mb-2">Принципы вложенности и отношений элементов</h3> <p class="text-sm text-content-primary mb-3 leading-relaxed">HTML следует строгим правилам вложенности:</p> <ul class="list-disc list-inside text-sm text-content-primary mb-3 space-y-1"> <li class="text-sm text-content-primary"><strong class="font-semibold text-content-primary">Блочные элементы</strong> (<code class="rounded bg-surface-tertiary px-1.5 py-0.5 text-xs font-mono text-link-hover" node="[object Object]"><div></code>, <code class="rounded bg-surface-tertiary px-1.5 py-0.5 text-xs font-mono text-link-hover" node="[object Object]"><p></code>, <code class="rounded bg-surface-tertiary px-1.5 py-0.5 text-xs font-mono text-link-hover" node="[object Object]"><h1></code>-<code class="rounded bg-surface-tertiary px-1.5 py-0.5 text-xs font-mono text-link-hover" node="[object Object]"><h6></code>, <code class="rounded bg-surface-tertiary px-1.5 py-0.5 text-xs font-mono text-link-hover" node="[object Object]"><section></code>) обычно содержат другие элементы</li> <li class="text-sm text-content-primary"><strong class="font-semibold text-content-primary">Строчные элементы</strong> (<code class="rounded bg-surface-tertiary px-1.5 py-0.5 text-xs font-mono text-link-hover" node="[object Object]"><span></code>, <code class="rounded bg-surface-tertiary px-1.5 py-0.5 text-xs font-mono text-link-hover" node="[object Object]"><a></code>, <code class="rounded bg-surface-tertiary px-1.5 py-0.5 text-xs font-mono text-link-hover" node="[object Object]"><strong></code>, <code class="rounded bg-surface-tertiary px-1.5 py-0.5 text-xs font-mono text-link-hover" node="[object Object]"><em></code>) располагаются внутри блочных</li> <li class="text-sm text-content-primary">Каждый открытый тег должен быть закрыт в правильном порядке (LIFO — Last In, First Out)</li> </ul> <p class="text-sm text-content-primary mb-3 leading-relaxed"><strong class="font-semibold text-content-primary">Пример правильной вложенности:</strong></p> <pre class="rounded-lg bg-surface-dark p-4 mb-3 overflow-x-auto text-xs leading-relaxed"><code class="text-xs hljs language-html" node="[object Object]"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>></span> <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Заголовок <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"highlight"</span>></span>важный<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">h1</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Абзац с <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>ссылкой<span class="hljs-tag"></<span class="hljs-name">a</span>></span> и <span class="hljs-tag"><<span class="hljs-name">strong</span>></span>выделением<span class="hljs-tag"></<span class="hljs-name">strong</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> </code></pre> <h3 class="text-base font-semibold text-content-primary mt-4 mb-2">DOM (Document Object Model) представление</h3> <p class="text-sm text-content-primary mb-3 leading-relaxed">Браузер преобразует HTML в древовидную структуру DOM, где:</p> <ul class="list-disc list-inside text-sm text-content-primary mb-3 space-y-1"> <li class="text-sm text-content-primary">Каждый HTML-элемент становится узлом дерева</li> <li class="text-sm text-content-primary">Текст внутри элементов становится текстовыми узлами</li> <li class="text-sm text-content-primary">Атрибуты становятся узлами атрибутов</li> </ul> <pre class="rounded-lg bg-surface-dark p-4 mb-3 overflow-x-auto text-xs leading-relaxed"><code class="rounded bg-surface-tertiary px-1.5 py-0.5 text-xs font-mono text-link-hover" node="[object Object]">document ├── html │ ├── head │ │ ├── title │ │ └── meta │ └── body │ ├── header │ ├── main │ └── footer </code></pre> <h3 class="text-base font-semibold text-content-primary mt-4 mb-2">Важность правильной структуры для QA</h3> <p class="text-sm text-content-primary mb-3 leading-relaxed">Для инженера по качеству понимание HTML-структуры критически важно, потому что:</p> <ol class="list-decimal list-inside text-sm text-content-primary mb-3 space-y-1"> <li class="text-sm text-content-primary"><strong class="font-semibold text-content-primary">Валидация и соответствие стандартам</strong> — проверка правильности разметки</li> <li class="text-sm text-content-primary"><strong class="font-semibold text-content-primary">Доступность (accessibility)</strong> — семантическая разметка улучшает опыт пользователей с ограниченными возможностями</li> <li class="text-sm text-content-primary"><strong class="font-semibold text-content-primary">Кроссбраузерная совместимость</strong> — разная интерпретация структуры браузерами</li> <li class="text-sm text-content-primary"><strong class="font-semibold text-content-primary">SEO-оптимизация</strong> — поисковые системы анализируют структуру документа</li> <li class="text-sm text-content-primary"><strong class="font-semibold text-content-primary">Тестирование верстки</strong> — понимание потоков документа и позиционирования элементов</li> <li class="text-sm text-content-primary"><strong class="font-semibold text-content-primary">Автоматизация тестирования</strong> — построение селекторов для поиска элементов</li> </ol> <p class="text-sm text-content-primary mb-3 leading-relaxed">Правильно структурированный HTML-документ — это основа стабильной, доступной и производительной веб-страницы, что напрямую влияет на качество продукта и пользовательский опыт.</p></div></div><div class="mt-2 flex items-center gap-4"><button class="flex items-center gap-1 text-xs transition-colors text-content-tertiary hover:text-red-500">♡ </button><button class="text-xs text-content-tertiary hover:text-link transition-colors">Ответить</button><button class="text-xs text-link hover:underline transition-colors">Свернуть</button></div></div></div><span hidden="" style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none"></span><span hidden="" style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none"></span></div></div><div class="mt-6"><div class="rounded-lg border border-border-primary bg-white p-4"><textarea readOnly="" placeholder="Войдите, чтобы оставить комментарий" class="w-full resize-none rounded-lg border border-border-primary bg-surface-secondary p-3 text-sm text-content-tertiary placeholder:text-content-tertiary cursor-pointer" rows="3"></textarea><div class="mt-2 flex justify-end"><button disabled="" class="rounded-lg bg-surface-muted px-4 py-2 text-sm font-medium text-white cursor-not-allowed">Отправить</button></div></div></div></div></div></main><footer class="border-t border-border-primary bg-surface-secondary py-8"><div class="container mx-auto px-4 text-center"><div class="flex flex-col items-center gap-4 sm:flex-row sm:justify-between"><p class="text-sm text-content-primary">© 2026 PrepBro. Все права защищены.</p><div class="flex gap-4"><a href="https://t.me/prepbro_bot" target="_blank" rel="noopener noreferrer" class="text-sm text-content-primary hover:text-primary-600 transition-colors">Telegram-бот</a></div></div></div></footer></div><span hidden="" style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none"></span><button aria-label="Наверх" class="hidden lg:fixed lg:flex bottom-8 right-8 z-40 h-12 w-12 items-center justify-center rounded-full bg-primary-600 text-white shadow-lg hover:bg-primary-700 transition-opacity duration-300 opacity-0 pointer-events-none"><svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"></path></svg></button><script src="/_next/static/chunks/5ffdb00edfe2eeb6.js" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[86437,[\"/_next/static/chunks/93d97f7e4e58ae57.js\",\"/_next/static/chunks/0e82111e1dc805d3.js\",\"/_next/static/chunks/aade49cb1b80d882.js\"],\"YandexMetrika\"]\n3:I[27088,[\"/_next/static/chunks/93d97f7e4e58ae57.js\",\"/_next/static/chunks/0e82111e1dc805d3.js\",\"/_next/static/chunks/aade49cb1b80d882.js\"],\"Providers\"]\n4:I[39756,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/0bd6498bda341889.js\"],\"default\"]\n5:I[58298,[\"/_next/static/chunks/93d97f7e4e58ae57.js\",\"/_next/static/chunks/0e82111e1dc805d3.js\",\"/_next/static/chunks/aade49cb1b80d882.js\",\"/_next/static/chunks/95e6290be230ff3b.js\"],\"default\"]\n6:I[37457,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/0bd6498bda341889.js\"],\"default\"]\n7:I[22016,[\"/_next/static/chunks/93d97f7e4e58ae57.js\",\"/_next/static/chunks/0e82111e1dc805d3.js\",\"/_next/static/chunks/aade49cb1b80d882.js\",\"/_next/static/chunks/12f2bc9ed909dab3.js\",\"/_next/static/chunks/d4d9811c6a5ac9cd.js\"],\"\"]\n9:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/0bd6498bda341889.js\"],\"OutletBoundary\"]\na:\"$Sreact.suspense\"\nc:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/0bd6498bda341889.js\"],\"ViewportBoundary\"]\ne:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/0bd6498bda341889.js\"],\"MetadataBoundary\"]\n10:I[68027,[],\"default\"]\n:HL[\"/_next/static/chunks/57770990fb14b5d7.css\",\"style\"]\n:HL[\"/_next/static/media/07454f8ad8aaac57-s.p.fc65572f.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/7f11d98043fdedc9-s.p.317fa95e.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/chunks/b9ef641e76e3a351.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"iJukptxj9d1wN84dNCC01\",\"c\":[\"\",\"questions\",\"iz-chego-sostoit-html-strukturno\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"questions\",{\"children\":[[\"slug\",\"iz-chego-sostoit-html-strukturno\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/57770990fb14b5d7.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/93d97f7e4e58ae57.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/0e82111e1dc805d3.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/aade49cb1b80d882.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"ru\",\"children\":[\"$\",\"body\",null,{\"className\":\"nunito_d736ed00-module__fZ6zea__variable font-sans antialiased\",\"children\":[[\"$\",\"$L2\",null,{}],[\"$\",\"$L3\",null,{\"children\":[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$5\",\"errorStyles\":[],\"errorScripts\":[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/95e6290be230ff3b.js\",\"async\":true}]],\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col items-center justify-center min-h-[50vh] px-4 text-center\",\"children\":[\"$\",\"div\",null,{\"className\":\"rounded-xl bg-surface-secondary border border-border-primary p-8 max-w-md\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-xl font-bold text-content-primary mb-2\",\"children\":\"Страница не найдена\"}],[\"$\",\"p\",null,{\"className\":\"text-content-primary mb-6\",\"children\":\"Запрашиваемая страница не существует или была перемещена.\"}],[\"$\",\"$L7\",null,{\"href\":\"/\",\"prefetch\":false,\"className\":\"inline-block px-6 py-2.5 rounded-lg bg-primary-600 text-white font-medium text-sm hover:bg-primary-700 transition-colors\",\"children\":\"На главную\"}]]}]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]]}]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[\"$L8\",[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/b9ef641e76e3a351.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/12f2bc9ed909dab3.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/d4d9811c6a5ac9cd.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L9\",null,{\"children\":[\"$\",\"$a\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@b\"}]}]]}],{},null,false,false]},null,false,false]},null,false,false]},null,false,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$Lc\",null,{\"children\":\"$Ld\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$Le\",null,{\"children\":[\"$\",\"$a\",null,{\"name\":\"Next.Metadata\",\"children\":\"$Lf\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$10\",[]],\"S\":false}\n"])</script><script>self.__next_f.push([1,"d:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"11:I[27201,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/0bd6498bda341889.js\"],\"IconMark\"]\nb:null\n"])</script><script>self.__next_f.push([1,"f:[[\"$\",\"title\",\"0\",{\"children\":\"Из чего состоит HTML структурно | PrepBro\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Структура HTML-документа: полное руководство HTML-документ представляет собой иерархическую древовидную структуру, где каждый элемент является узлом этого де...\"}],[\"$\",\"meta\",\"2\",{\"name\":\"keywords\",\"content\":\"собеседование,подготовка,разработчик,вопросы,python,java,frontend\"}],[\"$\",\"link\",\"3\",{\"rel\":\"canonical\",\"href\":\"https://prepbro.ru/questions/iz-chego-sostoit-html-strukturno\"}],[\"$\",\"meta\",\"4\",{\"property\":\"og:title\",\"content\":\"Из чего состоит HTML структурно | PrepBro\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:description\",\"content\":\"Структура HTML-документа: полное руководство HTML-документ представляет собой иерархическую древовидную структуру, где каждый элемент является узлом этого де...\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:url\",\"content\":\"https://prepbro.ru/questions/iz-chego-sostoit-html-strukturno\"}],[\"$\",\"meta\",\"7\",{\"name\":\"twitter:card\",\"content\":\"summary\"}],[\"$\",\"meta\",\"8\",{\"name\":\"twitter:title\",\"content\":\"Из чего состоит HTML структурно | PrepBro\"}],[\"$\",\"meta\",\"9\",{\"name\":\"twitter:description\",\"content\":\"Структура HTML-документа: полное руководство HTML-документ представляет собой иерархическую древовидную структуру, где каждый элемент является узлом этого де...\"}],[\"$\",\"link\",\"10\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.0b3bf435.ico\",\"sizes\":\"256x256\",\"type\":\"image/x-icon\"}],[\"$\",\"link\",\"11\",{\"rel\":\"icon\",\"href\":\"/icon?1f46b0785255ba52\",\"alt\":\"$undefined\",\"type\":\"image/png\",\"sizes\":\"32x32\"}],[\"$\",\"$L11\",\"12\",{}]]\n"])</script><script>self.__next_f.push([1,"12:T1d42,"])</script><script>self.__next_f.push([1,"{\"@context\":\"https://schema.org\",\"@type\":\"QAPage\",\"mainEntity\":{\"@type\":\"Question\",\"name\":\"Из чего состоит HTML структурно\",\"dateCreated\":\"2026-02-01T11:45:25.976741Z\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"## Структура HTML-документа: полное руководство\\n\\nHTML-документ представляет собой иерархическую древовидную структуру, где каждый элемент является узлом этого дерева. Полноценный валидный HTML-файл состоит из нескольких обязательных и опциональных компонентов, которые организованы в определенном порядке.\\n\\n### Основные структурные элементы HTML\\n\\n**1. Объявление типа документа (DOCTYPE)**\\nЭто первая строка любого HTML-документа, которая сообщает браузеру версию HTML и его тип:\\n\\n```html\\n\u003c!DOCTYPE html\u003e\\n```\\nВ современном HTML5 используется краткая форма, показанная выше. Это не тег, а инструкция для браузера.\\n\\n**2. Корневой элемент `\u003chtml\u003e`**\\nВесь документ помещается внутрь этого элемента, который является контейнером для всего содержимого:\\n\\n```html\\n\u003chtml lang=\\\"ru\\\"\u003e\\n \u003c!-- всё содержимое страницы --\u003e\\n\u003c/html\u003e\\n```\\nАтрибут `lang` указывает язык документа для доступности и SEO.\\n\\n**3. Секция `\u003chead\u003e`: метаинформация**\\nЭта секция содержит служебную информацию о документе, которая не отображается непосредственно на странице:\\n\\n```html\\n\u003chead\u003e\\n \u003cmeta charset=\\\"UTF-8\\\"\u003e\\n \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e\\n \u003ctitle\u003eНазвание страницы\u003c/title\u003e\\n \u003clink rel=\\\"stylesheet\\\" href=\\\"styles.css\\\"\u003e\\n \u003cscript src=\\\"script.js\\\" defer\u003e\u003c/script\u003e\\n\u003c/head\u003e\\n```\\n\\nКлючевые элементы внутри `\u003chead\u003e`:\\n- **`\u003cmeta\u003e`** — метаданные (кодировка, описание, ключевые слова)\\n- **`\u003ctitle\u003e`** — заголовок страницы (отображается во вкладке браузера)\\n- **`\u003clink\u003e`** — подключение внешних ресурсов (CSS, иконки)\\n- **`\u003cstyle\u003e`** — встроенные CSS-стили\\n- **`\u003cscript\u003e`** — JavaScript код (обычно с атрибутом `defer` или `async`)\\n- **`\u003cbase\u003e`** — базовый URL для относительных ссылок\\n\\n**4. Секция `\u003cbody\u003e`: видимое содержимое**\\nОсновная часть документа, содержащая весь контент, который видят пользователи:\\n\\n```html\\n\u003cbody\u003e\\n \u003cheader\u003e\\n \u003cnav\u003eНавигация\u003c/nav\u003e\\n \u003c/header\u003e\\n \u003cmain\u003e\\n \u003carticle\u003eОсновной контент\u003c/article\u003e\\n \u003c/main\u003e\\n \u003cfooter\u003eПодвал сайта\u003c/footer\u003e\\n\u003c/body\u003e\\n```\\n\\n### Семантическая структура `\u003cbody\u003e`\\n\\nСовременный HTML5 ввел семантические теги для лучшей организации контента:\\n\\n```html\\n\u003cbody\u003e\\n \u003c!-- Шапка сайта --\u003e\\n \u003cheader\u003e\\n \u003ch1\u003eЗаголовок сайта\u003c/h1\u003e\\n \u003cnav\u003e\\n \u003cul\u003e\\n \u003cli\u003e\u003ca href=\\\"/\\\"\u003eГлавная\u003c/a\u003e\u003c/li\u003e\\n \u003cli\u003e\u003ca href=\\\"/about\\\"\u003eО нас\u003c/a\u003e\u003c/li\u003e\\n \u003c/ul\u003e\\n \u003c/nav\u003e\\n \u003c/header\u003e\\n \\n \u003c!-- Основное содержание --\u003e\\n \u003cmain\u003e\\n \u003carticle\u003e\\n \u003ch2\u003eЗаголовок статьи\u003c/h2\u003e\\n \u003csection\u003e\\n \u003ch3\u003eРаздел 1\u003c/h3\u003e\\n \u003cp\u003eТекст раздела\u003c/p\u003e\\n \u003c/section\u003e\\n \u003c/article\u003e\\n \\n \u003caside\u003e\\n Боковая панель с дополнительной информацией\\n \u003c/aside\u003e\\n \u003c/main\u003e\\n \\n \u003c!-- Подвал --\u003e\\n \u003cfooter\u003e\\n \u003cp\u003eКопирайт и контактная информация\u003c/p\u003e\\n \u003c/footer\u003e\\n\u003c/body\u003e\\n```\\n\\n### Принципы вложенности и отношений элементов\\n\\nHTML следует строгим правилам вложенности:\\n- **Блочные элементы** (`\u003cdiv\u003e`, `\u003cp\u003e`, `\u003ch1\u003e`-`\u003ch6\u003e`, `\u003csection\u003e`) обычно содержат другие элементы\\n- **Строчные элементы** (`\u003cspan\u003e`, `\u003ca\u003e`, `\u003cstrong\u003e`, `\u003cem\u003e`) располагаются внутри блочных\\n- Каждый открытый тег должен быть закрыт в правильном порядке (LIFO — Last In, First Out)\\n\\n**Пример правильной вложенности:**\\n```html\\n\u003cdiv class=\\\"container\\\"\u003e\\n \u003ch1\u003eЗаголовок \u003cspan class=\\\"highlight\\\"\u003eважный\u003c/span\u003e\u003c/h1\u003e\\n \u003cp\u003eАбзац с \u003ca href=\\\"#\\\"\u003eссылкой\u003c/a\u003e и \u003cstrong\u003eвыделением\u003c/strong\u003e\u003c/p\u003e\\n\u003c/div\u003e\\n```\\n\\n### DOM (Document Object Model) представление\\n\\nБраузер преобразует HTML в древовидную структуру DOM, где:\\n- Каждый HTML-элемент становится узлом дерева\\n- Текст внутри элементов становится текстовыми узлами\\n- Атрибуты становятся узлами атрибутов\\n\\n```\\ndocument\\n├── html\\n│ ├── head\\n│ │ ├── title\\n│ │ └── meta\\n│ └── body\\n│ ├── header\\n│ ├── main\\n│ └── footer\\n```\\n\\n### Важность правильной структуры для QA\\n\\nДля инженера по качеству понимание HTML-структуры критически важно, потому что:\\n\\n1. **Валидация и соответствие стандартам** — проверка правильности разметки\\n2. **Доступность (accessibility)** — семантическая разметка улучшает опыт пользователей с ограниченными возможностями\\n3. **Кроссбраузерная совместимость** — разная интерпретация структуры браузерами\\n4. **SEO-оптимизация** — поисковые системы анализируют структуру документа\\n5. **Тестирование верстки** — понимание потоков документа и позиционирования элементов\\n6. **Автоматизация тестирования** — построение селекторов для поиска элементов\\n\\nПравильно структурированный HTML-документ — это основа стабильной, доступной и производительной веб-страницы, что напрямую влияет на качество продукта и пользовательский опыт.\",\"dateCreated\":\"2026-04-05T16:01:44.964535\",\"upvoteCount\":0,\"author\":{\"@type\":\"Person\",\"name\":\"deepseek-v3.2\"}}}}"])</script><script>self.__next_f.push([1,"8:[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-surface-secondary\",\"children\":[[[\"$\",\"script\",\"0\",{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$12\"}}],\"$L13\"],\"$L14\",\"$L15\",\"$L16\"]}]\n"])</script><script>self.__next_f.push([1,"17:I[3374,[\"/_next/static/chunks/93d97f7e4e58ae57.js\",\"/_next/static/chunks/0e82111e1dc805d3.js\",\"/_next/static/chunks/aade49cb1b80d882.js\",\"/_next/static/chunks/12f2bc9ed909dab3.js\",\"/_next/static/chunks/d4d9811c6a5ac9cd.js\"],\"Header\"]\n18:I[59606,[\"/_next/static/chunks/93d97f7e4e58ae57.js\",\"/_next/static/chunks/0e82111e1dc805d3.js\",\"/_next/static/chunks/aade49cb1b80d882.js\",\"/_next/static/chunks/12f2bc9ed909dab3.js\",\"/_next/static/chunks/d4d9811c6a5ac9cd.js\"],\"QuestionDetailClient\"]\n13:[\"$\",\"script\",\"1\",{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"BreadcrumbList\\\",\\\"itemListElement\\\":[{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":1,\\\"name\\\":\\\"PrepBro\\\",\\\"item\\\":\\\"https://prepbro.ru/\\\"},{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":2,\\\"name\\\":\\\"Qa\\\",\\\"item\\\":\\\"https://prepbro.ru/professions/qa/questions\\\"},{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":3,\\\"name\\\":\\\"Вопросы\\\",\\\"item\\\":\\\"https://prepbro.ru/professions/qa/questions\\\"}]}\"}}]\n14:[\"$\",\"$L17\",null,{}]\n19:T1b2e,"])</script><script>self.__next_f.push([1,"## Структура HTML-документа: полное руководство\n\nHTML-документ представляет собой иерархическую древовидную структуру, где каждый элемент является узлом этого дерева. Полноценный валидный HTML-файл состоит из нескольких обязательных и опциональных компонентов, которые организованы в определенном порядке.\n\n### Основные структурные элементы HTML\n\n**1. Объявление типа документа (DOCTYPE)**\nЭто первая строка любого HTML-документа, которая сообщает браузеру версию HTML и его тип:\n\n```html\n\u003c!DOCTYPE html\u003e\n```\nВ современном HTML5 используется краткая форма, показанная выше. Это не тег, а инструкция для браузера.\n\n**2. Корневой элемент `\u003chtml\u003e`**\nВесь документ помещается внутрь этого элемента, который является контейнером для всего содержимого:\n\n```html\n\u003chtml lang=\"ru\"\u003e\n \u003c!-- всё содержимое страницы --\u003e\n\u003c/html\u003e\n```\nАтрибут `lang` указывает язык документа для доступности и SEO.\n\n**3. Секция `\u003chead\u003e`: метаинформация**\nЭта секция содержит служебную информацию о документе, которая не отображается непосредственно на странице:\n\n```html\n\u003chead\u003e\n \u003cmeta charset=\"UTF-8\"\u003e\n \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n \u003ctitle\u003eНазвание страницы\u003c/title\u003e\n \u003clink rel=\"stylesheet\" href=\"styles.css\"\u003e\n \u003cscript src=\"script.js\" defer\u003e\u003c/script\u003e\n\u003c/head\u003e\n```\n\nКлючевые элементы внутри `\u003chead\u003e`:\n- **`\u003cmeta\u003e`** — метаданные (кодировка, описание, ключевые слова)\n- **`\u003ctitle\u003e`** — заголовок страницы (отображается во вкладке браузера)\n- **`\u003clink\u003e`** — подключение внешних ресурсов (CSS, иконки)\n- **`\u003cstyle\u003e`** — встроенные CSS-стили\n- **`\u003cscript\u003e`** — JavaScript код (обычно с атрибутом `defer` или `async`)\n- **`\u003cbase\u003e`** — базовый URL для относительных ссылок\n\n**4. Секция `\u003cbody\u003e`: видимое содержимое**\nОсновная часть документа, содержащая весь контент, который видят пользователи:\n\n```html\n\u003cbody\u003e\n \u003cheader\u003e\n \u003cnav\u003eНавигация\u003c/nav\u003e\n \u003c/header\u003e\n \u003cmain\u003e\n \u003carticle\u003eОсновной контент\u003c/article\u003e\n \u003c/main\u003e\n \u003cfooter\u003eПодвал сайта\u003c/footer\u003e\n\u003c/body\u003e\n```\n\n### Семантическая структура `\u003cbody\u003e`\n\nСовременный HTML5 ввел семантические теги для лучшей организации контента:\n\n```html\n\u003cbody\u003e\n \u003c!-- Шапка сайта --\u003e\n \u003cheader\u003e\n \u003ch1\u003eЗаголовок сайта\u003c/h1\u003e\n \u003cnav\u003e\n \u003cul\u003e\n \u003cli\u003e\u003ca href=\"/\"\u003eГлавная\u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\u003ca href=\"/about\"\u003eО нас\u003c/a\u003e\u003c/li\u003e\n \u003c/ul\u003e\n \u003c/nav\u003e\n \u003c/header\u003e\n \n \u003c!-- Основное содержание --\u003e\n \u003cmain\u003e\n \u003carticle\u003e\n \u003ch2\u003eЗаголовок статьи\u003c/h2\u003e\n \u003csection\u003e\n \u003ch3\u003eРаздел 1\u003c/h3\u003e\n \u003cp\u003eТекст раздела\u003c/p\u003e\n \u003c/section\u003e\n \u003c/article\u003e\n \n \u003caside\u003e\n Боковая панель с дополнительной информацией\n \u003c/aside\u003e\n \u003c/main\u003e\n \n \u003c!-- Подвал --\u003e\n \u003cfooter\u003e\n \u003cp\u003eКопирайт и контактная информация\u003c/p\u003e\n \u003c/footer\u003e\n\u003c/body\u003e\n```\n\n### Принципы вложенности и отношений элементов\n\nHTML следует строгим правилам вложенности:\n- **Блочные элементы** (`\u003cdiv\u003e`, `\u003cp\u003e`, `\u003ch1\u003e`-`\u003ch6\u003e`, `\u003csection\u003e`) обычно содержат другие элементы\n- **Строчные элементы** (`\u003cspan\u003e`, `\u003ca\u003e`, `\u003cstrong\u003e`, `\u003cem\u003e`) располагаются внутри блочных\n- Каждый открытый тег должен быть закрыт в правильном порядке (LIFO — Last In, First Out)\n\n**Пример правильной вложенности:**\n```html\n\u003cdiv class=\"container\"\u003e\n \u003ch1\u003eЗаголовок \u003cspan class=\"highlight\"\u003eважный\u003c/span\u003e\u003c/h1\u003e\n \u003cp\u003eАбзац с \u003ca href=\"#\"\u003eссылкой\u003c/a\u003e и \u003cstrong\u003eвыделением\u003c/strong\u003e\u003c/p\u003e\n\u003c/div\u003e\n```\n\n### DOM (Document Object Model) представление\n\nБраузер преобразует HTML в древовидную структуру DOM, где:\n- Каждый HTML-элемент становится узлом дерева\n- Текст внутри элементов становится текстовыми узлами\n- Атрибуты становятся узлами атрибутов\n\n```\ndocument\n├── html\n│ ├── head\n│ │ ├── title\n│ │ └── meta\n│ └── body\n│ ├── header\n│ ├── main\n│ └── footer\n```\n\n### Важность правильной структуры для QA\n\nДля инженера по качеству понимание HTML-структуры критически важно, потому что:\n\n1. **Валидация и соответствие стандартам** — проверка правильности разметки\n2. **Доступность (accessibility)** — семантическая разметка улучшает опыт пользователей с ограниченными возможностями\n3. **Кроссбраузерная совместимость** — разная интерпретация структуры браузерами\n4. **SEO-оптимизация** — поисковые системы анализируют структуру документа\n5. **Тестирование верстки** — понимание потоков документа и позиционирования элементов\n6. **Автоматизация тестирования** — построение селекторов для поиска элементов\n\nПравильно структурированный HTML-документ — это основа стабильной, доступной и производительной веб-страницы, что напрямую влияет на качество продукта и пользовательский опыт."])</script><script>self.__next_f.push([1,"15:[\"$\",\"main\",null,{\"className\":\"container mx-auto px-4 py-8 max-w-4xl\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-6\",\"children\":[\"$\",\"nav\",null,{\"className\":\"flex items-center gap-1.5 text-sm text-content-secondary\",\"aria-label\":\"Навигация\",\"children\":[[\"$\",\"span\",\"0\",{\"className\":\"flex items-center gap-1.5\",\"children\":[false,[\"$\",\"$L7\",null,{\"href\":\"/\",\"prefetch\":false,\"className\":\"hover:text-link transition-colors\",\"children\":\"PrepBro\"}]]}],[\"$\",\"span\",\"1\",{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-content-disabled\",\"children\":\"/\"}],[\"$\",\"$L7\",null,{\"href\":\"/professions/qa/questions\",\"prefetch\":false,\"className\":\"hover:text-link transition-colors\",\"children\":\"Qa\"}]]}],[\"$\",\"span\",\"2\",{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-content-disabled\",\"children\":\"/\"}],[\"$\",\"$L7\",null,{\"href\":\"/professions/qa/questions\",\"prefetch\":false,\"className\":\"hover:text-link transition-colors\",\"children\":\"Вопросы\"}]]}],[\"$\",\"span\",\"3\",{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-content-disabled\",\"children\":\"/\"}],[\"$\",\"span\",null,{\"className\":\"text-content-primary font-medium truncate max-w-[200px]\",\"children\":\"Из чего состоит HTML структурно\"}]]}]]}]}],[\"$\",\"$L18\",null,{\"initialQuestion\":{\"id\":\"6eecedeb-7bed-4a8a-bc8e-6f9652112f73\",\"type\":\"question\",\"profession_id\":\"6f0a7406-8a3c-4b2f-a151-3d6beb08e19c\",\"profession_slug\":\"qa\",\"slug\":\"iz-chego-sostoit-html-strukturno\",\"title\":\"Из чего состоит HTML структурно\",\"text\":null,\"grade_score\":1,\"grade_votes_count\":5,\"tags\":[\"Веб-тестирование\"],\"solved_count\":0,\"comments_count\":1,\"frequency\":21,\"created_at\":\"2026-02-01T11:45:25.976741Z\",\"user_vote\":null,\"is_solved_by_me\":null,\"is_seen_on_interview\":null,\"llm_answer\":{\"id\":\"0f06d23e-0f1e-452b-ab15-ab0347958c4b\",\"user\":{\"id\":\"003f8e7b-3325-4e35-b40c-a8571670b92f\",\"pseudonym\":\"deepseek-v3.2\",\"avatar_emoji\":\"🐱\",\"avatar_color\":\"#6366f1\"},\"content\":\"$19\",\"likes_count\":0,\"is_mentor\":false,\"is_llm\":true,\"is_liked_by_me\":null,\"is_reported_by_me\":null,\"created_at\":\"2026-04-05T16:01:44.964535\",\"updated_at\":\"2026-04-05T16:02:14.593951\",\"parent_id\":null,\"replies\":[]},\"top_comments\":[]}}],\"$L1a\",\"$L1b\"]}]\n"])</script><script>self.__next_f.push([1,"16:[\"$\",\"footer\",null,{\"className\":\"border-t border-border-primary bg-surface-secondary py-8\",\"children\":[\"$\",\"div\",null,{\"className\":\"container mx-auto px-4 text-center\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-col items-center gap-4 sm:flex-row sm:justify-between\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-sm text-content-primary\",\"children\":\"© 2026 PrepBro. Все права защищены.\"}],[\"$\",\"div\",null,{\"className\":\"flex gap-4\",\"children\":[[\"$\",\"a\",\"https://t.me/prepbro_bot\",{\"href\":\"https://t.me/prepbro_bot\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"text-sm text-content-primary hover:text-primary-600 transition-colors\",\"children\":\"Telegram-бот\"}]]}]]}]}]}]\n"])</script><script>self.__next_f.push([1,"1c:I[88581,[\"/_next/static/chunks/93d97f7e4e58ae57.js\",\"/_next/static/chunks/0e82111e1dc805d3.js\",\"/_next/static/chunks/aade49cb1b80d882.js\",\"/_next/static/chunks/12f2bc9ed909dab3.js\",\"/_next/static/chunks/d4d9811c6a5ac9cd.js\"],\"SuggestEditButton\"]\n1d:I[63533,[\"/_next/static/chunks/93d97f7e4e58ae57.js\",\"/_next/static/chunks/0e82111e1dc805d3.js\",\"/_next/static/chunks/aade49cb1b80d882.js\",\"/_next/static/chunks/12f2bc9ed909dab3.js\",\"/_next/static/chunks/d4d9811c6a5ac9cd.js\"],\"CommentsSection\"]\n1a:[\"$\",\"div\",null,{\"className\":\"mt-6\",\"children\":[\"$\",\"$L1c\",null,{\"questionId\":\"6eecedeb-7bed-4a8a-bc8e-6f9652112f73\",\"questionTitle\":\"Из чего состоит HTML структурно\"}]}]\n1e:T1b2e,"])</script><script>self.__next_f.push([1,"## Структура HTML-документа: полное руководство\n\nHTML-документ представляет собой иерархическую древовидную структуру, где каждый элемент является узлом этого дерева. Полноценный валидный HTML-файл состоит из нескольких обязательных и опциональных компонентов, которые организованы в определенном порядке.\n\n### Основные структурные элементы HTML\n\n**1. Объявление типа документа (DOCTYPE)**\nЭто первая строка любого HTML-документа, которая сообщает браузеру версию HTML и его тип:\n\n```html\n\u003c!DOCTYPE html\u003e\n```\nВ современном HTML5 используется краткая форма, показанная выше. Это не тег, а инструкция для браузера.\n\n**2. Корневой элемент `\u003chtml\u003e`**\nВесь документ помещается внутрь этого элемента, который является контейнером для всего содержимого:\n\n```html\n\u003chtml lang=\"ru\"\u003e\n \u003c!-- всё содержимое страницы --\u003e\n\u003c/html\u003e\n```\nАтрибут `lang` указывает язык документа для доступности и SEO.\n\n**3. Секция `\u003chead\u003e`: метаинформация**\nЭта секция содержит служебную информацию о документе, которая не отображается непосредственно на странице:\n\n```html\n\u003chead\u003e\n \u003cmeta charset=\"UTF-8\"\u003e\n \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n \u003ctitle\u003eНазвание страницы\u003c/title\u003e\n \u003clink rel=\"stylesheet\" href=\"styles.css\"\u003e\n \u003cscript src=\"script.js\" defer\u003e\u003c/script\u003e\n\u003c/head\u003e\n```\n\nКлючевые элементы внутри `\u003chead\u003e`:\n- **`\u003cmeta\u003e`** — метаданные (кодировка, описание, ключевые слова)\n- **`\u003ctitle\u003e`** — заголовок страницы (отображается во вкладке браузера)\n- **`\u003clink\u003e`** — подключение внешних ресурсов (CSS, иконки)\n- **`\u003cstyle\u003e`** — встроенные CSS-стили\n- **`\u003cscript\u003e`** — JavaScript код (обычно с атрибутом `defer` или `async`)\n- **`\u003cbase\u003e`** — базовый URL для относительных ссылок\n\n**4. Секция `\u003cbody\u003e`: видимое содержимое**\nОсновная часть документа, содержащая весь контент, который видят пользователи:\n\n```html\n\u003cbody\u003e\n \u003cheader\u003e\n \u003cnav\u003eНавигация\u003c/nav\u003e\n \u003c/header\u003e\n \u003cmain\u003e\n \u003carticle\u003eОсновной контент\u003c/article\u003e\n \u003c/main\u003e\n \u003cfooter\u003eПодвал сайта\u003c/footer\u003e\n\u003c/body\u003e\n```\n\n### Семантическая структура `\u003cbody\u003e`\n\nСовременный HTML5 ввел семантические теги для лучшей организации контента:\n\n```html\n\u003cbody\u003e\n \u003c!-- Шапка сайта --\u003e\n \u003cheader\u003e\n \u003ch1\u003eЗаголовок сайта\u003c/h1\u003e\n \u003cnav\u003e\n \u003cul\u003e\n \u003cli\u003e\u003ca href=\"/\"\u003eГлавная\u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\u003ca href=\"/about\"\u003eО нас\u003c/a\u003e\u003c/li\u003e\n \u003c/ul\u003e\n \u003c/nav\u003e\n \u003c/header\u003e\n \n \u003c!-- Основное содержание --\u003e\n \u003cmain\u003e\n \u003carticle\u003e\n \u003ch2\u003eЗаголовок статьи\u003c/h2\u003e\n \u003csection\u003e\n \u003ch3\u003eРаздел 1\u003c/h3\u003e\n \u003cp\u003eТекст раздела\u003c/p\u003e\n \u003c/section\u003e\n \u003c/article\u003e\n \n \u003caside\u003e\n Боковая панель с дополнительной информацией\n \u003c/aside\u003e\n \u003c/main\u003e\n \n \u003c!-- Подвал --\u003e\n \u003cfooter\u003e\n \u003cp\u003eКопирайт и контактная информация\u003c/p\u003e\n \u003c/footer\u003e\n\u003c/body\u003e\n```\n\n### Принципы вложенности и отношений элементов\n\nHTML следует строгим правилам вложенности:\n- **Блочные элементы** (`\u003cdiv\u003e`, `\u003cp\u003e`, `\u003ch1\u003e`-`\u003ch6\u003e`, `\u003csection\u003e`) обычно содержат другие элементы\n- **Строчные элементы** (`\u003cspan\u003e`, `\u003ca\u003e`, `\u003cstrong\u003e`, `\u003cem\u003e`) располагаются внутри блочных\n- Каждый открытый тег должен быть закрыт в правильном порядке (LIFO — Last In, First Out)\n\n**Пример правильной вложенности:**\n```html\n\u003cdiv class=\"container\"\u003e\n \u003ch1\u003eЗаголовок \u003cspan class=\"highlight\"\u003eважный\u003c/span\u003e\u003c/h1\u003e\n \u003cp\u003eАбзац с \u003ca href=\"#\"\u003eссылкой\u003c/a\u003e и \u003cstrong\u003eвыделением\u003c/strong\u003e\u003c/p\u003e\n\u003c/div\u003e\n```\n\n### DOM (Document Object Model) представление\n\nБраузер преобразует HTML в древовидную структуру DOM, где:\n- Каждый HTML-элемент становится узлом дерева\n- Текст внутри элементов становится текстовыми узлами\n- Атрибуты становятся узлами атрибутов\n\n```\ndocument\n├── html\n│ ├── head\n│ │ ├── title\n│ │ └── meta\n│ └── body\n│ ├── header\n│ ├── main\n│ └── footer\n```\n\n### Важность правильной структуры для QA\n\nДля инженера по качеству понимание HTML-структуры критически важно, потому что:\n\n1. **Валидация и соответствие стандартам** — проверка правильности разметки\n2. **Доступность (accessibility)** — семантическая разметка улучшает опыт пользователей с ограниченными возможностями\n3. **Кроссбраузерная совместимость** — разная интерпретация структуры браузерами\n4. **SEO-оптимизация** — поисковые системы анализируют структуру документа\n5. **Тестирование верстки** — понимание потоков документа и позиционирования элементов\n6. **Автоматизация тестирования** — построение селекторов для поиска элементов\n\nПравильно структурированный HTML-документ — это основа стабильной, доступной и производительной веб-страницы, что напрямую влияет на качество продукта и пользовательский опыт."])</script><script>self.__next_f.push([1,"1b:[\"$\",\"div\",null,{\"className\":\"mt-8\",\"children\":[\"$\",\"$L1d\",null,{\"questionId\":\"6eecedeb-7bed-4a8a-bc8e-6f9652112f73\",\"commentsCount\":1,\"initialComments\":[{\"id\":\"0f06d23e-0f1e-452b-ab15-ab0347958c4b\",\"user\":{\"id\":\"003f8e7b-3325-4e35-b40c-a8571670b92f\",\"pseudonym\":\"deepseek-v3.2\",\"avatar_emoji\":\"🐱\",\"avatar_color\":\"#6366f1\"},\"content\":\"$1e\",\"likes_count\":0,\"is_mentor\":false,\"is_llm\":true,\"is_liked_by_me\":null,\"is_reported_by_me\":null,\"created_at\":\"2026-04-05T16:01:44.964535\",\"updated_at\":\"2026-04-05T16:02:14.593951\",\"parent_id\":null,\"replies\":[]}],\"initialMeta\":{\"page\":1,\"per_page\":20,\"total\":1,\"progress\":null}}]}]\n"])</script></body></html>