<span>

Тег <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.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.