Каждый сайт в интернете начинается с HTML.
Это фундамент — и его может освоить любой человек за один день.
Этот лонгрид проведёт через весь путь: от пустого текстового файла до готовой веб-страницы, доступной в браузере. Без воды, без сложных терминов — только практика.
Что такое HTML и почему он — основа интернета
HTML (HyperText Markup Language) — это язык разметки, который сообщает браузеру, из чего состоит страница: где находится заголовок, где абзац текста, где изображение, ссылка или кнопка. HTML не описывает внешний вид — он описывает структуру и смысл содержимого.
Проще всего представить страницу как здание: HTML — это каркас и несущие стены, CSS — отделка и покраска, JavaScript — электрика и лифты. Убрать каркас нельзя — рухнет всё остальное. Именно поэтому разработка любого сайта начинается именно с HTML.
Инструменты: что понадобится для старта
Красивая правда о веб-разработке: порог входа минимален. Не нужно покупать программы, получать доступы или устанавливать сложные среды разработки.
| Инструмент | Зачем нужен | Стоимость |
|---|---|---|
| Текстовый редактор | Написание кода. Подойдут VS Code, Notepad++, Sublime Text или даже стандартный «Блокнот» | Бесплатно |
| Браузер | Проверка результата. Chrome, Firefox, Edge или Safari — любой из уже установленных | Уже есть |
| DevTools | Встроенный инспектор кода (клавиша F12). Позволяет заглянуть «под капот» любой страницы | Встроен |
Скелет страницы: обязательная структура HTML-документа
Каждый HTML-файл строится по одному и тому же шаблону. Он называется «базовая структура документа» и выглядит так:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Моя первая страница</title>
</head>
<body>
<!-- Всё видимое содержимое -->
</body>
</html>!DOCTYPE html
Объявление типа документа — говорит браузеру, что перед ним современный HTML5
head
«Технический отсек»: кодировка, заголовок вкладки, подключение стилей. Не отображается на странице
body
«Сцена»: всё, что увидит посетитель — тексты, картинки, ссылки, формы
charset="UTF-8"
Кодировка, без которой русский текст превратится в «кракозябры»
20 тегов, которые закрывают 90% задач
Не нужно учить все теги стандарта. Опыт показывает: огромная часть реальных страниц построена на небольшом наборе элементов. Ниже — интерактивный справочник: нажмите на категорию, чтобы раскрыть её.
Живая практика: редактор с мгновенным результатом
Лучший способ понять HTML — попробовать. Ниже находится мини-редактор. Измените код в левом поле — и мгновенно увидите результат справа.
Идеи для эксперимента: поменять текст внутри заголовка, добавить тег <p> с новым абзацем, создать список из любимых книг.
От пустого файла к живой странице: 7 шагов
index.html. Именно это имя серверы ищут по умолчанию.body разместить заголовок h1, 2–3 абзаца, список и изображение.style в секции head.Частые ошибки новичков и их решения
| ✘ Ошибка | ✔ Правильно |
|---|---|
| Сохранение файла как index.html.txt | При сохранении выбрать тип «Все файлы» и проверить расширение .html |
Незакрытые теги: <p>текст без </p> |
Каждый открывающий тег нуждается в закрывающем. Отступы в коде помогают видеть вложенность |
Неправильная вложенность: <b><i>текст</b></i> |
Принцип «матрёшки»: <b><i>текст</i></b> — кто открылся последним, тот закрывается первым |
Несколько заголовков h1 на странице |
Один h1 — главный заголовок страницы. Для подзаголовков — h2, h3 |
| Обращение к несуществующему изображению | Путь в src должен точно совпадать с именем файла, включая регистр букв |
Сколько времени займёт обучение
Реалистичные оценки при занятиях по 1 часу в день:
Мини-проверка знаний
Какой тег создаёт ссылку?
HTML — это не дверь в программирование.
Это целый вокзал возможностей.
Каждый страничный файл, созданный сегодня — это первый шаг к навыку, который остаётся востребованным уже три десятилетия. Самое сложное в разработке сайта на HTML — открыть текстовый редактор. Всё остальное — вопрос одного часа.