Что такое веб-страница

Любая страница, которую ты открываешь, начинается с обычного текстового файла. Нажми правой кнопкой почти на любой странице, выбери «Просмотр кода страницы», и увидишь HTML, который прислал сервер.

Страница является текстовым файлом

Когда ты вводишь адрес в браузере, браузер запрашивает у сервера файл и получает обычный текст. Этот текст написан на HTML, языке гипертекстовой разметки (HyperText Markup Language). Браузер читает его сверху вниз, определяет, где заголовки, абзацы, ссылки и картинки, и рисует страницу, которую ты видишь. Это можно проверить почти на любом сайте: нажми правой кнопкой и выбери «Просмотр кода страницы». За цветами и вёрсткой скрывается длинный текстовый файл, который вполне можно прочитать.

HTML является языком разметки, а не языком программирования. В нём нет циклов, и он ничего не вычисляет. Его задача в том, чтобы размечать содержимое: эта строка главный заголовок, эти три строки список, эта фраза ведёт на другую страницу. Обычно с ним работают ещё два языка. CSS отвечает за внешний вид (цвета, шрифты, отступы, вёрстку), а JavaScript заставляет страницу реагировать на щелчки и ввод текста. Этот курс посвящён первому слою. Второй разбирается в курсе по CSS.

Каркас, общий для всех страниц

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Corner Bakery</title>
  </head>
  <body>
    <h1>Corner Bakery</h1>
    <p>Fresh bread every morning from 7 am.</p>
  </body>
</html>

Первая строка, <!DOCTYPE html>, осталась от раннего веба. Сегодня она нужна только для того, чтобы браузер работал в стандартном режиме, а не в старом режиме совместимости, который повторяет ошибки браузеров 1990-х. Поэтому всегда оставляй её. Дальше идёт элемент <html>, который охватывает весь документ. Его атрибут lang указывает язык страницы. Экранные дикторы по нему выбирают правильное произношение, а инструменты перевода узнают, с какого языка переводят.

Внутри <html> две части. В <head> лежат сведения о странице, которые на самой странице не рисуются. <meta charset="utf-8"> сообщает, в какой кодировке записан файл. UTF-8 умеет хранить буквы любой письменности, включая корейскую и русскую, так что текст не превратится в странные значки. <title> задаёт название, которое видно на вкладке браузера, в закладках и в результатах поиска, и именно его экранный диктор произносит первым, когда страница открывается. В <body> находится всё, что появляется на экране.

От текста к дереву

Браузер не хранит твой HTML одной длинной строкой. Он разбирает его в дерево объектов, которое называется DOM, объектная модель документа (Document Object Model). Каждый элемент становится узлом, а элементы, записанные внутри другого элемента, становятся его потомками. На рисунке ниже title является потомком head, а h1 и p потомками body. И селекторы CSS, и JavaScript работают с этим деревом, и это одна из причин, почему важна аккуратная вложенность.

Браузеры снисходительны. Если ты забыл закрывающий тег, парсер следует правилам исправления, записанным в стандарте HTML, и всё равно строит дерево, но исправленное дерево может оказаться не тем, которое ты задумал. Привычка сразу писать структуру правильно избавит потом от многих часов недоумённой отладки.

Кто пишет правила

Тим Бернерс-Ли написал первое предложение о Всемирной паутине в марте 1989 года, когда работал в ЦЕРН, а к концу 1990 года там уже работали первый веб-сервер и первый браузер. С тех пор HTML сильно разросся. Сегодня его определяет HTML Living Standard («живой стандарт»), который ведёт WHATWG, группа, созданная производителями браузеров. В 2019 году W3C и WHATWG договорились работать над этой единственной версией. «Живой» означает, что у документа нет номеров версий и он обновляется постоянно, так что название HTML5, которое ещё встречается в книгах, стало лишь условной меткой.

Редактор ниже работает как крошечный браузер. Печатай слева, и через мгновение результат появится справа. Кнопка «Пуск» сразу перерисовывает результат. Когда решишь, что закончил, нажми «Проверить»: страница прогонит несколько проверок твоего HTML и скажет, какие ещё не пройдены. «Сначала» возвращает исходный код.