Чем span отличается от p
Перейти к содержимому

Чем span отличается от p

  • автор:

Чем span отличается от p

HTML5 IE Cr Op Sa Fx

    Тег SPAN   

Бернард Шоу

Результат данного примера показан ниже.

Рис. 1

Рис. 1. Вид текста, оформленного с помощью тега и стилей

Статьи по теме

  • Строчные элементы
  • Строчные элементы

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Чем span отличается от p

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

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

Открыть/закрыть навигацию по статье
Контрибьюторы:

  • Алёна Батицкая ,
  • Светлана Коробцева

Обновлено 11 апреля 2024

Кратко

Скопировать ссылку «Кратко» Скопировано

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

Пример

Скопировать ссылку «Пример» Скопировано

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

Как понять

Скопировать ссылку «Как понять» Скопировано

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

Как пишется

Скопировать ссылку «Как пишется» Скопировано

 .  span>. span>      

Подсказки

Скопировать ссылку «Подсказки» Скопировано

Ещё пример

Скопировать ссылку «Ещё пример» Скопировано

   Разумные люди приспосабливаются к окружающему миру. Неразумные люди приспосабливают мир к себе. Вот почему прогресс определяется действиями неразумных людей. 

Бернард Шоу

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; >      

На практике

Скопировать ссылку «На практике» Скопировано

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

Скопировать ссылку «Дока Дог советует» Скопировано

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

Фишка в том, что в можно встраивать вообще всё что угодно. Внутри можно собирать целые блоки, списки и, по факту, он может работать не только с текстом: я такое встречал очень часто. можно встраивать друг в друга сколько угодно раз, чего не сделаешь, например, с тегом

. Допустим, ты хочешь, чтобы текст на сайте появлялся по одной букве, то ты добавляешь каждую букву в отдельный , делаешь задержку и отдельно уже управляешь через JavaScript или CSS. — тег, без которого современные сайты практически не могут существовать.

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

Скопировать ссылку «Егор Левченко советует» Скопировано

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

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

Скопировать ссылку «Алёна Батицкая советует» Скопировано

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

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

    We are  the best   company    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; >      

В чем разница между div и span

Я новичок в программировании и хотелось бы досконально разобраться в чем разница между div и span .Стоит ли использовать только div или только span или их нужно как-то комбинировать. И кому лучше присваивать название класса, только div-у или span-у ,или опять таки комбинировать. Заранее спасибо 🙂

Отслеживать
задан 2 июн 2019 в 21:11
103 1 1 серебряный знак 5 5 бронзовых знаков

это разные типы элементов, по умолчанию они имеют разное поведение, но стилями может быть все изменено с точностью до наоборот

2 июн 2019 в 21:27
Div — используется как контейнер, а span как обрамление для текста, span — строчный элемент, используется как выделение текста, пример:

Something

. Если тег p, блочный, он будет переносить текст на новую строку, а span — строчный, он не переносится, а идёт в линию. Div — нужен для создания контейнеров, в которые необходимо что-то положить, либо же для создания какого-то объекта.
2 июн 2019 в 22:24

DIV — блочный эл-т, SPAN — строчный, это вообще основа основ вёрстки, которая к программированию не имеет прямого отношения.

Тег < p >и < span >. Есть разница?

тег < p >он является блочным, и тег < span >он является строчным. и увидел как люди когда им нужно сделать тег < p >строчным добавляют к нему в css свойство display: inline block; Зачем?

  • Вопрос задан более года назад
  • 1843 просмотра

2 комментария

Простой 2 комментария

Deita

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

MrDecoy

Вадим @MrDecoy Куратор тега CSS

Разница в тэгах существует вовсе не для того, чтобы их было удобнее стилизовать или пользоваться стандартным стилем браузера. Вам ниже сказали на что нужно обратить внимание — семантика. css к разнице тэгов вообще никак не относится.
Ну и отвечая на вопрос, да. Разница колосальная.
Это как разница между словом в предложении и самим предложением.

Решения вопроса 1

vabka

Токсичный шарпист
Разница в том, что span не несёт никакого семантического смысла, а p несёт и является параграфом.
Ответ написан более года назад
Нравится 12 5 комментариев

Ankhena

Ankhena @Ankhena Куратор тега CSS

Хочу добавить, что смысл слова «параграф» с жизни и в верстке отличается и имеет более расширенное применение.
В жизни это просто блок текста из одного или нескольких предложений.
А в верстке может также служить и для группировки фразового контента. Например, лейбла и инпута.

Вроде ж это абзац, а не параграф (если переводить на русский язык)?

Ankhena

Ankhena @Ankhena Куратор тега CSS

Ankhena

Ankhena @Ankhena Куратор тега CSS
Кирилл Гусарев, читать про параграфы и что под этим словом понимается в верстке
Ответы на вопрос 5
Front-end developer

Советую погуглить про семантику, тэги отличаются не просто так, есть main, header, footer — так же с текстом, все нужно использовать по мере необходимости, сайт конечно же можно на div-ах написать но это будет «неправильно» для поисковых роботов

Ответ написан более года назад
Нравится 6 1 комментарий

bingo347

Дмитрий Беляев @bingo347 Куратор тега HTML

Семантика в первую очередь не для поисковых роботов, а для людей.
Тот же p будет отличаться от span в режиме читалки.

LenovoId

Ну если к примеру мы захотим выделить текст каким то цветом .. ни весь а к примеру какие то отдельные слова . это просто удобнее сделать не блочным тегом а именно строчным, к примеру как: https://codepen.io/topicstarter/pen/oNazwQX и нам для этого не надо писать кучу css что бы сделать параграф внутри параграфа инлайновым . Вообще тег

это обычный параграф и не более того который без css работает как div в отличии от span который по сути тот же div только строчный но оба ‘несут за под капотом’ строки,текст

Ответ написан более года назад
Комментировать
Нравится 4 Комментировать

PolarOneBear

PolarOne @PolarOneBear
Собственно все написали.
Пример

Советую погуглить про семантику, тэги отличаются не просто так, есть main, header, footer - так же с текстом, все нужно использовать по мере необходимости, сайт конечно же можно на div-ах написать но это будет "неправильно" для поисковых роботов

Разница в том, что span не несёт никакого семантического смысла, а p несёт и является параграфом.

Если захотите сделать какой-то элемент внутри «строки» (параграфа), выделить текст, сделать иконку — то еще один «строковый» элемент не лучшая идея.
Дополнение: p — блочный элемент, занимает 100% ширины страницы или родительского блока. Может быть переопределен свойством display.

643f879fe0161577052657.jpeg

Разница между p и span такая — на примере одного слова «визуально». Рамки — это «место» занимаемое тегом

Ответ написан более года назад
Нравится 3 4 комментария

Ankhena

Ankhena @Ankhena Куратор тега CSS

Если захотите сделать какой-то элемент внутри строки (параграфа), выделить текст, сделать иконку — то еще один строковый элемент не лучшая идея.

Во-первых, по умолчанию, p это блок, а не строка.
Во-вторых, что во что можно вкладывать определяется не блочностью, а категорией контента.
В-третьих, то, что вы нарисовали определяется свойством display , а не просто самим тегом.

PolarOneBear

PolarOne @PolarOneBear

Ankhena, не отбивайте у человека желание изучать)) Я попытался максимально доступно объяснить, а до display автор вопроса дойдет чуть попозжее)
зысы да, про «строку» загнул малость

Ankhena

Ankhena @Ankhena Куратор тега CSS

PolarOne, какой тег использовать зависит не от их визуальной разницы или того какую ширину они занимают по умолчанию.
А от смыслового назначения тега.

И именно это отвечает на вопрос автора, почему пишут p , а потом меняют ему display

PolarOneBear

PolarOne @PolarOneBear

Ankhena, не дочитал. та не, этого не было! Буду читать внимательнее в дальнейшем. Спасибо что указали на это. блин(

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *