Тег <span>

Описание

Тег <span> представляет собой универсальный строчный контейнер для фразового контента. Это нейтральный элемент без семантического значения, используемый преимущественно для стилизации и группировки текстовых элементов.

Базовый синтаксис:
<span>Просто текст</span>

Ключевые особенности:

  • Строчный элемент (не создает переносов строки)
  • Не имеет семантического значения по умолчанию
  • Может содержать текст и другие inline-элементы
  • Часто используется с атрибутами class и id для CSS/JS
  • Поддерживает все глобальные HTML-атрибуты
Примеры использования:
<!-- Стилизация части текста --> <p>Срок действия: <span style="color:red;font-weight:bold">до 31 декабря</span></p> <!-- Группировка для JavaScript --> <div> Нажато <span id="counter">0</span> раз </div> <!-- Иконка с текстом --> <button> <span class="icon">📧</span> <span>Отправить</span> </button> <!-- Локализация --> <p> <span lang="en">Hello</span>, <span lang="es">Hola</span>, <span lang="ru">Привет</span> </p>

Рекомендации по использованию:

  • Используйте для стилизации отдельных частей текста
  • Для семантических целей выбирайте соответствующие теги (<strong>, <em> и др.)
  • Не злоупотребляйте вложенностью span-элементов
  • Для блочной разметки используйте <div>
  • Сочетайте с ARIA-атрибутами для улучшения доступности

Тег <span> является базовым инструментом HTML для точечной работы с текстовым контентом, но требует осмысленного применения с учетом семантики и доступности.

Атрибуты

class CSS-классы для стилизации
contenteditable Разрешает редактирование
data-* Пользовательские данные
dir Направление текста
hidden Скрывает элемент
id Уникальный идентификатор
lang Язык содержимого
spellcheck Проверка орфографии
style Инлайновые стили
title Всплывающая подсказка
translate Определяет возможность перевода
align Горизонтальное выравнивание
color Цвет текста

Поддержка браузерами
3.0 1.0 3.0 1.0 1.0