Структура документа

До сих пор мы писали отдельные кусочки разметки. Настоящая страница — это файл с расширением .html, у которого есть обязательный каркас: несколько тегов, которые говорят браузеру, что перед ним за документ и как его читать.

Каркас страницы

Вот минимальная правильная страница:

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

В превью видно только содержимое <body>: всё остальное — служебные сведения для браузера.

Из чего он состоит

Атрибут lang у <html> указывает язык страницы. По нему браузер выбирает правила переноса слов, а программы чтения с экрана — произношение.

Что лежит в head

Внутри <head> пишут метаданные — данные о самой странице:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Кофейня «Зерно»</title>
  </head>
  <body>
    <p>Название страницы видно на вкладке браузера, а не здесь.</p>
  </body>
</html>

<meta charset="utf-8"> задаёт кодировку — способ хранить буквы в файле. <meta name="viewport"> говорит телефонам показывать страницу в натуральную ширину, а не уменьшенной копией компьютерной версии. <title> — текст на вкладке и в результатах поиска.

Первый файл

Создайте папку для проекта и в ней файл index.html:

my-site/
└── index.html

Откройте файл в любом редакторе кода (например, VS Code), вставьте каркас и сохраните. Затем откройте файл в браузере двойным щелчком. Имя index.html особое: сервер отдаёт этот файл, когда адрес заканчивается на папку.

Отступы и регистр

Браузеру безразличны отступы и переносы строк между тегами — их делают для людей. Принято сдвигать вложенные элементы на два пробела. Теги пишут строчными буквами: <body>, а не <BODY>.

Частая ошибка

Если пропустить <meta charset="utf-8">, браузер может прочитать русские буквы в неправильной кодировке и показать вместо текста «кракозябры» вроде Привет. Ставьте эту строку первой внутри <head> — до <title> и всего остального. И не кладите видимое содержимое в <head>: заголовки и абзацы должны быть только в <body>.