Создание сайта на HTML сегодня — это не строчки в Блокноте, а сборка страницы из блоков: шапка, меню, основная часть, подвал. Каждый блок — контейнер со своим смыслом, и когда каркас собран правильно, остальное — тексты, ссылки, оформление — встаёт на места без борьбы. Такой сайт открывается мгновенно и не требует ни системы управления, ни абонентской платы.
Ниже — когда сайт на чистом HTML уместен, а когда нет; как устроена блочная страница и чем div отличается от смысловых тегов; генератор каркаса, который соберёт заготовку под ваш набор блоков; меню и ссылки с проверкой href; текст, подвал, чат, редактор кода, портфолио — и что отличает хороший HTML-сайт от просто работающего.
Нужна быстрая страница без конструктора и без системы управления — свёрстанная руками под вашу задачу? Создание сайтов под ключ: лендинг — от 15 000 ₽, срок от 3 дней. Вёрстка с нуля, мобильная версия, форма заявки и счётчик; договор и гарантия 12 месяцев.
Тридцать страниц поиска: Блокнот — 10 раз, меню и подвал — ни разу
Я просмотрел тридцать страниц, которые поиск показывает по запросам о создании сайта на HTML, и посчитал, что написано в заголовках и описаниях.
Четырнадцать страниц — «пошаговые» инструкции, столько же адресованы новичкам. Двенадцать раз встречается «с нуля», одиннадцать — «первый сайт» или «первая страница». В десяти сайт предлагают писать в Блокноте. Таблицы стилей упомянуты на девяти. Пять обещают срок: «за 15 минут», «за час», «за несколько часов».
Вёрстка и блоки упомянуты на двух страницах из тридцати. Работа сайта на телефоне — на одной, публикация в сети — на одной. Меню, шапка и подвал — ни на одной. А теперь посмотрите на запросы: создание блочного сайта, сайта на div, подвала, меню, ссылок. Люди спрашивают про устройство страницы, а им тридцать раз подряд показывают первую строчку в Блокноте.
HTML: возможности создания сайта и их граница
Сайт «на чистом HTML» — это набор готовых файлов: страницы, стили, картинки. Сервер просто отдаёт их как есть, ничего не вычисляя. Отсюда и сильные стороны, и предел.
✅ Для чего этого хватает
- Лендинг под одну услугу или товар.
- Визитка из трёх-пяти страниц.
- Портфолио, резюме, страница события.
- Документация, справка, презентация.
- Всё, что меняется редко и одним человеком.
❌ Где одного HTML мало
- Каталог на сотни товаров — править каждую страницу руками.
- Корзина, оплата, личный кабинет — нужна серверная часть.
- Блог, который ведёт человек без знания кода.
- Поиск по сайту и фильтры.
- Десятки страниц с общим меню — правка меню превращается в правку десятков файлов.
Способ создания сайта выбирают по тому, как часто и кем он будет меняться. Если раз в полгода и специалистом — чистый HTML даёт скорость и надёжность, недостижимые для тяжёлых систем. Если каждую неделю и владельцем — нужна панель управления.
Создание блочного сайта HTML: страница как набор контейнеров
Любая страница делится на прямоугольные области. Раньше каждую оборачивали в универсальный контейнер div и различали по названию класса. Сейчас для главных областей есть смысловые теги: они работают так же, но их назначение понятно браузеру, поисковику и программам чтения с экрана.
Создание сайта на div по-прежнему возможно — страница будет выглядеть так же. Но создание div-каркаса там, где есть смысловой тег, лишает страницу подсказок для поисковика. Div остаётся рабочей лошадкой для всего, у чего нет собственного смысла: обёртка, чтобы ограничить ширину, ряд карточек, колонка в сетке.
Соберите каркас под свою страницу
Отметьте нужные блоки — ниже появится заготовка. Скопируйте её в файл с именем index.html и откройте в браузере.
Блоков в основной части: 3.
Для одностраничного сайта достаточно. Пункты меню ведут на блоки той же страницы — по идентификаторам.
Это каркас без оформления: в браузере он будет выглядеть как простой текст, пока не подключены стили.
Обратите внимание на три строки в начале заготовки, о которых инструкции «для Блокнота» часто забывают: язык страницы, кодировка и строка с viewport. Без последней страница на телефоне откроется уменьшенной копией настольной версии.
Создание меню сайта HTML и атрибут href
Меню — это список ссылок внутри тега nav. Вся его работа держится на одном атрибуте — href, в котором записано, куда ведёт ссылка. Создание сайта без понимания href невозможно: половина «неработающих» самодельных страниц — это неверно записанные адреса.
Адреса бывают пяти видов. Впишите значение href — определитель скажет, какой это вид и на что обратить внимание.
Попробуйте: about.html · /price/ · https://example.ru · tel:+79001234567 · mailto:info@example.ru
Якорь. Ведёт к блоку на этой же странице с таким идентификатором. Проверьте, что у блока действительно есть id с этим именем — буква в букву, без решётки.
Для меню правило простое: на одностраничном сайте — якоря, на многостраничном — адреса от корня. И один и тот же порядок пунктов на всех страницах: меню, которое меняется при переходе, сбивает с толку сильнее, чем его отсутствие.
HTML: создание сайта и текст
Текст на странице — не сплошное полотно, а структура, и у каждого её элемента свой тег.
- Один главный заголовок. Тег h1 — один на страницу, с названием того, о чём она.
- Заголовки по порядку. Разделы — h2, подразделы — h3. Не перескакивайте с h2 на h4 ради размера шрифта: размер задаётся стилями.
- Абзацы в теге p. Не разбивайте текст переносами строк — оборачивайте каждый абзац.
- Списки списками. Перечни — тегами ul и ol, а не дефисами в абзаце.
- Выделение по смыслу. Важное — strong, акцент — em. Не выделяйте полстраницы.
- Картинкам — описание. Атрибут alt с тем, что изображено: его читают поисковик и программа для незрячих.
Правильная разметка текста — половина поисковой оптимизации, которая достаётся бесплатно: поисковик понимает, что на странице главное, по тегам, а не по размеру букв.
Создание подвала сайта HTML
Подвал — тег footer в самом низу. Его считают формальностью, а зря: до него долистывают те, кто искал конкретную вещь и не нашёл выше. Что в нём должно быть:
- Контакты. Телефон ссылкой, почта, адрес, часы работы.
- Повтор главных ссылок. Те же пункты, что в меню, плюс служебные страницы.
- Сведения о владельце. Название или фамилия, регистрационные данные — для сайта, который что-то продаёт, это не украшение.
- Политика обработки данных. Ссылка на неё, если на сайте есть форма.
- Год. Текущий. Позапрошлогодняя дата в подвале читается как «сайт заброшен».
Совет вебмастера: на сайте из нескольких HTML-страниц шапка и подвал повторяются в каждом файле. Заведите привычку: меняете телефон — меняйте его поиском с заменой по всем файлам сразу, а не открывая страницы по одной. Иначе через год на сайте окажется три разных номера.
Создание чата для HTML-сайта
Чат на странице возможен двумя путями. Первый — готовый сервис онлайн-консультанта: вы регистрируетесь, получаете короткий фрагмент кода и вставляете его перед закрывающим тегом body. Чат появляется в углу страницы, сообщения приходят вам в приложение или мессенджер. Для HTML-сайта это штатный способ, и он занимает десять минут.
Второй путь — написать чат самому — упирается в границу, о которой шла речь выше: сообщения нужно где-то хранить и кому-то доставлять, а это серверная часть. На чистом HTML такого не сделать.
Часто чат не нужен вовсе: кнопка, открывающая переписку в мессенджере, решает ту же задачу одной ссылкой и не замедляет страницу.
Создание сайта HTML: Sublime Text и другие редакторы
Блокнот для первой страницы годится, для второй — уже мешает. Редактор кода даёт три вещи, которые экономят часы: подсветку (теги, атрибуты и текст разного цвета), автодополнение (закрывающий тег ставится сам) и поиск с заменой по всем файлам проекта.
Sublime Text — один из таких редакторов: лёгкий, быстрый, с бесплатным пробным режимом. Есть и полностью бесплатные с теми же возможностями. Выбор редактора на результат не влияет — страница получится одинаковой. Важно только уйти из Блокнота до того, как потерянная закрывающая скобка съест вечер.
Портфолио, готовые шаблоны и HTML-версия сайта
Создание сайта-портфолио на HTML. Портфолио — идеальная задача для чистой вёрстки: страниц мало, меняется редко, а скорость и аккуратность кода сами работают как пример вашего умения. Каркас тот же, что в генераторе выше; блок «Работы» — сетка карточек, каждая со ссылкой на отдельную страницу проекта.
Создание готового сайта HTML из шаблона. Готовые шаблоны — свёрстанные кем-то страницы, в которые подставляют свои тексты и картинки. Это быстрее, чем с нуля, но шаблон стоит сначала открыть на телефоне и заглянуть в код: аккуратный каркас из смысловых тегов видно сразу, как и кашу из вложенных div.
Создание HTML-версии сайта. Так называют две вещи. Первая — вёрстка по макету дизайнера: картинку превращают в HTML-страницы, которые потом «натягивают» на систему управления. Вторая — статическая копия сайта, работающего на системе управления: все страницы сохраняются готовыми файлами. Вторую делают ради скорости или чтобы сохранить старый сайт без поддержки системы.
Создание хорошего сайта в HTML: шесть признаков
«Крутой» сайт в представлении новичка — это эффекты: параллакс, анимация, видео на фоне. В представлении посетителя — страница, которая открылась сразу и в которой всё понятно. Вот признаки, по которым HTML-сайт стоит оценивать.
- код проходит проверку разметки без ошибок — для этого есть бесплатный сервис консорциума, который отвечает за стандарты;
- на телефоне нет горизонтальной прокрутки, а кнопки нажимаются пальцем;
- изображения сжаты и не больше того размера, в котором показываются;
- главные области размечены смысловыми тегами;
- на странице один h1, остальные заголовки идут по порядку;
- все ссылки в меню и подвале куда-то ведут.
Хорошую вёрстку не видно. Её замечают только по отсутствию проблем: страница открылась, ничего не прыгнуло, на телефоне всё на месте. Если посетитель обратил внимание на то, как сайт сделан, — скорее всего, что-то сделано не так.
— Александр Рожков
Создание HTML-сайта: гайд новичку в шесть шагов
- Нарисуйте блоки на бумаге. Что будет в шапке, какие разделы, что в подвале.
- Соберите каркас. Возьмите заготовку из генератора, сохраните как index.html.
- Вставьте настоящий текст. Заголовки, абзацы, списки — по правилам из раздела о тексте.
- Подключите стили. Отдельный файл style.css: шрифт, цвета, отступы, ширина.
- Проверьте на телефоне. И исправьте всё, что вылезло за край.
- Опубликуйте. Домен, простой хостинг, загрузка файлов, защищённое соединение.
На первых пяти шагах сайт существует только на вашем компьютере. Шестой превращает его в настоящий — и именно его чаще всего откладывают. Не откладывайте: у опубликованной страницы появляются посетители и замечания, а у файла на диске — нет.
Сверстали страницу сами, а на телефоне она разъезжается или заявки из формы не приходят? Пришлите ссылку — посмотрю и скажу, в чём причина. Мелкие исправления делаются как доработка; а если нужен сайт целиком, вёрстку с нуля я делаю под ключ — прикинуть стоимость можно в калькуляторе.
Итог
Сайт на HTML — это каркас из блоков: шапка, меню, основная часть, подвал. Главные области размечают смысловыми тегами, всё остальное — контейнерами div. Меню держится на атрибуте href, текст — на правильных заголовках и абзацах, подвал — на контактах и актуальном годе. Чистый HTML хорош там, где сайт небольшой и меняется редко; каталогу, магазину и блогу нужна система управления.
Всё для создания сайта в HTML у вас уже есть: редактор кода, заготовка каркаса и шесть шагов. А если нужна страница для бизнеса с договором и сроком — условия на странице создания сайтов.
Опрос
Как вы делаете или делали свой HTML-сайт?
Проголосуйте, чтобы увидеть, как думают другие читатели
Часто задаваемые вопросы
Можно ли сегодня сделать сайт только на HTML?
Да, для лендинга, визитки, портфолио и других небольших сайтов, которые меняются редко. К разметке добавляют таблицу стилей для оформления. Каталогу, магазину и блогу, который ведёт человек без знания кода, нужна система управления.
Чем div отличается от тегов header, main и footer?
Div — контейнер без собственного смысла, им оборачивают что угодно. Теги header, nav, main, footer работают так же, но называют роль блока — это понимают поисковик и программы чтения с экрана. Правило: есть подходящий смысловой тег — берите его, нет — берите div.
Что такое href и почему ссылка не работает?
Href — атрибут, в котором записан адрес ссылки. Чаще всего ссылка не работает из-за опечатки в имени файла, неверной папки в относительном адресе или якоря, которому не соответствует ни один идентификатор на странице.
Как добавить чат на HTML-сайт?
Подключить готовый сервис онлайн-консультанта: он выдаёт фрагмент кода, который вставляется перед закрывающим тегом body. Написать собственный чат на одном HTML нельзя — сообщениям нужна серверная часть. Часто достаточно кнопки, открывающей мессенджер.
В какой программе писать HTML?
В редакторе кода с подсветкой, автодополнением и поиском по файлам — например, Sublime Text или любом бесплатном аналоге. Блокнот подходит только для самой первой страницы. На результат выбор редактора не влияет.
Что должно быть в подвале сайта?
Контакты с телефоном в виде ссылки, повтор главных пунктов меню, сведения о владельце, ссылка на политику обработки данных, если есть форма, и текущий год. Подвал читают те, кто не нашёл нужного выше.
Сколько стоит вёрстка HTML-сайта на заказ?
У меня одностраничный сайт с вёрсткой с нуля, мобильной версией, формой заявки и счётчиком стоит от 15 000 рублей, срок от трёх дней. Цена растёт с числом блоков и страниц и с тем, готов ли макет.
