HTML тег <small>
Тег <small> уменьшает размер шрифта текста на один уровень по сравнению с базовым размером шрифта документа.
HTML-тег <small> используется для второстепенных комментариев и мелкого шрифта — контента второстепенной важности, такого как уведомления об авторских правах, правовые оговорки, информация о лицензии, атрибуции и сноски рядом с ценой. Браузеры отображают его примерно на один размер меньше окружающего текста (приблизительно 80% от размера шрифта родительского элемента), однако его реальная ценность заключается в семантике: он сообщает браузерам и вспомогательным технологиям, что текст является сноской, а не заголовком или основным сообщением.
Когда использовать <small> (и когда не стоит)
Это ключевое различие, которое упускают многие разработчики. В HTML5 тег <small> — не универсальный инструмент «сделать этот текст меньше». Если вам нужно изменить визуальный размер текста по дизайнерским соображениям, используйте вместо него CSS-свойство font-size.
Используйте <small>, когда содержимое является мелким шрифтом или второстепенным комментарием:
- Строки об авторских правах в нижнем колонтитуле
- Правовые оговорки и условия («Применяются условия»)
- Сноска со звёздочкой рядом с ценой или процентной ставкой
- Примечания об атрибуции и лицензировании
Используйте CSS font-size тогда, когда вам просто нужен более мелкий текст без семантики «второстепенного комментария» — например, стилистически уменьшенная подпись или метка.
Как и теги <i>, <b>, <sub> и <sup>, тег <small> полностью семантичен в HTML5 и не нарушает принцип разделения структуры и представления. Это строчный элемент, поэтому он располагается внутри строки текста, а не начинает новый блок.
Синтаксис
Тег <small> используется в паре. Содержимое записывается между открывающим (<small>) и закрывающим (</small>) тегами.
Пример HTML-тега <small>:
<!DOCTYPE html>
<html>
<head>
<title>Usage of the SMALL tag</title>
</head>
<body>
<p>The interest rate is only 10%*</p>
<small>* per day</small> /
</body>
</html>Пример HTML-тега <small> внутри тега <div>:
<!DOCTYPE html>
<html>
<head>
<title>Usage of the SMALL tag</title>
</head>
<body>
<h1>Small tag example</h1>
<p>This is some standard paragraph text.</p>
<div>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<small>This is a small text.</small>
</div>
</body>
</html>Примеры из реальной практики
Строка об авторских правах в нижнем колонтитуле
Уведомление об авторских правах — классический пример мелкого шрифта, поэтому оно вполне уместно в элементе <small>:
<footer>
<small>© 2024 Example Inc. All rights reserved.</small>
</footer>Мелкий шрифт рядом с ценой
Используйте <small> для оговорки, уточняющей цену или ставку:
<p>
$9.99/month
<small>Billed annually. Taxes not included.</small>
</p>Вложенные теги <small> для дальнейшего уменьшения размера
Элемент <small> можно поместить внутри другого элемента <small>. Каждый уровень снова уменьшает размер шрифта относительно родительского элемента, поэтому чем глубже вложенность, тем меньше текст:
<p>
Main text
<small>
smaller side note
<small>even smaller detail</small>
</small>
</p>Атрибуты
Тег <small> поддерживает глобальные атрибуты и атрибуты событий.
Как стилизовать HTML-тег <small>
Размер по умолчанию для тега <small> задаётся через CSS, поэтому вы можете переопределить его с помощью свойства font-size. Приведённый ниже пример сохраняет семантический смысл мелкого шрифта, управляя при этом точным внешним видом:
<!DOCTYPE html>
<html>
<head>
<title>Styling the small tag</title>
<style>
small {
font-size: 0.75em;
color: #777;
}
</style>
</head>
<body>
<p>
Subscribe today!
<small>Cancel anytime.</small>
</p>
</body>
</html>Помните о различии: используйте элемент <small>, когда текст является мелким шрифтом или второстепенным комментарием, и используйте CSS-свойство font-size, когда вам просто нужно изменить визуальный размер обычного текста.