HTML с нуля: скелет, с которого начинается любой сайт

Вы когда-нибудь открывали исходный код чужого сайта и с ужасом закрывали вкладку? Казалось, что это набор случайных символов, доступный только избранным? Спойлер: это не так.

В этой статье мы разберем HTML — язык, с которого начинается любой сайт в интернете. Без него не существует ни Google, ни вашего любимого блога, ни интернет-магазина. И к концу материала вы создадите свою первую страницу — руками, в блокноте, без единой строчки «программирования».

Что такое HTML и почему это не страшно

HTML расшифровывается как HyperText Markup Language — язык гипертекстовой разметки. Ключевое слово здесь — разметка, а не программирование.

Представьте, что сайт — это человек:

• HTML — это скелет (голова, руки, ноги — структура).

• CSS — это внешность (одежда, прическа, макияж).

• JavaScript — это мышцы и мозг (движение, реакции, логика).

HTML не умеет считать, принимать решения или выполнять циклы. Он просто говорит браузеру, что здесь заголовок, здесь абзац, а вот тут — картинка. Браузер читает ваши пометки (теги) и рисует страницу.

💡 Главная мысль: HTML — это не «код» в привычном смысле. Это документ с пометками на полях. Как конспект лекции, где вы подчеркиваете важное.

Что нужно для старта

Минимальный набор инструментов — смешной:

1. Блокнот (Windows) или TextEdit (Mac). Всё. Серьезно.

2. Любой браузер — Chrome, Firefox, Edge, Safari.

Опционально, но удобно: скачайте бесплатный редактор VS Code — в нем есть подсветка синтаксиса и автодополнение. Но для первого урока хватит и блокнота.

Два правила, без которых ничего не заработает

Правило №1. Расширение файла — .html, а не .txt.
Если вы сохраните файл как index.txt, браузер покажет вам текст кода, а не страницу. В Windows включите отображение расширений (вкладка «Вид» в проводнике → галочка «Расширения имен файлов»), чтобы не запутаться.

Правило №2. Кодировка — UTF-8.
Иначе вместо «Привет, мир» вы увидите «ÐŸÑ€Ð¸Ð²ÐµÑ‚». При сохранении файла в блокноте выберите кодировку UTF-8 в выпадающем списке внизу окна сохранения.

Скелет документа: магия, которая должна быть в каждом файле

Каждая HTML-страница в мире начинается с одного и того же каркаса. Скопируйте этот код в блокнот и сохраните как index.html:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>Моя первая страница</title>
</head>
<body>
    <!-- Здесь будет видимый контент -->
</body>
</html>

Теперь разберем каждую строку — это важно, потому что вы будете писать этот скелет сотни раз.

Проверка: сохраните файл и откройте его двойным кликом. Вы увидите пустую белую страницу, а во вкладке — «Моя первая страница». Поздравляю, вы уже создали сайт. Пустой, но сайт.

Основные теги: учимся размечать контент

Тег — это команда в угловых скобках. Большинство тегов парные: открывающий <p> и закрывающий </p> (с косой чертой). Между ними — содержимое.

Заголовки

<h1>Самый главный заголовок</h1>
<h2>Заголовок раздела</h2>
<h3>Подраздел</h3>

Всего шесть уровней, от <h1> до <h6>. Правило: <h1> — один на странице, это главная тема. Остальные — по иерархии, как оглавление в книге.

Абзацы

<p>Это обычный абзац текста. Браузер сам добавит отступы сверху и снизу.</p>
<p>А это второй абзац. Каждый новый <p> начинается с новой строки.</p>

Списки

<ul>
    <li>Первый пункт</li>
    <li>Второй пункт</li>
    <li>Третий пункт</li>
</ul>

<ul> — маркированный список (с точками), <li> — элемент списка. Есть еще <ol> — нумерованный, где пункты идут 1, 2, 3.

Ссылки — сердце интернета

<a href="https://example.com">Текст ссылки</a>

Тег <a> (от слова anchor — якорь) с атрибутом href создает кликабельную ссылку. Именно эта штука превращает набор документов в гипертекст — паутину, где всё связано со всем.

Картинки

<img src="photo.jpg" alt="Мое фото на отдыхе">

Обратите внимание: <img> — одиночный тег, закрывающей пары у него нет. Атрибуты:

• src — путь к файлу картинки (лежит рядом с index.html).

• alt — текст, который покажется, если картинка не загрузится. Также его читают скринридеры для незрячих пользователей.

Главное правило вложенности

Если вы открыли один тег внутри другого, закрывайте его первым:

<!-- ✅ Правильно: матрешка -->
<p>Текст со <strong>жирным словом</strong> внутри.</p>

<!-- ❌ Неправильно: теги пересекаются -->
<p>Текст со <strong>жирным словом</p></strong>

Браузер может «простить» ошибку, но верстка поедет. Думайте о тегах как о матрешке: последняя открытая — первая закрытая.

Практикум: собираем страницу «О себе»

Хватит теории. Соберем реальную страницу, используя всё, что разобрали. Замените содержимое <body> в вашем файле на это:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>Обо мне — Иван Петров</title>
</head>
<body>
    <h1>Привет, я Иван 👋</h1>

    <p>Начинающий веб-разработчик. Учусь делать сайты с нуля и документирую свой путь в этом блоге.</p>

    <h2>Мои навыки</h2>
    <ul>
        <li>HTML (в процессе освоения)</li>
        <li>Умение гуглить ошибки</li>
        <li>Терпение и кофе</li>
    </ul>

    <h2>Мои хобби</h2>
    <ul>
        <li>Фотография</li>
        <li>Бег по утрам</li>
        <li>Чтение технических блогов</li>
    </ul>

    <h2>Связаться со мной</h2>
    <p>
        Мой профиль на
        <a href="https://github.com" target="_blank">GitHub</a>
        — заходите посмотреть, что я делаю.
    </p>

    <img src="avatar.jpg" alt="Фото Ивана Петрова">
</body>
</html>

Что произойдет: сохраните файл, обновите вкладку в браузере. Вы увидите заголовок, абзац, два списка и ссылку. Если положите рядом картинку с именем avatar.jpg — появится и она.

Атрибут target="_blank" в ссылке открывает ее в новой вкладке — полезная привычка для внешних ссылок.

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

1. Забыли закрыть тег. Браузер может «съесть» часть контента или продолжить действие тега на весь оставшийся текст.

2. Кириллица в именах файлов. фото.jpg может не загрузиться на хостинге. Используйте латиницу: photo.jpg, my-avatar.jpg.

3. Файл .txt вместо .html. Браузер покажет код как текст. Проверьте расширение.

4. Несколько <h1> на странице. Для SEO и логики документа главный заголовок должен быть один.

5. Кракозябры вместо букв. Забыли <meta charset="utf-8"> или сохранили файл не в той кодировке.

Что дальше

Мы построили скелет. Если открыть страницу сейчас, она выглядит как документ из 1995 года: черный текст на белом фоне, всё в один столбик, Times New Roman.

В следующей статье рубрики «Основы веб-разработки» мы возьмем этот же HTML-файл и «наденем» на него CSS: поменяем цвета и шрифты, выстроим блоки рядом, добавим отступы и сделаем страницу похожей на современный сайт — не меняя ни единой строчки HTML.

Подписывайтесь, чтобы не пропустить: «CSS с нуля: как одеть скелет в красивый костюм».

Есть вопросы или что-то не заработало? Пишите в комментариях — разберу каждый случай.