Команды для создания сайта HTML в Блокноте

Все команды и теги для создания сайта HTML в Блокноте: пошаговый шаблон, примеры сохранения и SEO-оптимизации страницы для поисковиков ✅

Короткий ответ: Чтобы создать сайт HTML в Блокноте, используйте базовые команды/теги: , , с и </code>, затем <code><body></code>. Сохраните файл с расширением <code>.html</code> и откройте в браузере. Ниже — полный пошаговый шаблон, пояснения и SEO-подсказки.</p></div> <h2 id="краткое-содержание">Краткое содержание</h2> <ul> <li><a href='#podgotovka'>Подготовка: что нужно перед началом</a></li> <li><a href='#bazovyi-karcas'>Базовый каркас HTML: главные команды</a></li> <li><a href='#osnovnye-tegi'>Основные теги и примеры использования</a></li> <li><a href='#sohranenie-otkrytie'>Сохранение файла и открытие в браузере</a></li> <li><a href='#primer-stranitsy'>Простой рабочий пример страницы</a></li> <li><a href='#seo-optimizaciya'>SEO-оптимизация HTML-файла</a></li> <li><a href='#stil-i-script'>Подключение CSS и JS из Блокнота</a></li> <li><a href='#otladka'>Отладка и проверка страницы</a></li> <li><a href='#chastye-oshibki'>Частые ошибки и как их избегать</a></li> <li><a href='#faq'>FAQ — ответы на популярные вопросы</a></li> <li><a href='#cta'>Как мы можем помочь дальше</a></li> </ul> <h2 id='podgotovka'>Подготовка: что нужно перед началом</h2> <p>Перед тем как писать HTML в Блокноте, убедитесь, что у вас готовы простые вещи: компьютер с Windows, установлен Блокнот (или Notepad++/VS Code, если вы хотите чуть больше удобств), браузер (Chrome/Firefox/Edge), и папка для проекта. Для SEO-ориентированного сайта заранее продумайте структуру разделов, базовые ключевые фразы и список страниц — это сэкономит время при дальнейшем развитии проекта.</p> <p>Рекомендации по организации папки проекта:</p> <ul> <li>Создайте корневую папку проекта: <code>my-site</code></li> <li>В ней создайте папки <code>css</code>, <code>js</code>, <code>images</code></li> <li>Первый файл — <code>index.html</code> в корне</li> <li>Для локального теста можно создать <code>robots.txt</code> и <code>sitemap.xml</code> позже</li> </ul> <h2 id='bazovyi-karcas'>Базовый каркас HTML: главные команды</h2> <p>Ниже — минимально требуемый «скелет» HTML-документа. В нём уже заложены главные команды (теги), которые должны присутствовать в каждой странице:</p> <pre><code><!DOCTYPE html> <html lang='ru'> <head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width, initial-scale=1'> <title>Заголовок страницы — ключевая фраза

Ключевые команды/теги в этом каркасе:

— указывает браузеру, что документ использует HTML5.
— задаёт язык документа для поисковых систем и экранных читателей.
— кодировка, обязательна для корректного отображения кириллицы.
— делает страницу адаптивной на мобильных устройствах.
</code> и <code><meta name='description'></code> — основной SEO-контент в заголовке страницы.</li> </ul> <h2 id='osnovnye-tegi'>Основные теги и примеры использования</h2> <p>Ниже — список часто используемых тегов и то, как их применять при создании сайта в Блокноте.</p> <h3 id="базовые-структурные-теги">Базовые структурные теги</h3> <ul> <li><code><header></code> — верхняя часть страницы, логотип, меню.</li> <li><code><nav></code> — навигация (ссылки на разделы).</li> <li><code><main></code> — основной контент страницы.</li> <li><code><article></code> — самостоятельный блок контента (статья, товар).</li> <li><code><section></code> — логический раздел внутри страницы.</li> <li><code><aside></code> — боковая колонка, виджеты.</li> <li><code><footer></code> — подвал сайта.</li> </ul> <h3 id="заголовки-и-текст">Заголовки и текст</h3> <pre><code><h1>Главный заголовок страницы</h1> </div></div><aside class="not-prose my-10 sm:my-12 rounded-2xl border-2 border-white bg-gray-900/50 p-5 sm:p-7" aria-label="Заявка на расчёт сроков"><h3 class="text-lg font-semibold text-white mb-1.5 tracking-tight">Нужен план по срокам и бюджету под ваш проект?</h3><p class="text-sm text-gray-500 mb-5 leading-relaxed">Оставьте контакты — оценим сроки разработки и SEO под вашу нишу.</p><form class="space-y-3"><input type="text" placeholder="ФИО" autoComplete="name" required="" class="w-full rounded-xl bg-black/50 border border-white/10 px-4 py-3 text-white text-sm placeholder:text-gray-600 focus:outline-none focus:border-rose/50 transition-colors" name="name" value=""/><div><input type="tel" placeholder="+7 (___) ___-__-__" inputMode="tel" autoComplete="tel" required="" class="w-full rounded-xl bg-black/50 border border-white/10 px-4 py-3 text-white text-sm placeholder:text-gray-600 focus:outline-none focus:border-rose/50 transition-colors" name="phone" value=""/></div><div><input type="email" placeholder="E-mail" autoComplete="email" required="" class="w-full rounded-xl bg-black/50 border border-white/10 px-4 py-3 text-white text-sm placeholder:text-gray-600 focus:outline-none focus:border-rose/50 transition-colors" name="email" value=""/></div><input type="text" placeholder="Адрес сайта или «сайта пока нет»" class="w-full rounded-xl bg-black/50 border border-white/10 px-4 py-3 text-white text-sm placeholder:text-gray-600 focus:outline-none focus:border-rose/50 transition-colors" name="website" value=""/><textarea name="details" placeholder="Ниша и что планируете запустить (необязательно)" rows="2" class="w-full rounded-xl bg-black/50 border border-white/10 px-4 py-3 text-white text-sm placeholder:text-gray-600 focus:outline-none focus:border-rose/50 transition-colors resize-none"></textarea><button type="submit" class="w-full bg-rose hover:bg-rose-light disabled:opacity-60 text-white font-semibold py-3.5 px-6 rounded-full transition-colors text-sm">Получить расчёт</button><p class="text-xs text-gray-600 leading-relaxed">Нажимая кнопку, вы соглашаетесь с <a class="text-rose hover:underline" href="/personal-data-consent">обработкой данных</a>.</p></form></aside><div class="prose max-w-none"><div><h2 id="раздел-статьи">Раздел статьи</h2> <p>Параграф текста.</p> <ul> <li>Пункт списка</li> </ul> </code></pre> <p>Важно: на странице должен быть один <code><h1></code>, он наиболее значим для SEO. Остальные заголовки распределяйте логически: H2 — разделы, H3 — подразделы.</p> <h3 id="ссылки-и-изображения">Ссылки и изображения</h3> <pre><code><a href='page.html' title='Перейти на страницу'>Текст ссылки</a> <img src='images/photo.jpg' alt='Описание изображения' width='600' height='400'> </code></pre> <p>Для SEO и доступности всегда указывайте <code>alt</code> у изображений и понятные тексты ссылок. Не используйте «чёрные» href типа <code>#</code> без смысла.</p> <h3 id="формы">Формы</h3> <pre><code><form action='send.php' method='post'> <label for='name'>Имя</label> <input id='name' name='name' type='text' required> <button type='submit'>Отправить</button> </form> </code></pre> <p>Если вы создаёте статическую страницу без backend, формы можно настроить на сторонние сервисы либо обрабатывать через JavaScript. Но для SEO-видимости форм особых требований нет — важно, чтобы контент был видимым для поисковых роботов.</p> <h2 id='sohranenie-otkrytie'>Сохранение файла и открытие в браузере</h2> <p>Как правильно сохранить HTML-файл в Блокноте:</p> <ol> <li>Файл -> Сохранить как.</li> <li>Укажите имя <code>index.html</code> (важно: расширение .html, не .txt).</li> <li>В поле «Кодировка» выберите <code>UTF-8</code> (если доступно) или <code>ANSI</code> для старых систем, но предпочтительно UTF-8.</li> <li>Тип файла — «Все файлы» (All Files), чтобы Windows не добавил .txt.</li> </ol> <p>Откройте полученный файл двойным кликом — по умолчанию откроется в браузере. Для обновления изменений используйте F5 или Ctrl+R.</p> <h2 id='primer-stranitsy'>Простой рабочий пример страницы</h2> <p>Ниже полный минимальный пример страницы с простым стилем. Скопируйте в Блокнот и сохраните как <code>index.html</code>:</p> <pre><code><!DOCTYPE html> <html lang='ru'> <head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width, initial-scale=1'> <title>Пример сайта на HTML Название компании Главная О компании Привет, мир! Это пример простой страницы, созданной в Блокноте. © 2026 Название компании
Этот пример показывает минимальный набор команд для рендера чистой страницы. Дальше можно вынести CSS в отдельный файл css/styles.css и подключить скрипты.

SEO-оптимизация HTML-файла (что важно прямо в коде)

Поскольку наша позиция — SEO-first, разберём, какие команды и теги важны для поисковой видимости уже на этапе верстки в Блокноте.

Title и meta description

Тег </code> — самый важный элемент страницы для ранжирования и кликов в выдаче. Делайте уникальные заголовки для каждой страницы с ключевой фразой в начале, но естественно. <code><meta name='description'></code> не влияет напрямую на ранжирование, но влияет на CTR.</p> <h3 id="структура-заголовков">Структура заголовков</h3> <p>Используйте одну H1 и логическую иерархию H2-H3. Поисковики анализируют структуру для определения темы страницы.</p> <h3 id="атрибуты-изображений">Атрибуты изображений</h3> <p>Атрибут <code>alt</code> помогает поисковикам понять изображение. Подбирайте описательные alt-тексты с релевантными ключами, но не спамьте.</p> <h3 id="семантические-теги">Семантические теги</h3> <p>Использование <code><article></code>, <code><section></code>, <code><nav></code> помогает роботам лучше понимать контент. Семантика — это простой технический шаг, который улучшает восприятие страницы поисковиками.</p> <h3 id="каноникализация-и-мета-robots">Каноникализация и мета robots</h3> <pre><code><link rel='canonical' href='https://example.com/page.html'> <meta name='robots' content='index, follow'> </code></pre> <p>Добавляйте <code>canonical</code>, если у вас может появиться дублирующийся контент, и контролируйте индексацию с помощью <code>robots</code>.</p> <h3 id="структурированные-данные-микроразметка">Структурированные данные (микроразметка)</h3> <p>Даже из Блокнота можно вставить JSON-LD в <code><head></code> для сниппетов (организация, хлебные крошки, ошибки). Пример:</p> <pre><code><script type='application/ld+json'> { "@context":"https://schema.org", "@type":"Organization", "name":"Название компании", "url":"https://example.com", "logo":"https://example.com/images/logo.png" } </script> </code></pre> <p>Это улучшает видимость в выдаче и повышает доверие к сайту.</p> <h2 id='stil-i-script'>Подключение CSS и JS из Блокнота</h2> <p>Если вы хотите отделить стили и скрипты, создайте файлы <code>css/styles.css</code> и <code>js/scripts.js</code>. Примеры подключений:</p> <pre><code><link rel='stylesheet' href='css/styles.css'> <script src='js/scripts.js' defer></script> </code></pre> <p>Советы по подключению скриптов:</p> <ul> <li>Используйте атрибут <code>defer</code> для внешних скриптов, чтобы не блокировать рендеринг страницы.</li> <li>Минимизируйте инлайновый JavaScript — он усложняет кеширование и анализ кода поисковиками.</li> </ul> <h2 id='otladka'>Отладка и проверка страницы</h2> <p>Как тестировать страницу, созданную в Блокноте:</p> <ul> <li>Откройте в браузере и используйте инструменты разработчика (F12) для проверки консоли и сетевых запросов.</li> <li>Проверьте адаптивность через responsive mode в DevTools или вручную меняя размер окна.</li> <li>Проверьте валидность разметки через валидатор HTML (локально можно анализировать по ошибкам в консоли).</li> <li>Проверьте скорость загрузки: даже базовый HTML влияет — уменьшите тяжелые изображения.</li> </ul> <h2 id='chastye-oshibki'>Частые ошибки и как их избегать</h2> <ul> <li>Сохранение как <code>.txt</code> вместо <code>.html</code> — проверьте расширение файла.</li> <li>Неправильная кодировка — используйте UTF-8 и укажите <code><meta charset='utf-8'></code>.</li> <li>Несоблюдение одной H1 на странице — влияет на структуру и SEO.</li> <li>Отсутствие <code>alt</code> у изображений — снижает доступность и SEO-потенциал.</li> <li>Инлайновые большие стили и скрипты — затрудняют поддержание и кеширование.</li> </ul> <h2 id='faq'>FAQ</h2> <h3 id="1-какие-команды-html-нужно-знать-чтобы-начать">1. Какие «команды» HTML нужно знать, чтобы начать?</h3> <p>Начать достаточно с набора: <code><!DOCTYPE html></code>, <code><html lang='ru'></code>, <code><head></code> (meta charset, viewport, title, description), <code><body></code>, заголовки <code><h1>—<h6></code>, параграфы <code><p></code>, ссылки <code><a></code>, изображения <code><img></code>, списки, формы. Эти теги покрывают базовые потребности любой страницы.</p> <h3 id="2-нужно-ли-учить-javascript-чтобы-сделать-сайт-в-блокноте">2. Нужно ли учить JavaScript, чтобы сделать сайт в Блокноте?</h3> <p>Нет, для простого контента и Landing Page достаточно HTML и CSS. JS нужен для интерактивности (валидация форм, динамическая галерея и т.д.). Но с точки зрения SEO статический HTML — самый стабильный и предсказуемый вариант для индексации.</p> <h3 id="3-как-правильно-сохранить-файл-в-utf-8-в-блокноте">3. Как правильно сохранить файл в UTF-8 в Блокноте?</h3> <p>В Блокноте выберите Файл → Сохранить как. Внизу диалога в поле «Кодировка» выберите «UTF-8», укажите имя с расширением <code>index.html</code> и тип «Все файлы».</p> <h3 id="4-можно-ли-создать-многостраничный-сайт-только-в-блокноте">4. Можно ли создать многостраничный сайт только в Блокноте?</h3> <p>Да, можно. Для каждой страницы создавайте отдельный <code>.html</code>-файл (index.html, about.html, services.html) и объединяйте их ссылками в навигации. Однако для масштабных проектов удобнее использовать редакторы и систему сборки. С точки зрения маркетинга и SEO, важно продумать структуру URL и внутреннюю перелинковку.</p> <h3 id="5-нужен-ли-сервер-для-того-чтобы-страница-отображалась-корректно">5. Нужен ли сервер для того, чтобы страница отображалась корректно?</h3> <p>Для базовой разработки сервер не обязателен — файл можно открыть локально. Но для тестов динамических функций (Формы с backend, AJAX, серверные редиректы) нужен локальный или удалённый сервер.</p> <h3 id="6-как-сделать-страницу-быстрой-и-seo-дружелюбной-прямо-из-блокнота">6. Как сделать страницу быстрой и SEO-дружелюбной прямо из Блокнота?</h3> <p>Оптимизируйте изображения (webp, компрессия), минимизируйте CSS/JS, используйте CDN для библиотек (если требуется), включите кеширование на стороне сервера при размещении. На этапе верстки используйте семантику и чистый код — это закладывает базу для дальнейшей оптимизации.</p> <h2 id='cta'>Как мы можем помочь дальше</h2> <p>Если вам нужно не только создать страницу в Блокноте, но и превратить её в устойчивый источник трафика — SEO является основой. В Rose Digital мы делаем техническую верстку, оптимизацию и продвижение сайтов как комплексную услугу: от структуры и контента до роста позиций и трафика. Ознакомьтесь с нашими услугами по созданию и продвижению сайтов: <a href='/sozdanie-i-prodvizhenie-saitov'>услуги по созданию и продвижению сайтов</a>, а также с реальными примерами работ в разделе <a href='/cases'>кейсы агентства</a>. Платная реклама может ускорить результат, но основа — SEO.</p> </div> </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/kombinator-klyuchevyh-fraz-yandeks-direkt"><span class="text-xs text-gray-500 uppercase tracking-wide">Предыдущая</span><p class="mt-2 font-semibold text-white line-clamp-2">Комбинатор ключевых фраз для Яндекс.Директ: как быстро собрать рабочие группы объявлений</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/kombinatornye-obyavleniya-yandeks-direkt"><span class="text-xs text-gray-500 uppercase tracking-wide">Следующая</span><p class="mt-2 font-semibold text-white line-clamp-2">Комбинаторные объявления Яндекс.Директ: настройка, тестирование и оптимизация</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\",\"komandy-dlya-sozdaniya-sayta-html-v-bloknote\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"blog\",{\"children\":[[\"slug\",\"komandy-dlya-sozdaniya-sayta-html-v-bloknote\",\"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\"]\n16:I[97367,[\"/_next/static/chunks/0ig7zx63i06qz.js\",\"/_next/static/chunks/0l.50x6bylvek.js\",\"/_next/static/chunks/0ujws6nix.gg4.js\"],\"ViewportBoundary\"]\n18: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\"}]]}]\n15:[]\nc:\"$W15\"\nd:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L16\",null,{\"children\":\"$L17\"}],[\"$\",\"$L18\",null,{\"children\":\"$L19\"}],[\"$\",\"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,"17:[[\"$\",\"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,"1a:I[27201,[\"/_next/static/chunks/0ig7zx63i06qz.js\",\"/_next/static/chunks/0l.50x6bylvek.js\",\"/_next/static/chunks/0ujws6nix.gg4.js\"],\"IconMark\"]\n14:null\n"])</script><script>self.__next_f.push([1,"19:[[\"$\",\"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/komandy-dlya-sozdaniya-sayta-html-v-bloknote\"}],[\"$\",\"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\":\"2021-05-22\"}],[\"$\",\"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\"}],[\"$\",\"$L1a\",\"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\\\":\\\"2021-05-22\\\",\\\"dateModified\\\":\\\"2021-05-22\\\",\\\"image\\\":\\\"https://images.unsplash.com/photo-1586717799252-bd134ad00e26?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/komandy-dlya-sozdaniya-sayta-html-v-bloknote\\\"}]}\"}}],[\"$\",\"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/komandy-dlya-sozdaniya-sayta-html-v-bloknote\\\"}]}\"}}],[\"$\",\"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 в Блокноте — пошаговый набор тегов и примеры\"}]]}]]}]}]],\"$L1b\",\"$L1c\",\"$L1d\",\"$L1e\",\"$L1f\",\"$L20\",\"$L21\",\"$L22\",\"$L23\",\"$L24\"]}]}]]\n"])</script><script>self.__next_f.push([1,"25: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\"]\n26: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\"]\n2a: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\"]\n2b: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\"]\n1b:[\"$\",\"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\":\"2021-05-22\"}],[\"$\",\"$L25\",null,{\"slug\":\"komandy-dlya-sozdaniya-sayta-html-v-bloknote\"}]]}]\n1c:[\"$\",\"h1\",null,{\"className\":\"text-3xl sm:text-4xl font-bold mb-6 tracking-tight\",\"children\":\"Команды для создания сайта HTML в Блокноте — пошаговый набор тегов и примеры\"}]\n1d:[\"$\",\"div\",null,{\"className\":\"relative w-full h-52 sm:h-72 rounded-2xl overflow-hidden mb-8 bg-gray-800\",\"children\":[\"$\",\"$L26\",null,{\"src\":\"https://images.unsplash.com/photo-1586717799252-bd134ad00e26?w=800\u0026q=75\u0026auto=format\u0026fit=crop\",\"alt\":\"Команды для создания сайта HTML в Блокноте — пошаговый набор тегов и примеры\",\"priority\":true,\"sizes\":\"(max-width: 768px) 100vw, 768px\",\"className\":\"object-cover\",\"category\":\"website-creation\"}]}]\n1e:[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-400 mb-12 leading-relaxed\",\"children\":\"Все команды и теги для создания сайта HTML в Блокноте: пошаговый шаблон, примеры сохранения и SEO-оптимизации страницы для поисковиков ✅\"}]\n27:T1777,"])</script><script>self.__next_f.push([1,"\u003cdiv\u003e\n \u003cdiv id=\"short-answer\" class=\"short-answer\"\u003e\u003cp\u003e\u003cstrong\u003eКороткий ответ:\u003c/strong\u003e Чтобы создать сайт HTML в Блокноте, используйте базовые команды/теги: \u003ccode\u003e\u003c!DOCTYPE html\u003e\u003c/code\u003e, \u003ccode\u003e\u003chtml lang='ru'\u003e\u003c/code\u003e, \u003ccode\u003e\u003chead\u003e\u003c/code\u003e с \u003ccode\u003e\u003cmeta charset='utf-8'\u003e\u003c/code\u003e и \u003ccode\u003e\u003ctitle\u003e\u003c/code\u003e, затем \u003ccode\u003e\u003cbody\u003e\u003c/code\u003e. Сохраните файл с расширением \u003ccode\u003e.html\u003c/code\u003e и откройте в браузере. Ниже — полный пошаговый шаблон, пояснения и SEO-подсказки.\u003c/p\u003e\u003c/div\u003e\n \u003ch2 id=\"краткое-содержание\"\u003eКраткое содержание\u003c/h2\u003e\n \u003cul\u003e\n\u003cli\u003e\u003ca href='#podgotovka'\u003eПодготовка: что нужно перед началом\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href='#bazovyi-karcas'\u003eБазовый каркас HTML: главные команды\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href='#osnovnye-tegi'\u003eОсновные теги и примеры использования\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href='#sohranenie-otkrytie'\u003eСохранение файла и открытие в браузере\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href='#primer-stranitsy'\u003eПростой рабочий пример страницы\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href='#seo-optimizaciya'\u003eSEO-оптимизация HTML-файла\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href='#stil-i-script'\u003eПодключение CSS и JS из Блокнота\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href='#otladka'\u003eОтладка и проверка страницы\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href='#chastye-oshibki'\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Как мы можем помочь дальше\u003c/a\u003e\u003c/li\u003e\n \u003c/ul\u003e\n \u003ch2 id='podgotovka'\u003eПодготовка: что нужно перед началом\u003c/h2\u003e\n \u003cp\u003eПеред тем как писать HTML в Блокноте, убедитесь, что у вас готовы простые вещи: компьютер с Windows, установлен Блокнот (или Notepad++/VS Code, если вы хотите чуть больше удобств), браузер (Chrome/Firefox/Edge), и папка для проекта. Для SEO-ориентированного сайта заранее продумайте структуру разделов, базовые ключевые фразы и список страниц — это сэкономит время при дальнейшем развитии проекта.\u003c/p\u003e\n \u003cp\u003eРекомендации по организации папки проекта:\u003c/p\u003e\n \u003cul\u003e\n\u003cli\u003eСоздайте корневую папку проекта: \u003ccode\u003emy-site\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003eВ ней создайте папки \u003ccode\u003ecss\u003c/code\u003e, \u003ccode\u003ejs\u003c/code\u003e, \u003ccode\u003eimages\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003eПервый файл — \u003ccode\u003eindex.html\u003c/code\u003e в корне\u003c/li\u003e\n\u003cli\u003eДля локального теста можно создать \u003ccode\u003erobots.txt\u003c/code\u003e и \u003ccode\u003esitemap.xml\u003c/code\u003e позже\u003c/li\u003e\n \u003c/ul\u003e\n \u003ch2 id='bazovyi-karcas'\u003eБазовый каркас HTML: главные команды\u003c/h2\u003e\n \u003cp\u003eНиже — минимально требуемый «скелет» HTML-документа. В нём уже заложены главные команды (теги), которые должны присутствовать в каждой странице:\u003c/p\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='Краткое описание страницы до 160 символов'\u003e\n \u003clink rel='stylesheet' href='css/styles.css'\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003c!-- Содержимое страницы --\u003e\n \u003c/body\u003e\n\u003c/html\u003e\n\u003c/code\u003e\u003c/pre\u003e\n \u003cp\u003eКлючевые команды/теги в этом каркасе:\u003c/p\u003e\n \u003cul\u003e\n\u003cli\u003e\u003ccode\u003e\u003c!DOCTYPE html\u003e\u003c/code\u003e — указывает браузеру, что документ использует HTML5.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e\u003chtml lang='ru'\u003e\u003c/code\u003e — задаёт язык документа для поисковых систем и экранных читателей.\u003c/li\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'\u003e\u003c/code\u003e — делает страницу адаптивной на мобильных устройствах.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e\u003ctitle\u003e\u003c/code\u003e и \u003ccode\u003e\u003cmeta name='description'\u003e\u003c/code\u003e — основной SEO-контент в заголовке страницы.\u003c/li\u003e\n \u003c/ul\u003e\n \u003ch2 id='osnovnye-tegi'\u003eОсновные теги и примеры использования\u003c/h2\u003e\n \u003cp\u003eНиже — список часто используемых тегов и то, как их применять при создании сайта в Блокноте.\u003c/p\u003e\n \u003ch3 id=\"базовые-структурные-теги\"\u003eБазовые структурные теги\u003c/h3\u003e\n \u003cul\u003e\n\u003cli\u003e\u003ccode\u003e\u003cheader\u003e\u003c/code\u003e — верхняя часть страницы, логотип, меню.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e\u003cnav\u003e\u003c/code\u003e — навигация (ссылки на разделы).\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e\u003cmain\u003e\u003c/code\u003e — основной контент страницы.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e\u003carticle\u003e\u003c/code\u003e — самостоятельный блок контента (статья, товар).\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e\u003csection\u003e\u003c/code\u003e — логический раздел внутри страницы.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e\u003caside\u003e\u003c/code\u003e — боковая колонка, виджеты.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e\u003cfooter\u003e\u003c/code\u003e — подвал сайта.\u003c/li\u003e\n \u003c/ul\u003e\n \u003ch3 id=\"заголовки-и-текст\"\u003eЗаголовки и текст\u003c/h3\u003e\n \u003cpre\u003e\u003ccode\u003e\u003ch1\u003eГлавный заголовок страницы\u003c/h1\u003e\n\u003c/div\u003e"])</script><script>self.__next_f.push([1,"1f:[[\"$\",\"div\",null,{\"className\":\"prose max-w-none\",\"dangerouslySetInnerHTML\":{\"__html\":\"$27\"},\"suppressHydrationWarning\":true}],\"$L28\",\"$L29\"]\n20:[\"$\",\"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\":\"Обсудить проект\"}]]}]]}]]}]}]}]\n21:[\"$\",\"$L2a\",null,{\"slug\":\"komandy-dlya-sozdaniya-sayta-html-v-bloknote\"}]\n"])</script><script>self.__next_f.push([1,"22:[\"$\",\"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,"23:[\"$\",\"$L2b\",null,{\"slug\":\"komandy-dlya-sozdaniya-sayta-html-v-bloknote\"}]\n24:[\"$\",\"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/kombinator-klyuchevyh-fraz-yandeks-direkt\",\"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\":\"Комбинатор ключевых фраз для Яндекс.Директ: как быстро собрать рабочие группы объявлений\"}]]}]}],[\"$\",\"div\",null,{\"className\":\"min-w-0 sm:text-right\",\"children\":[\"$\",\"$L11\",null,{\"href\":\"/blog/kombinatornye-obyavleniya-yandeks-direkt\",\"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\":\"Комбинаторные объявления Яндекс.Директ: настройка, тестирование и оптимизация\"}]]}]}]]}]\n"])</script><script>self.__next_f.push([1,"2c: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\"]\n28:[\"$\",\"$L2c\",null,{\"variant\":\"website-creation\",\"articleSlug\":\"komandy-dlya-sozdaniya-sayta-html-v-bloknote\",\"articleTitle\":\"Команды для создания сайта HTML в Блокноте — пошаговый набор тегов и примеры\"}]\n2d:T3b4c,"])</script><script>self.__next_f.push([1,"\u003cdiv\u003e\u003ch2 id=\"раздел-статьи\"\u003eРаздел статьи\u003c/h2\u003e\n\u003cp\u003eПараграф текста.\u003c/p\u003e\n\u003cul\u003e\n \u003cli\u003eПункт списка\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/code\u003e\u003c/pre\u003e\n \u003cp\u003eВажно: на странице должен быть один \u003ccode\u003e\u003ch1\u003e\u003c/code\u003e, он наиболее значим для SEO. Остальные заголовки распределяйте логически: H2 — разделы, H3 — подразделы.\u003c/p\u003e\n \u003ch3 id=\"ссылки-и-изображения\"\u003eСсылки и изображения\u003c/h3\u003e\n \u003cpre\u003e\u003ccode\u003e\u003ca href='page.html' title='Перейти на страницу'\u003eТекст ссылки\u003c/a\u003e\n\u003cimg src='images/photo.jpg' alt='Описание изображения' width='600' height='400'\u003e\n\u003c/code\u003e\u003c/pre\u003e\n \u003cp\u003eДля SEO и доступности всегда указывайте \u003ccode\u003ealt\u003c/code\u003e у изображений и понятные тексты ссылок. Не используйте «чёрные» href типа \u003ccode\u003e#\u003c/code\u003e без смысла.\u003c/p\u003e\n \u003ch3 id=\"формы\"\u003eФормы\u003c/h3\u003e\n \u003cpre\u003e\u003ccode\u003e\u003cform action='send.php' method='post'\u003e\n \u003clabel for='name'\u003eИмя\u003c/label\u003e\n \u003cinput id='name' name='name' type='text' required\u003e\n \u003cbutton type='submit'\u003eОтправить\u003c/button\u003e\n\u003c/form\u003e\n\u003c/code\u003e\u003c/pre\u003e\n \u003cp\u003eЕсли вы создаёте статическую страницу без backend, формы можно настроить на сторонние сервисы либо обрабатывать через JavaScript. Но для SEO-видимости форм особых требований нет — важно, чтобы контент был видимым для поисковых роботов.\u003c/p\u003e\n \u003ch2 id='sohranenie-otkrytie'\u003eСохранение файла и открытие в браузере\u003c/h2\u003e\n \u003cp\u003eКак правильно сохранить HTML-файл в Блокноте:\u003c/p\u003e\n \u003col\u003e\n\u003cli\u003eФайл -\u003e Сохранить как.\u003c/li\u003e\n\u003cli\u003eУкажите имя \u003ccode\u003eindex.html\u003c/code\u003e (важно: расширение .html, не .txt).\u003c/li\u003e\n\u003cli\u003eВ поле «Кодировка» выберите \u003ccode\u003eUTF-8\u003c/code\u003e (если доступно) или \u003ccode\u003eANSI\u003c/code\u003e для старых систем, но предпочтительно UTF-8.\u003c/li\u003e\n\u003cli\u003eТип файла — «Все файлы» (All Files), чтобы Windows не добавил .txt.\u003c/li\u003e\n \u003c/ol\u003e\n \u003cp\u003eОткройте полученный файл двойным кликом — по умолчанию откроется в браузере. Для обновления изменений используйте F5 или Ctrl+R.\u003c/p\u003e\n \u003ch2 id='primer-stranitsy'\u003eПростой рабочий пример страницы\u003c/h2\u003e\n \u003cp\u003eНиже полный минимальный пример страницы с простым стилем. Скопируйте в Блокнот и сохраните как \u003ccode\u003eindex.html\u003c/code\u003e:\u003c/p\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Пример сайта на HTML\u003c/title\u003e\n \u003cmeta name='description' content='Краткое описание примера сайта'\u003e\n \u003cstyle\u003e\n body{font-family:Arial,Helvetica,sans-serif;line-height:1.6;margin:0;padding:0}\n header,footer{background:#f4f4f4;padding:20px;text-align:center}\n nav ul{list-style:none;padding:0}\n nav li{display:inline;margin-right:10px}\n .container{max-width:1000px;margin:20px auto;padding:0 15px}\n \u003c/style\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003cheader\u003e\n\u003ch1\u003eНазвание компании\u003c/h1\u003e\n\u003cnav\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href='index.html'\u003eГлавная\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href='about.html'\u003eО компании\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/nav\u003e\n \u003c/header\u003e\n\u003cmain class='container'\u003e\n \u003carticle\u003e\n\u003ch2 id=\"привет-мир\"\u003eПривет, мир!\u003c/h2\u003e\n\u003cp\u003eЭто пример простой страницы, созданной в Блокноте.\u003c/p\u003e\n \u003c/article\u003e\n\u003c/main\u003e\n \u003cfooter\u003e© 2026 Название компании\u003c/footer\u003e\n \u003c/body\u003e\n\u003c/html\u003e\n\u003c/code\u003e\u003c/pre\u003e\n \u003cp\u003eЭтот пример показывает минимальный набор команд для рендера чистой страницы. Дальше можно вынести CSS в отдельный файл \u003ccode\u003ecss/styles.css\u003c/code\u003e и подключить скрипты.\u003c/p\u003e\n \u003ch2 id='seo-optimizaciya'\u003eSEO-оптимизация HTML-файла (что важно прямо в коде)\u003c/h2\u003e\n \u003cp\u003eПоскольку наша позиция — SEO-first, разберём, какие команды и теги важны для поисковой видимости уже на этапе верстки в Блокноте.\u003c/p\u003e\n \u003ch3 id=\"title-и-meta-description\"\u003eTitle и meta description\u003c/h3\u003e\n \u003cp\u003eТег \u003ccode\u003e\u003ctitle\u003e\u003c/code\u003e — самый важный элемент страницы для ранжирования и кликов в выдаче. Делайте уникальные заголовки для каждой страницы с ключевой фразой в начале, но естественно. \u003ccode\u003e\u003cmeta name='description'\u003e\u003c/code\u003e не влияет напрямую на ранжирование, но влияет на CTR.\u003c/p\u003e\n \u003ch3 id=\"структура-заголовков\"\u003eСтруктура заголовков\u003c/h3\u003e\n \u003cp\u003eИспользуйте одну H1 и логическую иерархию H2-H3. Поисковики анализируют структуру для определения темы страницы.\u003c/p\u003e\n \u003ch3 id=\"атрибуты-изображений\"\u003eАтрибуты изображений\u003c/h3\u003e\n \u003cp\u003eАтрибут \u003ccode\u003ealt\u003c/code\u003e помогает поисковикам понять изображение. Подбирайте описательные alt-тексты с релевантными ключами, но не спамьте.\u003c/p\u003e\n \u003ch3 id=\"семантические-теги\"\u003eСемантические теги\u003c/h3\u003e\n \u003cp\u003eИспользование \u003ccode\u003e\u003carticle\u003e\u003c/code\u003e, \u003ccode\u003e\u003csection\u003e\u003c/code\u003e, \u003ccode\u003e\u003cnav\u003e\u003c/code\u003e помогает роботам лучше понимать контент. Семантика — это простой технический шаг, который улучшает восприятие страницы поисковиками.\u003c/p\u003e\n \u003ch3 id=\"каноникализация-и-мета-robots\"\u003eКаноникализация и мета robots\u003c/h3\u003e\n \u003cpre\u003e\u003ccode\u003e\u003clink rel='canonical' href='https://example.com/page.html'\u003e\n\u003cmeta name='robots' content='index, follow'\u003e\n\u003c/code\u003e\u003c/pre\u003e\n \u003cp\u003eДобавляйте \u003ccode\u003ecanonical\u003c/code\u003e, если у вас может появиться дублирующийся контент, и контролируйте индексацию с помощью \u003ccode\u003erobots\u003c/code\u003e.\u003c/p\u003e\n \u003ch3 id=\"структурированные-данные-микроразметка\"\u003eСтруктурированные данные (микроразметка)\u003c/h3\u003e\n \u003cp\u003eДаже из Блокнота можно вставить JSON-LD в \u003ccode\u003e\u003chead\u003e\u003c/code\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\":\"Название компании\",\n \"url\":\"https://example.com\",\n \"logo\":\"https://example.com/images/logo.png\"\n}\n\u003c/script\u003e\n\u003c/code\u003e\u003c/pre\u003e\n \u003cp\u003eЭто улучшает видимость в выдаче и повышает доверие к сайту.\u003c/p\u003e\n \u003ch2 id='stil-i-script'\u003eПодключение CSS и JS из Блокнота\u003c/h2\u003e\n \u003cp\u003eЕсли вы хотите отделить стили и скрипты, создайте файлы \u003ccode\u003ecss/styles.css\u003c/code\u003e и \u003ccode\u003ejs/scripts.js\u003c/code\u003e. Примеры подключений:\u003c/p\u003e\n \u003cpre\u003e\u003ccode\u003e\u003clink rel='stylesheet' href='css/styles.css'\u003e\n\u003cscript src='js/scripts.js' defer\u003e\u003c/script\u003e\n\u003c/code\u003e\u003c/pre\u003e\n \u003cp\u003eСоветы по подключению скриптов:\u003c/p\u003e\n \u003cul\u003e\n\u003cli\u003eИспользуйте атрибут \u003ccode\u003edefer\u003c/code\u003e для внешних скриптов, чтобы не блокировать рендеринг страницы.\u003c/li\u003e\n\u003cli\u003eМинимизируйте инлайновый JavaScript — он усложняет кеширование и анализ кода поисковиками.\u003c/li\u003e\n \u003c/ul\u003e\n \u003ch2 id='otladka'\u003eОтладка и проверка страницы\u003c/h2\u003e\n \u003cp\u003eКак тестировать страницу, созданную в Блокноте:\u003c/p\u003e\n \u003cul\u003e\n\u003cli\u003eОткройте в браузере и используйте инструменты разработчика (F12) для проверки консоли и сетевых запросов.\u003c/li\u003e\n\u003cli\u003eПроверьте адаптивность через responsive mode в DevTools или вручную меняя размер окна.\u003c/li\u003e\n\u003cli\u003eПроверьте валидность разметки через валидатор HTML (локально можно анализировать по ошибкам в консоли).\u003c/li\u003e\n\u003cli\u003eПроверьте скорость загрузки: даже базовый HTML влияет — уменьшите тяжелые изображения.\u003c/li\u003e\n \u003c/ul\u003e\n \u003ch2 id='chastye-oshibki'\u003eЧастые ошибки и как их избегать\u003c/h2\u003e\n \u003cul\u003e\n\u003cli\u003eСохранение как \u003ccode\u003e.txt\u003c/code\u003e вместо \u003ccode\u003e.html\u003c/code\u003e — проверьте расширение файла.\u003c/li\u003e\n\u003cli\u003eНеправильная кодировка — используйте UTF-8 и укажите \u003ccode\u003e\u003cmeta charset='utf-8'\u003e\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003eНесоблюдение одной H1 на странице — влияет на структуру и SEO.\u003c/li\u003e\n\u003cli\u003eОтсутствие \u003ccode\u003ealt\u003c/code\u003e у изображений — снижает доступность и SEO-потенциал.\u003c/li\u003e\n\u003cli\u003eИнлайновые большие стили и скрипты — затрудняют поддержание и кеширование.\u003c/li\u003e\n \u003c/ul\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='ru'\u003e\u003c/code\u003e, \u003ccode\u003e\u003chead\u003e\u003c/code\u003e (meta charset, viewport, title, description), \u003ccode\u003e\u003cbody\u003e\u003c/code\u003e, заголовки \u003ccode\u003e\u003ch1\u003e—\u003ch6\u003e\u003c/code\u003e, параграфы \u003ccode\u003e\u003cp\u003e\u003c/code\u003e, ссылки \u003ccode\u003e\u003ca\u003e\u003c/code\u003e, изображения \u003ccode\u003e\u003cimg\u003e\u003c/code\u003e, списки, формы. Эти теги покрывают базовые потребности любой страницы.\u003c/p\u003e\n \u003ch3 id=\"2-нужно-ли-учить-javascript-чтобы-сделать-сайт-в-блокноте\"\u003e2. Нужно ли учить JavaScript, чтобы сделать сайт в Блокноте?\u003c/h3\u003e\n \u003cp\u003eНет, для простого контента и Landing Page достаточно HTML и CSS. JS нужен для интерактивности (валидация форм, динамическая галерея и т.д.). Но с точки зрения SEO статический HTML — самый стабильный и предсказуемый вариант для индексации.\u003c/p\u003e\n \u003ch3 id=\"3-как-правильно-сохранить-файл-в-utf-8-в-блокноте\"\u003e3. Как правильно сохранить файл в UTF-8 в Блокноте?\u003c/h3\u003e\n \u003cp\u003eВ Блокноте выберите Файл → Сохранить как. Внизу диалога в поле «Кодировка» выберите «UTF-8», укажите имя с расширением \u003ccode\u003eindex.html\u003c/code\u003e и тип «Все файлы».\u003c/p\u003e\n \u003ch3 id=\"4-можно-ли-создать-многостраничный-сайт-только-в-блокноте\"\u003e4. Можно ли создать многостраничный сайт только в Блокноте?\u003c/h3\u003e\n \u003cp\u003eДа, можно. Для каждой страницы создавайте отдельный \u003ccode\u003e.html\u003c/code\u003e-файл (index.html, about.html, services.html) и объединяйте их ссылками в навигации. Однако для масштабных проектов удобнее использовать редакторы и систему сборки. С точки зрения маркетинга и SEO, важно продумать структуру URL и внутреннюю перелинковку.\u003c/p\u003e\n \u003ch3 id=\"5-нужен-ли-сервер-для-того-чтобы-страница-отображалась-корректно\"\u003e5. Нужен ли сервер для того, чтобы страница отображалась корректно?\u003c/h3\u003e\n \u003cp\u003eДля базовой разработки сервер не обязателен — файл можно открыть локально. Но для тестов динамических функций (Формы с backend, AJAX, серверные редиректы) нужен локальный или удалённый сервер.\u003c/p\u003e\n \u003ch3 id=\"6-как-сделать-страницу-быстрой-и-seo-дружелюбной-прямо-из-блокнота\"\u003e6. Как сделать страницу быстрой и SEO-дружелюбной прямо из Блокнота?\u003c/h3\u003e\n \u003cp\u003eОптимизируйте изображения (webp, компрессия), минимизируйте CSS/JS, используйте CDN для библиотек (если требуется), включите кеширование на стороне сервера при размещении. На этапе верстки используйте семантику и чистый код — это закладывает базу для дальнейшей оптимизации.\u003c/p\u003e\n \u003ch2 id='cta'\u003eКак мы можем помочь дальше\u003c/h2\u003e\n \u003cp\u003eЕсли вам нужно не только создать страницу в Блокноте, но и превратить её в устойчивый источник трафика — SEO является основой. В Rose Digital мы делаем техническую верстку, оптимизацию и продвижение сайтов как комплексную услугу: от структуры и контента до роста позиций и трафика. Ознакомьтесь с нашими услугами по созданию и продвижению сайтов: \u003ca href='/sozdanie-i-prodvizhenie-saitov'\u003eуслуги по созданию и продвижению сайтов\u003c/a\u003e, а также с реальными примерами работ в разделе \u003ca href='/cases'\u003eкейсы агентства\u003c/a\u003e. Платная реклама может ускорить результат, но основа — SEO.\u003c/p\u003e\n\u003c/div\u003e\n"])</script><script>self.__next_f.push([1,"29:[\"$\",\"div\",null,{\"className\":\"prose max-w-none\",\"dangerouslySetInnerHTML\":{\"__html\":\"$2d\"},\"suppressHydrationWarning\":true}]\n"])</script></body></html>

Команды для создания сайта HTML в Блокноте — пошаговый набор тегов и примеры

Привет, мир!

SEO-оптимизация HTML-файла (что важно прямо в коде)

Title и meta description