HTML-тег <span>
Тег HTML <span> используется для выделения небольшого фрагмента контента или текста в рамках большего документа, который требуется стилизовать иначе, чем окружающий текст. Это встроенный элемент, который можно использовать для применения стилей, таких как цвет или шрифт, к конкретному участку текста.
Сам по себе тег <span> не несет никакой семантической нагрузки, но его можно использовать в сочетании с другими тегами, такими как <div> или <p>, для применения дополнительных стилей или функциональности к определенным частям контента. Это полезный инструмент для веб-дизайнеров и разработчиков, которым нужно внести небольшие изменения в текст, не затрагивая общую структуру страницы.
Например, с помощью тега <span> можно выделить конкретное слово внутри абзаца или применить другой размер шрифта к отдельному символу. Тег <span> также можно использовать вместе с CSS для создания эффектов при наведении, анимаций и других динамических элементов на веб-странице.
Тег <span> похож на тег <div>, но между ними есть некоторые различия. Если тег HTML <span> используется для выделения небольшого фрагмента контента или текста в рамках большего документа, который требуется стилизовать иначе, чем окружающий текст, то тег <div> применяется для определения более крупного раздела или блока контента, который может содержать другие HTML-элементы. Тег <div> является контейнерным элементом, который часто используется для группировки связанного контента и применения стилей ко всему блоку. Это блочный элемент, что означает, что он занимает всю ширину родительского контейнера и вызывает перенос строки до и после себя.
Синтаксис
Тег <span> используется парами. Содержимое записывается между открывающим (<span>) и закрывающим (</span>) тегами.
В приведенном ниже примере мы применяем стиль непосредственно внутри тега.
Пример использования HTML-тега <span>:
Пример HTML-тега <span>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>My cat has <span style="color:#8ebf42;">green</span> eyes.</p>
</body>
</html>Рассмотрим еще один пример, где мы добавляем атрибут class к тегу и применяем стили к его содержимому отдельно.
Пример HTML-тега <span> с атрибутом class:
Пример HTML-тега <span> с атрибутом class
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.letter {
color: red;
font-size: 300%; /* Font size in percents */
position: relative; /* Relative positioning */
top: 7px; /* Move from above */
}
</style>
</head>
<body>
<p>
<span class="letter">О</span>
She brought in disgusting, disturbing yellow flowers in her hands.
And these flowers stood out on her black coat.
</p>
<p>Michael Bulgakov</p>
</body>
</html>Атрибуты
Тег <span> поддерживает Глобальные атрибуты и Атрибуты событий.
Глобальные атрибуты относятся к атрибутам, которые могут использоваться на любом HTML-элементе. Эти атрибуты являются общими для всех элементов в HTML.
Событие возникает, когда браузер реагирует на определенное действие пользователя. Пользователь создает событие при клике мышью, воспроизведении видео, загрузке документа или изображения или выполнении любого другого действия на веб-сайте.
Практика
Как правильно использовать HTML-тег span?