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

\n\n\n```\n\n### Ключевые компоненты HTML-кода\n\n* **``**: Объявление типа документа, которое указывает браузеру, что это HTML5.\n* **``**: Корневой элемент всей страницы, обычно включает атрибут `lang` для указания языка.\n* **``**: Секция с метаданными, не отображаемыми на странице, но важными для браузера и SEO.\n * ``: Задает кодировку символов (обязательно для корректного отображения кириллицы).\n * ``: Заголовок страницы, отображается во вкладке браузера.\n * `<link>`: Подключает внешние ресурсы, например, CSS-стили.\n* **`<body>`**: Тело документа, где размещается весь видимый контент.\n * **Семантические теги**: `<header>`, `<main>`, `<section>`, `<footer>` — улучшают структуру и доступность.\n * **Элементы контента**: `<h1>`-`<h6>` (заголовки), `<p>` (абзац), `<a>` (ссылка), `<img>` (изображение), `<ul>`/`<ol>` (списки), `<table>` (таблица).\n * **Атрибуты**: Дополнительные параметры тегов, например, `href` у ссылки или `src` у изображения.\n\n### Особенности HTML с точки зрения QA Engineer\n\nПри тестировании веб-приложений важно проверять не только визуальный вид, но и корректность HTML-кода:\n\n* **Валидность и соответствие стандартам**: Код должен проходить проверку валидатором (например, W3C Validator), чтобы избежать ошибок вёрстки и проблем с кросс-браузерностью.\n* **Семантическая корректность**: Использование тегов по назначению (например, `<button>` для кнопок, а не `<div>`) улучшает доступность для скринридеров и SEO.\n* **Доступность (Accessibility)**: Атрибуты `alt` у изображений, `aria-*` для элементов интерфейса, правильная иерархия заголовков.\n* **Оптимизация производительности**: Минимизация вложенности, корректные размеры изображений, асинхронная загрузка скриптов.\n* **Кросс-браузерная совместимость**: HTML-код должен корректно отображаться в разных браузерах (Chrome, Firefox, Safari, Edge) и на разных устройствах.\n\nДля инспектирования HTML-кода в ходе тестирования используйте **инструменты разработчика** в браузере (F12), которые позволяют:\n- Просматривать и редактировать DOM в реальном времени.\n- Проверять стили и вычисленные значения.\n- Анализировать сетевые запросы и производительность.\n- Эмулировать различные устройства и условия.\n\nТаким образом, HTML-код — это не просто текст с тегами, а фундамент веб-страницы, от качества которого напрямую зависит **функциональность, доступность и пользовательский опыт**. Для QA Engineer понимание HTML критически важно для эффективного тестирования, составления баг-репортов и взаимодействия с разработчиками.","dateCreated":"2026-04-05T16:10:08.314073","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(45, 62.5%, 84.5%);color:hsl(45, 70%, 25%)">2.0 Middle</span><span class="rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-700" title="Частота на собеседованиях">🔥 2</span><span class="text-sm text-content-secondary">2 комментариев</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><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">Комментарии (2)</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> <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]">HTML (HyperText Markup Language) — это язык разметки, который определяет **структуру и содержимое** веб-страницы. Его код состоит из элементов (тегов), которые обозначаются угловыми скобками `< >`. Каждый элемент обычно имеет открывающий и закрывающий тег, а между ними помещается контент. Вот как выглядит базовая структура HTML-страницы: </code></pre> <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> <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-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">head</span>></span> <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">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">"#home"</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">li</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#contact"</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-tag"><<span class="hljs-name">main</span>></span> <span class="hljs-tag"><<span class="hljs-name">section</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"home"</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">p</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">em</span>></span>курсивом<span class="hljs-tag"></<span class="hljs-name">em</span>></span>.<span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"image.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Описание изображения"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"300"</span>></span> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"alert('Привет!')"</span>></span>Нажми меня<span class="hljs-tag"></<span class="hljs-name">button</span>></span> <span class="hljs-tag"></<span class="hljs-name">section</span>></span> <span class="hljs-tag"><<span class="hljs-name">table</span>></span> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Заголовок 1<span class="hljs-tag"></<span class="hljs-name">th</span>></span> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>Заголовок 2<span class="hljs-tag"></<span class="hljs-name">th</span>></span> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Данные 1<span class="hljs-tag"></<span class="hljs-name">td</span>></span> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Данные 2<span class="hljs-tag"></<span class="hljs-name">td</span>></span> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span> <span class="hljs-tag"></<span class="hljs-name">table</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">p</span>></span><span class="hljs-symbol">©</span> 2023 Мой сайт. Все права защищены.<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">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"script.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span> <span class="hljs-tag"></<span class="hljs-name">body</span>></span> <span class="hljs-tag"></<span class="hljs-name">html</span>></span> </code></pre> <h3 class="text-base font-semibold text-content-primary mt-4 mb-2">Ключевые компоненты HTML-кода</h3> <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]"><!DOCTYPE html></code></strong>: Объявление типа документа, которое указывает браузеру, что это HTML5.</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]"><html></code></strong>: Корневой элемент всей страницы, обычно включает атрибут <code class="rounded bg-surface-tertiary px-1.5 py-0.5 text-xs font-mono text-link-hover" node="[object Object]">lang</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]"><head></code></strong>: Секция с метаданными, не отображаемыми на странице, но важными для браузера и SEO.</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]"> * `<meta charset="UTF-8">`: Задает кодировку символов (обязательно для корректного отображения кириллицы). * `<title>`: Заголовок страницы, отображается во вкладке браузера. * `<link>`: Подключает внешние ресурсы, например, CSS-стили. </code></pre> <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]"><body></code></strong>: Тело документа, где размещается весь видимый контент.</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]"> * **Семантические теги**: `<header>`, `<main>`, `<section>`, `<footer>` — улучшают структуру и доступность. * **Элементы контента**: `<h1>`-`<h6>` (заголовки), `<p>` (абзац), `<a>` (ссылка), `<img>` (изображение), `<ul>`/`<ol>` (списки), `<table>` (таблица). * **Атрибуты**: Дополнительные параметры тегов, например, `href` у ссылки или `src` у изображения. </code></pre> <h3 class="text-base font-semibold text-content-primary mt-4 mb-2">Особенности HTML с точки зрения QA Engineer</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>: Код должен проходить проверку валидатором (например, W3C Validator), чтобы избежать ошибок вёрстки и проблем с кросс-браузерностью.</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]"><button></code> для кнопок, а не <code class="rounded bg-surface-tertiary px-1.5 py-0.5 text-xs font-mono text-link-hover" node="[object Object]"><div></code>) улучшает доступность для скринридеров и SEO.</li> <li class="text-sm text-content-primary"><strong class="font-semibold text-content-primary">Доступность (Accessibility)</strong>: Атрибуты <code class="rounded bg-surface-tertiary px-1.5 py-0.5 text-xs font-mono text-link-hover" node="[object Object]">alt</code> у изображений, <code class="rounded bg-surface-tertiary px-1.5 py-0.5 text-xs font-mono text-link-hover" node="[object Object]">aria-*</code> для элементов интерфейса, правильная иерархия заголовков.</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>: HTML-код должен корректно отображаться в разных браузерах (Chrome, Firefox, Safari, Edge) и на разных устройствах.</li> </ul> <p class="text-sm text-content-primary mb-3 leading-relaxed">Для инспектирования HTML-кода в ходе тестирования используйте <strong class="font-semibold text-content-primary">инструменты разработчика</strong> в браузере (F12), которые позволяют:</p> <ul class="list-disc list-inside text-sm text-content-primary mb-3 space-y-1"> <li class="text-sm text-content-primary">Просматривать и редактировать DOM в реальном времени.</li> <li class="text-sm text-content-primary">Проверять стили и вычисленные значения.</li> <li class="text-sm text-content-primary">Анализировать сетевые запросы и производительность.</li> <li class="text-sm text-content-primary">Эмулировать различные устройства и условия.</li> </ul> <p class="text-sm text-content-primary mb-3 leading-relaxed">Таким образом, HTML-код — это не просто текст с тегами, а фундамент веб-страницы, от качества которого напрямую зависит <strong class="font-semibold text-content-primary">функциональность, доступность и пользовательский опыт</strong>. Для QA Engineer понимание 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\",\"kak-vyglyadit-html-kod\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"questions\",{\"children\":[[\"slug\",\"kak-vyglyadit-html-kod\",\"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 (HyperText Markup Language) — это язык разметки, который определяет структуру и содержимое веб-страницы. Его код состоит из эле...\"}],[\"$\",\"meta\",\"2\",{\"name\":\"keywords\",\"content\":\"собеседование,подготовка,разработчик,вопросы,python,java,frontend\"}],[\"$\",\"link\",\"3\",{\"rel\":\"canonical\",\"href\":\"https://prepbro.ru/questions/kak-vyglyadit-html-kod\"}],[\"$\",\"meta\",\"4\",{\"property\":\"og:title\",\"content\":\"Как выглядит HTML - код | PrepBro\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:description\",\"content\":\"Структура HTML-документа HTML (HyperText Markup Language) — это язык разметки, который определяет структуру и содержимое веб-страницы. Его код состоит из эле...\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:url\",\"content\":\"https://prepbro.ru/questions/kak-vyglyadit-html-kod\"}],[\"$\",\"meta\",\"7\",{\"name\":\"twitter:card\",\"content\":\"summary\"}],[\"$\",\"meta\",\"8\",{\"name\":\"twitter:title\",\"content\":\"Как выглядит HTML - код | PrepBro\"}],[\"$\",\"meta\",\"9\",{\"name\":\"twitter:description\",\"content\":\"Структура HTML-документа HTML (HyperText Markup Language) — это язык разметки, который определяет структуру и содержимое веб-страницы. Его код состоит из эле...\"}],[\"$\",\"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:T1aba,"])</script><script>self.__next_f.push([1,"{\"@context\":\"https://schema.org\",\"@type\":\"QAPage\",\"mainEntity\":{\"@type\":\"Question\",\"name\":\"Как выглядит HTML - код\",\"dateCreated\":\"2026-02-01T11:45:25.984886Z\",\"answerCount\":2,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"## Структура HTML-документа\\n\\nHTML (HyperText Markup Language) — это язык разметки, который определяет **структуру и содержимое** веб-страницы. Его код состоит из элементов (тегов), которые обозначаются угловыми скобками `\u003c \u003e`. Каждый элемент обычно имеет открывающий и закрывающий тег, а между ними помещается контент. Вот как выглядит базовая структура HTML-страницы:\\n\\n```html\\n\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"ru\\\"\u003e\\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\u003c/head\u003e\\n\u003cbody\u003e\\n \u003cheader\u003e\\n \u003ch1\u003eДобро пожаловать!\u003c/h1\u003e\\n \u003cnav\u003e\\n \u003cul\u003e\\n \u003cli\u003e\u003ca href=\\\"#home\\\"\u003eГлавная\u003c/a\u003e\u003c/li\u003e\\n \u003cli\u003e\u003ca href=\\\"#about\\\"\u003eО нас\u003c/a\u003e\u003c/li\u003e\\n \u003cli\u003e\u003ca href=\\\"#contact\\\"\u003eКонтакты\u003c/a\u003e\u003c/li\u003e\\n \u003c/ul\u003e\\n \u003c/nav\u003e\\n \u003c/header\u003e\\n \u003cmain\u003e\\n \u003csection id=\\\"home\\\"\u003e\\n \u003ch2\u003eОсновной контент\u003c/h2\u003e\\n \u003cp\u003eЭто абзац текста с \u003cstrong\u003eжирным\u003c/strong\u003e выделением и \u003cem\u003eкурсивом\u003c/em\u003e.\u003c/p\u003e\\n \u003cimg src=\\\"image.jpg\\\" alt=\\\"Описание изображения\\\" width=\\\"300\\\"\u003e\\n \u003cbutton onclick=\\\"alert('Привет!')\\\"\u003eНажми меня\u003c/button\u003e\\n \u003c/section\u003e\\n \u003ctable\u003e\\n \u003ctr\u003e\\n \u003cth\u003eЗаголовок 1\u003c/th\u003e\\n \u003cth\u003eЗаголовок 2\u003c/th\u003e\\n \u003c/tr\u003e\\n \u003ctr\u003e\\n \u003ctd\u003eДанные 1\u003c/td\u003e\\n \u003ctd\u003eДанные 2\u003c/td\u003e\\n \u003c/tr\u003e\\n \u003c/table\u003e\\n \u003c/main\u003e\\n \u003cfooter\u003e\\n \u003cp\u003e\u0026copy; 2023 Мой сайт. Все права защищены.\u003c/p\u003e\\n \u003c/footer\u003e\\n \u003cscript src=\\\"script.js\\\"\u003e\u003c/script\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\\n```\\n\\n### Ключевые компоненты HTML-кода\\n\\n* **`\u003c!DOCTYPE html\u003e`**: Объявление типа документа, которое указывает браузеру, что это HTML5.\\n* **`\u003chtml\u003e`**: Корневой элемент всей страницы, обычно включает атрибут `lang` для указания языка.\\n* **`\u003chead\u003e`**: Секция с метаданными, не отображаемыми на странице, но важными для браузера и SEO.\\n * `\u003cmeta charset=\\\"UTF-8\\\"\u003e`: Задает кодировку символов (обязательно для корректного отображения кириллицы).\\n * `\u003ctitle\u003e`: Заголовок страницы, отображается во вкладке браузера.\\n * `\u003clink\u003e`: Подключает внешние ресурсы, например, CSS-стили.\\n* **`\u003cbody\u003e`**: Тело документа, где размещается весь видимый контент.\\n * **Семантические теги**: `\u003cheader\u003e`, `\u003cmain\u003e`, `\u003csection\u003e`, `\u003cfooter\u003e` — улучшают структуру и доступность.\\n * **Элементы контента**: `\u003ch1\u003e`-`\u003ch6\u003e` (заголовки), `\u003cp\u003e` (абзац), `\u003ca\u003e` (ссылка), `\u003cimg\u003e` (изображение), `\u003cul\u003e`/`\u003col\u003e` (списки), `\u003ctable\u003e` (таблица).\\n * **Атрибуты**: Дополнительные параметры тегов, например, `href` у ссылки или `src` у изображения.\\n\\n### Особенности HTML с точки зрения QA Engineer\\n\\nПри тестировании веб-приложений важно проверять не только визуальный вид, но и корректность HTML-кода:\\n\\n* **Валидность и соответствие стандартам**: Код должен проходить проверку валидатором (например, W3C Validator), чтобы избежать ошибок вёрстки и проблем с кросс-браузерностью.\\n* **Семантическая корректность**: Использование тегов по назначению (например, `\u003cbutton\u003e` для кнопок, а не `\u003cdiv\u003e`) улучшает доступность для скринридеров и SEO.\\n* **Доступность (Accessibility)**: Атрибуты `alt` у изображений, `aria-*` для элементов интерфейса, правильная иерархия заголовков.\\n* **Оптимизация производительности**: Минимизация вложенности, корректные размеры изображений, асинхронная загрузка скриптов.\\n* **Кросс-браузерная совместимость**: HTML-код должен корректно отображаться в разных браузерах (Chrome, Firefox, Safari, Edge) и на разных устройствах.\\n\\nДля инспектирования HTML-кода в ходе тестирования используйте **инструменты разработчика** в браузере (F12), которые позволяют:\\n- Просматривать и редактировать DOM в реальном времени.\\n- Проверять стили и вычисленные значения.\\n- Анализировать сетевые запросы и производительность.\\n- Эмулировать различные устройства и условия.\\n\\nТаким образом, HTML-код — это не просто текст с тегами, а фундамент веб-страницы, от качества которого напрямую зависит **функциональность, доступность и пользовательский опыт**. Для QA Engineer понимание HTML критически важно для эффективного тестирования, составления баг-репортов и взаимодействия с разработчиками.\",\"dateCreated\":\"2026-04-05T16:10:08.314073\",\"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:T18f0,"])</script><script>self.__next_f.push([1,"## Структура HTML-документа\n\nHTML (HyperText Markup Language) — это язык разметки, который определяет **структуру и содержимое** веб-страницы. Его код состоит из элементов (тегов), которые обозначаются угловыми скобками `\u003c \u003e`. Каждый элемент обычно имеет открывающий и закрывающий тег, а между ними помещается контент. Вот как выглядит базовая структура HTML-страницы:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"ru\"\u003e\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\u003c/head\u003e\n\u003cbody\u003e\n \u003cheader\u003e\n \u003ch1\u003eДобро пожаловать!\u003c/h1\u003e\n \u003cnav\u003e\n \u003cul\u003e\n \u003cli\u003e\u003ca href=\"#home\"\u003eГлавная\u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#about\"\u003eО нас\u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#contact\"\u003eКонтакты\u003c/a\u003e\u003c/li\u003e\n \u003c/ul\u003e\n \u003c/nav\u003e\n \u003c/header\u003e\n \u003cmain\u003e\n \u003csection id=\"home\"\u003e\n \u003ch2\u003eОсновной контент\u003c/h2\u003e\n \u003cp\u003eЭто абзац текста с \u003cstrong\u003eжирным\u003c/strong\u003e выделением и \u003cem\u003eкурсивом\u003c/em\u003e.\u003c/p\u003e\n \u003cimg src=\"image.jpg\" alt=\"Описание изображения\" width=\"300\"\u003e\n \u003cbutton onclick=\"alert('Привет!')\"\u003eНажми меня\u003c/button\u003e\n \u003c/section\u003e\n \u003ctable\u003e\n \u003ctr\u003e\n \u003cth\u003eЗаголовок 1\u003c/th\u003e\n \u003cth\u003eЗаголовок 2\u003c/th\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eДанные 1\u003c/td\u003e\n \u003ctd\u003eДанные 2\u003c/td\u003e\n \u003c/tr\u003e\n \u003c/table\u003e\n \u003c/main\u003e\n \u003cfooter\u003e\n \u003cp\u003e\u0026copy; 2023 Мой сайт. Все права защищены.\u003c/p\u003e\n \u003c/footer\u003e\n \u003cscript src=\"script.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Ключевые компоненты HTML-кода\n\n* **`\u003c!DOCTYPE html\u003e`**: Объявление типа документа, которое указывает браузеру, что это HTML5.\n* **`\u003chtml\u003e`**: Корневой элемент всей страницы, обычно включает атрибут `lang` для указания языка.\n* **`\u003chead\u003e`**: Секция с метаданными, не отображаемыми на странице, но важными для браузера и SEO.\n * `\u003cmeta charset=\"UTF-8\"\u003e`: Задает кодировку символов (обязательно для корректного отображения кириллицы).\n * `\u003ctitle\u003e`: Заголовок страницы, отображается во вкладке браузера.\n * `\u003clink\u003e`: Подключает внешние ресурсы, например, CSS-стили.\n* **`\u003cbody\u003e`**: Тело документа, где размещается весь видимый контент.\n * **Семантические теги**: `\u003cheader\u003e`, `\u003cmain\u003e`, `\u003csection\u003e`, `\u003cfooter\u003e` — улучшают структуру и доступность.\n * **Элементы контента**: `\u003ch1\u003e`-`\u003ch6\u003e` (заголовки), `\u003cp\u003e` (абзац), `\u003ca\u003e` (ссылка), `\u003cimg\u003e` (изображение), `\u003cul\u003e`/`\u003col\u003e` (списки), `\u003ctable\u003e` (таблица).\n * **Атрибуты**: Дополнительные параметры тегов, например, `href` у ссылки или `src` у изображения.\n\n### Особенности HTML с точки зрения QA Engineer\n\nПри тестировании веб-приложений важно проверять не только визуальный вид, но и корректность HTML-кода:\n\n* **Валидность и соответствие стандартам**: Код должен проходить проверку валидатором (например, W3C Validator), чтобы избежать ошибок вёрстки и проблем с кросс-браузерностью.\n* **Семантическая корректность**: Использование тегов по назначению (например, `\u003cbutton\u003e` для кнопок, а не `\u003cdiv\u003e`) улучшает доступность для скринридеров и SEO.\n* **Доступность (Accessibility)**: Атрибуты `alt` у изображений, `aria-*` для элементов интерфейса, правильная иерархия заголовков.\n* **Оптимизация производительности**: Минимизация вложенности, корректные размеры изображений, асинхронная загрузка скриптов.\n* **Кросс-браузерная совместимость**: HTML-код должен корректно отображаться в разных браузерах (Chrome, Firefox, Safari, Edge) и на разных устройствах.\n\nДля инспектирования HTML-кода в ходе тестирования используйте **инструменты разработчика** в браузере (F12), которые позволяют:\n- Просматривать и редактировать DOM в реальном времени.\n- Проверять стили и вычисленные значения.\n- Анализировать сетевые запросы и производительность.\n- Эмулировать различные устройства и условия.\n\nТаким образом, HTML-код — это не просто текст с тегами, а фундамент веб-страницы, от качества которого напрямую зависит **функциональность, доступность и пользовательский опыт**. Для QA Engineer понимание 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\":\"5fde4518-43e6-41b8-958b-7669f7fdaa9e\",\"type\":\"question\",\"profession_id\":\"6f0a7406-8a3c-4b2f-a151-3d6beb08e19c\",\"profession_slug\":\"qa\",\"slug\":\"kak-vyglyadit-html-kod\",\"title\":\"Как выглядит HTML - код\",\"text\":null,\"grade_score\":2,\"grade_votes_count\":5,\"tags\":[\"Веб-тестирование\",\"Инструменты тестирования\"],\"solved_count\":0,\"comments_count\":2,\"frequency\":2,\"created_at\":\"2026-02-01T11:45:25.984886Z\",\"user_vote\":null,\"is_solved_by_me\":null,\"is_seen_on_interview\":null,\"llm_answer\":{\"id\":\"1c4f7907-e3d6-40fe-a495-1d81b0a42c63\",\"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:10:08.314073\",\"updated_at\":\"2026-04-05T16:12:38.189866\",\"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\":\"5fde4518-43e6-41b8-958b-7669f7fdaa9e\",\"questionTitle\":\"Как выглядит HTML - код\"}]}]\n1e:T18f0,"])</script><script>self.__next_f.push([1,"## Структура HTML-документа\n\nHTML (HyperText Markup Language) — это язык разметки, который определяет **структуру и содержимое** веб-страницы. Его код состоит из элементов (тегов), которые обозначаются угловыми скобками `\u003c \u003e`. Каждый элемент обычно имеет открывающий и закрывающий тег, а между ними помещается контент. Вот как выглядит базовая структура HTML-страницы:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"ru\"\u003e\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\u003c/head\u003e\n\u003cbody\u003e\n \u003cheader\u003e\n \u003ch1\u003eДобро пожаловать!\u003c/h1\u003e\n \u003cnav\u003e\n \u003cul\u003e\n \u003cli\u003e\u003ca href=\"#home\"\u003eГлавная\u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#about\"\u003eО нас\u003c/a\u003e\u003c/li\u003e\n \u003cli\u003e\u003ca href=\"#contact\"\u003eКонтакты\u003c/a\u003e\u003c/li\u003e\n \u003c/ul\u003e\n \u003c/nav\u003e\n \u003c/header\u003e\n \u003cmain\u003e\n \u003csection id=\"home\"\u003e\n \u003ch2\u003eОсновной контент\u003c/h2\u003e\n \u003cp\u003eЭто абзац текста с \u003cstrong\u003eжирным\u003c/strong\u003e выделением и \u003cem\u003eкурсивом\u003c/em\u003e.\u003c/p\u003e\n \u003cimg src=\"image.jpg\" alt=\"Описание изображения\" width=\"300\"\u003e\n \u003cbutton onclick=\"alert('Привет!')\"\u003eНажми меня\u003c/button\u003e\n \u003c/section\u003e\n \u003ctable\u003e\n \u003ctr\u003e\n \u003cth\u003eЗаголовок 1\u003c/th\u003e\n \u003cth\u003eЗаголовок 2\u003c/th\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eДанные 1\u003c/td\u003e\n \u003ctd\u003eДанные 2\u003c/td\u003e\n \u003c/tr\u003e\n \u003c/table\u003e\n \u003c/main\u003e\n \u003cfooter\u003e\n \u003cp\u003e\u0026copy; 2023 Мой сайт. Все права защищены.\u003c/p\u003e\n \u003c/footer\u003e\n \u003cscript src=\"script.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Ключевые компоненты HTML-кода\n\n* **`\u003c!DOCTYPE html\u003e`**: Объявление типа документа, которое указывает браузеру, что это HTML5.\n* **`\u003chtml\u003e`**: Корневой элемент всей страницы, обычно включает атрибут `lang` для указания языка.\n* **`\u003chead\u003e`**: Секция с метаданными, не отображаемыми на странице, но важными для браузера и SEO.\n * `\u003cmeta charset=\"UTF-8\"\u003e`: Задает кодировку символов (обязательно для корректного отображения кириллицы).\n * `\u003ctitle\u003e`: Заголовок страницы, отображается во вкладке браузера.\n * `\u003clink\u003e`: Подключает внешние ресурсы, например, CSS-стили.\n* **`\u003cbody\u003e`**: Тело документа, где размещается весь видимый контент.\n * **Семантические теги**: `\u003cheader\u003e`, `\u003cmain\u003e`, `\u003csection\u003e`, `\u003cfooter\u003e` — улучшают структуру и доступность.\n * **Элементы контента**: `\u003ch1\u003e`-`\u003ch6\u003e` (заголовки), `\u003cp\u003e` (абзац), `\u003ca\u003e` (ссылка), `\u003cimg\u003e` (изображение), `\u003cul\u003e`/`\u003col\u003e` (списки), `\u003ctable\u003e` (таблица).\n * **Атрибуты**: Дополнительные параметры тегов, например, `href` у ссылки или `src` у изображения.\n\n### Особенности HTML с точки зрения QA Engineer\n\nПри тестировании веб-приложений важно проверять не только визуальный вид, но и корректность HTML-кода:\n\n* **Валидность и соответствие стандартам**: Код должен проходить проверку валидатором (например, W3C Validator), чтобы избежать ошибок вёрстки и проблем с кросс-браузерностью.\n* **Семантическая корректность**: Использование тегов по назначению (например, `\u003cbutton\u003e` для кнопок, а не `\u003cdiv\u003e`) улучшает доступность для скринридеров и SEO.\n* **Доступность (Accessibility)**: Атрибуты `alt` у изображений, `aria-*` для элементов интерфейса, правильная иерархия заголовков.\n* **Оптимизация производительности**: Минимизация вложенности, корректные размеры изображений, асинхронная загрузка скриптов.\n* **Кросс-браузерная совместимость**: HTML-код должен корректно отображаться в разных браузерах (Chrome, Firefox, Safari, Edge) и на разных устройствах.\n\nДля инспектирования HTML-кода в ходе тестирования используйте **инструменты разработчика** в браузере (F12), которые позволяют:\n- Просматривать и редактировать DOM в реальном времени.\n- Проверять стили и вычисленные значения.\n- Анализировать сетевые запросы и производительность.\n- Эмулировать различные устройства и условия.\n\nТаким образом, HTML-код — это не просто текст с тегами, а фундамент веб-страницы, от качества которого напрямую зависит **функциональность, доступность и пользовательский опыт**. Для QA Engineer понимание HTML критически важно для эффективного тестирования, составления баг-репортов и взаимодействия с разработчиками."])</script><script>self.__next_f.push([1,"1b:[\"$\",\"div\",null,{\"className\":\"mt-8\",\"children\":[\"$\",\"$L1d\",null,{\"questionId\":\"5fde4518-43e6-41b8-958b-7669f7fdaa9e\",\"commentsCount\":2,\"initialComments\":[{\"id\":\"1c4f7907-e3d6-40fe-a495-1d81b0a42c63\",\"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:10:08.314073\",\"updated_at\":\"2026-04-05T16:12:38.189866\",\"parent_id\":null,\"replies\":[]}],\"initialMeta\":{\"page\":1,\"per_page\":20,\"total\":1,\"progress\":null}}]}]\n"])</script></body></html>