Тег <span>

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

See the Pen
span red by Андрей (@adlibi)
on CodePen.

По умолчанию тег имеет свойство display: inline. Он легко стилизуется через CSS.  Вы можете присвоить ему class или id и затем указать для этого селектора нужный набор свойств. На примере два фрагмента текста обернуты тегом span и для них определен синий цвет.

See the Pen
span style by Андрей (@adlibi)
on CodePen.

Таким образом, к тексту можно применить любые свойства: начертание, фон, размер шрифта и т.д.

Особенности применения

1. Является строчным элементом, с его помощью можно задать стиль для фразы, одного слова или буквы.
2. Не занимает всю доступную ширину контейнера, как div, а подстраивается под ширину своего содержимого.
3. Поддерживается всеми браузерами без исключения.
4. Для него, как для строчного элемента, не работают вертикальные внешние отступы (margin), а также выравнивание по центру через margin:auto. При этом работаю отступы по сторонам.
5. Для строчного элемента не работает свойство width.

Отличие от div

Теги div и span – это основные контейнеры, используемые в верстке. При этом:

1. Div – это блочный элемент HTML, с помощью которого обычно формируют структуру страницы, а span это строчный элемент, который нужен, как правило, для стилизации фрагментов текста.
2. По умолчанию в начале и в конце div образуются переводы строки, в то время как span встраивается в строку.
3. Для span неприменимы вертикальные отступы margin и margin:auto.
4. Div растягивается на всю ширину родительского блока, а span только на ширину размещенного в нем текста.