Создание сайтов2022-06-10

Основные теги HTML для создания сайта: полный практический гид

Основные теги HTML для создания сайта: полный практический гид

Подробный практический гид по основным тегам HTML для создания и SEO‑оптимизации сайта. Советы по семантике, атрибутам и структуре страницы ✅

Короткий ответ: Для создания сайта необходим базовый набор семантических и технических тегов: , , с , , мета‑описаниями и каноником, а в <body> — <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>, заголовки <h1>–<h6>, абзацы <p>, ссылки <a>, изображения <img>/<picture>, формы <form>/<input>, списки <ul>/<ol>, таблицы, а также вспомогательные теги для мультимедиа и SEO. Этот набор нужен для корректной индексации, доступности и удобства разработки.</p></div> <h1>Какие теги HTML нужны для сайта</h1> <nav aria-label="Краткое содержание"> <h2 id="toc-title">Краткое содержание</h2> <ul> <li><a href="#why-semantics">Почему семантика HTML важна для сайта и SEO</a></li> <li><a href="#doctype-head"><!DOCTYPE> и <head>: обязательные мета‑теги</a></li> <li><a href="#structure-body">Структура <body>: header, nav, main, section, article, aside, footer</a></li> <li><a href="#text-media">Текстовые и медиа‑теги: h1–h6, p, a, img, picture, figure</a></li> <li><a href="#forms-tables">Формы, таблицы и элементы взаимодействия</a></li> <li><a href="#seo-tags">SEO‑важные теги и атрибуты: meta, canonical, robots, structured data</a></li> <li><a href="#accessibility">Доступность и ARIA: какие теги и атрибуты использовать</a></li> <li><a href="#performance">Производительность, критический HTML и приоритет загрузки</a></li> <li><a href="#best-practices">Практические рекомендации и чек‑лист</a></li> <li><a href="#faq">FAQ</a></li> <li><a href="#cta">Как мы помогаем с версткой и SEO</a></li> </ul> </nav> <hr> <section id="why-semantics"> <h2 id="почему-семантика-html-важна-для-сайта-и-seo">Почему семантика HTML важна для сайта и SEO</h2> <p>Семантическая HTML‑структура — это не только про чистоту кода. Для бизнеса она решает три ключевые задачи:</p> <ul> <li>Поисковая оптимизация: правильные теги (например, <code><h1></code>, <code><article></code>, <code><main></code>) помогают поисковикам понимать, где находятся важные блоки контента.</li> <li>Доступность и UX: семантические теги улучшают навигацию для людей с ограничениями и для голосовых помощников, повышая конверсию.</li> <li>Поддержка и масштабируемость: понятная структура упрощает работу разработчиков и маркетологов при расширении или миграции сайта.</li> </ul> <p>С точки зрения маркетинга: SEO — стабильный накопительный канал. Инвестиции в корректную семантику HTML повышают качество индексации и снижают CPL/CPA со временем. Платная реклама хорошо запускает трафик, но фундамент — корректная структура и контент на странице.</p> </section> <section id="doctype-head"> <h2 id="и-обязательные-метатеги"><!DOCTYPE> и <head>: обязательные мета‑теги</h2> <h3 id="1">1. <!DOCTYPE html></h3> <p>Первой строкой в документе должен быть <!DOCTYPE html>. Это переключает браузер в стандартный режим и необходим для предсказуемого рендера.</p> <h3 id="2-тег-и-его-содержимое">2. Тег <head> и его содержимое</h3> <p>Внутри <code><head></code> размещаются данные, важные для браузеров и поисковиков, но которые не отображаются напрямую пользователю:</p> <ul> <li><code><meta charset="utf-8"></code> — кодировка.</li> <li><code><meta name="viewport" content="width=device-width,initial-scale=1"></code> — адаптивность.</li> <li><code><title></code> — заголовок вкладки и важный элемент для SEO.</li> <li><code><meta name="description" content="..."></code> — сниппет в выдаче (приоритетно для пользователей).</li> <li><code><link rel="canonical" href="..."></code> — каноническая ссылка для борьбы с дублированием.</li> <li><code><meta name="robots" content="index,follow"></code> — управление индексацией.</li> <li><code><link rel="stylesheet" href="..."></code> и <code><script></code> — подключение ресурсов (но скрипты лучше размещать в конце body или с async/defer).</li> </ul> <h3 id="пример-базового-head">Пример базового head</h3> <pre><code><!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Заголовок страницы — услуга или продукт

Структура : header, nav, main, section, article, aside, footer

Стандартная семантическая оболочка страницы выглядит так:


  
...
...
...

Ключевые правила и значение блоков

  • — логотип, контактные данные, глобальное CTA. Внутри можно иметь навигацию и поиск.
  • — основной контент страницы, должен быть только один на странице.
  • — самостоятельный фрагмент контента (страница блога, карточка товара, новость).
  • — логический раздел внутри
    или
    (например, преимущества, блок отзывов).
  • — контакты, копирайты, ссылки на политику конфиденциальности.

Для SEO важно:

содержал основную текстовую семантику, а заголовки внутри были иерархичны (один

, далее

,

и т.д.).

Текстовые и медиа‑теги: h1–h6, p, a, img, picture, figure

Заголовки H1–H6

Заголовки задают структуру текста. Практические правила:

  • На странице должен быть ровно один

    , он отражает основную тему (ключевой запрос SEO).

  • Дальше используйте

    /

    для логических разделов. Не прыгайте через уровни без причины.

  • Заголовки должны быть релевантны контенту: это помогает ранжированию и удобству чтения.

Параграфы и списки

для простого текста,

Формы, таблицы и элементы взаимодействия

Формы:
, ,

Формы — основной способ получения лидов. Что важно:

  • Каждое поле должно иметь для доступности.
  • Используйте корректные типы полей: type="email", type="tel", type="submit".
  • Разбейте длинные формы на шаги, измеряйте CPL по каждому варианту.
  • Защищайте формы от спама: reCAPTCHA, honeypot, проверка на сервере.

Таблицы

Таблицы подходят для табличных данных (цен, характеристик). Для SEO и доступности:

  • Используйте , , для заголовков.
  • Добавляйте caption и семантические подписи, если таблица сложная.
Сравнение тарифов
ТарифЦенаОсобенности
Базовый10 000...

SEO‑важные теги и атрибуты: meta, canonical, robots, structured data

Для долгосрочного SEO‑роста критичны не только видимые элементы, но и метаинформация.

Meta Description и Title

Title должен быть уникальным и содержать ключевой запрос естественно. Meta description — краткое, продающее описание, которое влияет на CTR. Не дублируйте сниппеты на сотнях страниц.

Canonical

Используйте там, где есть варианты одной и той же страницы (параметры URL, пагинация), чтобы избежать дробления релевантности.

Meta robots

Контролируйте индексацию страниц с помощью robots и X‑Robots‑Tag на уровне сервера для тонкого управления.

Структурированные данные (JSON‑LD)

Structured data помогает поисковым системам отображать расширенные сниппеты (ограничение на внешние сервисы отсутствует). Примеры: Organization, BreadcrumbList, Product, Article. Вставляйте JSON‑LD в или перед закрывающим .

Доступность и ARIA: какие теги и атрибуты использовать

Доступность повышает охват аудитории и улучшает UX. Основные практики:

  • Атрибут alt для изображений, aria‑label и aria‑hidden для интерактивных элементов.
  • Теги label для форм и логичная табуляция (tabindex).
  • Используйте role и landmark‑теги (nav, main, search) для экранных читалок.

Пример кнопки с ARIA:

Производительность, критический HTML и приоритет загрузки

SEO и UX зависят от скорости. Что важнее всего:

  • Минимизируйте критический CSS в и отложите остальное через media="print" onload="this.media='all'" или preload.
  • Оптимизируйте изображения и используйте lazy loading: loading="lazy" у по умолчанию.
  • Скрипты с тяжелой логикой грузите с defer или асинхронно.
  • Используйте preconnect/preload для критичных ресурсов (шрифты, API).

Измеряйте LCP/CLS/FID и корректируйте разметку, чтобы снизить показатель отказов и повысить органический трафик.

Практические рекомендации и чек‑лист

Короткий чек‑лист перед релизом страницы:

  1. Проверьте, что есть ровно один

    и он соответствует целевому запросу.

  2. Title и meta description уникальны и оптимизированы под CTR.
  3. Все изображения имеют alt, указаны размеры и оптимизированы.
  4. Страница имеет корректный canonical и нет дублирующих URL.
  5. Формы валидируются на клиенте и сервере, есть защита от спама.
  6. Критический CSS минимизирован, скрипты не блокируют рендер.
  7. Структурированные данные добавлены для релевантных сущностей.
  8. Проверена доступность основных интерактивных элементов.

Частые ошибки

  • Множественные H1 на странице.
  • Пустые или бесполезные alt‑тексты («image1.jpg»).
  • Полный контент в картинках вместо текста (SEO‑провал).
  • Скрипты в head без defer, блокирующие рендер.

FAQ

1. Какие теги HTML обязательно должен содержать любой сайт?

Минимум: , , с , </code>, <code><meta name="viewport"></code> и валидный <code><body></code> с семантической обёрткой (<code><header></code>, <code><main></code>, <code><footer></code>), а также текстовый контент в <code><h1></code> и <code><p></code>.</p> <h3 id="2-сколько-h1-должно-быть-на-странице-и-почему">2. Сколько H1 должно быть на странице и почему?</h3> <p>Рекомендуется один <code><h1></code>. Это помогает поисковым системам и пользователям понять основную тему страницы. Технически можно использовать несколько, но это усложняет семантику и рискованно для SEO.</p> <h3 id="3-какой-атрибут-img-важен-для-seo">3. Какой атрибут img важен для SEO?</h3> <p>Главный атрибут — <code>alt</code>. Он описывает изображение, помогает доступности и поисковой индексации изображений. Также важны размеры (width/height) и адаптивные форматы через <code>srcset</code>/<code>picture</code>.</p> <h3 id="4-нужны-ли-структурированные-данные-на-сайте">4. Нужны ли структурированные данные на сайте?</h3> <p>Да. JSON‑LD помогает поисковикам лучше понять содержимое страницы и может привести к расширенным сниппетам, что повышает CTR и качество трафика.</p> <h3 id="5-можно-ли-скрывать-текст-от-пользователей-внутри-html-для-seo">5. Можно ли скрывать текст от пользователей внутри HTML для SEO?</h3> <p>Нет. Скрытый текст, созданный исключительно для поисковиков (например, display:none с ключевыми словами), может привести к санкциям. Любой текст должен быть полезен пользователю.</p> </section> <section id="cta"> <h2 id="как-мы-помогаем-с-версткой-и-seo">Как мы помогаем с версткой и SEO</h2> <p>В Rose Digital мы строим сайт на базе семантической и оптимизированной HTML‑разметки, связывая фронт‑энд и SEO таким образом, чтобы ваша инвестиция работала годами. Мы фокусируемся на бизнес‑метриках: снижении CPL/CPA, повышении ROMI и долгосрочном росте органического трафика. Контекстная реклама используется как дополнительный ускоритель запуска трафика, но фундаментом остаётся SEO.</p> <p>Если вам нужна комплексная работа — от создания корректной HTML‑структуры до масштабного продвижения — мы делаем это «под ключ», с учётом воронки и unit‑экономики. Посмотрите наши примеры работ в разделе <a href="/cases">кейсы агентства</a> и узнайте про создание и продвижение сайтов в услуге <a href="/sozdanie-i-prodvizhenie-saitov">услуги создания и продвижения сайтов</a>.</p> </section> <hr> <footer> <p>Если нужна консультация по HTML‑разметке, оптимизации страниц или плану продвижения — напишите, и мы подготовим план с оценкой ROMI и прогнозом роста органики.</p> </footer> </div><div class="mt-16 pt-8 border-t border-white/5"><div class="bg-gradient-to-br from-gray-900 to-rose/5 border border-rose/20 rounded-2xl p-8"><div class="flex items-start gap-4"><div class="shrink-0 w-11 h-11 rounded-xl bg-rose/10 flex items-center justify-center text-rose text-xl">🚀</div><div class="flex-1 min-w-0"><h3 class="text-lg font-bold text-white mb-2">Сделаем сайт-лендинг под ключ</h3><p class="text-gray-400 text-sm leading-relaxed mb-5">Одностраничный сайт под вашу услугу за 7 дней — фикс 35 000 ₽, с базовой SEO. 17 живых примеров по нишам.</p><div class="flex flex-col sm:flex-row gap-3"><a class="inline-flex items-center justify-center px-5 py-2.5 bg-rose hover:bg-rose-light text-white text-sm font-semibold rounded-full transition-colors" href="/gotovye-resheniya">Смотреть решения →</a><a class="inline-flex items-center justify-center px-5 py-2.5 border border-white/15 hover:border-rose/40 text-gray-300 hover:text-rose text-sm font-medium rounded-full transition-colors" href="/#cta">Обсудить проект</a></div></div></div></div></div><div class="flex flex-wrap items-center gap-2 mt-2"><span class="text-xs text-gray-500 mr-1">Реакции:</span><button title="Полезно" class="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm border transition-all bg-white/5 border-white/10 text-gray-400 hover:border-rose/30 hover:text-white disabled:opacity-50"><span class="text-base leading-none">👍</span></button><button title="Нравится" class="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm border transition-all bg-white/5 border-white/10 text-gray-400 hover:border-rose/30 hover:text-white disabled:opacity-50"><span class="text-base leading-none">❤️</span></button><button title="Огонь" class="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm border transition-all bg-white/5 border-white/10 text-gray-400 hover:border-rose/30 hover:text-white disabled:opacity-50"><span class="text-base leading-none">🔥</span></button><button title="Интересно" class="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm border transition-all bg-white/5 border-white/10 text-gray-400 hover:border-rose/30 hover:text-white disabled:opacity-50"><span class="text-base leading-none">🤔</span></button><button title="Класс" class="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm border transition-all bg-white/5 border-white/10 text-gray-400 hover:border-rose/30 hover:text-white disabled:opacity-50"><span class="text-base leading-none">👏</span></button></div><aside class="mt-14 pt-10 border-t border-white/5 not-prose" aria-label="Читайте также"><h3 class="text-lg font-semibold mb-5">Читайте также</h3><div class="grid grid-cols-1 sm:grid-cols-2 gap-3"><a class="group block bg-gray-900 border border-white/5 hover:border-rose/25 rounded-xl p-4 transition-colors" href="/blog/znachenie-slova-lending"><span class="text-[11px] text-rose/70 font-medium uppercase tracking-wide">Создание сайтов</span><p class="mt-1.5 text-sm font-medium text-gray-300 group-hover:text-white transition-colors line-clamp-2 leading-snug">Значение слова лендинг: что это и как работает посадочная страница</p></a><a class="group block bg-gray-900 border border-white/5 hover:border-rose/25 rounded-xl p-4 transition-colors" href="/blog/zayavki-na-sozdanie-saytov"><span class="text-[11px] text-rose/70 font-medium uppercase tracking-wide">Создание сайтов</span><p class="mt-1.5 text-sm font-medium text-gray-300 group-hover:text-white transition-colors line-clamp-2 leading-snug">Как получать заявки на создание сайтов: SEO-стратегия и практические шаги</p></a><a class="group block bg-gray-900 border border-white/5 hover:border-rose/25 rounded-xl p-4 transition-colors" href="/blog/zarabotok-na-sozdanii-saytov"><span class="text-[11px] text-rose/70 font-medium uppercase tracking-wide">Создание сайтов</span><p class="mt-1.5 text-sm font-medium text-gray-300 group-hover:text-white transition-colors line-clamp-2 leading-snug">Заработок на создании сайтов: реальные модели, цены и как начать</p></a><a class="group block bg-gray-900 border border-white/5 hover:border-rose/25 rounded-xl p-4 transition-colors" href="/blog/zakazy-na-sozdanie-saytov"><span class="text-[11px] text-rose/70 font-medium uppercase tracking-wide">Создание сайтов</span><p class="mt-1.5 text-sm font-medium text-gray-300 group-hover:text-white transition-colors line-clamp-2 leading-snug">Как получать заказы на создание сайтов: практическая инструкция для агентства и фрилансера</p></a></div></aside><section class="mt-14 pt-10 border-t border-white/5 not-prose"><h3 class="text-lg font-semibold mb-6">Комментарии</h3><p class="text-sm text-gray-600 mb-8">Комментариев пока нет. Будьте первым!</p><form class="bg-gray-900 border border-white/5 rounded-2xl p-5 space-y-4"><p class="text-sm font-medium text-gray-200">Оставить комментарий</p><input type="text" placeholder="Ваше имя *" maxLength="60" required="" class="w-full bg-black/30 border border-white/10 rounded-xl px-4 py-2.5 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-rose/40 transition-colors" value=""/><textarea placeholder="Комментарий (минимум 8 символов) *" minLength="8" maxLength="600" rows="4" required="" class="w-full bg-black/30 border border-white/10 rounded-xl px-4 py-2.5 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-rose/40 transition-colors resize-none"></textarea><div class="flex items-center justify-between gap-4"><span class="text-xs text-gray-600">0<!-- -->/600</span><button type="submit" class="px-5 py-2 bg-rose hover:bg-rose-light text-white text-sm font-semibold rounded-full transition-colors disabled:opacity-50">Отправить</button></div></form></section><nav class="mt-14 pt-10 border-t border-white/5 grid grid-cols-1 sm:grid-cols-2 gap-4" aria-label="Соседние статьи"><div class="min-w-0"><a class="block rounded-2xl border border-white/10 bg-gray-900/50 p-5 hover:border-rose/30 transition-colors" href="/blog/osnovnye-metriki-v-internet-marketinge"><span class="text-xs text-gray-500 uppercase tracking-wide">Предыдущая</span><p class="mt-2 font-semibold text-white line-clamp-2">Основные метрики в интернет‑маркетинге: какие KPI считать, как измерять и оптимизировать</p></a></div><div class="min-w-0 sm:text-right"><a class="block rounded-2xl border border-white/10 bg-gray-900/50 p-5 hover:border-rose/30 transition-colors sm:ml-auto" href="/blog/osnovnye-tseli-internet-marketinga"><span class="text-xs text-gray-500 uppercase tracking-wide">Следующая</span><p class="mt-2 font-semibold text-white line-clamp-2">Основные цели интернет-маркетинга: как поставить KPI и выбрать каналы</p></a></div></nav></div></article><!--$--><!--/$--></main><footer class="bg-gray-900 border-t border-white/5"><div class="max-w-7xl mx-auto px-6 py-16"><div class="grid grid-cols-1 md:grid-cols-4 gap-12"><div class="md:col-span-2"><a class="inline-flex mb-4 text-lg font-bold" href="/">Rose <span class="text-rose">Digital</span></a><p class="text-gray-500 text-sm max-w-sm leading-relaxed">Узнайте, почему ваш сайт не приносит клиентов. Автоматический анализ по 500+ факторам с готовым планом исправлений — до 15 минут.</p></div><div><p class="text-sm font-semibold text-white mb-4 uppercase tracking-wider">Навигация</p><ul class="space-y-3"><li><a class="text-sm text-gray-500 hover:text-rose transition-colors" href="/platnyj-seo-audit">Проверить сайт</a></li><li><a class="text-sm text-gray-500 hover:text-rose transition-colors" href="/besplatnyj-seo-audit">Бесплатный аудит</a></li><li><a class="text-sm text-gray-500 hover:text-rose transition-colors" href="/tarify-kalkulyator">Калькулятор стоимости</a></li><li><a class="text-sm text-gray-500 hover:text-rose transition-colors" href="/gotovye-resheniya">Готовые сайты по нишам</a></li><li><a class="text-sm text-gray-500 hover:text-rose transition-colors" href="/#uslugi">Услуги и цены</a></li><li><a class="text-sm text-gray-500 hover:text-rose transition-colors" href="/uslugi">SEO по городам</a></li><li><a class="text-sm text-gray-500 hover:text-rose transition-colors" href="/seo-prodvizhenie">SEO-продвижение</a></li><li><a class="text-sm text-gray-500 hover:text-rose transition-colors" href="/cases">Кейсы</a></li><li><a class="text-sm text-gray-500 hover:text-rose transition-colors" href="/blog">Блог</a></li><li><a class="text-sm text-gray-500 hover:text-rose transition-colors" href="/o-nas">О нас</a></li></ul></div><div><p class="text-sm font-semibold text-white mb-4 uppercase tracking-wider">Контакты</p><ul class="space-y-3"><li><a class="text-sm text-gray-500 hover:text-rose transition-colors" href="/kontakty">Страница контактов</a></li><li><a href="https://t.me/rosenberg_marketing" target="_blank" rel="noopener noreferrer" class="text-sm text-gray-400 hover:text-rose transition-colors inline-flex items-center gap-2"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M21.5 4.5a1 1 0 00-1.08-.17L3.64 11.13a1 1 0 00.06 1.86l3.9 1.3 1.3 3.91a1 1 0 001.67.43l2.18-2.17 3.96 2.64a1 1 0 001.53-.62l3-13a1 1 0 00-.74-1.18z"></path></svg>Telegram-канал</a></li><li><a href="mailto:rozenberg.arin@yandex.ru" class="text-sm text-gray-500 hover:text-rose transition-colors inline-flex items-center gap-2"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"></rect><path d="M4 7l8 6 8-6"></path></svg>rozenberg.arin@yandex.ru</a></li></ul></div></div><div class="mt-12 pt-8 border-t border-white/5 flex flex-col md:flex-row items-center justify-between gap-4"><div class="text-center md:text-left"><p class="text-xs text-gray-600">© <span>2026</span> Rose Digital. Все права защищены.</p><p class="text-xs text-gray-600 mt-1">ИП Розенберг Арина Владимировна · ИНН 744513659376 · ОГРНИП 323745600131028</p></div><div class="flex flex-col md:items-end gap-1"><p class="text-xs text-gray-600">Калининград · Россия</p><a class="text-xs text-gray-500 hover:text-rose transition-colors" href="/sitemap.xml">Карта сайта</a><a class="text-xs text-gray-500 hover:text-rose transition-colors" href="/privacy-policy">Политика конфиденциальности</a><a class="text-xs text-gray-500 hover:text-rose transition-colors" href="/oferta">Публичная оферта</a></div></div></div></footer><div class="fixed bottom-6 right-6 z-50 flex flex-col items-end gap-3"><button class="relative w-14 h-14 rounded-full shadow-xl flex items-center justify-center transition-all duration-200 bg-rose hover:bg-rose-light text-white" aria-label="Обсудить задачу"><span class="absolute top-1 right-1 w-3 h-3 rounded-full bg-emerald-400 animate-ping opacity-75"></span><span class="absolute top-1 right-1 w-3 h-3 rounded-full bg-emerald-400"></span><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg></button></div></div></div><script src="/_next/static/chunks/0ry-pko-bmqu9.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/0ig7zx63i06qz.js\",\"/_next/static/chunks/0l.50x6bylvek.js\",\"/_next/static/chunks/0ujws6nix.gg4.js\"],\"YandexMetrika\"]\n3:I[21582,[\"/_next/static/chunks/0ig7zx63i06qz.js\",\"/_next/static/chunks/0l.50x6bylvek.js\",\"/_next/static/chunks/0ujws6nix.gg4.js\"],\"SiteFrame\"]\n4:I[39756,[\"/_next/static/chunks/0ig7zx63i06qz.js\",\"/_next/static/chunks/0l.50x6bylvek.js\",\"/_next/static/chunks/0ujws6nix.gg4.js\"],\"default\"]\n5:I[53536,[\"/_next/static/chunks/0ig7zx63i06qz.js\",\"/_next/static/chunks/0l.50x6bylvek.js\",\"/_next/static/chunks/0ujws6nix.gg4.js\"],\"default\"]\ne:I[68027,[\"/_next/static/chunks/0ig7zx63i06qz.js\",\"/_next/static/chunks/0l.50x6bylvek.js\",\"/_next/static/chunks/0ujws6nix.gg4.js\"],\"default\",1]\n:HL[\"/_next/static/chunks/0wha1zz3wvqae.css\",\"style\"]\n:HL[\"/_next/static/chunks/0j6pzh-2bvbvh.css\",\"style\"]\n:HL[\"/_next/static/media/4e1c87b7aa9e2f2f-s.p.12gpghvmuotht.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/b4a06a523f527a0e-s.p.12~5rgo65usnz.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/b59689b1142d37ce-s.p.0f8~qglggluhl.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/cfdfbee4d6cf0a93-s.p.0hv9fgj3_s0zo.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"blog\",\"osnovnye-tegi-html-dlya-sozdaniya-sayta\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"blog\",{\"children\":[[\"slug\",\"osnovnye-tegi-html-dlya-sozdaniya-sayta\",\"d\",null],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",16],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0wha1zz3wvqae.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0j6pzh-2bvbvh.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0ig7zx63i06qz.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/0l.50x6bylvek.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/0ujws6nix.gg4.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"ru\",\"className\":\"unbounded_ea252918-module__3NX1oW__variable golos_text_f1d1138d-module__NFHl8W__variable h-full antialiased\",\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://fonts.googleapis.com\"}],[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://fonts.gstatic.com\",\"crossOrigin\":\"\"}],[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://mc.yandex.ru\"}],[\"$\",\"link\",null,{\"rel\":\"dns-prefetch\",\"href\":\"https://mc.yandex.ru\"}]]}],[\"$\",\"body\",null,{\"suppressHydrationWarning\":true,\"className\":\"min-h-screen flex flex-col bg-background text-foreground relative overflow-x-hidden\",\"children\":[[\"$\",\"$L2\",null,{}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"Organization\\\",\\\"name\\\":\\\"Rose Digital\\\",\\\"description\\\":\\\"SEO-агентство. Масштабное продвижение сайтов в Яндексе и Google.\\\",\\\"url\\\":\\\"https://rosedigital.ru\\\",\\\"logo\\\":{\\\"@type\\\":\\\"ImageObject\\\",\\\"url\\\":\\\"https://rosedigital.ru/brand/rose-digital-logo.png\\\"},\\\"email\\\":\\\"rozenberg.arin@yandex.ru\\\",\\\"founder\\\":{\\\"@type\\\":\\\"Person\\\",\\\"name\\\":\\\"Арина Розенберг\\\"},\\\"address\\\":{\\\"@type\\\":\\\"PostalAddress\\\",\\\"addressLocality\\\":\\\"Калининград\\\",\\\"addressCountry\\\":\\\"RU\\\"},\\\"areaServed\\\":{\\\"@type\\\":\\\"Country\\\",\\\"name\\\":\\\"Россия\\\"},\\\"sameAs\\\":[\\\"https://t.me/arinarosenberg\\\",\\\"https://t.me/rosenberg_marketing\\\"],\\\"knowsAbout\\\":[\\\"SEO\\\",\\\"Поисковая оптимизация\\\",\\\"Продвижение сайтов\\\",\\\"Контент-маркетинг\\\"]}\"}}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"ProfessionalService\\\",\\\"name\\\":\\\"Rose Digital\\\",\\\"description\\\":\\\"Масштабное SEO-продвижение сайтов. Выводим в ТОП Яндекса и Google через системное создание контента.\\\",\\\"url\\\":\\\"https://rosedigital.ru\\\",\\\"email\\\":\\\"rozenberg.arin@yandex.ru\\\",\\\"priceRange\\\":\\\"₽₽₽\\\",\\\"address\\\":{\\\"@type\\\":\\\"PostalAddress\\\",\\\"addressLocality\\\":\\\"Калининград\\\",\\\"addressRegion\\\":\\\"Калининградская область\\\",\\\"addressCountry\\\":\\\"RU\\\"},\\\"geo\\\":{\\\"@type\\\":\\\"GeoCoordinates\\\",\\\"latitude\\\":\\\"54.7104\\\",\\\"longitude\\\":\\\"20.4522\\\"},\\\"areaServed\\\":[{\\\"@type\\\":\\\"City\\\",\\\"name\\\":\\\"Калининград\\\"},{\\\"@type\\\":\\\"Country\\\",\\\"name\\\":\\\"Россия\\\"}]}\"}}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"WebSite\\\",\\\"name\\\":\\\"Rose Digital\\\",\\\"url\\\":\\\"https://rosedigital.ru\\\",\\\"description\\\":\\\"SEO-агентство Rose Digital — масштабное продвижение сайтов в Яндексе и Google.\\\",\\\"inLanguage\\\":\\\"ru\\\",\\\"potentialAction\\\":{\\\"@type\\\":\\\"SearchAction\\\",\\\"target\\\":{\\\"@type\\\":\\\"EntryPoint\\\",\\\"urlTemplate\\\":\\\"https://rosedigital.ru/blog?q={search_term_string}\\\"},\\\"query-input\\\":\\\"required name=search_term_string\\\"}}\"}}],[\"$\",\"$L3\",null,{\"children\":[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"section\",null,{\"className\":\"min-h-[70vh] flex items-center justify-center px-6 py-24\",\"children\":[\"$\",\"div\",null,{\"className\":\"max-w-xl mx-auto text-center\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-rose text-sm font-medium uppercase tracking-wider mb-3\",\"children\":\"Ошибка 404\"}],\"$L6\",\"$L7\",\"$L8\"]}]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]]}]]}]]}],{\"children\":[\"$L9\",{\"children\":[\"$La\",{\"children\":[\"$Lb\",{},null,false,null]},null,false,\"$@c\"]},null,false,\"$@c\"]},null,false,null],\"$Ld\",false]],\"m\":\"$undefined\",\"G\":[\"$e\",[\"$Lf\",\"$L10\"]],\"S\":true,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"BfEvlzRo2bEFJknXlnU98\"}\n"])</script><script>self.__next_f.push([1,"11:I[22016,[\"/_next/static/chunks/0ig7zx63i06qz.js\",\"/_next/static/chunks/0l.50x6bylvek.js\",\"/_next/static/chunks/0ujws6nix.gg4.js\",\"/_next/static/chunks/01vno5o0-y201.js\"],\"\"]\n13:I[97367,[\"/_next/static/chunks/0ig7zx63i06qz.js\",\"/_next/static/chunks/0l.50x6bylvek.js\",\"/_next/static/chunks/0ujws6nix.gg4.js\"],\"OutletBoundary\"]\n14:\"$Sreact.suspense\"\n17:I[97367,[\"/_next/static/chunks/0ig7zx63i06qz.js\",\"/_next/static/chunks/0l.50x6bylvek.js\",\"/_next/static/chunks/0ujws6nix.gg4.js\"],\"ViewportBoundary\"]\n19:I[97367,[\"/_next/static/chunks/0ig7zx63i06qz.js\",\"/_next/static/chunks/0l.50x6bylvek.js\",\"/_next/static/chunks/0ujws6nix.gg4.js\"],\"MetadataBoundary\"]\n6:[\"$\",\"h1\",null,{\"className\":\"text-4xl sm:text-5xl font-bold tracking-tight mb-4\",\"children\":\"Страница не найдена\"}]\n7:[\"$\",\"p\",null,{\"className\":\"text-gray-400 text-base sm:text-lg leading-relaxed mb-8\",\"children\":\"Возможно, ссылка устарела или страница была удалена. Вернитесь на главную и продолжите навигацию по сайту.\"}]\n8:[\"$\",\"$L11\",null,{\"href\":\"/\",\"className\":\"inline-flex items-center justify-center px-7 py-3.5 rounded-full bg-rose hover:bg-rose-light text-white font-semibold transition-colors\",\"children\":\"На главную\"}]\n9:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\na:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\nb:[\"$\",\"$1\",\"c\",{\"children\":[\"$L12\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/01vno5o0-y201.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L13\",null,{\"children\":[\"$\",\"$14\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@15\"}]}]]}]\n16:[]\nc:\"$W16\"\nd:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L17\",null,{\"children\":\"$L18\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L19\",null,{\"children\":[\"$\",\"$14\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L1a\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\nf:[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0wha1zz3wvqae.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\n10:[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0j6pzh-2bvbvh.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\n"])</script><script>self.__next_f.push([1,"18:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"2\",{\"name\":\"theme-color\",\"content\":\"#f03080\"}]]\n"])</script><script>self.__next_f.push([1,"1b:I[27201,[\"/_next/static/chunks/0ig7zx63i06qz.js\",\"/_next/static/chunks/0l.50x6bylvek.js\",\"/_next/static/chunks/0ujws6nix.gg4.js\"],\"IconMark\"]\n15:null\n"])</script><script>self.__next_f.push([1,"1a:[[\"$\",\"title\",\"0\",{\"children\":\"Основные теги HTML для создания сайта | Rose Digital\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Подробный практический гид по основным тегам HTML для создания и SEO‑оптимизации сайта. Советы по семантике, атрибутам и структуре страницы ✅\"}],[\"$\",\"meta\",\"2\",{\"name\":\"author\",\"content\":\"Арина Розенберг\"}],[\"$\",\"link\",\"3\",{\"rel\":\"manifest\",\"href\":\"/manifest.webmanifest\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"meta\",\"4\",{\"name\":\"keywords\",\"content\":\"SEO продвижение,SEO агентство,продвижение сайтов,SEO Калининград,масштабное SEO,поисковое продвижение,оптимизация сайта,вывод в ТОП,Rose Digital\"}],[\"$\",\"link\",\"5\",{\"rel\":\"canonical\",\"href\":\"https://rosedigital.ru/blog/osnovnye-tegi-html-dlya-sozdaniya-sayta\"}],[\"$\",\"meta\",\"6\",{\"name\":\"yandex-verification\",\"content\":\"a49e0e2269530453\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:title\",\"content\":\"Основные теги HTML для создания сайта\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:description\",\"content\":\"Подробный практический гид по основным тегам HTML для создания и SEO‑оптимизации сайта. Советы по семантике, атрибутам и структуре страницы ✅\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:image\",\"content\":\"https://rosedigital.ru/brand/rose-digital-og.png\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:image:alt\",\"content\":\"Основные теги HTML для создания сайта: полный практический гид\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"14\",{\"property\":\"article:published_time\",\"content\":\"2022-06-10\"}],[\"$\",\"meta\",\"15\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"16\",{\"name\":\"twitter:site\",\"content\":\"@arinarosenberg\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:creator\",\"content\":\"@arinarosenberg\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:title\",\"content\":\"Основные теги HTML для создания сайта\"}],[\"$\",\"meta\",\"19\",{\"name\":\"twitter:description\",\"content\":\"Подробный практический гид по основным тегам HTML для создания и SEO‑оптимизации сайта. Советы по семантике, атрибутам и структуре страницы ✅\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:image\",\"content\":\"https://rosedigital.ru/brand/rose-digital-og.png\"}],[\"$\",\"meta\",\"21\",{\"name\":\"twitter:image:alt\",\"content\":\"Основные теги HTML для создания сайта: полный практический гид\"}],[\"$\",\"meta\",\"22\",{\"name\":\"twitter:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"23\",{\"name\":\"twitter:image:height\",\"content\":\"630\"}],[\"$\",\"link\",\"24\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.15_4acp82rthk.ico\",\"sizes\":\"64x64\",\"type\":\"image/x-icon\"}],[\"$\",\"link\",\"25\",{\"rel\":\"icon\",\"href\":\"/icon.png?icon.0.tto9.okrz1y.png\",\"sizes\":\"512x512\",\"type\":\"image/png\"}],[\"$\",\"link\",\"26\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-icon.png?apple-icon.0.tto9.okrz1y.png\",\"sizes\":\"512x512\",\"type\":\"image/png\"}],[\"$\",\"$L1b\",\"27\",{}]]\n"])</script><script>self.__next_f.push([1,"12:[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"Article\\\",\\\"headline\\\":\\\"Основные теги HTML для создания сайта: полный практический гид\\\",\\\"description\\\":\\\"Подробный практический гид по основным тегам HTML для создания и SEO‑оптимизации сайта. Советы по семантике, атрибутам и структуре страницы ✅\\\",\\\"datePublished\\\":\\\"2022-06-10\\\",\\\"dateModified\\\":\\\"2022-06-10\\\",\\\"image\\\":\\\"https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800\u0026q=75\u0026auto=format\u0026fit=crop\\\",\\\"author\\\":{\\\"@type\\\":\\\"Person\\\",\\\"name\\\":\\\"Арина Розенберг\\\"},\\\"publisher\\\":{\\\"@type\\\":\\\"Organization\\\",\\\"name\\\":\\\"Rose Digital\\\",\\\"logo\\\":{\\\"@type\\\":\\\"ImageObject\\\",\\\"url\\\":\\\"/brand/rose-digital-logo.png\\\"}}}\"}}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"BreadcrumbList\\\",\\\"itemListElement\\\":[{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":1,\\\"name\\\":\\\"Главная\\\",\\\"item\\\":\\\"https://rosedigital.ru/\\\"},{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":2,\\\"name\\\":\\\"Блог\\\",\\\"item\\\":\\\"https://rosedigital.ru/blog\\\"},{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":3,\\\"name\\\":\\\"Создание сайтов\\\",\\\"item\\\":\\\"https://rosedigital.ru/blog?category=website-creation\\\"},{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":4,\\\"name\\\":\\\"Основные теги HTML для создания сайта: полный практический гид\\\",\\\"item\\\":\\\"https://rosedigital.ru/blog/osnovnye-tegi-html-dlya-sozdaniya-sayta\\\"}]}\"}}],[\"$\",\"article\",null,{\"className\":\"pt-28 pb-24\",\"children\":[\"$\",\"div\",null,{\"className\":\"max-w-3xl mx-auto px-6\",\"children\":[[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"BreadcrumbList\\\",\\\"itemListElement\\\":[{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":1,\\\"name\\\":\\\"Главная\\\",\\\"item\\\":\\\"https://rosedigital.ru/\\\"},{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":2,\\\"name\\\":\\\"Блог\\\",\\\"item\\\":\\\"https://rosedigital.ru/blog\\\"},{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":3,\\\"name\\\":\\\"Создание сайтов\\\",\\\"item\\\":\\\"https://rosedigital.ru/blog?category=website-creation\\\"},{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":4,\\\"name\\\":\\\"Основные теги HTML для создания сайта: полный практический гид\\\",\\\"item\\\":\\\"https://rosedigital.ru/blog/osnovnye-tegi-html-dlya-sozdaniya-sayta\\\"}]}\"}}],[\"$\",\"nav\",null,{\"aria-label\":\"Хлебные крошки\",\"className\":\"mb-8\",\"children\":[\"$\",\"ol\",null,{\"className\":\"flex flex-wrap items-center gap-x-1.5 gap-y-1 text-sm text-gray-500\",\"children\":[[\"$\",\"li\",\"Главная-0\",{\"className\":\"inline-flex items-center gap-1.5 min-w-0 max-w-full\",\"children\":[null,[\"$\",\"$L11\",null,{\"href\":\"/\",\"className\":\"hover:text-rose transition-colors truncate max-w-[10rem] sm:max-w-xs\",\"children\":\"Главная\"}]]}],[\"$\",\"li\",\"Блог-1\",{\"className\":\"inline-flex items-center gap-1.5 min-w-0 max-w-full\",\"children\":[[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"className\":\"text-gray-600 select-none\",\"children\":\"/\"}],[\"$\",\"$L11\",null,{\"href\":\"/blog\",\"className\":\"hover:text-rose transition-colors truncate max-w-[10rem] sm:max-w-xs\",\"children\":\"Блог\"}]]}],[\"$\",\"li\",\"Создание сайтов-2\",{\"className\":\"inline-flex items-center gap-1.5 min-w-0 max-w-full\",\"children\":[[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"className\":\"text-gray-600 select-none\",\"children\":\"/\"}],[\"$\",\"$L11\",null,{\"href\":\"/blog?category=website-creation\",\"className\":\"hover:text-rose transition-colors truncate max-w-[10rem] sm:max-w-xs\",\"children\":\"Создание сайтов\"}]]}],[\"$\",\"li\",\"Основные теги HTML для создания сайта: полный практический гид-3\",{\"className\":\"inline-flex items-center gap-1.5 min-w-0 max-w-full\",\"children\":[[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"className\":\"text-gray-600 select-none\",\"children\":\"/\"}],[\"$\",\"span\",null,{\"aria-current\":\"page\",\"className\":\"truncate max-w-[14rem] sm:max-w-md md:max-w-lg text-gray-400\",\"children\":\"Основные теги HTML для создания сайта: полный практический гид\"}]]}]]}]}]],\"$L1c\",\"$L1d\",\"$L1e\",\"$L1f\",\"$L20\",\"$L21\",\"$L22\",\"$L23\",\"$L24\",\"$L25\"]}]}]]\n"])</script><script>self.__next_f.push([1,"26:I[22692,[\"/_next/static/chunks/0ig7zx63i06qz.js\",\"/_next/static/chunks/0l.50x6bylvek.js\",\"/_next/static/chunks/0ujws6nix.gg4.js\",\"/_next/static/chunks/01vno5o0-y201.js\"],\"PostViews\"]\n27:I[42433,[\"/_next/static/chunks/0ig7zx63i06qz.js\",\"/_next/static/chunks/0l.50x6bylvek.js\",\"/_next/static/chunks/0ujws6nix.gg4.js\",\"/_next/static/chunks/01vno5o0-y201.js\"],\"BlogCoverImage\"]\n2b:I[8172,[\"/_next/static/chunks/0ig7zx63i06qz.js\",\"/_next/static/chunks/0l.50x6bylvek.js\",\"/_next/static/chunks/0ujws6nix.gg4.js\",\"/_next/static/chunks/01vno5o0-y201.js\"],\"PostReactions\"]\n2c:I[67910,[\"/_next/static/chunks/0ig7zx63i06qz.js\",\"/_next/static/chunks/0l.50x6bylvek.js\",\"/_next/static/chunks/0ujws6nix.gg4.js\",\"/_next/static/chunks/01vno5o0-y201.js\"],\"PostComments\"]\n1c:[\"$\",\"div\",null,{\"className\":\"flex items-center gap-3 mb-6 flex-wrap\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xs text-rose font-medium px-2 py-1 bg-rose/10 rounded-full\",\"children\":\"Создание сайтов\"}],[\"$\",\"span\",null,{\"className\":\"text-xs text-gray-600\",\"children\":\"2022-06-10\"}],[\"$\",\"$L26\",null,{\"slug\":\"osnovnye-tegi-html-dlya-sozdaniya-sayta\"}]]}]\n1d:[\"$\",\"h1\",null,{\"className\":\"text-3xl sm:text-4xl font-bold mb-6 tracking-tight\",\"children\":\"Основные теги HTML для создания сайта: полный практический гид\"}]\n1e:[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 sm:h-72 rounded-2xl overflow-hidden mb-8 bg-gray-800\",\"children\":[\"$\",\"$L27\",null,{\"src\":\"https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800\u0026q=75\u0026auto=format\u0026fit=crop\",\"alt\":\"Основные теги HTML для создания сайта: полный практический гид\",\"priority\":true,\"sizes\":\"(max-width: 768px) 100vw, 768px\",\"className\":\"object-cover\",\"category\":\"website-creation\"}]}]\n1f:[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-400 mb-12 leading-relaxed\",\"children\":\"Подробный практический гид по основным тегам HTML для создания и SEO‑оптимизации сайта. Советы по семантике, атрибутам и структуре страницы ✅\"}]\n28:T186c,"])</script><script>self.__next_f.push([1,"\u003cdiv id=\"short-answer\" class=\"short-answer\"\u003e\u003cp\u003e\u003cstrong\u003eКороткий ответ:\u003c/strong\u003e Для создания сайта необходим базовый набор семантических и технических тегов: \u003c!DOCTYPE html\u003e, \u003chtml\u003e, \u003chead\u003e с \u003cmeta charset\u003e, \u003ctitle\u003e, мета‑описаниями и каноником, а в \u003cbody\u003e — \u003cheader\u003e, \u003cnav\u003e, \u003cmain\u003e, \u003csection\u003e, \u003carticle\u003e, \u003caside\u003e, \u003cfooter\u003e, заголовки \u003ch1\u003e–\u003ch6\u003e, абзацы \u003cp\u003e, ссылки \u003ca\u003e, изображения \u003cimg\u003e/\u003cpicture\u003e, формы \u003cform\u003e/\u003cinput\u003e, списки \u003cul\u003e/\u003col\u003e, таблицы, а также вспомогательные теги для мультимедиа и SEO. Этот набор нужен для корректной индексации, доступности и удобства разработки.\u003c/p\u003e\u003c/div\u003e\n\u003ch1\u003eКакие теги HTML нужны для сайта\u003c/h1\u003e\n\u003cnav aria-label=\"Краткое содержание\"\u003e\n \u003ch2 id=\"toc-title\"\u003eКраткое содержание\u003c/h2\u003e\n \u003cul\u003e\n\u003cli\u003e\u003ca href=\"#why-semantics\"\u003eПочему семантика HTML важна для сайта и SEO\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#doctype-head\"\u003e\u003c!DOCTYPE\u003e и \u003chead\u003e: обязательные мета‑теги\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#structure-body\"\u003eСтруктура \u003cbody\u003e: header, nav, main, section, article, aside, footer\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#text-media\"\u003eТекстовые и медиа‑теги: h1–h6, p, a, img, picture, figure\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#forms-tables\"\u003eФормы, таблицы и элементы взаимодействия\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#seo-tags\"\u003eSEO‑важные теги и атрибуты: meta, canonical, robots, structured data\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#accessibility\"\u003eДоступность и ARIA: какие теги и атрибуты использовать\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#performance\"\u003eПроизводительность, критический HTML и приоритет загрузки\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#best-practices\"\u003eПрактические рекомендации и чек‑лист\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#faq\"\u003eFAQ\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#cta\"\u003eКак мы помогаем с версткой и SEO\u003c/a\u003e\u003c/li\u003e\n \u003c/ul\u003e\n\u003c/nav\u003e\n\u003chr\u003e\n\u003csection id=\"why-semantics\"\u003e\n \u003ch2 id=\"почему-семантика-html-важна-для-сайта-и-seo\"\u003eПочему семантика HTML важна для сайта и SEO\u003c/h2\u003e\n \u003cp\u003eСемантическая HTML‑структура — это не только про чистоту кода. Для бизнеса она решает три ключевые задачи:\u003c/p\u003e\n \u003cul\u003e\n\u003cli\u003eПоисковая оптимизация: правильные теги (например, \u003ccode\u003e\u003ch1\u003e\u003c/code\u003e, \u003ccode\u003e\u003carticle\u003e\u003c/code\u003e, \u003ccode\u003e\u003cmain\u003e\u003c/code\u003e) помогают поисковикам понимать, где находятся важные блоки контента.\u003c/li\u003e\n\u003cli\u003eДоступность и UX: семантические теги улучшают навигацию для людей с ограничениями и для голосовых помощников, повышая конверсию.\u003c/li\u003e\n\u003cli\u003eПоддержка и масштабируемость: понятная структура упрощает работу разработчиков и маркетологов при расширении или миграции сайта.\u003c/li\u003e\n \u003c/ul\u003e\n \u003cp\u003eС точки зрения маркетинга: SEO — стабильный накопительный канал. Инвестиции в корректную семантику HTML повышают качество индексации и снижают CPL/CPA со временем. Платная реклама хорошо запускает трафик, но фундамент — корректная структура и контент на странице.\u003c/p\u003e\n\u003c/section\u003e\n\u003csection id=\"doctype-head\"\u003e\n \u003ch2 id=\"и-обязательные-метатеги\"\u003e\u003c!DOCTYPE\u003e и \u003chead\u003e: обязательные мета‑теги\u003c/h2\u003e\n \u003ch3 id=\"1\"\u003e1. \u003c!DOCTYPE html\u003e\u003c/h3\u003e\n \u003cp\u003eПервой строкой в документе должен быть \u003c!DOCTYPE html\u003e. Это переключает браузер в стандартный режим и необходим для предсказуемого рендера.\u003c/p\u003e\n \u003ch3 id=\"2-тег-и-его-содержимое\"\u003e2. Тег \u003chead\u003e и его содержимое\u003c/h3\u003e\n \u003cp\u003eВнутри \u003ccode\u003e\u003chead\u003e\u003c/code\u003e размещаются данные, важные для браузеров и поисковиков, но которые не отображаются напрямую пользователю:\u003c/p\u003e\n \u003cul\u003e\n\u003cli\u003e\u003ccode\u003e\u003cmeta charset=\"utf-8\"\u003e\u003c/code\u003e — кодировка.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e\u003cmeta name=\"viewport\" content=\"width=device-width,initial-scale=1\"\u003e\u003c/code\u003e — адаптивность.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e\u003ctitle\u003e\u003c/code\u003e — заголовок вкладки и важный элемент для SEO.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e\u003cmeta name=\"description\" content=\"...\"\u003e\u003c/code\u003e — сниппет в выдаче (приоритетно для пользователей).\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e\u003clink rel=\"canonical\" href=\"...\"\u003e\u003c/code\u003e — каноническая ссылка для борьбы с дублированием.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e\u003cmeta name=\"robots\" content=\"index,follow\"\u003e\u003c/code\u003e — управление индексацией.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e\u003clink rel=\"stylesheet\" href=\"...\"\u003e\u003c/code\u003e и \u003ccode\u003e\u003cscript\u003e\u003c/code\u003e — подключение ресурсов (но скрипты лучше размещать в конце body или с async/defer).\u003c/li\u003e\n \u003c/ul\u003e\n \u003ch3 id=\"пример-базового-head\"\u003eПример базового head\u003c/h3\u003e\n \u003cpre\u003e\u003ccode\u003e\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\"\u003e\n \u003ctitle\u003eЗаголовок страницы — услуга или продукт\u003c/title\u003e\n \u003cmeta name=\"description\" content=\"Краткое описание страницы для сниппета\"\u003e\n \u003clink rel=\"canonical\" href=\"https://example.com/page\"\u003e\n\u003c/head\u003e\u003c/code\u003e\u003c/pre\u003e\n\u003c/section\u003e\n\u003csection id=\"structure-body\"\u003e\n \u003c/div\u003e"])</script><script>self.__next_f.push([1,"20:[[\"$\",\"div\",null,{\"className\":\"prose max-w-none\",\"dangerouslySetInnerHTML\":{\"__html\":\"$28\"},\"suppressHydrationWarning\":true}],\"$L29\",\"$L2a\"]\n21:[\"$\",\"div\",null,{\"className\":\"mt-16 pt-8 border-t border-white/5\",\"children\":[\"$\",\"div\",null,{\"className\":\"bg-gradient-to-br from-gray-900 to-rose/5 border border-rose/20 rounded-2xl p-8\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex items-start gap-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"shrink-0 w-11 h-11 rounded-xl bg-rose/10 flex items-center justify-center text-rose text-xl\",\"children\":\"🚀\"}],[\"$\",\"div\",null,{\"className\":\"flex-1 min-w-0\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-lg font-bold text-white mb-2\",\"children\":\"Сделаем сайт-лендинг под ключ\"}],[\"$\",\"p\",null,{\"className\":\"text-gray-400 text-sm leading-relaxed mb-5\",\"children\":\"Одностраничный сайт под вашу услугу за 7 дней — фикс 35 000 ₽, с базовой SEO. 17 живых примеров по нишам.\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-col sm:flex-row gap-3\",\"children\":[[\"$\",\"$L11\",null,{\"href\":\"/gotovye-resheniya\",\"className\":\"inline-flex items-center justify-center px-5 py-2.5 bg-rose hover:bg-rose-light text-white text-sm font-semibold rounded-full transition-colors\",\"children\":\"Смотреть решения →\"}],[\"$\",\"$L11\",null,{\"href\":\"/#cta\",\"className\":\"inline-flex items-center justify-center px-5 py-2.5 border border-white/15 hover:border-rose/40 text-gray-300 hover:text-rose text-sm font-medium rounded-full transition-colors\",\"children\":\"Обсудить проект\"}]]}]]}]]}]}]}]\n22:[\"$\",\"$L2b\",null,{\"slug\":\"osnovnye-tegi-html-dlya-sozdaniya-sayta\"}]\n"])</script><script>self.__next_f.push([1,"23:[\"$\",\"aside\",null,{\"className\":\"mt-14 pt-10 border-t border-white/5 not-prose\",\"aria-label\":\"Читайте также\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold mb-5\",\"children\":\"Читайте также\"}],[\"$\",\"div\",null,{\"className\":\"grid grid-cols-1 sm:grid-cols-2 gap-3\",\"children\":[[\"$\",\"$L11\",\"znachenie-slova-lending\",{\"href\":\"/blog/znachenie-slova-lending\",\"className\":\"group block bg-gray-900 border border-white/5 hover:border-rose/25 rounded-xl p-4 transition-colors\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-[11px] text-rose/70 font-medium uppercase tracking-wide\",\"children\":\"Создание сайтов\"}],[\"$\",\"p\",null,{\"className\":\"mt-1.5 text-sm font-medium text-gray-300 group-hover:text-white transition-colors line-clamp-2 leading-snug\",\"children\":\"Значение слова лендинг: что это и как работает посадочная страница\"}]]}],[\"$\",\"$L11\",\"zayavki-na-sozdanie-saytov\",{\"href\":\"/blog/zayavki-na-sozdanie-saytov\",\"className\":\"group block bg-gray-900 border border-white/5 hover:border-rose/25 rounded-xl p-4 transition-colors\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-[11px] text-rose/70 font-medium uppercase tracking-wide\",\"children\":\"Создание сайтов\"}],[\"$\",\"p\",null,{\"className\":\"mt-1.5 text-sm font-medium text-gray-300 group-hover:text-white transition-colors line-clamp-2 leading-snug\",\"children\":\"Как получать заявки на создание сайтов: SEO-стратегия и практические шаги\"}]]}],[\"$\",\"$L11\",\"zarabotok-na-sozdanii-saytov\",{\"href\":\"/blog/zarabotok-na-sozdanii-saytov\",\"className\":\"group block bg-gray-900 border border-white/5 hover:border-rose/25 rounded-xl p-4 transition-colors\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-[11px] text-rose/70 font-medium uppercase tracking-wide\",\"children\":\"Создание сайтов\"}],[\"$\",\"p\",null,{\"className\":\"mt-1.5 text-sm font-medium text-gray-300 group-hover:text-white transition-colors line-clamp-2 leading-snug\",\"children\":\"Заработок на создании сайтов: реальные модели, цены и как начать\"}]]}],[\"$\",\"$L11\",\"zakazy-na-sozdanie-saytov\",{\"href\":\"/blog/zakazy-na-sozdanie-saytov\",\"className\":\"group block bg-gray-900 border border-white/5 hover:border-rose/25 rounded-xl p-4 transition-colors\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-[11px] text-rose/70 font-medium uppercase tracking-wide\",\"children\":\"Создание сайтов\"}],[\"$\",\"p\",null,{\"className\":\"mt-1.5 text-sm font-medium text-gray-300 group-hover:text-white transition-colors line-clamp-2 leading-snug\",\"children\":\"Как получать заказы на создание сайтов: практическая инструкция для агентства и фрилансера\"}]]}]]}]]}]\n"])</script><script>self.__next_f.push([1,"24:[\"$\",\"$L2c\",null,{\"slug\":\"osnovnye-tegi-html-dlya-sozdaniya-sayta\"}]\n25:[\"$\",\"nav\",null,{\"className\":\"mt-14 pt-10 border-t border-white/5 grid grid-cols-1 sm:grid-cols-2 gap-4\",\"aria-label\":\"Соседние статьи\",\"children\":[[\"$\",\"div\",null,{\"className\":\"min-w-0\",\"children\":[\"$\",\"$L11\",null,{\"href\":\"/blog/osnovnye-metriki-v-internet-marketinge\",\"className\":\"block rounded-2xl border border-white/10 bg-gray-900/50 p-5 hover:border-rose/30 transition-colors\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xs text-gray-500 uppercase tracking-wide\",\"children\":\"Предыдущая\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 font-semibold text-white line-clamp-2\",\"children\":\"Основные метрики в интернет‑маркетинге: какие KPI считать, как измерять и оптимизировать\"}]]}]}],[\"$\",\"div\",null,{\"className\":\"min-w-0 sm:text-right\",\"children\":[\"$\",\"$L11\",null,{\"href\":\"/blog/osnovnye-tseli-internet-marketinga\",\"className\":\"block rounded-2xl border border-white/10 bg-gray-900/50 p-5 hover:border-rose/30 transition-colors sm:ml-auto\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xs text-gray-500 uppercase tracking-wide\",\"children\":\"Следующая\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 font-semibold text-white line-clamp-2\",\"children\":\"Основные цели интернет-маркетинга: как поставить KPI и выбрать каналы\"}]]}]}]]}]\n"])</script><script>self.__next_f.push([1,"2d:I[2240,[\"/_next/static/chunks/0ig7zx63i06qz.js\",\"/_next/static/chunks/0l.50x6bylvek.js\",\"/_next/static/chunks/0ujws6nix.gg4.js\",\"/_next/static/chunks/01vno5o0-y201.js\"],\"BlogInlineLeadForm\"]\n29:[\"$\",\"$L2d\",null,{\"variant\":\"website-creation\",\"articleSlug\":\"osnovnye-tegi-html-dlya-sozdaniya-sayta\",\"articleTitle\":\"Основные теги HTML для создания сайта: полный практический гид\"}]\n2e:T4385,"])</script><script>self.__next_f.push([1,"\u003cdiv\u003e\u003ch2 id=\"структура-header-nav-main-section-article-aside-footer\"\u003eСтруктура \u003cbody\u003e: header, nav, main, section, article, aside, footer\u003c/h2\u003e\n \u003cp\u003eСтандартная семантическая оболочка страницы выглядит так:\u003c/p\u003e\n \u003cpre\u003e\u003ccode\u003e\u003cbody\u003e\n \u003cheader\u003e...\u003c/header\u003e\n \u003cnav\u003e...\u003c/nav\u003e\n \u003cmain\u003e\n \u003carticle\u003e...\u003c/article\u003e\n \u003caside\u003e...\u003c/aside\u003e\n \u003c/main\u003e\n \u003cfooter\u003e...\u003c/footer\u003e\n\u003c/body\u003e\u003c/code\u003e\u003c/pre\u003e\n \u003ch3 id=\"ключевые-правила-и-значение-блоков\"\u003eКлючевые правила и значение блоков\u003c/h3\u003e\n \u003cul\u003e\n\u003cli\u003e\u003cstrong\u003e\u003cheader\u003e\u003c/strong\u003e — логотип, контактные данные, глобальное CTA. Внутри можно иметь навигацию и поиск.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e\u003cnav\u003e\u003c/strong\u003e — основная навигация сайта. Поисковые системы учитывают её для определения внутренней структуры.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e\u003cmain\u003e\u003c/strong\u003e — основной контент страницы, должен быть только один на странице.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e\u003carticle\u003e\u003c/strong\u003e — самостоятельный фрагмент контента (страница блога, карточка товара, новость).\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e\u003csection\u003e\u003c/strong\u003e — логический раздел внутри \u003ccode\u003e\u003cmain\u003e\u003c/code\u003e или \u003ccode\u003e\u003carticle\u003e\u003c/code\u003e (например, преимущества, блок отзывов).\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e\u003caside\u003e\u003c/strong\u003e — дополнительный контент (виджеты, ссылки на похожие материалы).\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003e\u003cfooter\u003e\u003c/strong\u003e — контакты, копирайты, ссылки на политику конфиденциальности.\u003c/li\u003e\n \u003c/ul\u003e\n \u003cp\u003eДля SEO важно: \u003ccode\u003e\u003cmain\u003e\u003c/code\u003e содержал основную текстовую семантику, а заголовки внутри были иерархичны (один \u003ccode\u003e\u003ch1\u003e\u003c/code\u003e, далее \u003ccode\u003e\u003ch2\u003e\u003c/code\u003e, \u003ccode\u003e\u003ch3\u003e\u003c/code\u003e и т.д.).\u003c/p\u003e\n\u003c/section\u003e\n\u003csection id=\"text-media\"\u003e\n \u003ch2 id=\"текстовые-и-медиатеги-h1h6-p-a-img-picture-figure\"\u003eТекстовые и медиа‑теги: h1–h6, p, a, img, picture, figure\u003c/h2\u003e\n \u003ch3 id=\"заголовки-h1h6\"\u003eЗаголовки H1–H6\u003c/h3\u003e\n \u003cp\u003eЗаголовки задают структуру текста. Практические правила:\u003c/p\u003e\n \u003cul\u003e\n\u003cli\u003eНа странице должен быть ровно один \u003ccode\u003e\u003ch1\u003e\u003c/code\u003e, он отражает основную тему (ключевой запрос SEO).\u003c/li\u003e\n\u003cli\u003eДальше используйте \u003ccode\u003e\u003ch2\u003e\u003c/code\u003e/\u003ccode\u003e\u003ch3\u003e\u003c/code\u003e для логических разделов. Не прыгайте через уровни без причины.\u003c/li\u003e\n\u003cli\u003eЗаголовки должны быть релевантны контенту: это помогает ранжированию и удобству чтения.\u003c/li\u003e\n \u003c/ul\u003e\n \u003ch3 id=\"параграфы-и-списки\"\u003eПараграфы и списки\u003c/h3\u003e\n \u003cp\u003e\u003ccode\u003e\u003cp\u003e\u003c/code\u003e для простого текста, \u003ccode\u003e\u003cul\u003e/\u003col\u003e/\u003cli\u003e\u003c/code\u003e для списков. Поисковики любят структурированные списки в сниппетах.\u003c/p\u003e\n \u003ch3 id=\"ссылки-семантика-и-атрибуты\"\u003eСсылки \u003ca\u003e — семантика и атрибуты\u003c/h3\u003e\n \u003cul\u003e\n\u003cli\u003eИспользуйте понятный анкор‑текст, отражающий цель ссылки.\u003c/li\u003e\n\u003cli\u003eДля внешних ссылок: \u003ccode\u003erel=\"noopener noreferrer\" target=\"_blank\"\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003eДля SEO: внутренние перелинковки улучшают распределение веса и индексируемость.\u003c/li\u003e\n \u003c/ul\u003e\n \u003ch3 id=\"изображения-srcset-и-атрибут-alt\"\u003eИзображения: \u003cimg\u003e, \u003cpicture\u003e, srcset и атрибут alt\u003c/h3\u003e\n \u003cp\u003eИзображения влияют на UX и SEO. Обязательные практики:\u003c/p\u003e\n \u003cul\u003e\n\u003cli\u003e\u003ccode\u003ealt\u003c/code\u003e — описательный текст, важный для доступности и SEO (не спамить ключами, описать, что на изображении).\u003c/li\u003e\n\u003cli\u003eИспользовать \u003ccode\u003e\u003cpicture\u003e\u003c/code\u003e и \u003ccode\u003esrcset\u003c/code\u003e для адаптивных изображений.\u003c/li\u003e\n\u003cli\u003eОптимизировать размер и формат (WebP/AVIF там, где поддерживается), назначать \u003ccode\u003ewidth\u003c/code\u003e/\u003ccode\u003eheight\u003c/code\u003e для предотвращения CLS.\u003c/li\u003e\n \u003c/ul\u003e\n \u003cpre\u003e\u003ccode\u003e\u003cfigure\u003e\n \u003cpicture\u003e\n \u003csource srcset=\"img/photo.avif\" type=\"image/avif\"\u003e\n \u003csource srcset=\"img/photo.webp\" type=\"image/webp\"\u003e\n \u003cimg src=\"img/photo.jpg\" alt=\"Релевантное описание картинки\" width=\"1200\" height=\"800\"\u003e\n \u003c/picture\u003e\n \u003cfigcaption\u003eПодпись к изображению\u003c/figcaption\u003e\n\u003c/figure\u003e\u003c/code\u003e\u003c/pre\u003e\n\u003c/section\u003e\n\u003csection id=\"forms-tables\"\u003e\n \u003ch2 id=\"формы-таблицы-и-элементы-взаимодействия\"\u003eФормы, таблицы и элементы взаимодействия\u003c/h2\u003e\n \u003ch3 id=\"формы\"\u003eФормы: \u003cform\u003e, \u003cinput\u003e, \u003clabel\u003e, \u003cbutton\u003e\u003c/h3\u003e\n \u003cp\u003eФормы — основной способ получения лидов. Что важно:\u003c/p\u003e\n \u003cul\u003e\n\u003cli\u003eКаждое поле должно иметь \u003ccode\u003e\u003clabel for=\"id\"\u003e\u003c/code\u003e для доступности.\u003c/li\u003e\n\u003cli\u003eИспользуйте корректные типы полей: \u003ccode\u003etype=\"email\"\u003c/code\u003e, \u003ccode\u003etype=\"tel\"\u003c/code\u003e, \u003ccode\u003etype=\"submit\"\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003eРазбейте длинные формы на шаги, измеряйте CPL по каждому варианту.\u003c/li\u003e\n\u003cli\u003eЗащищайте формы от спама: reCAPTCHA, honeypot, проверка на сервере.\u003c/li\u003e\n \u003c/ul\u003e\n \u003ch3 id=\"таблицы\"\u003eТаблицы\u003c/h3\u003e\n \u003cp\u003eТаблицы подходят для табличных данных (цен, характеристик). Для SEO и доступности:\u003c/p\u003e\n \u003cul\u003e\n\u003cli\u003eИспользуйте \u003ccode\u003e\u003cthead\u003e\u003c/code\u003e, \u003ccode\u003e\u003ctbody\u003e\u003c/code\u003e, \u003ccode\u003e\u003cth\u003e\u003c/code\u003e для заголовков.\u003c/li\u003e\n\u003cli\u003eДобавляйте \u003ccode\u003ecaption\u003c/code\u003e и семантические подписи, если таблица сложная.\u003c/li\u003e\n \u003c/ul\u003e\n \u003cpre\u003e\u003ccode\u003e\u003ctable\u003e\n \u003ccaption\u003eСравнение тарифов\u003c/caption\u003e\n \u003cthead\u003e\n\u003ctr\u003e\u003cth\u003eТариф\u003c/th\u003e\u003cth\u003eЦена\u003c/th\u003e\u003cth\u003eОсобенности\u003c/th\u003e\u003c/tr\u003e\n \u003c/thead\u003e\n \u003ctbody\u003e\n\u003ctr\u003e\u003ctd\u003eБазовый\u003c/td\u003e\u003ctd\u003e10 000\u003c/td\u003e\u003ctd\u003e...\u003c/td\u003e\u003c/tr\u003e\n \u003c/tbody\u003e\n\u003c/table\u003e\u003c/code\u003e\u003c/pre\u003e\n\u003c/section\u003e\n\u003csection id=\"seo-tags\"\u003e\n \u003ch2 id=\"seoважные-теги-и-атрибуты-meta-canonical-robots-structured-data\"\u003eSEO‑важные теги и атрибуты: meta, canonical, robots, structured data\u003c/h2\u003e\n \u003cp\u003eДля долгосрочного SEO‑роста критичны не только видимые элементы, но и метаинформация.\u003c/p\u003e\n \u003ch3 id=\"meta-description-и-title\"\u003eMeta Description и Title\u003c/h3\u003e\n \u003cp\u003eTitle должен быть уникальным и содержать ключевой запрос естественно. Meta description — краткое, продающее описание, которое влияет на CTR. Не дублируйте сниппеты на сотнях страниц.\u003c/p\u003e\n \u003ch3 id=\"canonical\"\u003eCanonical\u003c/h3\u003e\n \u003cp\u003eИспользуйте \u003ccode\u003e\u003clink rel=\"canonical\" href=\"...\"\u003e\u003c/code\u003e там, где есть варианты одной и той же страницы (параметры URL, пагинация), чтобы избежать дробления релевантности.\u003c/p\u003e\n \u003ch3 id=\"meta-robots\"\u003eMeta robots\u003c/h3\u003e\n \u003cp\u003eКонтролируйте индексацию страниц с помощью robots и X‑Robots‑Tag на уровне сервера для тонкого управления.\u003c/p\u003e\n \u003ch3 id=\"структурированные-данные-jsonld\"\u003eСтруктурированные данные (JSON‑LD)\u003c/h3\u003e\n \u003cp\u003eStructured data помогает поисковым системам отображать расширенные сниппеты (ограничение на внешние сервисы отсутствует). Примеры: Organization, BreadcrumbList, Product, Article. Вставляйте JSON‑LD в \u003chead\u003e или перед закрывающим \u003c/body\u003e.\u003c/p\u003e\n \u003cpre\u003e\u003ccode\u003e\u003cscript type=\"application/ld+json\"\u003e\n{\n \"@context\": \"https://schema.org\",\n \"@type\": \"Organization\",\n \"name\": \"Rose Digital\",\n \"url\": \"https://rosenberg-marketing.ru\"\n}\n\u003c/script\u003e\u003c/code\u003e\u003c/pre\u003e\n\u003c/section\u003e\n\u003csection id=\"accessibility\"\u003e\n \u003ch2 id=\"доступность-и-aria-какие-теги-и-атрибуты-использовать\"\u003eДоступность и ARIA: какие теги и атрибуты использовать\u003c/h2\u003e\n \u003cp\u003eДоступность повышает охват аудитории и улучшает UX. Основные практики:\u003c/p\u003e\n \u003cul\u003e\n\u003cli\u003eАтрибут \u003ccode\u003ealt\u003c/code\u003e для изображений, \u003ccode\u003earia‑label\u003c/code\u003e и \u003ccode\u003earia‑hidden\u003c/code\u003e для интерактивных элементов.\u003c/li\u003e\n\u003cli\u003eТеги \u003ccode\u003elabel\u003c/code\u003e для форм и логичная табуляция (tabindex).\u003c/li\u003e\n\u003cli\u003eИспользуйте \u003ccode\u003erole\u003c/code\u003e и landmark‑теги (\u003ccode\u003enav\u003c/code\u003e, \u003ccode\u003emain\u003c/code\u003e, \u003ccode\u003esearch\u003c/code\u003e) для экранных читалок.\u003c/li\u003e\n \u003c/ul\u003e\n \u003cp\u003eПример кнопки с ARIA:\u003c/p\u003e\n \u003cpre\u003e\u003ccode\u003e\u003cbutton aria-label=\"Открыть меню\" aria-expanded=\"false\"\u003e\u003cspan\u003e☰\u003c/span\u003e\u003c/button\u003e\u003c/code\u003e\u003c/pre\u003e\n\u003c/section\u003e\n\u003csection id=\"performance\"\u003e\n \u003ch2 id=\"производительность-критический-html-и-приоритет-загрузки\"\u003eПроизводительность, критический HTML и приоритет загрузки\u003c/h2\u003e\n \u003cp\u003eSEO и UX зависят от скорости. Что важнее всего:\u003c/p\u003e\n \u003cul\u003e\n\u003cli\u003eМинимизируйте критический CSS в \u003chead\u003e и отложите остальное через \u003ccode\u003emedia=\"print\" onload=\"this.media='all'\"\u003c/code\u003e или preload.\u003c/li\u003e\n\u003cli\u003eОптимизируйте изображения и используйте lazy loading: \u003ccode\u003eloading=\"lazy\"\u003c/code\u003e у \u003cimg\u003e по умолчанию.\u003c/li\u003e\n\u003cli\u003eСкрипты с тяжелой логикой грузите с \u003ccode\u003edefer\u003c/code\u003e или асинхронно.\u003c/li\u003e\n\u003cli\u003eИспользуйте preconnect/preload для критичных ресурсов (шрифты, API).\u003c/li\u003e\n \u003c/ul\u003e\n \u003cp\u003eИзмеряйте LCP/CLS/FID и корректируйте разметку, чтобы снизить показатель отказов и повысить органический трафик.\u003c/p\u003e\n\u003c/section\u003e\n\u003csection id=\"best-practices\"\u003e\n \u003ch2 id=\"практические-рекомендации-и-чеклист\"\u003eПрактические рекомендации и чек‑лист\u003c/h2\u003e\n \u003cp\u003eКороткий чек‑лист перед релизом страницы:\u003c/p\u003e\n \u003col\u003e\n\u003cli\u003eПроверьте, что есть ровно один \u003ccode\u003e\u003ch1\u003e\u003c/code\u003e и он соответствует целевому запросу.\u003c/li\u003e\n\u003cli\u003eTitle и meta description уникальны и оптимизированы под CTR.\u003c/li\u003e\n\u003cli\u003eВсе изображения имеют \u003ccode\u003ealt\u003c/code\u003e, указаны размеры и оптимизированы.\u003c/li\u003e\n\u003cli\u003eСтраница имеет корректный canonical и нет дублирующих URL.\u003c/li\u003e\n\u003cli\u003eФормы валидируются на клиенте и сервере, есть защита от спама.\u003c/li\u003e\n\u003cli\u003eКритический CSS минимизирован, скрипты не блокируют рендер.\u003c/li\u003e\n\u003cli\u003eСтруктурированные данные добавлены для релевантных сущностей.\u003c/li\u003e\n\u003cli\u003eПроверена доступность основных интерактивных элементов.\u003c/li\u003e\n \u003c/ol\u003e\n \u003ch3 id=\"частые-ошибки\"\u003eЧастые ошибки\u003c/h3\u003e\n \u003cul\u003e\n\u003cli\u003eМножественные H1 на странице.\u003c/li\u003e\n\u003cli\u003eПустые или бесполезные alt‑тексты («image1.jpg»).\u003c/li\u003e\n\u003cli\u003eПолный контент в картинках вместо текста (SEO‑провал).\u003c/li\u003e\n\u003cli\u003eСкрипты в head без defer, блокирующие рендер.\u003c/li\u003e\n \u003c/ul\u003e\n\u003c/section\u003e\n\u003csection id=\"faq\"\u003e\n \u003ch2 id=\"faq\"\u003eFAQ\u003c/h2\u003e\n \u003ch3 id=\"1-какие-теги-html-обязательно-должен-содержать-любой-сайт\"\u003e1. Какие теги HTML обязательно должен содержать любой сайт?\u003c/h3\u003e\n \u003cp\u003eМинимум: \u003ccode\u003e\u003c!DOCTYPE html\u003e\u003c/code\u003e, \u003ccode\u003e\u003chtml lang=\"...\"\u003e\u003c/code\u003e, \u003ccode\u003e\u003chead\u003e\u003c/code\u003e с \u003ccode\u003e\u003cmeta charset\u003e\u003c/code\u003e, \u003ccode\u003e\u003ctitle\u003e\u003c/code\u003e, \u003ccode\u003e\u003cmeta name=\"viewport\"\u003e\u003c/code\u003e и валидный \u003ccode\u003e\u003cbody\u003e\u003c/code\u003e с семантической обёрткой (\u003ccode\u003e\u003cheader\u003e\u003c/code\u003e, \u003ccode\u003e\u003cmain\u003e\u003c/code\u003e, \u003ccode\u003e\u003cfooter\u003e\u003c/code\u003e), а также текстовый контент в \u003ccode\u003e\u003ch1\u003e\u003c/code\u003e и \u003ccode\u003e\u003cp\u003e\u003c/code\u003e.\u003c/p\u003e\n \u003ch3 id=\"2-сколько-h1-должно-быть-на-странице-и-почему\"\u003e2. Сколько H1 должно быть на странице и почему?\u003c/h3\u003e\n \u003cp\u003eРекомендуется один \u003ccode\u003e\u003ch1\u003e\u003c/code\u003e. Это помогает поисковым системам и пользователям понять основную тему страницы. Технически можно использовать несколько, но это усложняет семантику и рискованно для SEO.\u003c/p\u003e\n \u003ch3 id=\"3-какой-атрибут-img-важен-для-seo\"\u003e3. Какой атрибут img важен для SEO?\u003c/h3\u003e\n \u003cp\u003eГлавный атрибут — \u003ccode\u003ealt\u003c/code\u003e. Он описывает изображение, помогает доступности и поисковой индексации изображений. Также важны размеры (width/height) и адаптивные форматы через \u003ccode\u003esrcset\u003c/code\u003e/\u003ccode\u003epicture\u003c/code\u003e.\u003c/p\u003e\n \u003ch3 id=\"4-нужны-ли-структурированные-данные-на-сайте\"\u003e4. Нужны ли структурированные данные на сайте?\u003c/h3\u003e\n \u003cp\u003eДа. JSON‑LD помогает поисковикам лучше понять содержимое страницы и может привести к расширенным сниппетам, что повышает CTR и качество трафика.\u003c/p\u003e\n \u003ch3 id=\"5-можно-ли-скрывать-текст-от-пользователей-внутри-html-для-seo\"\u003e5. Можно ли скрывать текст от пользователей внутри HTML для SEO?\u003c/h3\u003e\n \u003cp\u003eНет. Скрытый текст, созданный исключительно для поисковиков (например, display:none с ключевыми словами), может привести к санкциям. Любой текст должен быть полезен пользователю.\u003c/p\u003e\n\u003c/section\u003e\n\u003csection id=\"cta\"\u003e\n \u003ch2 id=\"как-мы-помогаем-с-версткой-и-seo\"\u003eКак мы помогаем с версткой и SEO\u003c/h2\u003e\n \u003cp\u003eВ Rose Digital мы строим сайт на базе семантической и оптимизированной HTML‑разметки, связывая фронт‑энд и SEO таким образом, чтобы ваша инвестиция работала годами. Мы фокусируемся на бизнес‑метриках: снижении CPL/CPA, повышении ROMI и долгосрочном росте органического трафика. Контекстная реклама используется как дополнительный ускоритель запуска трафика, но фундаментом остаётся SEO.\u003c/p\u003e\n \u003cp\u003eЕсли вам нужна комплексная работа — от создания корректной HTML‑структуры до масштабного продвижения — мы делаем это «под ключ», с учётом воронки и unit‑экономики. Посмотрите наши примеры работ в разделе \u003ca href=\"/cases\"\u003eкейсы агентства\u003c/a\u003e и узнайте про создание и продвижение сайтов в услуге \u003ca href=\"/sozdanie-i-prodvizhenie-saitov\"\u003eуслуги создания и продвижения сайтов\u003c/a\u003e.\u003c/p\u003e\n\u003c/section\u003e\n\u003chr\u003e\n\u003cfooter\u003e\n \u003cp\u003eЕсли нужна консультация по HTML‑разметке, оптимизации страниц или плану продвижения — напишите, и мы подготовим план с оценкой ROMI и прогнозом роста органики.\u003c/p\u003e\n\u003c/footer\u003e\n"])</script><script>self.__next_f.push([1,"2a:[\"$\",\"div\",null,{\"className\":\"prose max-w-none\",\"dangerouslySetInnerHTML\":{\"__html\":\"$2e\"},\"suppressHydrationWarning\":true}]\n"])</script></body></html>