Полное руководство

Как создать сайт на HTML с нуля

От первой строчки кода до публикации в интернете: структура документа, основные теги, оформление и запуск — простым языком, с примерами и интерактивными подсказками

20 минут

понадобится, чтобы создать первую страницу

0 рублей

стоят все необходимые инструменты

~100 тегов

есть в HTML, но хватит и 15 для старта

Что такое HTML и почему с него начинают

HTML (HyperText Markup Language) — это язык разметки, на котором «написан» любой сайт в интернете. Он не программирует, а описывает структуру страницы: где заголовок, где абзац, где картинка или ссылка. Браузер читает HTML-файл и превращает его в ту страницу, которую видит посетитель.

Осваивать веб-разработку принято именно с HTML по трём причинам: он прост для понимания, результат виден мгновенно, и без него невозможны ни CSS, ни JavaScript — всё строится поверх разметки.

Инструменты, которые понадобятся

📝

Текстовый редактор

Блокнот подойдёт, но удобнее Visual Studio Code, Sublime Text или Notepad++ — с подсветкой кода

🌐

Браузер

Chrome, Firefox или Edge — в нём выполняется проверка результата. Есть и встроенные инструменты разработчика

📁

Папка проекта

Отдельная папка на компьютере, где будут лежать файлы сайта: index.html, стили, картинки

Пять шагов разработки сайта на HTML

Нажмите на шаг, чтобы раскрыть подробности:

Создайте в папке проекта файл с именем index.html — именно его браузер открывает по умолчанию. Откройте файл в редакторе и напишите базовый каркас документа.

Любая HTML-страница начинается с объявления типа документа и содержит две части: служебную <head> и видимую <body>.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Мой первый сайт</title>
</head>
<body>
  <h1>Привет, мир!</h1>
  <p>Это моя первая страница.</p>
</body>
</html>

Наполните страницу содержимым: заголовки от <h1> до <h6>, абзацы <p>, списки <ul> и <ol>, изображения <img>, ссылки <a> и контейнеры <div>.

За внешний вид отвечает CSS. На старте стили можно писать прямо в атрибуте style у тега, а позже — выносить в отдельный файл style.css и подключать через <link>.

Чтобы сайт увидели другие, файлы загружают на хостинг. Для учебных проектов подойдут бесплатные площадки: GitHub Pages, Netlify или Vercel — загрузка занимает пару минут, а сайт получает настоящий адрес в сети.

15 тегов, которые закрывают 90 % задач

Тег Назначение Как часто встречается
<html>, <head>, <body>Каркас страницыНа каждой странице
<h1>–<h6>Заголовки разного уровняНа каждой странице
<p>Абзац текстаОчень часто
<a>Ссылка на другую страницуОчень часто
<img>ИзображениеОчень часто
<ul>, <ol>, <li>Маркированные и нумерованные спискиЧасто
<div>, <span>Контейнеры для группировкиОчень часто
<header>, <footer>, <nav>Семантические блоки страницыЧасто
<form>, <input>, <button>Формы и элементы вводаПо мере необходимости

Структура типичного сайта

Ниже — схема, из каких блоков обычно состоит страница. Каждый блок размечается своим семантическим тегом.

<header> — шапка: логотип и меню
<nav> — навигация по разделам
<main> — основной контент
<aside> — боковая панель
<footer> — подвал: контакты и копирайт

Частые ошибки новичков

✕ Незакрытые теги

Каждый открытый тег нужно закрыть: забыт<р>ый </p> способен «сломать» вёрстку всей страницы.

✕ Несколько <h1> на странице

Главный заголовок должен быть один — это важно и для поисковиков, и для программ чтения с экрана.

✕ Картинки без alt

Атрибут alt описывает изображение текстом: без него страдают доступность и SEO.

✕ Стили ради структуры

Теги выбирают по смыслу, а не по внешнему виду: внешний вид — задача CSS.

Чек-лист перед публикацией

○Все теги закрыты, код отформатирован
○Страница корректно открывается в Chrome и Firefox
○У каждого изображения заполнен атрибут alt
○Указаны title и meta description
○Сайт читаем на экране смартфона

Итог

HTML — это фундамент всего веба

Освоив разметку, начинающий разработчик получает базу, на которой строятся CSS, JavaScript и любые фреймворки. Первый сайт на чистом HTML — лучший способ понять, как устроен интернет изнутри.