Тег <span>

IE
9.0+
Chrome
8.0+
Opera
10.5+
Safari
3.1+
Firefox
4.0+
Android
2.0+
iOS
2.0+

Тег <span> предназначен для определения строчных элементов документа. В отличие от блочных элементов, таких как <table>, <p> или <div>, с помощью тега <span> можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри абзаца (тега <p>) можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег <span> и определить для него стиль текста. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.

Закрывающий тег обязателен.

<span>...</span>

Атрибуты

Для этого тега доступны универсальные атрибуты и события.

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег span</title>
  <style>
    body { 
     font-family: Arial, sans-serif; /* Определяем шрифт */ 
    }
    p span:first-child { 
     color: red; /* Красный цвет символов */ 
     font-size: 200%; /* Размер шрифта в процентах */ 
     position: relative; /* Относительное позиционирование */ 
     top: 5px; /* Сдвиг сверху */ 
    }
  </style> 
 </head>
 <body>

  <p>
    <span>К</span>то не умеет притворяться, тот не умеет царствовать. 
    <address>Людовик XI</address>
  </p>
 
 </body>
</html>

Результат данного примера показан ниже:

Вид текста, оформленного с помощью тега span и стилей

Категория: Строчные элементы, Форматирование

Статьи по теме