Тег <span>: оформление части строки
Как выделить фрагмент текста без отдельного блока и не потерять семантику.
Зачем нужен этот элемент
span выделяет участок текста или другую строчную группу без дополнительного значения. Он помогает применить цвет, класс или язык к нескольким словам. По умолчанию span не начинает новую строку, поэтому удобен внутри абзацев и заголовков.
Если выделение означает важность, используйте strong; если смысловое ударение — em. span подходит, когда задача только визуальная или техническая. Для фрагмента на другом языке можно указать lang, чтобы вспомогательные технологии корректнее его произносили.
Синтаксис и пример
<style>.status { color: #11694e; font-weight: 700; }</style>
<p>Статус материала: <span class="status">Опубликовано</span>.</p>Что важно в разметке
| Параметр | Как использовать |
|---|---|
| class | Привязывает оформление к части строки. |
| lang | Указывает язык конкретного фрагмента. |
| display | Меняет CSS-поведение, но не придаёт смысловой роли. |
Частая ошибка
Небольшая практика
Замените зелёный текст на другой цвет и проверьте контраст с фоном. Сохраните слово «Опубликовано», чтобы статус оставался понятным без цвета.
Разберите также <p>, <div>: эти элементы пригодятся в том же интерфейсе.