<span>
- 25 января 2023
Тег <span>
— строчный элемент, используемый для группировки и применения стилей к небольшому фрагменту текста или части большого текста, не передавая при этом никакого смыслового значения сам по себе. Он может использоваться для применения таких стилей, как цвет, размер шрифта, вес шрифта и так далее.
Синтаксис тега <span>
<span>Текст для стилизации</span>
Спецификация HTML
Тег является частью спецификации HTML Living Standard.
Семантический или нет
Тег <span>
не считается семантическим, так как не придаёт никакого конкретного значения содержимому.
Примеры использования
Применение стилей к определенному участку текста:
<p>Lorem ipsum dolor sit amet, consectetur <span class="highlight">adipiscing elit</span>.</p>
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
Обертывание ссылки вокруг определенного участка текста:
<p>Читайте нашу <span><a href="#">Политику конфиденциальности</a></span> для получения дополнительной информации.</p>
Использование <span>
для применения различных стилей к разным частям текста:
<p><span class="highlight">Важно:</span> Пожалуйста, заполните все поля перед отправкой формы.</p>
<p><span class="warning">Предупреждение:</span> Не пытайтесь сделать это дома.</p>
<style>
.highlight {
color: blue;
font-weight: bold;
}
.warning {
color: red;
font-weight: bold;
}
</style>
Для чего использовать тег <span>
- применение различных стилей к разным частям текста;
- чтобы обернуть ссылку вокруг определенного участка текста;
- добавить всплывающую подсказку к определенному участку текста;
- выделение определенного слова или фразы в предложении;
- применить инлайн-стили к небольшому фрагменту текста (но так лучше не делать);
- применить класс к определенному участку текста для использования с JavaScript;
- чтобы добавить дополнительный текст к ссылке, например «нажмите здесь» или «читать далее».
Атрибуты тега <span>
Тег <span>
не имеет специфических атрибутов.
Глобальные атрибуты
Тег поддерживает все глобальные атрибуты HTML.
Ограничения
Тег <span>
используется только для стилизации и сам по себе не несет никакой смысловой нагрузки.
Нюансы
- Если тег
<span>
используется без каких-либо стилей или классов, он не оказывает никакого влияния на содержимое. - Рекомендуется использовать семантические HTML-теги, когда это возможно, а тег
<span>
использовать только для стилизации.
Поддержка браузеров
Тег поддерживается всеми современными браузерами.
Актуальная информация — на сaniuse.
Альтернативные теги
<em>
— используется для обозначения важности или значимости.<strong>
— используется для обозначения сильной важности.<small>
— используется для обозначения мелкого шрифта.<title>
— используется для указания названия произведения, например, книги или фильма.<q>
— используется для обозначения короткой цитаты.<abbr>
— используется для обозначения аббревиатуры или акронима.
Чем заменить тег
Прямой замены тегу <span>
не существует, но вы можете использовать альтернативные теги из раздела выше.
Актуальность
Тег <span>
не является устаревшим.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023