Тег small отмечает побочную мысль: оговорку, условие, строку о правах. В стандарте это называется small print, «мелкий шрифт» в юридическом смысле. Название - от английского small, «маленький». Тег парный, закрывающий обязателен, собственных атрибутов нет, только глобальные. Он входит в стандарт HTML и не устарел, а по умолчанию браузер делает текст внутри мельче окружающего.
<p>Чайник Аква-2: от 990 ₽ <small>при заказе от двух штук</small></p>В этой статье
Что делает тег small в HTML
Тег small описывает текст, который уточняет основной, но не составляет его смысл: условие к цене, строку об авторских правах, источник, оговорку в конце предложения. Такой текст нужен, но читателя он не должен отвлекать, поэтому его набирают мельче. Стандарт WHATWG описывает элемент как «side comments», то есть побочные замечания, вроде small print.
Пример: три случая, где нужен small
Нажимайте на кнопки: в каждом случае оговорка набрана мельче, вокруг неё показаны теги small, а под текстом написано, что отмечено и почему.
У всех трёх случаев общее: основная мысль осталась крупной, а уточнение ушло в мелкий шрифт. Тег small описывает роль текста, а не просто его размер. Если убрать оговорку, основной текст всё равно будет понятен.
Тег small или CSS: как выбрать
Мельче текст можно сделать тремя способами, и выбор зависит от того, что этот текст значит.
Побочная оговорка, условие, права на текст - нужен small. Слово надо выделить как важное - нужен strong, а не мелкий шрифт: small не снимает важность с текста и не заменяет её. Мельче нужно только для дизайна и смысла у этого нет - берут span с классом и CSS. Подробнее про важность - на странице strong.
<p>Цена от 990 ₽ <small>при заказе от двух штук</small></p>
<p><strong>Возврату не подлежит.</strong></p>
<p>Слоган <span class="fine">почти</span> без слов.</p>| Признак | small | span с классом | Тег заголовка |
|---|---|---|---|
| Что сообщает | Побочная оговорка | Ничего, только вид | Заголовок раздела |
| Пример | Условие к цене, права на текст | Слово помельче в слогане | Подзаголовок статьи |
| Размер | Мельче родителя по умолчанию | Как задано в CSS | Как задано в CSS |
| Роль в структуре доступности | Отдельной роли нет | Отдельной роли нет | heading |
Пример: подберите тег к ситуации
Под каждой ситуацией четыре кнопки. После выбора появляется разбор: верно или нет и почему. Внизу подсчёт ответов. Выбор можно менять.
Как выглядит small и как изменить размер
Размер задаёт значение smaller свойства font-size: «мельче, чем у родителя». Конкретное число спецификация CSS оставляет браузеру. В Chrome текст уменьшается примерно в 1,2 раза: в абзаце размером 16 пикселей small даёт 13,3 пикселя. Жирность, курсив и цвет тег не меняет, поэтому small внутри strong остаётся жирным.
small {
font-size: 0.85em;
color: #5B6270;
}Первая строка задаёт размер: 0,85 от размера родителя, то есть чуть мельче, чем по умолчанию. Вторая делает текст серым, чтобы он ещё сильнее отходил на второй план. Единица em считается от размера родителя. Если задать font-size: 12px, размер станет одинаковым на любой глубине, а вложенные small перестанут мельчать.
Вложенные small: почему текст мельчает дальше
Каждый вложенный small считает свой размер от размера родителя, а родитель сам уже стал мельче. Поэтому глубина растёт, а текст уменьшается: 16 пикселей, потом 13,3, потом 11,1 и так далее, каждый раз в 1,2 раза меньше. Нижней границы у этой цепочки в браузере нет, и на пятом-шестом уровне текст перестаёт читаться.
Пример: вложите small несколько раз
Кнопка добавляет ещё один small внутрь предыдущего. Ниже подписан размер каждого уровня в пикселях, а в последней строке - размер самого глубокого. «Сбросить» возвращает один уровень.
Отсюда правило: small внутри small обычно означает ошибку вёрстки. Случайное вложение возникает, когда оговорку обёртывают в small внутри блока, который уже набран мелким шрифтом.
А где тег big
В старом HTML у small была пара - тег big, «большой», который делал текст крупнее. В современный стандарт он не входит и считается устаревшим. Браузеры его пока показывают: текст становится примерно в 1,2 раза крупнее, но полагаться на это не стоит. Вместо big нужен CSS: font-size: larger или конкретное значение, а если текст надо выделить смыслом, то strong или em. Про них есть отдельные страницы: strong и em.
Атрибуты тега small и правила записи
Собственных атрибутов у small нет, работают только глобальные: class, id, title, lang, style и остальные. Тег парный: закрывающий </small> обязателен. Внутри допустимы только текст и другие строчные теги, блочные вроде p или div вкладывать нельзя. Стандарт также просит не применять его к длинным отрывкам: нескольким абзацам, спискам и целым разделам.
<p>Цена от 990 ₽ <small class="cond">при заказе от двух штук</small></p>
<small><p>Так нельзя: абзац внутри small.</p></small>Читают ли small программы чтения с экрана
У элемента small нет отдельной роли в структуре доступности: по описанию MDN его роль generic, то есть обычный контейнер без особого смысла. Программа чтения с экрана произнесёт текст так же, как соседний, и не сообщит, что он мелкий. Озвучивание в NVDA, JAWS и VoiceOver мы не проверяли.
Не прячьте в small то, что читателю нужно знать. Мелкий шрифт читается хуже, особенно на телефоне, и многие пропустят строку целиком. Условие, срок или ограничение, от которого зависит решение, лучше написать обычным размером, а при необходимости выделить через strong. Пометка «зачёркнуто и неактуально» - отдельная задача тега s.
Частые ошибки
Большинство ошибок с этим тегом сводится к одной привычке: считать его кнопкой «сделать мельче».
| Ошибка | Что происходит | Как исправить |
|---|---|---|
small на целый абзац, список или раздел | Смысл «побочная оговорка» пропадает, а читать мелкий текст тяжело | Оставить small для короткой строки, остальное оформить классом и CSS |
small ради дизайна, когда смысла нет | Тег обещает «оговорка», а там просто оформление | span с классом и font-size |
small вместо подзаголовка | Структура страницы теряет заголовок, стандарт такое запрещает | Тег заголовка нужного уровня |
Расчёт, что small уберёт важность у strong или em | Не убирает: акцент и важность остаются | Убрать сам strong или em |
Вложенные small | Размер уменьшается с каждым уровнем, текст перестаёт читаться | Оставить один small или задать размер в CSS |
| Существенное условие в мелком шрифте | Читатель пропускает его и принимает решение без него | Написать обычным размером |
Устаревший big в паре к small | Тег не входит в стандарт | CSS: font-size: larger |
