Оформление текста
Зачем это нужно
Голый текст читать тяжело: глаз ищет главное. В книге важное выделяют жирным, термины — курсивом, чужие слова берут в кавычки. В HTML для этого есть отдельные теги. Причём они сообщают не только «как выглядит», но и что это значит: «это важно», «это цитата», «это код». Это помогает поисковикам и программам чтения с экрана.
Жирный и курсив: <strong> и <em>
<strong>— важный текст. Браузер показывает его жирным.<em>(emphasis, ударение) — смысловое ударение. Показывается курсивом.
<p>Перед уходом <strong>выключи плиту</strong>. Это <em>правда</em> важно.</p>
Результат: «выключи плиту» жирным, «правда» курсивом.
Есть ещё <b> и <i> — просто жирный и просто курсив, без смысла «важно». Их используют реже:
например, <i> для названия корабля или иностранного слова.
Другие строчные теги
<p>Вода — H<sub>2</sub>O, площадь — 10 м<sup>2</sup>.</p>
<p>Цена: <s>500</s> 350 ₽. <mark>Скидка!</mark></p>
<p><small>Мелкий шрифт договора</small></p>
Результат: «2» в H₂O опущена вниз, «2» в м² поднята вверх, «500» зачёркнуто, «Скидка!» подсвечено жёлтым маркером, последняя строка мелким шрифтом.
| Тег | Смысл |
|---|---|
<sub> |
нижний индекс |
<sup> |
верхний индекс (степень) |
<s> |
зачёркнутое, уже неактуальное |
<mark> |
выделение маркером |
<small> |
мелкая приписка |
Эти теги строчные: они живут внутри абзаца и не начинают новую строку.
А <p>, <h1> — блочные: каждый занимает всю ширину и начинается с новой строки.
Цитаты
Длинная цитата — блок <blockquote>, короткая внутри предложения — <q> (браузер сам добавит кавычки).
Автора или источник пишут в <cite>:
<blockquote>
<p>Простота — залог надёжности.</p>
<cite>Эдсгер Дейкстра</cite>
</blockquote>
<p>Он сказал: <q>Сначала тесты</q>.</p>
Результат: цитата сдвинута вправо отступом, имя автора курсивом; во втором абзаце «Сначала тесты» в кавычках.
Код на странице
Для кода — тег <code>: моноширинный шрифт, все буквы одной ширины. Многострочный код кладут
в <pre> — он сохраняет пробелы и переносы строк как есть:
<p>Функция <code>print()</code> выводит текст.</p>
<pre><code>for i in range(3):
print(i)</code></pre>
Результат: print() моноширинным шрифтом прямо в предложении, ниже — код с отступами, как в редакторе.
Спецсимволы
Как показать на странице сам знак <? Если написать его прямо, браузер решит, что начинается тег.
Поэтому особые символы записывают мнемониками — кодами от & до ;:
| Пишем | Видим |
|---|---|
< |
< (less than) |
> |
> (greater than) |
& |
& |
|
неразрывный пробел |
© |
© |
<p>Условие: a < b && b > c</p>
<p>10 км</p>
Результат: Условие: a < b && b > c; «10 км» никогда не разорвётся на две строки.
Как это работает внутри
Когда браузер видит <, он переключается в режим «читаю тег». Мнемоника < — способ сказать:
«это просто символ, не тег». Внутри <pre> браузер отключает схлопывание пробелов,
поэтому отступы в коде остаются на месте — но теги внутри <pre> всё равно работают.
Частые ошибки
<strong>ради жирного заголовка. Если это заголовок — бери<h2>, а не жирный абзац.- Код без
<pre>. Многострочный код в обычном<p>склеится в одну строку. - Сырые
<и>в тексте.<p>Тег <div></p>—<div>станет настоящим тегом и исчезнет. Пиши<div>. - Забыли точку с запятой.
<без;иногда работает, иногда нет. Пиши полностью:<. <blockquote>ради отступа. Это тег для цитат; отступы делают в CSS.
Шпаргалка
| Тег | Что делает |
|---|---|
<strong> / <em> |
важное (жирный) / ударение (курсив) |
<b> / <i> |
жирный / курсив без особого смысла |
<sub> / <sup> |
нижний / верхний индекс |
<s>, <mark>, <small> |
зачёркнуто, маркер, мелкий текст |
<blockquote>, <q>, <cite> |
длинная цитата, короткая, автор |
<code>, <pre> |
код, текст с сохранёнными пробелами |
< > & |
< > & неразрывный пробел |