В чем разница между <p>и <div>?

В чем разница между <p> и <div> ?

Можно ли их использовать взаимозаменяемо? Каковы приложения?

Ответ 1

Предыдущий код был

<p class='item'><span class='name'>*Scrambled eggs on crusty Italian ciabatta and bruschetta tomato</span><span class='price'>$12.50</span></p>

Поэтому я должен изменить его на

<div class='item'><span class='name'>*Scrambled eggs on crusty Italian ciabatta and bruschetta tomato</span><span class='price'>$12.50</span></div>

Это было простое исправление. И CSS для вышеуказанного кода

.item {
    position: relative;
    border: 1px solid green;
    height: 30px;
}

.item .name {
    position: absolute;
    top: 0px;
    left: 0px;
}

.item .price {
    position: absolute;
    right: 0px;
    bottom: 0px;
}

Таким образом, тег div может содержать другие элементы. P не должен быть принужден к этому.

Ответ 2

Они имеют семантическую разницу - элемент <div> предназначен для описания контейнера данных, тогда как элемент <p> предназначен для описания абзаца контента.

Семантика имеет значение. HTML - это язык разметки, который означает, что он предназначен для "разметки" контента таким образом, который имеет смысл для потребителя разметки. Большинство разработчиков считают, что семантика документа - это стили по умолчанию и рендеринг, которые браузеры применяют к этим элементам, но это не так.

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

Если вам нужен общий контейнер ~~для целей компоновки~~, используйте <div>. Если вам нужен элемент для описания абзаца контента, используйте <p>.

Примечание. Важно понимать, что <div> и <p> элементы уровня блока это означает, что большинство браузеров будут обрабатывать их аналогичным образом.

Ответ 3

Все хорошие ответы, но есть одна разница, о которой я еще не упоминал, и о том, как браузеры их делают по умолчанию. Основные веб-браузеры будут отображать тег <p> с маркой выше и ниже абзаца. Тег <div> будет отображаться без каких-либо ограничений.

Ответ 4

<p> указывает абзац и имеет семантический смысл.

<div> является просто блочным контейнером для другого содержимого.

Все, что может пойти в <p>, может идти в <div>, но обратное неверно. Теги <div> могут иметь элементы уровня блока как дочерние. Элементы <p> не могут.

Посмотрите на HTML DTD.

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
<!ENTITY % block
     "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
      BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">

<!ENTITY % flow "%block; | %inline;">

<!ELEMENT DIV - - (%flow;)*            -- generic language/style container -->
<!ELEMENT P - O (%inline;)*            -- paragraph -->

Ответ 5

Единственная разница между этими двумя элементами - это семантика. Оба элемента по умолчанию имеют отображение правила CSS: к ним применен блок (отсюда уровень блока); ничего более (за исключением некоторого дополнительного запаса в некоторых случаях). Однако, как уже упоминалось, они оба сильно различаются с точки зрения семантики.

Элемент <p>, как следует из его названия, предназначен для абзацев. Таким образом, <p> следует использовать, когда вы хотите создать блоки текста абзаца.

Однако элемент <div> практически не имеет смысла в семантическом значении и поэтому может использоваться как общий элемент уровня блока - чаще всего люди используют его в макетах, поскольку он не имеет смысла семантически и может использоваться, как правило, для всего, что вам может потребоваться элемент уровня блока для.

Ссылка для более подробной информации

Ответ 6

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

Ответ 7

Лучше будет увидеть стандарт, разработанный W3.org. Вот адрес: http://www.w3.org/

Тег "DIV" может обернуть тег "P", тогда как тег "P" не может обернуть тег "DIV", пока я не знаю эту разницу. Могут быть и другие различия.

Ответ 8

Вспомните DIV как элемент группировки. Вы помещаете элементы в элемент DIV, чтобы вы могли установить их выравнивания

В то время как "p" - это просто создать новый абзац.

Ответ 9

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

Вы не хотели бы иметь вложенные <p> s, например, поскольку это не будет иметь большого смыслового смысла (кроме как в смысле цитат). В то время как люди используют вложенные <div> s для макета страницы.

Согласно Wikipedia

В HTML элементы span и div используется, когда части документа не могут семантически описывается другими HTML-элементы.

Ответ 10

Тег

A p предназначен для абзаца, обычно используемого для текста. Тег div предназначен для деления и обычно используется для создания разделов текста.

Ответ 11

<p> семантически используется для текста, обычно для абзацев.

<div> используется для блока или области на веб-странице. Например, его можно использовать для создания области заголовка.

Вероятно, они могли бы использоваться взаимозаменяемо, но вы не должны.