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

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

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

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

<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 не следует заставлять это делать.

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

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

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

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

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

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

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

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

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

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

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

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

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

Тег «DIV» может обернуть тег «P», тогда как тег «P» не может обернуть тег «DIV» - пока я знаю эту разницу. Там может быть больше других отличий.

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

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

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

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

Согласно Википедии

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

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

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

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

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