Строчный элемент Span в HTML. Как выделить часть текста и изменить его стилизацию?

строчный элемент span в html. как выделить часть текста и изменить его стилизацию?

Использование элемента span

В прошлой статье мы изучали блочный элемент общего назначения div. Из неё мы узнали, что можно обернуть набор элементов, присутствующих в HTML-разметке, контейнером. Но, что если перед нами стоит совершенно иная задача? Нам не нужно помещать элементы в контейнеры, а наоборот, взять один и выделить часть его содержимого.

Для реализации этой возможности в HTML существует строчный элемент <span>. Он не имеет собственной ширины и высоты. Занимаемое пространство определяется тем содержимым, которое он оборачивает. Важно понимать, что <span> используется для разметки текстового содержимого. Например, чтобы выделить часть абзаца. Если родительский элемент содержит дочерние и их нужно обернуть в отдельный блок, то строчный элемент <span> не подойдет.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример использования элемента span</title>
    </head>
    <body>
        <p>Сегодня я ел <span>свежий</span> салат</p>
    </body>
</html>

Заметка
Роль строчного элемента <span> может показаться неочевидной. Браузер не применяет к нему особых стилей, он не имеет своей ширины и высоты. Зачем он вообще нужен в HTML?

Ответ очень прост. <span> может содержать атрибуты id и class, к которым будут привязаны определенные CSS-стили, меняющие отображение обрамленного текста.

Пример стилизации текста

Наглядно продемонстрируем использование <span> для стилизации различных участков текста. В примере, приведенном ниже, элементам <span> с установленным атрибутом class в значение green, мы изменили цвет текста на зеленый, а со значением red, соответственно на красный. Изучение CSS-стилей не входит в задачи данного курса, но они используются в примере. Вы можете просто скопировать HTML-разметку и посмотреть, как это работает.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример стилизации текста с помощью span</title>
        <style>
            .green { 
                color: green; 
             }
            .red { 
                color: red; 
            }
        </style>
    </head>
    <body>
        <p>Сегодня я ел <span class="green">свежий</span> салат.
        Вкус был <span class="red">просто</span> восхитительный.
        Нужно будет это <span class="green">повторить</span>.</p>
    </body>
</html>

Последние публикации