Строчный тег span, свойства, пример

Что такое тег span? что означает тег span, для чего используют, примеры применения тега span.

О теге span

1. Что такое тег span, зачем нужен?
2. Для чего нужен тег span

Начнем с того : "Что такое тег span" с определения :

тег span - является срочным элементом. Это двойной тег.

Синтаксис тега span:

<span>Содержание тега span</span>

Закрывающий тег обязателен!

Что означает строчный элемент span?

Очень часто встречается вопрос, чем отличается строчный элемент span от блочного элемента div

Чтобы продемонстрировать свойства(срочность(inline)) по умолчанию

Создадим предложение, где размести в одну строку наш блок "span" и блок "div"? нас интересует два блока. которые выделены красным!

Чтобы мы могли увидеть границы блоков, добавим им border

Маша <div style="color:red;border:1px solid #a7a7a7;">мыла</div> раму, рама <span style="color:red;border:1px solid #a7a7a7;">мыла</span> машу.

Результат:

Маша
мыла
раму, рама мыла машу.

Вывод о поведении элемента span:

Если он находится в строке, то никаких действий предпринимать не будет, т.е. будет находиться в строке, как будто его не существует.

Типичное поведение строчного элемента (inline). Я бы сказал поведение серой мышки, меня не видать, не слыхать...

Прим автора

Тут вспомнилось :

У нас в классе, была девочка, которую звали, вы не поверите, Света Соколова. Она была полная. После 8 класса - она просто исчезла, как будто её никогда не было. Типичное поведение строчного элемента...




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

Следующий вопрос, который часто встречается : "Для чего нужен тег span".

span и другие подобные теги придуманы не просто так! К примеру, если вам требуется выделить какое-то слово в тексте, например покрасить его в красный -> <span style="color:red;">красный</span> , сделать буквы прописными -> <span style="text-transform: uppercase;">прописными</span>.

С чем в жизни можно сравнить span?

Довольно сложно представить в жизни, на что похоже поведение элемента span.

У меня возникает лишь одна ассоциация.

Посмотрите на любую стену, где весят... например часы.

Стена будет блочным элементом.

А часы(span) будут строчным элементом.