HTML <span> тег
Тег HTML <span> — универсальный строчный контейнер без семантики для стилизации и скриптования фрагментов текста. Примеры и рекомендации.
Тег HTML <span> — это универсальный строчный контейнер для фрагмента текста или содержимого. В отличие от большинства HTML-элементов, он не несёт никакой семантики — браузер и вспомогательные технологии не получают от него никакой информации о сути содержимого. Его единственная задача — выделить фрагмент строчного содержимого, чтобы к нему можно было обратиться через CSS или JavaScript.
Поскольку <span> не добавляет смысла, он должен быть последним средством, а не первым. Если для содержимого подходит семантический элемент, используйте его:
| Если текст является… | Используйте это, а не <span> |
|---|---|
| выделенным | <em> |
| важным / сильно выделенным | <strong> |
| подсвеченным / релевантным | <mark> |
| аббревиатурой | <abbr> |
| кодом | <code> |
| датой или временем | <time> |
Используйте <span> только тогда, когда ни один семантический строчный элемент не подходит и вам просто нужен хук для стилизации или скриптования — например, чтобы покрасить одно слово, обернуть символ для эффекта буквицы или пометить декоративную иконку.
Предпочитайте семантические элементы
Два фрагмента кода ниже выглядят в браузере одинаково, но не равнозначны. Первый использует <span> со встроенным стилем; второй — <mark>, который на самом деле сообщает программам чтения с экрана и поисковым системам «этот текст выделен как релевантный».
<!-- Just visual — no meaning conveyed -->
<p>Search results for <span style="background:yellow;">CSS</span> grid.</p>
<!-- Semantic highlight — assistive tech understands it -->
<p>Search results for <mark>CSS</mark> grid.</p>Когда вам нужен лишь хук для стилизации и подходящего семантического элемента нет, <span> — правильный инструмент. Когда стилизация отражает смысл, выбирайте элемент, который несёт этот смысл.
<span> против <div>
<span> и <div> — два «безликих» универсальных контейнера в HTML. Разница — в типе блока, который они создают:
<span>является строчным — он располагается в потоке текста и занимает лишь ширину своего содержимого. В него нельзя вкладывать блочные элементы.<div>является блочным — он начинается с новой строки и растягивается на всю ширину родителя. Используйте его для группировки более крупных разделов.
<p>This sentence has an <span style="color:#8ebf42;">inline span</span> in the middle.</p>
<div style="border:1px solid #8ebf42;">
This div is a block — it sits on its own line and fills the row.
</div>Простое правило: используйте <span> для части строки, а <div> — для блока содержимого.
Синтаксис
Тег <span> всегда используется в паре. Содержимое записывается между открывающим (<span>) и закрывающим (</span>) тегами.
В примере ниже мы применяем стиль непосредственно внутри тега.
Пример HTML-тега <span>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>My cat has <span style="color:#8ebf42;">green</span> eyes.</p>
</body>
</html>Рассмотрим ещё один пример, в котором мы добавляем атрибут class к тегу и применяем стили отдельно в таблице стилей. Это создаёт буквицу — увеличенную первую букву, классический типографский приём для начала главы.
Пример HTML-тега <span> с атрибутом class
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.letter {
color: red;
font-size: 300%; /* Make the first letter much larger */
position: relative; /* Position it relative to its normal spot */
top: 7px; /* Nudge it down to align with the text */
}
</style>
</head>
<body>
<!-- The first letter "S" is wrapped in a span so we can style it alone -->
<p>
<span class="letter">S</span>he brought in disgusting, disturbing yellow
flowers in her hands. And these flowers stood out on her black coat.
</p>
<p>Michael Bulgakov</p>
</body>
</html>Применение для доступности
Два паттерна делают <span> по-настоящему полезным для обеспечения доступности.
Текст только для программ чтения с экрана. Класс visually-hidden скрывает текст с экрана, но сохраняет его доступным для программ чтения. Это стандартный способ предоставить контекст, который зрячие пользователи получают из компоновки страницы.
<a href="/cart">
View cart
<span class="visually-hidden">(3 items)</span>
</a>
<style>
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
</style>Подписи для иконок. Иконочные шрифты и декоративные символы не содержат текста, который мог бы прочитать скринридер. Скройте декоративный <span> с помощью aria-hidden и задайте доступное имя через aria-label на ссылке или кнопке.
<button aria-label="Close dialog">
<span aria-hidden="true">×</span>
</button>Здесь aria-hidden="true" удаляет визуальный знак «×» из дерева доступности, а aria-label сообщает вспомогательным технологиям, что кнопка означает «Закрыть диалог».
Атрибуты
У тега <span> нет собственных атрибутов. На практике почти всю работу выполняют эти глобальные атрибуты:
| Атрибут | Назначение |
|---|---|
class | Привязывает элемент к одному или нескольким правилам CSS. |
id | Задаёт уникальный идентификатор для обращения из CSS или JavaScript. |
style | Применяет встроенный CSS напрямую (удобно для разовой стилизации). |
lang | Помечает фрагмент текста как текст на другом языке, например <span lang="fr">. |
Тег также поддерживает атрибуты событий, поэтому вы можете реагировать на действия пользователя, такие как клики или наведение. Событие происходит, когда браузер реагирует на действие пользователя — щелчок мышью, воспроизведение видео, отправка формы и т. д.