SPAN

SPAN (от англ. span — промежуток, диапазон) — строчный (inline) элемент языка разметки HTML, предназначенный для выделения части текста или другого строчного содержимого с целью применения к нему стилей, атрибутов или скриптов без изменения структуры документа. В отличие от блочных элементов (например, <div>),  не создаёт переноса строки до и после себя и занимает только пространство, необходимое для его содержимого. Является одним из базовых элементов веб-вёрстки наряду с <div> и используется практически во всех современных веб-страницах.

История и стандартизация

Элемент  был впервые введён в спецификации HTML 3.2 (1997 год) как универсальный строчный контейнер. До его появления для стилизации отдельных фрагментов текста приходилось использовать элементы с семантической нагрузкой (например, , , ), что нарушало принцип разделения содержания и представления. <span> стал решением для ситуаций, когда требовалось применить стили или атрибуты к части текста, не имеющей собственного семантического значения.

В последующих версиях HTML (4.01, XHTML, HTML5) элемент  остался без изменений. В спецификации HTML5 он определён как «строчный контейнер без собственного значения» (non-semantic inline container). Его поведение полностью определяется атрибутами и CSS-правилами, применяемыми к нему.

Синтаксис и атрибуты

Элемент  является парным: открывающий тег  и закрывающий . Между ними может располагаться любой строчный контент: текст, другие строчные элементы (например, <a>, <img>, ), а также вложенные .

Основные атрибуты

class — задаёт один или несколько классов CSS для стилизации или идентификации группы элементов.
id — уникальный идентификатор элемента, используемый для адресации в CSS или JavaScript.
style — встроенные CSS-свойства, применяемые непосредственно к элементу.
title — всплывающая подсказка при наведении курсора.
lang — указывает язык содержимого элемента.
dir — направление текста (ltr — слева направо, rtl — справа налево).
**data-*** — пользовательские атрибуты для хранения произвольных данных (например, data-price="100").
hidden — скрывает элемент из отображения.
tabindex — определяет порядок фокусировки при навигации с клавиатуры.
role — задаёт семантическую роль элемента для вспомогательных технологий (например, role="button").

Все атрибуты, перечисленные в спецификации HTML для строчных элементов, применимы к .

Отличия от `<div>`

Основное различие между  и <div> заключается в типе отображения по умолчанию:

Характеристика	`<span>`	`<div>`
Тип отображения	Строчный (inline)	Блочный (block)
Перенос строки	Не создаёт	Создаёт до и после
Ширина	По содержимому	На всю доступную ширину родителя
Допустимые вложенные элементы	Только строчные	Любые
Семантическая нагрузка	Отсутствует	Отсутствует

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

Применение

1. Стилизация фрагментов текста

Наиболее распространённое использование  — выделение части текста для применения CSS-стилей:

``html В этом предложении красное слово выделено цветом. ``

2. Работа с JavaScript

Элемент  часто используется как цель для манипуляций через DOM:

``javascript const element = document.getElementById('counter'); element.textContent = newValue; ``

3. Иконки и символы

Многие библиотеки иконок (например, Font Awesome, Material Icons) используют  для отображения иконок:

``html home ``

4. Адаптивная вёрстка

С помощью  можно скрывать или показывать части текста на разных разрешениях экрана:

``html Заголовок (дополнительная информация) ``

5. Хранение данных

Атрибуты data-* позволяют хранить произвольные данные, доступные через JavaScript:

``html Иван Иванов ``

6. Доступность (accessibility)

Хотя  сам по себе не имеет семантического значения, с помощью атрибута role ему можно придать роль для скринридеров:

``html Сообщение отправлено ``

Стилизация через CSS

По умолчанию  не имеет никаких стилей. Все визуальные свойства задаются через CSS. Наиболее часто используемые свойства:

color — цвет текста.
background-color — цвет фона.
font-size, font-weight, font-family — параметры шрифта.
padding, margin — отступы (работают только по горизонтали для строчных элементов; для вертикальных отступов требуется изменение типа отображения на inline-block или block).
border — рамка.
text-decoration — подчёркивание, зачёркивание.
cursor — вид курсора при наведении.
display: inline-block — позволяет задавать ширину и высоту, сохраняя строчное поведение.

Ограничения

Внутри  нельзя размещать блочные элементы (например, <div>, , <h1>), так как это нарушает спецификацию HTML.
Вертикальные padding и margin не влияют на высоту строки, если не изменить тип отображения на inline-block.
Элемент не имеет семантического значения, что может снижать доступность контента для пользователей скринридеров при неправильном использовании.
Избыточное использование  без осмысленной структуры усложняет поддержку кода.

Альтернативы

В зависимости от задачи вместо  могут использоваться:

 — для смыслового выделения (курсив).
 — для важного выделения (жирный).
 — для выделения текста, относящегося к текущему контексту.
<code> — для фрагментов программного кода.
<abbr> — для аббревиатур.
<time> — для дат и времени.
 и  — для стилистического выделения без семантической нагрузки (устаревают, но всё ещё используются).

Выбор семантического элемента вместо  улучшает доступность и читаемость кода.

Интересные факты

Элемент  является одним из самых часто используемых HTML-элементов в интернете. По данным различных анализаторов, он встречается на более чем 90% всех веб-страниц.
В ранних версиях HTML (до 3.2) для аналогичных целей использовался элемент  (подчёркивание), который затем был переопределён как семантический.
В CSS существует псевдоэлемент ::before и ::after, которые часто применяются именно к  для добавления декоративных элементов (например, иконок или кавычек).
Элемент  может быть вложен сам в себя неограниченное количество раз, что позволяет создавать сложные цепочки стилей (например, для анимации букв).

Источники

Спецификация HTML Living Standard (WHATWG) — раздел «The span element».
Спецификация HTML 5.2 (W3C Recommendation) — раздел «4.5.26 The span element».
MDN Web Docs (Mozilla Developer Network) — «: The Content Span element».
«HTML and CSS: Design and Build Websites» by Jon Duckett (2011).
«Learning Web Design» by Jennifer Niederst Robbins (5th edition, 2018).

BFOmetr — база данных и аналитика по компаниям России.

На главную BFOmetr →