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

Question

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

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

Answer 1

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

La sémantique fait toute la différence. Le HTML est un langage de balisage, ce qui signifie qu'il est conçu pour "baliser" le contenu d'une manière qui soit 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 devraient décrire le contenu. N'annotez pas votre document en fonction de l'apparence qu'il devrait avoir, mais en fonction de ce qu'il est.

Si vous avez besoin d'un conteneur générique uniquement pour des raisons de mise en page puis utiliser un <div> . Si vous avez besoin d'un élément pour décrire un paragraphe de contenu, utilisez une balise <p> .

Note : _Il est important de comprendre que les deux <div> y <p> sont éléments de niveau bloc ce qui signifie que la plupart des navigateurs les traiteront de manière similaire._

Answer 2

Toutes les réponses sont bonnes, mais il y a une différence que je n'ai pas encore vue mentionnée, et c'est la façon dont les navigateurs les rendent par défaut. Les principaux navigateurs Web affichent un <p> avec une marge au-dessus et au-dessous du paragraphe. A <div> sera rendu sans aucune marge.

Answer 3

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

<div> est simplement un bloc contenant d'autres contenus.

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

Jetez un coup d'œ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 -->

Answer 4

La seule différence entre ces deux éléments est d'ordre sémantique. Les deux éléments, par défaut, se voient appliquer la règle CSS display : block (donc block-level), rien de plus (sauf une marge supplémentaire dans certains cas). Cependant, comme nous l'avons déjà mentionné, ils sont tous deux très différents en termes de sémantique.

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

En <div> Cependant, cet élément n'a que peu ou pas de signification sémantique et peut donc être utilisé comme un élément générique de niveau bloc. Le plus souvent, les gens l'utilisent dans les mises en page parce qu'il n'a aucune signification sémantique et peut être utilisé pour tout ce qui peut nécessiter un élément de niveau bloc.

Lien pour plus de détails

Answer 5

Il serait peut-être préférable de consulter la norme conçue par W3.org. Voici l'adresse : http://www.w3.org/

Une balise "DIV" peut envelopper une balise "P" alors qu'une balise "P" ne peut pas envelopper une balise "DIV" - pour autant que je connaisse cette différence. Il peut y avoir d'autres différences.