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


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

ТелеграмПодкастБесплатные учебники

Читать дальше

<div>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<dl>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<option>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<ul>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023