<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はマークアップ言語です。つまり、HTMLは、マークアップの利用者にとって意味のある方法でコンテンツを「マークアップ」するように設計されています。ほとんどの開発者は、ドキュメントのセマンティクスがブラウザがこれらの要素に適用するデフォルトのスタイルとレンダリングであると信じていますが、そうではありません。

コンテンツをマークアップするために選択する要素は、コンテンツを説明する必要があります。 外観に基づいてドキュメントをマークアップしないでください。ドキュメントの内容に基づいてマークアップしてください。

汎用コンテナが必要な場合 純粋にレイアウト目的で次にを使用し<div>ます。コンテンツの段落を説明する要素が必要な場合は、を使用してください<p>。

注： とはブロックレベルの要素であることを理解することが重要です。つまり、ほとんどのブラウザはそれらを同じように扱います。<div><p>

すべての良い答えですが、まだ言及していない違いが1つあります。それが、ブラウザがデフォルトでレンダリングする方法です。主要なWebブラウザーは<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 -->

2つの要素の唯一の違いはセマンティクスです。両方の要素には、デフォルトで、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>ウェブページのブロックまたはエリアに使用されます。たとえば、ヘッダーの領域を作成するために使用できます。

それらはおそらく互換的に使用できますが、使用すべきではありません。