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

Question

[Alexey]

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

Comments

[Deita]

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

[Вадим]

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

Answer 1

[Василий Банников]

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

Comments

[Ankhena]

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

[Kirgus]

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

[Ankhena]

Кирилл Гусарев,
Спека:
https://html.spec.whatwg.org/multipage/dom.html#pa...
https://html.spec.whatwg.org/multipage/grouping-co...

[Kirgus]

Ankhena, зачем?

[Ankhena]

Кирилл Гусарев, читать про параграфы и что под этим словом понимается в верстке

Answer 2

[Zarron]

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

Comments

[Дмитрий Беляев]

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

Answer 3

[Максим]

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

Answer 4

[PolarOne]

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

<p>Советую <span style="color: red;">погуглить про семантику</span>, тэги отличаются не просто так, есть main, header, footer - так же с текстом, все нужно использовать по мере необходимости, сайт конечно же можно на div-ах написать но это будет "неправильно" для поисковых роботов</p>
<p>Разница в том, что <strong>span</strong> не несёт никакого семантического смысла, а <strong>p</strong> несёт и является параграфом.</p>

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

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

Comments

[Ankhena]

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

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

[PolarOne]

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

[Ankhena]

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

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

[PolarOne]

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

Answer 5

[Kirgus]

Если в тексте надо, например, выделить какое-то определённое слово каким-нибудь цветом, то это слово можно обернуть в <span> и присвоить этому элементу span желаемые стили, класс или ID.
<p> для этих целей не используют.

Answer 6

[Алекс Кова]

Самое главное p - это блочный элемент, а span - вообще пустышка относительно css