Для чего нужен тег span в HTML?

Приветствую вас, дорогой друг!
В этой статье речь пойдет про тег span в html для чего он нужен, какие имеет особенности и почему его так часто используют в современной вёрстке.

Сфера применения этого тега довольно большая. По сути, он представляет собой пустой контейнер, в который можно поместить какой-то текст или изображение и задать им нужные CSS стили. Или же задать ему класс или идентификатор и использовать при написании скрипта.

Пример использования тега span в HTML:

При этом стили оформления мы можем задать как при помощи атрибута style, как в примере выше, так и присвоить тегу span отдельный CSS класс, а затем дописать стили в отдельном CSS файле.

CSS

Для чего нужен тег span в html?

Основные возможности:

1. 1 Позволяет задать или изменить цвет, а так же тип шрифта и начертание для отдельного одного или нескольких слов или букв.
   
   <p><span style=”color:#ccc; font-family:Verdana;”>Пример текста</span></p>

   1	<p><span style=”color:#ccc; font-family:Verdana;”>Пример текста</span></p>

2. 2 С его помощью можно задать фон для отдельного фрагмента текста.
   
   <p> Пример <span style=”background:red;”> выделенного цветом </span> текста </p>

   1	<p> Пример <span style=”background:red;”> выделенного цветом </span> текста </p>

3. 3 Можно создать эффект заглавной буквы, обернув её в этот тег и выделить другим цветом и размером.
   
   <p><span style="color:red; font-size:20px;">С</span>лово</p>

   1	<p><span style="color:red; font-size:20px;">С</span>лово</p>

4. 4 Возможность задать разное форматирование для отдельных фрагментов текста.
   
   <p>Благодаря этому HTML тегу мы можем <span style="font-size:22px; font-weight:bold;">выделить</span> фрагмент текста дргим <span style="color:#fff; background:#2F73B6;">цветом</span></p>

   1	<p>Благодаря этому HTML тегу мы можем <span style="font-size:22px; font-weight:bold;">выделить</span> фрагмент текста дргим <span style="color:#fff; background:#2F73B6;">цветом</span></p>

Основные особенности тега span в html:

1. 1 Он является строчным элементом и с его помощью можно задать стиль написания для одного слова или даже буквы.
2. 2 Не занимает всю ширину строки, как например div, p, h1-h6, а подстраивается под ширину слова или нескольких слов, которые в нём находятся.
3. 3 Поддерживается всеми браузерами, включая браузеры мобильных устройств.
4. 4 Так как это строчный элемент, то для него не работает вертикальные внешние отступы (margin), а так же выравнивание по центру с помощью margin:auto;
5. 5 Так же для span не работает CSS свойство width. Ширина подстраивается под количества текста внутри него.

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

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

Надеюсь, что помогла вам разобраться с вопросом для чего нужен тег span в HTML. Если вы знаете другие его особенности, возможности и сферы применения – пишите об этом в комментариях.

А тем, кто дочитал статью до конца я предлагаю посмотреть вот это интересное видео. Оно не относится напрямую к HTML и CSS, но наверняка будет полезным.

С уважением Юлия Гусарь