Урок 1 · HTML

Как устроена первая HTML-страница

Редакция PraktumОбновлено 22 октября 202620 минут на урок с практикойУровень: новичок

HTML — язык разметки, которым описывают структуру страницы: заголовок, абзац, ссылку, картинку. Браузер читает файл с расширением .html и рисует то, что нашёл в тегах. Первая страница состоит из html, head, body и одного заголовка.

Зачем этот урок сейчас

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

Минимальный пример

Скопируй каркас целиком. В нём есть кодировка, заголовок вкладки и viewport — без последнего страница на телефоне выглядит как уменьшенный десктоп.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Моя первая страница</title>
</head>
<body>
  <h1>Привет, это моя страница</h1>
  <p>Здесь будет учебник.</p>
</body>
</html>

<!doctype html> включает стандартный режим. lang="ru" подсказывает язык скринридеру и переводчику. Дальше документ делится на служебную шапку и видимое тело.

Как создать файл

1. Создай папку проекта, например site.
2. Внутри создай текстовый файл и назови его index.html. Расширение именно .html, не .txt.
3. Вставь каркас, сохрани в UTF-8.
4. Открой файл в браузере двойным щелчком — так ты смотришь его с диска.
5. Когда зальёшь папку на хостинг, тот же файл станет главной страницей этой папки.

Кто отдаёт index.html

Браузер не выбирает файл по имени. Он запрашивает URL. Если URL указывает на файл — сервер отдаёт этот файл. Если на папку — сервер обычно отдаёт index.html из неё. Поэтому адрес /html/osnovy-html/ показывает содержимое index.html в этой папке. В ссылках пиши путь папки, а не имя файла.

Что писать в head

В head то, чего не видно как абзац, но без чего страница ломается.

• charset — русские буквы не превратятся в кракозябры.
• title — текст вкладки и заголовок в поиске.
• viewport — ширина на телефоне. Без него iOS и Android считают, что макету 980 пикселей, и масштабируют всё мелко.

Позже сюда добавятся стили и скрипты. Тяжёлый скрипт в head без defer останавливает разбор HTML, пока файл качается. Подключай его внизу body или с defer.

Парные и пустые теги

Парный тег держит содержимое: <p>текст</p>. Пустой тег не оборачивает текст, у него нет закрывающей пары с содержимым. К пустым относятся meta, img, br, hr, input. Им пишут атрибуты: источник картинки, кодировку, перевод строки.

<img src="/favicon.svg" alt="Логотип Praktum" width="40" height="40">
<br>
<hr>

Слэш в конце вроде <br /> в HTML5 не обязателен. Важнее не класть текст внутрь пустого тега: браузер не знает, куда его деть.

Комментарии

Комментарий — заметка для себя, браузер её не рисует. Им помечают начало шапки, временный черновик, место, куда вернёшься. Не клади в комментарий пароли и ключи: файл уедет на хостинг как есть.

<!-- Шапка сайта: логотип и меню -->
<header>...</header>

Пробелы и переносы

Несколько пробелов и переносов подряд в HTML обычно схлопываются в один. Поэтому красивые отступы в файле не станут пустым местом на экране. Вертикальный зазор делают CSS, абзацами и полями, а не десятью <br>. Перенос строки внутри абзаца тоже станет пробелом: чтобы перенести явно, нужен br или другой блок.

Что такое DOM

После загрузки браузер строит дерево узлов: документ, html, head, body, заголовок, текст. Это дерево называют DOM. DevTools показывает его во вкладке Elements. JavaScript потом ищет узлы в этом дереве методом вроде querySelector. Если тег написан с ошибкой, браузер всё равно попытается построить дерево, но структура будет не той, что ты задумал: абзац закроется раньше, список «вылезет» из родителя.

Практический вывод: смотри не только исходный файл, но и дерево. То, что видит скрипт, — DOM, а не «как было в Блокноте».

Пример. В файле ты написал два абзаца подряд. В DOM это два узла p внутри body. Если забыть закрыть первый абзац, браузер закроет его сам, когда встретит следующий блочный тег. Список, по ошибке лежащий внутри абзаца, «выпрыгнет» из него: абзац не может содержать ul. Поэтому «я же написал список внутри текста» в Elements выглядит иначе. Это не баг DevTools, это правило HTML.

Комментарии в DOM тоже есть, но на странице не видны. Пустые текстовые узлы из переносов строк появляются между тегами: скрипт, который читает childNodes, споткнётся о них, а children вернёт только элементы. На первом уроке достаточно знать разницу: пробелы в файле почти не видны на экране, но в дереве они могут жить как текстовые узлы.

Как проверить страницу

1. Открой файл в браузере, прочитай title вкладки.
2. Уменьши окно до ширины телефона: текст должен остаться читаемым.
3. F12 → Elements: есть html, head с charset, body с h1.

Частые ошибки

• Файл сохранился как index.html.txt — Windows скрыла расширение.
• Нет viewport — на телефоне всё мелко.
• Русский текст без charset.
• Теги пересеклись: <p><div></p></div>.

Доступность

Один h1 на страницу, дальше заголовки по уровню, без прыжка с h1 на h4. Язык в lang. Картинкам — alt. Страница должна читаться без стилей: выключи CSS в DevTools и проверь порядок текста.

Поддержка браузерами

Каркас HTML5 понимают все актуальные браузеры. На старте важнее кодировка и читаемый текст на узком экране, чем таблица поддержки на каждый тег.

Собери файл и открой его

Создай папку, внутри — index.html с каркасом из урока. В Блокноте включи показ расширений, чтобы файл не сохранился как .txt. Открой двойным щелчком и сравни с Live Server: с диска корневой путь /css/ не найдётся, локальный сервер даёт корень сайта. В Elements найди свои теги. Добавь комментарий над заголовком и hr между абзацами.