Исполняемые доки HTML: Тег span

Q: Почему width не работает у span?

Строчные элементы игнорируют width, height и вертикальные внешние отступы. Задайте span display: inline-block, чтобы он остался в строке, но принимал размер, или display: block, чтобы он вел себя как div.

Q: Как изменить цвет одного слова в HTML?

Оберните слово в span с классом и задайте цвет в CSS: word и .accent { color: #2563eb; }. Для разового случая подойдет и word .

Тег span в HTML: стили для части текста и div или span

Тег <span> это универсальный строчный контейнер: он оборачивает несколько слов внутри строки, чтобы их можно было стилизовать или обработать скриптом, не разрывая строку. Разберем, как его использовать, чем он отличается от div и когда лучше подходит более конкретный тег.

На этой странице есть исполняемые редакторы: меняйте, запускайте и сразу видите результат.

Автор Kevin Spektor, Co-founder & CTO

Опубликовано Sep 24, 2026

Что делает тег span

<span> оборачивает кусок текста внутри строки, чтобы его можно было стилизовать или найти через JavaScript. Это строчный близнец <div>: у него нет смысла и вида по умолчанию, и он не начинает новую строку.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; font-size: 18px; }
    .accent { color: #2563eb; font-weight: 600; }
    .tag { background: #fef3c7; padding: 2px 6px; border-radius: 4px; }
  </style>
</head>
<body>
  <p>Your order ships <span class="accent">tomorrow</span>, status: <span class="tag">packed</span>.</p>
</body>
</html>

Предложение остается в одной строке. Меняются только обернутые слова.

div или span

По назначению они одинаковы (контейнер без смысла), а различаются тем, как располагаются на странице:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs span</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .line { margin-bottom: 16px; }
    .d { border: 2px solid #2563eb; }
    .s { border: 2px solid #f59e0b; }
  </style>
</head>
<body>
  <div class="line">Text before <div class="d">a div</div> text after.</div>
  <div class="line">Text before <span class="s">a span</span> text after.</div>
</body>
</html>

Div разбивает предложение на три строки и растягивается на всю страницу; span остается в предложении и плотно облегает свой текст.

	`<div>`	`<span>`
Отображение	Блочное	Строчное
Начинает новую строку	Да	Нет
Ширина	Вся доступная ширина	По содержимому
`width`, `height`, вертикальные отступы	Применяются	Игнорируются
Может содержать	Что угодно, включая блоки	Только текст и строчные элементы
Типичное применение	Разделы, карточки, обертки для раскладки	Слово или фраза внутри текста

Еще одно отличие: <div> нельзя вкладывать в <p>, и при такой попытке браузер досрочно закрывает абзац, а span можно ставить везде, где может стоять текст. Подробнее на странице про div.

Стили для span: что работает, а что нет

Цвет, шрифт, фон и горизонтальные внутренние отступы у span работают. Размер нет: строчный элемент игнорирует width, height, а также верхний и нижний внешние отступы. Переключите его в inline-block, чтобы задать размер и оставить его в строке:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span width</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 2; }
    .box { background: #dbeafe; width: 120px; height: 40px; margin: 20px 0; }
    .ib { display: inline-block; line-height: normal; }
  </style>
</head>
<body>
  <p>Inline: <span class="box">width ignored</span> end.</p>
  <p>Inline block: <span class="box ib">120 × 40</span> end.</p>
</body>
</html>

Первый span шириной ровно со свои слова. Второй имеет размер ровно 120 на 40 пикселей и все равно стоит внутри предложения.

span и JavaScript

Span обычно служит местом для значения, которое подставляет скрипт, например счетчика или имени пользователя:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span with JavaScript</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #count { font-weight: bold; color: #16a34a; }
  </style>
</head>
<body>
  <p>You have clicked <span id="count">0</span> times.</p>
  <button type="button">Click</button>
  <script>
    let n = 0;
    document.querySelector('button').addEventListener('click', () => {
      n++;
      document.getElementById('count').textContent = n;
    });
  </script>
</body>
</html>

Меняется только число; остальное предложение не трогается.

Когда конкретный тег лучше span

У span нет смысла, поэтому программа чтения с экрана читает его как обычный текст. Если у слов есть роль, используйте тег для этой роли и стилизуйте его как угодно:

Смысл	Используйте вместо span
Важный текст	`<strong>`
Смысловое ударение	`<em>`
Выделенный или отмеченный текст	`<mark>`
Код, имя файла	`<code>`
Клавиша клавиатуры	`<kbd>`
Дата или время	`<time datetime="2026-09-24">`
Текст на другом языке	`<span lang="fr">` (span плюс атрибут `lang`)

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save <code>index.html</code>.</p>
<p>This step is <strong>required</strong>, and <mark>the deadline is Friday</mark>.</p>
<p>She said <span lang="fr">merci</span> and left.</p>

Разница между <strong>, <b>, <em> и <i> объясняется на странице про жирный текст.

Частые ошибки

width у обычного span. Он игнорируется. Используйте display: inline-block.
div или абзац внутри span. Некорректный HTML, который разрывает строку. Замените внешний span на div.
Кликабельные span. Как и до div, до span с onclick нельзя добраться с клавиатуры. Используйте <button> или ссылку.
Span для каждого стиля. Если стиль нужен целым абзацам или разделам, поставьте класс на сам <p> или контейнер, а не оборачивайте его текст в span.

Часто задаваемые вопросы

Что такое span в HTML?

<span> это универсальный строчный контейнер. Он оборачивает часть строки текста, например одно слово, чтобы к ней могли обратиться CSS или JavaScript, и у него нет собственного вида или смысла.

Чем отличается div от span?

<div> это блок: он начинается с новой строки и занимает всю ширину. <span> строчный: он остается внутри строки текста и шириной ровно со свое содержимое. Используйте div для группировки блоков, span для выделения слов внутри текста.

Почему width не работает у span?

Строчные элементы игнорируют width, height и вертикальные внешние отступы. Задайте span display: inline-block, чтобы он остался в строке, но принимал размер, или display: block, чтобы он вел себя как div.

Как изменить цвет одного слова в HTML?

Оберните слово в span с классом и задайте цвет в CSS: <span class="accent">word</span> и .accent { color: #2563eb; }. Для разового случая подойдет и <span style="color: #2563eb">word</span>.

Может ли span содержать div?

Нет. Span может содержать только строчное содержимое: текст, ссылки, картинки и другие span. Браузер все равно покажет div внутри span, но это некорректный HTML, который разрывает строку, поэтому сделайте внешний элемент div.

Связанные концепции