Enter
    Расширенный поиск
    Клавиша / esc

    HTML

    <span>

    Помогает выделить стилем часть текста в блоке.

    Время чтения: меньше 5 мин

    Кратко

    Скопировано

    С помощью тега <span> можно выбрать часть текста или другой информации в блоке и стилизовать её.

    Пример

    Скопировано
            
          
          <p>  Добавьте <span class="ingredient">базилик</span>,  <span class="ingredient">арахис</span> и  <span class="ingredient">чеснок</span> в блендер и перемешайте.</p>
          <p>
  Добавьте <span class="ingredient">базилик</span>,
  <span class="ingredient">арахис</span> и
  <span class="ingredient">чеснок</span> в блендер и перемешайте.
</p>

    Как понять

    Скопировано

    Например, хочется, чтобы одно слово в абзаце было написано красным цветом. Помести это слово в коде в контейнер <span>...</span> и примени к нему CSS-стиль.

    Этот тег очень похож на <div>, потому что тоже помогает сгруппировать элементы, чтобы применить к ним единый стиль. Разница лишь в том, что <div> собирает контент в отдельный блок, а <span> выделяет строчку или даже одну букву в этом блоке. Поэтому <div> называют блочными элементами, а <span> — строчным.

    Как пишется

    Скопировано
            
          
          <span>...</span>
          <span>...</span>

    Подсказки

    Скопировано

    💡 Иногда, чтобы отформатировать часть текста, можно использовать семантические элементы — это те, которые не просто являются контейнерами, а имеют своё значение, например, тег <header>, с помощью которого вы создаёте «шапку» своей страницы с меню и логотипом. Поэтому, если вместо <span> можно использовать семантический тег, например, <address> для выделения автора материала курсивом или <mark> для выделения текста жёлтым маркером, то используйте их.

    Ещё пример

    Скопировано
            
          
          <p class="quote__text">  <span class="quote__text-letter">Р</span>азумные люди приспосабливаются к  окружающему миру. Неразумные люди приспосабливают мир к себе. Вот почему  прогресс определяется действиями неразумных людей.</p><p class="quote__author">Бернард Шоу</p>
          <p class="quote__text">
  <span class="quote__text-letter">Р</span>азумные люди приспосабливаются к
  окружающему миру. Неразумные люди приспосабливают мир к себе. Вот почему
  прогресс определяется действиями неразумных людей.
</p>
<p class="quote__author">Бернард Шоу</p>

        
        
          
        
      
            
          
          .quote__text-letter {  float: left; /* Обтекание символа текстом справа */  margin-right: 7px; /* Отступ справа */  color: #ed6742; /* Цвет символа */  font-family: "Roboto Slab", serif; /* Шрифт с засечками */  font-size: 52px; /* Размер шрифта */  line-height: 52px; /* Высота строки */}.quote__author {  margin-top: 10px;  padding: 10px 0;  border-top: 1px solid #ed6742; /* декоративная граница */  font-style: italic;  font-size: 14px;  font-weight: 300;}
          .quote__text-letter {
  float: left; /* Обтекание символа текстом справа */
  margin-right: 7px; /* Отступ справа */
  color: #ed6742; /* Цвет символа */
  font-family: "Roboto Slab", serif; /* Шрифт с засечками */
  font-size: 52px; /* Размер шрифта */
  line-height: 52px; /* Высота строки */
}

.quote__author {
  margin-top: 10px;
  padding: 10px 0;
  border-top: 1px solid #ed6742; /* декоративная граница */
  font-style: italic;
  font-size: 14px;
  font-weight: 300;
}
    Открыть демо в новой вкладке

    На практике

    Скопировано

    Дока Дог советует

    Скопировано

    🛠 <span> — крутой. Считается, что <span> — это когда тебе уже нечего добавить к тексту и ты уже использовал древние теги <strong> или <em>, то у тебя <span> — это последний бро, у которого по умолчанию нет предустановленных стилей, но ты можешь его немножко пересобрать и добавить стилей, чтобы он выглядел так, как ты хочешь.

    Фишка в том, что в <span> можно встраивать вообще всё, что угодно. Внутри <span> можно собирать целые блоки, списки и, по факту, он может работать не только с текстом: я такое встречал очень часто. <span> можно встраивать друг в друга сколько угодно раз, чего не сделаешь, например, с тегом <p>. Допустим, ты хочешь, чтобы текст на сайте появлялся по одной букве, то ты добавляешь каждую букву в отдельный <span>, делаешь задержку и отдельно уже управляешь через JavaScript или CSS. <span> — тег, без которого современные сайты практически не могут существовать.

    Егор Левченко советует

    Скопировано

    🛠 <span> — строковый элемент, поэтому по умолчанию у него нет высоты. Если нужна высота, то элементу стоит задать display: block или display: inline-block, или подумать: «А не нужен ли там <div>?»

    Алёна Батицкая советует

    Скопировано

    🛠 Тег <span> удобен, если нужно оформить другими стилями отдельное слово или словосочетание в тексте. Этот приём очень любят дизайнеры, чтобы акцентировать внимание на какой-то информации.

    Например, выделим цветом важное для нас сообщение внутри заголовка на первом экране:

            
          
          <header class="header">  <h1 class="header__title">    We are    <span class="header__title-accent header__title-accent_color">      the best    </span>    <span class="header__title-accent"> company </span>  </h1></header>
          <header class="header">
  <h1 class="header__title">
    We are
    <span class="header__title-accent header__title-accent_color">
      the best
    </span>
    <span class="header__title-accent"> company </span>
  </h1>
</header>

        
        
          
        
      
            
          
          .header {  display: flex;  justify-content: center;  align-items: center;  min-height: 480px;  background: #18191c url("../images/background.svg") no-repeat center / cover;  z-index: 0;  color: #ffffff;}.header__title {  max-width: 500px;  color: #fff;  font-family: "Roboto", sans-serif;  font-size: 25px;  text-align: center;  text-transform: uppercase;  font-weight: normal;  line-height: 30px;  letter-spacing: 1px;}/* задаём стили для текста, который нужно выделить */.header__title-accent {  display: block; /* перенос на новую строку */  font-size: 55px;  line-height: 58px;  font-weight: bold;}/* цветовой акцент */.header__title-accent_color {  color: #000000;  background-color: #FF8630;}
          .header {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 480px;
  background: #18191c url("../images/background.svg") no-repeat center / cover;
  z-index: 0;
  color: #ffffff;
}

.header__title {
  max-width: 500px;
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-size: 25px;
  text-align: center;
  text-transform: uppercase;
  font-weight: normal;
  line-height: 30px;
  letter-spacing: 1px;
}

/* задаём стили для текста, который нужно выделить */
.header__title-accent {
  display: block; /* перенос на новую строку */
  font-size: 55px;
  line-height: 58px;
  font-weight: bold;
}

/* цветовой акцент */
.header__title-accent_color {
  color: #000000;
  background-color: #FF8630;
}
    Открыть демо в новой вкладке

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

    • Атрибут class

      Самый частый атрибут, который вы будете использовать. Задаёт класс элементу.

    • Селектор по классу

      Удобный способ выбрать из HTML-разметки элементы только с нужным классом. И применить к ним стили.

    • .querySelectorAll()

      Получить все DOM-элементы, подходящие под CSS-селектор.