HTML-элемент <span>
является основным строковым контейнером для фразового контента, который, по существу, ничего не представляет. Он может использоваться для группировки элементов в целях стилизации (использование атрибутов class
или id
) или потому, что они имеет общие значения атрибутов, например lang
. Он должен быть использован только когда нет другого подходящего по семантике элемента. <span>
очень похож на элемент <div>
, но <div>
является блочным элементом, в то время как <span>
является строчным.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Категории контента | Потоковый контент, фразовый контент. |
---|---|
Разрешенное содержимое | Фразовый контент. |
Пропуск тега | Ни одного; Оба тега, открывающий и закрывающий, являются обязательными. |
Разрешенные родительские элементы | Любой элемент, который разрешает фразовый или потоковый контент в качестве содержимого. |
Разрешенные роли ARIA | Любые |
DOM-интерфейс | HTMLSpanElement (до HTML5, интерфейсом был HTMLElement ) |
Атрибуты
К этому элементу применимы только глобальные атрибуты.
Пример 1
HTML
<p><span>Какой-нибудь текст</span></p>
Результат
Пример 2
HTML
<li><span> <a href="portfolio.html" target="_blank">Посмотреть мое портфолио</a> </span></li>
CSS
li span { background: gold; }
Результат
Спецификации
Спецификация | Статус | Комментарий |
---|---|---|
HTML Living Standard Определение '<span>' в этой спецификации. |
Живой стандарт | |
HTML5 Определение '<span>' в этой спецификации. |
Рекомендация | DOM-интерфейс теперь HTMLSpanElement . |
HTML 4.01 Specification Определение '<span>' в этой спецификации. |
Рекомендация |
Поддержка браузерами
Компьютеры | Мобильные | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
span | Chrome Полная поддержка Да | Edge Полная поддержка Да | Firefox Полная поддержка 1 | IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
Легенда
- Полная поддержка
- Полная поддержка
Смотрите также
- HTML-элемент
<div>