Теги и элементы

Элемент обычно состоит из трёх частей подряд: открывающего тега, содержимого и закрывающего тега с косой чертой.

Из чего состоит элемент

Посмотри на <p>Bread is ready.</p>. Открывающий тег <p> говорит, что здесь начинается абзац. Закрывающий тег </p>, с косой чертой после первой угловой скобки, говорит, что он закончился. Всё между ними является содержимым. Всё вместе, теги и содержимое, называется элементом. Люди часто говорят «тег», имея в виду элемент, и в разговоре это нормально, но разница помогает при чтении документации: тег является частью в угловых скобках, а элемент готовым кусочком страницы.

Атрибуты добавляют подробности

Открывающий тег может нести атрибуты, дополнительные настройки вида name="value". В <a href="menu.html">Menu</a> атрибут href указывает, куда ведёт ссылка. В <html lang="en"> атрибут lang называет язык. Значение пиши в двойных кавычках: стандарт разрешает некоторые значения без кавычек, но кавычки никогда не мешают. Несколько атрибутов разделяются пробелами, и их порядок не важен. Некоторые атрибуты, например required у поля формы, логические: достаточно написать одно имя, чтобы включить их.

<p class="note" id="opening">We open at <strong>7 am</strong>.</p>

Вложенность: закрывай в обратном порядке

Элементы помещаются внутрь других элементов. В примере выше <strong> находится внутри <p>. Правило такое же, как со скобками в арифметике: то, что открылось последним, закрывается первым. <p><strong>7 am</p></strong> записано неверно, потому что абзац закрывается, пока элемент strong ещё открыт. Браузер попытается угадать, что ты имел в виду, но разные ошибки приводят к разным догадкам. Если сдвигать дочерние элементы на два пробела, как в примерах этого курса, вложенность легко увидеть.

Пустые элементы

У некоторых элементов не может быть содержимого, поэтому у них нет закрывающего тега. Их называют пустыми (void). Самые частые: <br> (перенос строки), <hr> (тематический разрыв), <img>, <input>, <meta> и <link>. Иногда их пишут с косой чертой, например <br />. В HTML эта черта разрешена и игнорируется, так что работают обе формы.

Смысл, а не вид

Внутри абзаца можно выделить слова тегом <strong> для особой важности и <em> для смыслового ударения, такого, которое меняет произношение фразы. Браузеры показывают strong жирным, а em курсивом, но суть в смысле. Экранный диктор может прочитать их другим голосом, а поисковик считает их важными словами. Если тебе нужен жирный текст только для красоты, это задача CSS. <b> и <i> по-прежнему существуют для текста, который выделяется без дополнительной важности, например название корабля или иностранное слово.

Особые символы и комментарии

Поскольку < начинает тег, его нельзя набрать как обычный текст. Вместо него пиши ссылку на символ: < для знака «меньше», > для знака «больше» и & для самого амперсанда. Комментарий, <!-- like this -->, браузер игнорирует, и он удобен для заметок самому себе. И наконец, HTML схлопывает пробелы: десять пробелов или три переноса строки в файле превращаются на экране в один пробел. Вёрстка получается из элементов и CSS, а не из нажатий на пробел.