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

Peuvent-ils être utilisés de façon interchangeable? Quelles sont les applications?

Dans tous les valide en HTML/XHTML, en transition ou strict, vous ne pouvez pas imbriquer un <p> à l'intérieur d'un autre <p> donc <div> et <p> ne sont pas d'échange.
Byran - vous avez frappé à la question essentielle avec ces "sémantique" des réponses. Le problème c'est que HTML artificiellement contraint <p>s de sorte qu'ils se comportent différemment. S'ils étaient simplement des éléments de bloc plus de sens sémantique qui serait ok. Mais pourquoi vous empêcher de vous ex: intégrer une illustration dans un paragraphe?
avez-vous envisagé de changer la accepté de répondre?

InformationsquelleAutor l--''''''---------'''''''''''' | 2010-02-09

html

-17

Le code précédent a été
```
<p class='item'><span class='name'>*Scrambled eggs on crusty Italian ciabatta and bruschetta tomato</span><span class='price'>$12.50</span></p>
```
Donc je dois changé
```
<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;
}
```
Donc balise div peuvent contenir d'autres éléments. P ne devraient pas être obligés de le faire.
- Je ne sais vraiment pas ce que tu veux dire. “Dans le site”: le site? “...pour faire ce travail”: que signifie "travailler" signifie? Quel est le but de rendu?
- Bonjour Marcel,j'ai édité ma réponse.
- Cela semble complètement illogique pour moi: p éléments peut contiennent d'autres éléments en ligne (HTML 5 spec parle de phrasé éléments (voir la section 7.3)), dont span est l'un d'entre eux, parmi beaucoup d'autres. En outre, ce n'est pas une réponse à la discussion de la question: elle ne dit rien à propos de la différence entre p et div. Et merci de lire Comment faire un commentaire réponses de travail?
- Pourquoi est-ce accepté de répondre alors? Ne conteste pas, je me demandais pourquoi il n'y a incohérence.
- Apparemment, quelque chose a travaillé pour l'OP, mais il ne répond pas à la question. Regardez également le score de cette réponse: -16 à l'heure actuelle. Dans le cas où vous ne savez pas: l'OP est le seul qui peut accepter une réponse, alors que tout le monde dans la communauté peut voter une réponse vers le haut ou vers le bas.
InformationsquelleAutor Kazi T Ahsan
271

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

La sémantique faire toute la différence. HTML est un langage de balisage qui signifie qu'il est conçu pour "marquer" le contenu d'une manière qui est significatif pour le consommateur de l'annotation. La plupart des développeurs de croire que la sémantique du document sont les styles par défaut et de rendu des navigateurs de s'appliquer à ces éléments, mais qui n'est pas le cas.

Les éléments que vous choisissez de marque de votre contenu doit décrire le contenu. Ne marquez pas votre document basé sur la façon dont il devrait ressembler à une marque de il en place à partir de ce qu'il est.

Si vous avez besoin d'un conteneur générique ~~purement à des fins de mise en page~~ ensuite utiliser un <div>. Si vous avez besoin d'un élément pour décrire un paragraphe de contenu, puis utilisez un <p>.

Remarque: Il est important de comprendre que les deux <div> et <p> sont les éléments de niveau bloc ce qui signifie que la plupart des navigateurs de traiter de la même façon.
- Mon expérience a été que si vous voulez à la disposition de certains éléments de contenu différemment que quelques autre élément de contenu, ces deux sont sémantiquement distinctes, et devrait donc être marquée indepedently de toute façon. Si otoh, que, ils ne sont pas sémantiquement distinctes, elles doivent probablement être mis ensemble. Dans les deux cas, il n'est pas nécessaire d'ajouter un élément à la disposition, parce que dans le premier cas, il devrait déjà avoir été là pour commencer et dans le second cas, il n'y a pas de layouting passe. Mais là encore, je suis un puriste et mes sites toujours l'air de flashbacks à 1995.
- Quand vous dites à utiliser <p> "paragraphe de contenu", le contenu est-il à être dans la forme de lettres et de mots? Avez-vous songé à utiliser <p> pour décrire un autre type de contenu, comme des images?
- Permis de contenu pour <p> est "le Phrasé de contenu", qui se compose de la formulation des éléments mélangés avec du caractère normal des données. Btw, les images appartiennent à phrasé éléments de sorte que vous pouvez les utiliser à l'intérieur <p>. Références: w3.org/TR/html-markup/p.html et w3.org/TR/html-markup/common-models.html#common.elem.phrasing. HTH
- Vous avez oublié de mentionner que vous ne pouvez pas imbriquer p est alors que vous pouvez le faire avec des div à l'. Comme pour le "ne pas inclure les informations de mise en page dans le code html" genre d'attitudes: il n'est pas possible d'écrire un fichier html, sans s'embarrasser avec la façon dont il devrait ressembler. Votre choix de l'ordre et de l'imbrication de la div à l'auront toujours une influence, à moins que de vous écrire un peu de code javascript qui déchire votre page à part et restructure il. Voyant ainsi div comme "un conteneur générique purement pour modèle fins" est la formulation correcte.
- Que faire si je préfère utiliser div au lieu de p?
- Votre réponse est tout simplement pas correct. Le rendu de <p> les éléments et <div> éléments sont complètement différents, au moins dans Firefox. Vous pouvez empiler <div> éléments sur eachother ou à tour de rôle comme des boîtes, mais tu ne peux pas avec les paragraphes.
InformationsquelleAutor Andrew Hare
58

Toutes les bonnes réponses, mais il y a une différence que je n'ai pas vu encore mentionné, et c'est la manière dont les navigateurs de rendu par défaut. Les principaux navigateurs web rendra un <p> tag avec de la marge au-dessus et au-dessous de ce paragraphe. Un <div> tag sera rendu sans aucune marge à tous.
- Si vous voulez contrôler le rendu, vous devriez être en utilisant le CSS. Ne comptez pas sur les navigateurs actuels des valeurs par défaut.
- La question posée quelles différences il y a entre la DIV et P balises. C'est important pour quiconque de ne pas utiliser un CSS reset, d'autant qu'il pourrait être non évidente à quelqu'un en utilisant simplement un navigateur.
- Merci pour la clarification. Je cherchais cette différence exacte puisque l'utilisation de balise P était à l'origine de texte à paraître avec une marge en haut (et en bas probablement), donc je me demandais où l'espace est à venir à partir de. Nécessaire pour se débarrasser de l'espace.
- la marge? comment peut-on voir ça?
InformationsquelleAutor ceejayoz
55

<p> indique un paragraphe et a de sens sémantique.

<div> est tout simplement un bloc conteneur 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 des enfants. <p> éléments ne peuvent pas.

Tae un coup d'oeil à 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 -->
```
- Si vous ne pouvez pas avoir un <h1> dans un <p> ?
InformationsquelleAutor cletus
8

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

La <p> élément, comme son nom quelque peu l'indique, est pour les paragraphes. Ainsi, <p> doit être utilisé lorsque vous souhaitez créer des blocs de texte de paragraphe.

La <div> élément, cependant, a peu ou pas de sens du point de vue sémantique et, par conséquent, peut être utilisé comme un générique au niveau du bloc de l'élément le plus fréquemment, les gens de l'utiliser dans les mises en page, car il est dénué de sens du point de vue sémantique et peut être utilisé pour généralement tout ce que vous pourriez exiger un bloc élément de niveau pour.

Lien pour plus de détails
- Il n'y a pas besoin de la dernière phrase. Presque toutes les questions sur ce site pourrait probablement être cherché sur google, mais ce n'est pas le point. L'intérêt est de faire une ressource pour les développeurs avec les mêmes questions dans l'avenir.
- ya,mais il aurait pu engager une discussion avec les quelques informations pertinentes ,de toute façon modifier
- Depuis deux p et les div sont des éléments de bloc, pourquoi est-il que, lorsqu'un élément h1 est imbriquée à l'intérieur d'un div, il héritera de la styles mais imbriqués dans une p il l'habitude? Merci
- Je ne sais pas ce qui se passe exactement dans votre cas, mais un h1 est un en-tête, qui est pas phrasé de contenu et ne sont donc pas autorisés à l'intérieur d'un paragraphe. Envisager texte imprimé - il contient des en-têtes et les paragraphes, mais les en-têtes ne font pas partie de ces paragraphes.
InformationsquelleAutor Ashish Agarwal
7

DIV est un générique au niveau du bloc conteneur qui peut contenir n'importe quel autre bloc ou des éléments en ligne, y compris les autres éléments DIV, alors que P est d'envelopper les paragraphes (texte).

InformationsquelleAutor bdl
7

Il pourrait être préférable de voir le standard conçu par W3.org. Voici l'adresse: http://www.w3.org/

Un "DIV" tag peut envelopper "P" tag alors que, d'un "P" tag ne peut pas envelopper "DIV" tag-jusqu'à présent, je sais que cette différence. Il peut y avoir plusieurs autres différences.

InformationsquelleAutor Hoque
5

Pense DIV comme un élément de regroupement. Vous placez les éléments dans un élément DIV, de sorte que vous pouvez régler leurs alignements

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

InformationsquelleAutor Suraj Chandran
3

<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 'sens', où, comme un <p> est censé représenter quelque chose concernant le texte lui-même.

Vous ne souhaitez pas imbriquée <p>s par exemple, depuis que n'aurait pas beaucoup de sens sémantique (sauf dans le sens de citations), Tandis que les personnes imbriquer <div>s pour la mise en page.

Selon Wikipédia

En HTML, la balise span et div éléments sont
utilisé lorsque les parties d'un document ne peut pas
sémantiquement décrits par d'autres
Les éléments HTML.

InformationsquelleAutor Chad Okere
2

Un p balise est pour un paragraphe, généralement utilisé pour le texte. Un div tag est une division, et généralement utilisé pour créer des sections de texte.

InformationsquelleAutor Daniel A. White
2

'p' est de la sémantique utilisée pour le texte, les paragraphes habituellement.

'div' est utilisé pour un bloc ou de la zone dans une page web. Par exemple, il pourrait être utilisé pour rendre la zone de l'en-tête.

Le pourrait probablement être utilisé interchangebly, mais vous ne devriez pas.

InformationsquelleAutor vectran

Vous devez vous connecter pour publier un commentaire.