2 Модуль 1 Первая страница 13 мин урок 2 из 25

Скелет документа: что должно быть в каждом файле

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

Что ты научишься делать

  • Напишешь полный скелет страницы по памяти, без подглядывания
  • Поймёшь, чем head отличается от body и что попадает в каждый
  • Починишь «кракозябры» одной строкой про кодировку

#Почему трёх строк мало

В прошлом уроке страница из заголовка и абзаца заработала. Браузер простил нам всё остальное: он умеет достраивать недостающее.

Но «умеет достроить» — не то же самое, что «сделает правильно». Без явного скелета браузер угадывает язык страницы, кодировку и название вкладки. Иногда угадывает мимо, и русский текст превращается в пÑивеÑ.

#Полный скелет: разбор по строчкам

HTMLindex.html
<!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>Варим кофе с 8 утра.</p></body></html>

Выглядит громоздко, но каждая строка тут за что-то отвечает. Разберём по порядку.

#DOCTYPE — «читай по современным правилам»

<!DOCTYPE html> — это не тег, а объявление. Оно всегда стоит первой строкой и говорит браузеру: перед тобой современный HTML, включай нормальный режим.

Если doctype забыть, браузер переключится в режим совместимости (quirks mode) — эмуляцию правил из девяностых. Вёрстка начнёт разъезжаться по необъяснимым причинам. Просто пиши эту строку всегда.

#html lang — на каком языке страница

Тег <html> — корень документа. Всё остальное лежит внутри него.

Атрибут lang="ru" сообщает язык. Это не украшение: по нему браузер предлагает перевод, правильно переносит слова, а программа чтения с экрана выбирает русский голос вместо английского. Одна строка — и незрячий человек услышит нормальную речь, а не «кха-ках рах-бох-тает вэб».

#head — то, что не видно

head — служебная часть. Ничего из неё не появляется на странице. Здесь лежит информация о странице: кодировка, название вкладки, описание для поисковика, подключение стилей.

<meta charset="UTF-8"> — кодировка. Она объясняет браузеру, как превращать байты файла в буквы. UTF-8 знает и русский, и китайский, и эмодзи. Без этой строки кириллица легко превращается в мусор.

<meta name="viewport" ...> — строка для телефонов. Без неё мобильный браузер делает вид, что экран шириной 980 пикселей, и показывает страницу мелкой-мелкой. Подробно разберём в 22-м уроке, а пока просто пиши.

<title> — название страницы. Оно попадает на вкладку браузера, в закладки и в результаты поиска. Это первое, что человек про тебя прочитает.

#body — то, что видно

body — всё содержимое страницы: тексты, картинки, кнопки, меню. Если что-то должен увидеть человек — это живёт в body.

Так не надо

<body>
  <title>Кофейня</title>
  <h1>Меню</h1>
</body>

Заголовок вкладки заехал в body. Браузер его, может, и подхватит, но структура сломана: служебное перемешалось с видимым.

Так надо

<head>
  <title>Кофейня</title>
</head>
<body>
  <h1>Меню</h1>
</body>

Служебное — в head, видимое — в body. Так работают все инструменты: поисковики, читалки, соцсети при показе ссылки.

#Вложенность: коробки в коробках

Документ — это дерево. html содержит head и body, body содержит заголовки и абзацы, абзац может содержать strong. Каждый следующий уровень лежит внутри предыдущего.

Главное правило вложенности: теги закрываются в обратном порядке. Открыл p, потом strong — закрывай сначала strong, потом p. Пересекаться теги не могут.

Так не надо

<p>Кофе <strong>вкусный</p></strong>

Теги пересеклись: p закрылся раньше strong. Браузер будет исправлять это по своим правилам, и результат тебя удивит.

Так надо

<p>Кофе <strong>вкусный</strong></p>

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

Дерево документа

Вложенность тегов слоями: каждый уровень — этаж выше предыдущего.

УровеньТег
0html — корень, всё внутри него
1head и body
2header, main, footer внутри body
3h1, p, a внутри секций

#Собери скелет руками

Поменяй title и посмотри, как меняется подпись вкладки внутри превью. Попробуй убрать meta charset и добавь текст с буквой «ё» — в некоторых браузерах увидишь тот самый мусор.

Скелет целиком
В песочницу

#Комментарии

Иногда нужно оставить заметку для себя — она не должна попасть на страницу. Для этого есть комментарии.

HTMLКомментарий
<!-- Тут будет форма записи, пока заглушка --><p>Скоро откроем запись онлайн.</p>

Где спотыкаются почти все

Кириллица превращается в набор символов

Почему Файл сохранён в UTF-8, а браузер без строки meta charset решил, что это другая кодировка, и прочитал байты не теми буквами.

Как надо Первой строкой внутри head ставь <meta charset="UTF-8">. И проверь, что редактор сохраняет файл именно в UTF-8 — VS Code делает это по умолчанию.

Стили или заголовок написаны внутри body

Почему Служебные теги в теле документа сбивают структуру: часть инструментов их просто не найдёт.

Как надо Запомни разделение: head — информация о странице, body — сама страница.

Забыт DOCTYPE

Почему Браузер включает режим совместимости со старыми сайтами, и размеры блоков считаются по устаревшим правилам. Вёрстка едет, а причину не найти.

Как надо Самая первая строка файла — всегда <!DOCTYPE html>.

Теги закрыты в неправильном порядке

Почему HTML — дерево, ветки не могут пересекаться. Браузер чинит такое по своим правилам, и результат непредсказуем.

Как надо Закрывай изнутри наружу и держи отступы: с ними пересечение видно глазами.

Кодировка charset
Правило, по которому байты файла превращаются в буквы. Современный стандарт — UTF-8.
Атрибут attribute
Дополнительная настройка тега, пишется внутри открывающего тега: lang="ru".
Мета-тег meta tag
Служебная строка в head с информацией о странице: кодировка, описание, настройки для телефонов.
Режим совместимости quirks mode
Режим браузера, который включается без DOCTYPE и считает размеры по правилам старых версий Internet Explorer.
Вложенность nesting
Расположение одних элементов внутри других. Даёт дереву документа его структуру.

Проверь себя

  1. Куда попадает содержимое тега title?

    <code>title</code> лежит в <code>head</code>, а значит на самой странице не отображается. Его показывает вкладка, закладка и поисковик.

  2. Что произойдёт, если убрать meta charset?

    Браузер начнёт угадывать кодировку. Иногда угадает верно, иногда — нет, и тогда вместо «Привет» появится «ÐÑивеѻ.

  3. Какая запись вложена правильно?

    Теги закрываются в обратном порядке: последним открыли <code>strong</code> — первым его и закрываем.

  4. Зачем нужен атрибут lang у тега html?

    Атрибут не переводит текст, а сообщает, на каком языке он написан. От этого зависят переносы, предложение перевода и голос программы чтения с экрана.

  5. Что из перечисленного пишется внутри head?

    Верных вариантов несколько.

    В <code>head</code> живёт служебное: <code>meta</code> и <code>title</code>. Заголовки и абзацы — видимое содержимое, им место в <code>body</code>.

Задание

Скелет по памяти

Свёрстай содержимое страницы «О себе»: заголовок первого уровня с именем, заголовок второго уровня «Чем занимаюсь» и под ним абзац. Внутри абзаца выдели одно словосочетание тегом em — так помечают смысловое ударение.

Скелет вокруг соберётся сам, тебе нужно только содержимое body.

Открыть в песочнице
    Подсказка 1

    h2 пишется так же, как h1, только цифра другая: <h2>Чем занимаюсь</h2>.

    Подсказка 2

    em ставится вокруг слов внутри абзаца: <p>Люблю <em>тихие места</em>.</p>

    Показать решение
    HTMLindex.html
    <h1>Марина Ковалёва</h1><h2>Чем занимаюсь</h2><p>Учусь верстать сайты и уже могу собрать <em>простую страницу</em> с нуля.</p>

    Проверь себя