Quelle est la différence entre <p> et <div>?

Quelle est la différence entre <p> et <div>?

Peuvent-ils être utilisés de manière interchangeable? Quelles sont les applications?

Le code précédent était

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

Alors je dois le changer en

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

C'était la solution facile. Et le CSS pour le code ci-dessus est

.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;
}

La balise div peut donc contenir d'autres éléments. P ne devrait pas être obligé de faire cela.

Ils ont une différence sémantique - un <div>élément est conçu pour décrire un conteneur de données tandis qu'un <p>élément est conçu pour décrire un paragraphe de contenu.

La sémantique fait toute la différence. HTML est un langage de balisage, ce qui signifie qu'il est conçu pour «baliser» le contenu de manière significative pour le consommateur du balisage. La plupart des développeurs pensent que la sémantique du document correspond aux styles et au rendu par défaut que les navigateurs appliquent à ces éléments, mais ce n'est pas le cas.

Les éléments que vous choisissez pour baliser votre contenu doivent décrire le contenu. Ne marquez pas votre document en fonction de son apparence - marquez-le en fonction de ce qu'il est.

Si vous avez besoin d'un conteneur générique uniquement à des fins de mise en pagepuis utilisez un <div>. Si vous avez besoin d'un élément pour décrire un paragraphe de contenu, utilisez un <p>.

Remarque: Il est important de comprendre que les deux <div>et <p>sont des éléments de niveau bloc, ce qui signifie que la plupart des navigateurs les traiteront de la même manière.

Toutes les bonnes réponses, mais il y a une différence que je n'ai pas encore vue mentionnée, et c'est ainsi que les navigateurs les rendent par défaut. Les principaux navigateurs Web afficheront une <p>balise avec une marge au-dessus et en dessous du paragraphe. Une <div>balise sera rendue sans aucune marge.

<p> indique un paragraphe et a une signification sémantique.

<div> est simplement un conteneur de blocs pour d'autres contenus.

Tout ce qui peut aller dans un <p>peut aller dans un <div>mais l'inverse n'est pas vrai. <div>Les balises peuvent avoir des éléments de niveau bloc comme enfants.<p>les éléments ne peuvent pas.

Jetez un œil à la DTD HTML .

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

La seule différence entre les deux éléments est la sémantique. Les deux éléments, par défaut, ont la règle CSS display: block (donc au niveau du bloc) qui leur est appliquée; rien de plus (sauf une marge quelque peu supplémentaire dans certains cas). Cependant, comme mentionné ci-dessus, ils sont tous deux très différents en termes de sémantique.

L' <p>élément, comme son nom l'indique un peu, est destiné aux paragraphes. Ainsi, <p>doit être utilisé lorsque vous souhaitez créer des blocs de texte de paragraphe.

L' <div>élément, cependant, a peu ou pas de sens sémantiquement et peut donc être utilisé comme un élément générique au niveau du bloc - le plus souvent, les gens l'utilisent dans les mises en page car il n'a pas de sens sémantiquement et peut être utilisé pour généralement tout ce dont vous pourriez avoir besoin d'un bloc. élément de niveau pour.

Lien pour plus de détails

DIV est un conteneur de niveau bloc générique qui peut contenir n'importe quel autre bloc ou éléments en ligne, y compris d'autres éléments DIV, tandis que P consiste à encapsuler des paragraphes (texte).

Il vaudrait peut-être mieux voir le standard conçu par W3.org. Voici l'adresse: http://www.w3.org/

Une balise "DIV" peut envelopper la balise "P" alors qu'une balise "P" ne peut pas envelopper la balise "DIV" - pour l'instant je connais cette différence. Il peut y avoir d'autres différences.

Pensez DIVà un élément de regroupement. Vous placez des éléments dans un élément DIV afin de pouvoir définir leurs alignements

Alors que "p"c'est simplement créer un nouveau paragraphe.

<p> représente un paragraphe et <div> représente une "division", je suppose que la principale différence est que les divs sont sémantiquement "sans signification", alors qu'un <p> est censé représenter quelque chose concernant le texte lui-même.

Vous ne voudriez pas avoir imbriqué des <p> par exemple, car cela n'aurait pas beaucoup de sens sémantique (sauf dans le sens des citations) alors que les gens utilisent des <div> imbriqués pour la mise en page.

Selon Wikipedia

En HTML, les éléments span et div sont utilisés là où des parties d'un document ne peuvent pas être décrites sémantiquement par d'autres éléments HTML.

Une pbalise est pour un paragraphe, généralement utilisé pour le texte. Une divbalise sert à la division et est généralement utilisée pour créer des sections de texte.

<p> est utilisé sémantiquement pour le texte, les paragraphes généralement.

<div>est utilisé pour un bloc ou une zone dans une page Web. Par exemple, il pourrait être utilisé pour créer la zone d'un en-tête.

Ils pourraient probablement être utilisés de manière interchangeable, mais vous ne devriez pas.