Страница — это текст с пометками

Что это вообще такое

Откройте любой сайт и нажмите Ctrl+U — браузер покажет то, из чего страница сделана. Там будет текст, а вокруг него — угловые скобки.

Это и есть HTML. Не язык программирования: в нём нет ни вычислений, ни условий, ни памяти. Это текст с пометками — способ сказать браузеру, где здесь заголовок, где абзац, а где ссылка.

<p>Привет!</p>

Зачем пометки вообще нужны? Браузер не умеет читать. Он не догадается, что первая строка — это заголовок статьи, а вторая — подпись автора: для него это просто буквы. Пометки говорят ему, чем является каждый кусок текста.

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

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

Пометки вокруг текста

Пометка называется тегом и пишется в угловых скобках. Тегов почти всегда два: один открывает, другой закрывает.

Закрывающий отличается косой чертой: <p> открыл, </p> закрыл. Вместе с текстом внутри это называется элементом.

<p>Первый абзац.</p>
<p>Второй абзац.</p>

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

Имя тега почти всегда — сокращение английского слова, и от этого запоминается легче: p — paragraph, абзац; h1 — heading, заголовок первого уровня; b — bold, жирный. Заучивать список не надо: за уровень через ваши руки пройдёт десятка полтора тегов, и это уже почти всё, чем пользуются каждый день.

Лишние пробелы и переносы строк браузер схлопывает: десять пустых строк между абзацами не дадут десяти пустых строк на экране. Отступы в коде нужны человеку, а не браузеру, — они показывают, что внутри чего, и через два урока станет понятно, насколько это важно.

Заголовки и абзацы

Два тега покрывают бо́льшую часть любого текста: <h1> — заголовок, <p> — абзац.

<h1>Домашние растения</h1>
<p>Фикус не любит, когда его переставляют.</p>
<p>Кактусу зимой почти не нужна вода.</p>

Заголовков шесть уровней: от <h1> до <h6>. Это не размеры шрифта, а глубина: <h1> — название всей страницы, <h2> — название раздела, <h3> — подраздела внутри него.

Проверить себя проще всего так: выпишите одни заголовки подряд, без текста. Вышло осмысленное оглавление — уровни расставлены верно. Вышла каша вроде «Купить · О компании · Доставка · Купить» — значит теги выбирались по размеру шрифта.

Кто этим оглавлением пользуется, кроме вас? Поисковик — по нему он понимает, о чём страница. Программа чтения с экрана — незрячий человек прыгает по заголовкам так же, как вы прыгаете глазами. Режим чтения в браузере. Всем им ваш кегль не виден вовсе, а уровни видны.

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

Элементы кладутся друг в друга, как коробки. Внутри абзаца может стоять выделение, внутри раздела — заголовок и несколько абзацев.

Правило одно: закрывают в обратном порядке. Кто открылся последним — закрывается первым.

<p>Фикус не любит, когда его <b>переставляют</b>.</p>

А вот так нельзя: <p><b>текст</p></b>. Коробки пересеклись, и браузер разберётся по-своему — а «по-своему» почти никогда не совпадает с тем, что вы хотели.

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

Есть и обратная сторона: вкладывать можно не всё во всё. Абзац внутри абзаца не получится — браузер закроет первый, встретив второй. Списка запретов заучивать не надо, а привычка смотреть на получившееся дерево под заданием избавит от девяти десятых таких сюрпризов.