Тег <small>
Описание
Тег <small>
уменьшает размер текста на один уровень относительно базового шрифта (обычно с размера medium до small). В HTML5 этот тег получил семантическое значение для обозначения "мелкого шрифта" - второстепенной информации, комментариев, юридических текстов.
<p>Основной текст <small>дополнительное примечание</small></p>
Ключевые особенности:
- Уменьшает размер текста примерно на 20% (от родительского элемента)
- В HTML5 имеет семантическое значение (а не только визуальное)
- Может быть вложенным (размер будет уменьшаться с каждым уровнем)
- Поддерживает все inline-элементы внутри себя
- Часто используется для юридических текстов, копирайтов, примечаний
<!-- Юридическая информация -->
<div>
<p>Специальное предложение действует до 31 декабря</p>
<small>*Акция не распространяется на товары из распродажи</small>
</div>
<!-- Подпись к изображению -->
<figure>
<img src="photo.jpg" alt="Пример фото">
<figcaption><small>Фотография сделана 15 мая 2023 года</small></figcaption>
</figure>
<!-- Копирайт в футере -->
<footer>
<small>© 2023 Компания. Все права защищены.</small>
</footer>
<!-- Вложенное уменьшение -->
<p>
Основной текст
<small>Примечание
<small>(уточнение)</small>
</small>
</p>
Рекомендации по использованию:
- Используйте для юридических текстов, примечаний, комментариев
- Не применяйте просто для уменьшения текста (используйте CSS)
- Избегайте более 2-3 уровней вложения
- Для важной информации не полагайтесь только на уменьшение размера
- Сочетайте с семантическими тегами (
<footer>
,<aside>
)
<!-- Неправильно: просто для уменьшения текста -->
<p><small>Весь этот абзац мелким шрифтом</small></p>
<!-- Правильнее -->
<p style="font-size:0.8em">Абзац мелким шрифтом</p>
Тег <small>
в HTML5 служит для семантического выделения второстепенной информации, а не просто как инструмент изменения размера текста, что важно для доступности и SEO.
Атрибуты
accesskey | Горячая клавиша для активации |
class | CSS-классы для стилизации |
contenteditable | Разрешает редактирование |
data-* | Пользовательские данные |
dir | Направление текста |
hidden | Скрывает элемент |
id | Уникальный идентификатор |
lang | Язык содержимого |
spellcheck | Проверка орфографии |
style | Инлайновые стили |
tabindex | Порядок перехода |
title | Всплывающая подсказка |
translate | Определяет возможность перевода |
Поддержка браузерами
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|
2.0 | 1.0 | 2.0 | 1.0 | 1.0 |