Тег <span>, также как и тег <div> является универсальным пустым контейнером, однако в отличие от блочного элемента <div>, строчный элемент\<span> определяет отдельные строки, символы или другие строчные элементы для их последующего оформления с помощью CSS стилей, либо для манипулирования ими при помощи скриптов. Тег <span> может быть использован, когда необходимо:

  • выделить какой-либо участок текста цветов, определить для него фон или фоновое изображение
  • изменить шрифт отдельных слов или фраз
  • применить скрипты к определенным участкам текста, например, подсветить синтаксис кода и т.д.

Чтобы не задавать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для идентификации тега использовать атрибуты class или id с именем селектора.

Тег <span> не оказывает никакое влияние на визуальное оформление элементов и не имеет семантического значения.

Синтаксис

Тег <span> - парный, его содержимое пишется между открывающим (<span>) и закрывающим (</span>) тегами.

Пример

<!DOCTYPE html>
<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <p>У моей кошки <span style="color: green;">зеленые</span> глаза.</p>
  </body>
</html>

Результат

spanexample1

В этом примере мы задали стиль непосредственно в теге.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>   
      .letter { 
      color: red; 
      font-size: 300%; /* Размер шрифта в процентах */ 
      position: relative; /* Относительное позиционирование */ 
      top: 7px; /* Сдвиг сверху */ 
    </style>
  </head>
  <body>
    <p><span class="letter">О</span>на нанесла в руках отвратительные, тревожные желтые цветы. И эти цветы очень отчетливо выделялись на черном ее весеннем пальто.</p>
    <p>Михаил Булгаков</p>
  </body>
</html>

Результат

spanexample2

В этом примере мы добавили к тегу атрибут class, и отдельно задали стили для содержимого тега.

Атрибуты

Тег <span> поддерживает также глобальные атрибуты и атрибуты событий.

Как добавить стиль к тегу <span> ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <span>:

Цвет текста внутри тега <span>:

Стили форматирования текста для тега <span>:

Другие свойства для тега <span>:

Поддержка браузера

chrome edge firefox safari opera

Практикуйте свои знания

Какое из утверждений о HTML-теге <span> верно?
Считаете ли это полезным?