Тег span (от английского span, «промежуток») - универсальный строчный контейнер. Он оборачивает часть текста внутри строки, чтобы к ней можно было применить стиль, класс или скрипт. Сам по себе span ничего не значит и ничего не меняет в виде: без стилей текст внутри выглядит так же, как вокруг. Тег парный, закрывающий обязателен.
Раз span ничего не значит, у него две типичные беды. Первая: его берут там, где уже есть подходящий по смыслу тег, например strong, em или time. Вторая: ему пытаются задать ширину и высоту и удивляются, что ничего не происходит, ведь строчный элемент их не принимает. От блочного контейнера div он отличается именно этим.
<p>Цена: <span class="price">1 290 ₽</span></p>В этой статье
- Тег span в HTML: что это и для чего нужен
- Как использовать тег span: class, id, style и другие атрибуты
- Тег span строчный: ширина, высота, отступы и display
- Что можно вложить в тег span и куда его вкладывать: p, div, a, span
- Тег span и div: чем отличаются
- Тег span и семантические теги: когда span не нужен и как его заменить
- Тег span в CSS и JavaScript: цвет, класс и значение
- Частые ошибки с тегом span
Тег span в HTML: что это и для чего нужен
Спецификация HTML описывает span как элемент без собственного смысла: он представляет своё содержимое и ничего к нему не добавляет. Внутри допустим только строчный контент: текст и строчные теги. Смысл у span появляется вместе с глобальными атрибутами, например class, lang или dir.
Для чего нужен span. Первое - стиль: выделить слово цветом, задать шрифт части заголовка, оформить цену. Второе - зацепка для скрипта: найти фрагмент по class или id и изменить его текст. Третье - язык: <span lang="en"> помечает слово на другом языке. Четвёртое - группировка: несколько строчных элементов получают общий класс и общее правило.
Слова «универсальный» и «без смысла» значат одно: браузер не считает фрагмент важным, цитатой или кодом. Поэтому, если есть тег с подходящим смыслом, лучше взять его. Об этом написано в разделе про семантические теги.
Как использовать тег span: class, id, style и другие атрибуты
Собственных атрибутов у span нет, только глобальные. На практике чаще всего нужны шесть.
| Атрибут | Что делает | Пример |
|---|---|---|
class | Общий стиль или зацепка для многих фрагментов | <span class="price"> |
id | Уникальная метка для якоря или скрипта | <span id="total"> |
style | Стиль прямо в теге, для разового случая | <span style="color: red"> |
lang | Язык фрагмента, если он отличается от языка страницы | <span lang="en"> |
title | Подсказка при наведении мыши | <span title="Пояснение"> |
data-* | Данные для скрипта | <span data-price="1290"> |
Для оформления лучше подходит class и правило в CSS: стиль в атрибуте style сложнее менять и повторять. Атрибут id должен быть уникальным на странице, а class можно повторять сколько угодно раз. Закрывающий тег у span обязателен, его нельзя пропускать.
<p>Цена: <span class="price">1 290 ₽</span></p>
<p>Слово <span lang="en">span</span> английское.</p>.price {
color: #c0292e;
font-weight: 600;
}Тег span строчный: ширина, высота, отступы и display
По умолчанию span - строчный элемент (display: inline). Он занимает столько места, сколько нужно тексту, не начинает новую строку и переносится вместе с текстом. Из-за этого часть свойств у него не работает.
| Свойство | Что происходит у span |
|---|---|
width и height | Не действуют: в замере при 200 и 100 px получилось 43 и 22 px |
margin и padding по горизонтали | Действуют: слово становится шире, соседний текст отодвигается |
margin и padding по вертикали | Фон и рамка рисуются, но высоту строки и соседей не меняют |
text-align | Не действует: выравнивает содержимое блока, а не строчный элемент |
vertical-align | Действует: сдвигает фрагмент относительно строки |
Длинный span переносится по строкам вместе с текстом, а рамка и фон при переносе разбиваются на части: в замере span с рамкой в узкой колонке дал три фрагмента. Пустой span по ширине занимает 0 px. Пробел между двумя span сохраняется, а если его нет, тексты слипаются.
Чтобы получить размеры, меняют display. Значение inline-block сохраняет строчность и принимает width, height и вертикальные отступы. Значение block превращает span в блок на отдельной строке, но тогда часто честнее взять другой тег: разница разобрана в разделе про div. Проверьте в кадре.
.badge {
display: inline-block;
width: 100px;
height: 40px;
}Пример: display у span и что он меняет
Переключайте display. Кадр измеряет размер span и высоту абзаца.
Что можно вложить в тег span и куда его вкладывать: p, div, a, span
Внутри span допустим только строчный контент: текст, a, strong, em, code и другой span. Сам span можно записывать везде, где ожидается текст: в p, a, заголовках h1 - h6, li, button, ячейке таблицы.
Блочные теги p и div внутри span стандарт не допускает, но парсер Chrome их не убирает: <span><p>x</p></span> остаётся в том же виде. Валидатор и другие программы могут вести себя иначе, поэтому такую запись не используют. Обратная запись, span внутри p, допустима.
Есть и обратная ловушка: p нельзя вложить в p, а span между ними не защищает. В замере <p>a<span>b<p>c</span>d</p> превратилось в два абзаца: <p>a<span>b</span></p> и <p>cd</p>. Ссылка a внутри span, span внутри a и вложенные span допустимы: они просто наследуют вид друг друга.
Пример: как браузер разберёт вложенные теги
Выберите запись. Кадр показывает вашу разметку, разметку после разбора браузером и оценку по стандарту.
Тег span и div: чем отличаются
Оба тега - контейнеры без собственного смысла. Поэтому на вопрос «какие теги не имеют смысла согласно стандарту: div, article, section, span» верный ответ - div и span: у article и section смысл есть. Разница между span и div в другом: span строчный, а div блочный.
| Признак | span | div |
|---|---|---|
| Тип | Строчный (inline) | Блочный (block) |
| Начинает новую строку | Нет | Да |
| Ширина и высота | Не действуют | Действуют |
| Что можно вложить | Только строчный контент | Блочный и строчный контент |
| Где записывают | Внутри абзаца, заголовка, ссылки | Рядом с абзацами, для блоков и макета |
| Для чего | Выделить фрагмент внутри строки | Собрать блок из нескольких элементов |
Правило выбора простое: часть строки оформляют через span, целый блок из нескольких элементов - через div. Тег div подробно разобран на своей странице шпаргалки.
Тег span и семантические теги: когда span не нужен и как его заменить
Часто span записывают там, где есть тег с нужным смыслом. На глаз разница может быть незаметной, но для браузера, поисковой системы и читателя без стилей тег со смыслом говорит больше.
| Что нужно отметить | Какой тег вместо span |
|---|---|
| Важное слово | strong |
| Интонационное ударение | em |
| Подсветка найденного слова | mark |
| Сокращение с расшифровкой | abbr |
| Фрагмент кода | code |
| Клавиша или команда | kbd |
| Дата и время | time |
Нужен span, если смысла нет: цветовой акцент в заголовке, оформление цены, пометка языка через lang, зацепка для скрипта. Если лишние span добавил редактор, их заменяют на подходящие теги или снимают обёртку, сохранив текст. Кадр показывает, что вид и разметка меняются, а текст остаётся прежним.
Пример: замена span на теги со смыслом
Выберите действие. Кадр сравнивает текст, вид и число тегов со смыслом.
Тег span в CSS и JavaScript: цвет, класс и значение
Чтобы изменить вид фрагмента, задают правило для класса. Цвет текста внутри span задаёт свойство color, фон - background, шрифт - font-family и font-size. Селектор span { ... } затронет все span на странице, поэтому чаще берут класс.
.accent {
color: #c0292e;
font-weight: 600;
}В скрипте span находят по id или классу и меняют свойством textContent. Так записывают значение: счётчик, результат вычисления, введённое слово. Свойство textContent записывает текст, а не разметку, поэтому строка с тегами покажется как обычный текст.
const price = document.querySelector('.price');
price.textContent = '990 ₽';Класс тоже меняют из скрипта: переключение класса меняет вид фрагмента без правки разметки. Проверьте в кадре, как выглядит span без стиля, с классом и с атрибутом style, и введите своё значение.
Пример: класс, стиль и значение у span
Выберите вид и введите значение. Кадр сравнивает цвет и вес шрифта span с окружающим текстом.
Частые ошибки с тегом span
Ошибки с этим тегом связаны с выбором вместо семантических тегов, со свойствами строчного элемента и с вложенностью.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
span вместо семантического тега: <span class="bold">важно</span> | Браузер и поисковая система не понимают, что слово важное | Взять strong, em, mark или другой подходящий тег |
Ширина и высота у span: span { width: 200px; } | У строчного элемента они не действуют | Задать display: inline-block или взять div |
Блок внутри span: <span><div>...</div></span> | Стандарт не допускает блок в строчном теге, поведение программ может отличаться | Поменять местами: div снаружи, span внутри |
Абзац внутри абзаца через span: <p>a<span><p>b</p></span></p> | Парсер закрывает первый абзац, получаются два абзаца | Не вкладывать p в p и в span |
Вертикальные отступы у span | Рамка и фон рисуются, но высоту строки и соседей не меняют | display: inline-block или отступы у родителя |
Выравнивание у span: text-align: right | Свойство работает для блока, у строчного элемента ничего не делает | Выравнивать родительский блок |
span на всё подряд (span-суп) | Разметка разрастается, смысл теряется | Брать теги со смыслом, а span только для стиля, языка и зацепок |
