Выделение: вид и смысл
Внутри абзаца текст можно выделить. Тегов для этого четыре, и они разбиты на две пары.
<p>Фикус <b>не любит</b> сквозняки.</p>
<p>Фикус <strong>не любит</strong> сквозняки.</p>На экране это одно и то же — жирный текст. А значат они разное.
<b> говорит «покажи толще». <strong> говорит «это важно». Разница не видна глазом, но её слышно: программа чтения с экрана повысит голос на <strong> и не заметит <b>.
Та же пара у наклонного: <i> — «покажи курсивом», <em> — «сделай смысловой акцент».
<p>Это <em>очень</em> важно.</p>Слово «очень» курсивом, и на нём будет ударение при чтении вслух
Откуда вообще взялись две пары. Раньше в HTML были только <b> и <i>, и они значили ровно «нарисуй так». Потом стало ясно, что страницу читают не только глазами: её озвучивают, по ней ищут, её показывают на часах без курсива вовсе. Тогда и появились смысловые теги, а старые остались — выбрасывать их было бы жестоко по отношению к миллионам живых страниц.
Это общее устройство языка, и дальше вы увидите его ещё не раз: сначала были теги про вид, потом их заменили теги про смысл. Правило выбора всегда одно и то же — брать смысловой, кроме случаев, когда смысла и правда нет.
Пробелы и переносы
Правило, которое удивляет всех: браузер схлопывает пробелы. Сколько бы вы ни поставили пробелов подряд и сколько бы ни сделали переносов строки — покажется один пробел.
Это сделано нарочно: код можно форматировать как удобно, вкладывать отступами, переносить длинные строки — на результат это не влияет. Отступы в разметке нужны человеку.
А если перенос всё-таки нужен?
<p>Москва, Тверская, 1<br>Второй этаж</p><br> — принудительный перенос. Тег без содержимого, закрывать его не надо.
Ещё один тег без содержимого — <hr>: горизонтальная черта, смысловой разрыв между частями текста.
Цитаты, код и мелкий текст
Несколько тегов для особых кусков текста.
<blockquote>
<p>Растение не умирает от того, что его забыли полить один раз.</p>
</blockquote><blockquote> — цитата целым куском. Браузер отодвинет её от левого края. Внутри обычно абзац: цитата — это блок, а не строчка.
Короткая цитата внутри строки — <q>, и браузер сам подставит кавычки.
<p>Он сказал <q>полью завтра</q> и забыл.</p>Для кода и команд — <code>. Браузер покажет их моноширинным шрифтом, где все буквы одной ширины.
<p>Наберите <code>npm install</code> в терминале.</p>Команда выделится шрифтом, в котором её не спутать с обычным текстом
Есть ещё <small> — мелкий текст: сноска, оговорка, копирайт. И <mark> — подсветка, как маркером: так помечают найденное слово в результатах поиска по странице.
Если нужен блок кода в несколько строк, одного <code> мало: он не сохраняет переносы, а их схлопнет общее правило про пробелы. Тогда берут пару: <pre><code>. Внешний pre отвечает за то, чтобы пробелы и переносы остались как есть, внутренний code — за смысл.
Знаки, которые надо записывать особо
Что делать, если в тексте нужен сам знак «меньше»? Браузер решит, что начинается тег.
<p>5 < 7</p>Покажется «5», а дальше браузер будет искать тег и съест часть текста
Для таких знаков есть замены — их называют мнемониками. Пишутся с амперсанда и заканчиваются точкой с запятой.
< знак меньше
> знак больше
& амперсанд
неразрывный пробел<p>5 < 7</p>Покажется: 5 < 7
Обязательных всего три: <, > и &. Всё остальное — русские буквы, кавычки, тире, знак евро — пишется как есть, если в head стоит кодировка.
Отдельно стоит неразрывный пробел . Он выглядит как пробел, но по нему не переносится строка: «10 кг», «А. С. Пушкин» — чтобы число не оторвалось от единицы, а инициалы от фамилии.