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

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

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

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

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

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

CSS

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

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

  1. 1 Позволяет задать или изменить цвет, а так же тип шрифта и начертание для отдельного одного или нескольких слов или букв.
  2. 2 С его помощью можно задать фон для отдельного фрагмента текста.
  3. 3 Можно создать эффект заглавной буквы, обернув её в этот тег и выделить другим цветом и размером.
  4. 4 Возможность задать разное форматирование для отдельных фрагментов текста.

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

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

Чем тег 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, но наверняка будет полезным.



Успехов вам и процветания!

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

Читайте также:

Подписаться на рассылку

5 комментариев

  1. Стиль изложения, форма представления, контент — отлично, Юля!//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif

    • Владимир, спасибо за комментарий!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif