Когда использовать <span> вместо <p>?

94

Как видно из вопроса, если у меня есть текст, который я хочу добавить в HTML, когда я должен использовать <p>и когда я должен использовать <span>?

Аффар
источник

Ответы:

91

Вы должны помнить, что HTML предназначен для ОПИСАНИЯ содержимого, которое он содержит.

Итак, если вы хотите передать абзац, сделайте это.

Однако ваше сравнение не совсем верное. Более прямое сравнение было бы

Когда использовать <div>вместо <p>?

поскольку оба являются элементами уровня блока.

A <span>является встроенным, как якорь ( <a>) <strong>,, акцент ( <em>) и т. Д., Поэтому имейте в виду, что по своему характеру по умолчанию как в html, так и в естественном письме, абзац вызывает разрыв до и после себя, как <div>.

Иногда при стилизации вещей - встраиваемых вещей - a <span>замечательно дает вам что-то, к чему можно «привязать» CSS, но в остальном это пустой тег, лишенный семантического или стилистического значения.

Грязный
источник
7
При сравнении встроенных и блочных элементов старайтесь не описывать визуальные аспекты. Как сказано в спецификации HTML5 , a pможет не обязательно иметь стиль с окружающими разрывами строки, например, за ним может следовать встроенный символ pilcrow . Термины «встроенный» и «блок» также ничего не значат для ослепления пользователей. Скорее всего , делать различие между содержанием потока и содержанием фразировки (см по ссылке ).
chharvey
3
Кроме того, padding-left ведет себя иначе, pчем на span. В абзаце заполнение влияет на каждую строку (блок текста), а в диапазоне - только на первую строку.
diynevala
95

Семантически вы используете <p>теги для обозначения абзацев. <span>используется для применения стиля и / или класса (ов) CSS к произвольному разделу текста и встроенным элементам.

Cletus
источник
13

<p>Тег представляет собой paragraph, и , как таковой, он является блок - элемент (как, например, h1и div), в то время как spanэто встроенный элемент (как, например, bи a)

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

Встроенные элементы работают с фрагментами текста внутри абзаца. Обычно у них нет полей, и поэтому вы не можете, например, установить widthдля него.

Дэвид Хедлунд
источник
да, у span нет полей, поэтому в качестве ячейки таблицы (td) хорошо иметь возможность использовать html-разметку
Игорь Фоменко
6

Span совершенно несемантичен. Он не имеет значения и служит лишь элементом косметического эффекта.

Абзацы имеют семантическое значение - они сообщают машине (например, браузеру или программе чтения с экрана), что содержимое, которое они инкапсулируют, является блоком текста и имеет то же значение, что и абзац текста в книге.


источник
5

С семантической точки зрения, ap - это тег абзаца, и его следует использовать для форматирования абзаца текста. Диапазон - это встроенное изменение форматирования, которое не обрабатывается семантически.

Мэтт Келлогг
источник
5

Диапазон - это встроенный элемент форматирования, который НЕ имеет перевода строки выше или ниже.

P - это блочный элемент, который ИМЕЕТ подразумеваемый перевод строки сверху и снизу.

http://w3schools.com/tags/default.asp

Дэвид Гласс
источник
4

Практическое объяснение: по умолчанию <p> </p>добавляются разрывы строк до и после заключенного текста (поэтому создается абзац). <span>не делает этого, поэтому называется встроенным .

Феликс Клинг
источник
3

Тег p обозначает элемент абзаца. К нему применены поля / отступы. Диапазон - это встроенный тег без стиля. Важное различие состоит в том, что p является блочным элементом, когда span является встроенным, что означает, что он <p>Hi</p><p>There</p>будет отображаться на разных строках, когда <span>Hi</span><span>There</span>они будут располагаться бок о бок.

Statenjason
источник
3

Когда мы используем обычный текст в то время, нам нужен <p>тег. Когда мы используем обычный текст с некоторыми эффектами, мы хотим <span>тег

Сухасини
источник
2

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

Ричард Х
источник
0

тег является элементом уровня блока, но тег является встроенным элементом. Обычно мы используем тег span для стилизации внутри элементов блока. но вам не нужно использовать тег span для встроенного стиля. вы должны сделать это; преобразовать блочный элемент во встроенный элемент с помощью "display: inline"

Лакруван Патираж
источник
-6
p {
    float: left;
    margin: 0;
}

Никакого интервала вокруг не будет, похоже на пролет.

Gasyoun
источник