\n\n\n

Заголовок сайта

\n \n

Основное содержимое

Это пример текста в разделе.

\n \n\n\n```\n\nРазберём каждый компонент подробно:\n\n1. **``** — декларация типа документа. Она указывает браузеру, что документ соответствует стандарту **HTML5**. Это обязательный элемент, который должен быть первой строкой в файле. Без него браузер может некорректно интерпретировать разметку.\n\n2. **Элемент ``** — корневой контейнер для всего HTML-документа. Атрибут `lang` (например, `lang=\"ru\"`) задаёт язык содержимого, что важно для **SEO** и accessibility (например, для screen readers).\n\n3. **Секция ``** — содержит метаинформацию о странице, которая не отображается непосредственно в браузере, но влияет на её поведение и представление:\n * **``** — определяет кодировку символов (обычно UTF-8 для поддержки всех языков).\n * **``** — контролирует масштабирование и адаптацию для мобильных устройств (ключевой элемент для **responsive design**).\n * **``** — задаёт заголовок страницы, который отображается в title браузера и важен для **SEO**.\n * **`<link>`** — используется для подключения внешних ресурсов, таких как **CSS** файлы стилей.\n * **`<script>`** — может включать JavaScript файлы; атрибут `defer` указывает, что скрипт должен выполняться после загрузки DOM.\n\n4. **Секция `<body>`** — содержит всё видимое содержимое страницы, которое отображается пользователю. Она структурируется с помощью семантических тегов:\n * **`<header>`** — обычно включает логотип, заголовок и основную навигацию.\n * **`<nav>`** — блок для навигационных ссылок по сайту.\n * **`<main>`** — основное уникальное содержимое страницы (должен быть один на странице).\n * **`<section>`** — логический раздел содержимого, часто с собственным заголовком.\n * **`<footer>`** — завершающая часть с дополнительной информацией (контакты, copyright).\n\n### Принципы и лучшие практики\n\n* **Семантическая разметка**: использование тегов по их назначению (например, `<article>` для независимых статей) улучшает доступность и **SEO**.\n* **Иерархия заголовков**: соблюдение порядка `<h1>` → `<h2>` → `<h3>` помогает структурировать содержание.\n* **Подключение ресурсов**: CSS обычно подключается в `<head>`, а JavaScript — перед закрытием `<body>` или с атрибутами `defer/async` для оптимизации загрузки.\n* **Базовая адаптивность**: метатег `viewport` и использование относительных единиц (например, %) в CSS обеспечивают отображение на разных устройствах.\n\nЭта структура является фундаментом для любого веб-проекта и должна быть хорошо организована для дальнейшего расширения функциональности с помощью **CSS** и **JavaScript**.","dateCreated":"2026-04-04T22:35:33.810156","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":"Frontend","item":"https://prepbro.ru/professions/frontend/questions"},{"@type":"ListItem","position":3,"name":"Вопросы","item":"https://prepbro.ru/professions/frontend/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/frontend/questions">Frontend</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/frontend/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/frontend/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, 52.9375%, 87.6875%);color:hsl(45, 65.75%, 27.125%)">1.8 Middle</span><span class="rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-700" title="Частота на собеседованиях">🔥 20</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">#HTML и CSS</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">4 апр. 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-страницы представляет собой скелет, который определяет разметку и содержимое документа, предназначенного для отображения в веб-браузере. Она состоит из обязательных элементов, которые обеспечивают корректную работу страницы, её доступность для поисковых систем и совместимость с различными устройствами. Основная структура задаётся тегами, которые образуют дерево документа — DOM (Document Object Model).</p> <h3 class="text-base font-semibold text-content-primary mt-4 mb-2">Основные элементы структуры</h3> <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">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> <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">"/"</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-tag"><<span class="hljs-name">main</span>></span> <span class="hljs-tag"><<span class="hljs-name">section</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">p</span>></span> <span class="hljs-tag"></<span class="hljs-name">section</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>© 2024 Моя компания<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> <span class="hljs-tag"></<span class="hljs-name">html</span>></span> </code></pre> <p class="text-sm text-content-primary mb-3 leading-relaxed">Разберём каждый компонент подробно:</p> <ol class="list-decimal list-inside text-sm text-content-primary mb-3 space-y-1"> <li class="text-sm text-content-primary"> <p class="text-sm text-content-primary mb-3 leading-relaxed"><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> — декларация типа документа. Она указывает браузеру, что документ соответствует стандарту <strong class="font-semibold text-content-primary">HTML5</strong>. Это обязательный элемент, который должен быть первой строкой в файле. Без него браузер может некорректно интерпретировать разметку.</p> </li> <li class="text-sm text-content-primary"> <p class="text-sm text-content-primary mb-3 leading-relaxed"><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> — корневой контейнер для всего HTML-документа. Атрибут <code class="rounded bg-surface-tertiary px-1.5 py-0.5 text-xs font-mono text-link-hover" node="[object Object]">lang</code> (например, <code class="rounded bg-surface-tertiary px-1.5 py-0.5 text-xs font-mono text-link-hover" node="[object Object]">lang="ru"</code>) задаёт язык содержимого, что важно для <strong class="font-semibold text-content-primary">SEO</strong> и accessibility (например, для screen readers).</p> </li> <li class="text-sm text-content-primary"> <p class="text-sm text-content-primary mb-3 leading-relaxed"><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> — содержит метаинформацию о странице, которая не отображается непосредственно в браузере, но влияет на её поведение и представление:</p> </li> </ol> <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">`** — определяет кодировку символов (обычно UTF-8 для поддержки всех языков). * **`<meta name="viewport">`** — контролирует масштабирование и адаптацию для мобильных устройств (ключевой элемент для **responsive design**). * **`<title>`** — задаёт заголовок страницы, который отображается в title браузера и важен для **SEO**. * **`<link>`** — используется для подключения внешних ресурсов, таких как **CSS** файлы стилей. * **`<script>`** — может включать JavaScript файлы; атрибут `defer` указывает, что скрипт должен выполняться после загрузки DOM. </code></pre> <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">Секция <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> </ol> <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>`** — обычно включает логотип, заголовок и основную навигацию. * **`<nav>`** — блок для навигационных ссылок по сайту. * **`<main>`** — основное уникальное содержимое страницы (должен быть один на странице). * **`<section>`** — логический раздел содержимого, часто с собственным заголовком. * **`<footer>`** — завершающая часть с дополнительной информацией (контакты, copyright). </code></pre> <h3 class="text-base font-semibold text-content-primary mt-4 mb-2">Принципы и лучшие практики</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">Семантическая разметка</strong>: использование тегов по их назначению (например, <code class="rounded bg-surface-tertiary px-1.5 py-0.5 text-xs font-mono text-link-hover" node="[object Object]"><article></code> для независимых статей) улучшает доступность и <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>: соблюдение порядка <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]"><h2></code> → <code class="rounded bg-surface-tertiary px-1.5 py-0.5 text-xs font-mono text-link-hover" node="[object Object]"><h3></code> помогает структурировать содержание.</li> <li class="text-sm text-content-primary"><strong class="font-semibold text-content-primary">Подключение ресурсов</strong>: CSS обычно подключается в <code class="rounded bg-surface-tertiary px-1.5 py-0.5 text-xs font-mono text-link-hover" node="[object Object]"><head></code>, а JavaScript — перед закрытием <code class="rounded bg-surface-tertiary px-1.5 py-0.5 text-xs font-mono text-link-hover" node="[object Object]"><body></code> или с атрибутами <code class="rounded bg-surface-tertiary px-1.5 py-0.5 text-xs font-mono text-link-hover" node="[object Object]">defer/async</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]">viewport</code> и использование относительных единиц (например, %) в CSS обеспечивают отображение на разных устройствах.</li> </ul> <p class="text-sm text-content-primary mb-3 leading-relaxed">Эта структура является фундаментом для любого веб-проекта и должна быть хорошо организована для дальнейшего расширения функциональности с помощью <strong class="font-semibold text-content-primary">CSS</strong> и <strong class="font-semibold text-content-primary">JavaScript</strong>.</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>requestAnimationFrame(function(){$RT=performance.now()});</script><script src="/_next/static/chunks/5ffdb00edfe2eeb6.js" id="_R_" async=""></script><title>Опиши базовую структуру HTML страницы | PrepBro