Qual é a diferença entre <p> e <div>?

Qual é a diferença entre <p> e <div>?

Eles podem ser usados ​​de forma intercambiável? Quais são as aplicações?

O código anterior foi

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

Então eu tenho que mudar para

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

Foi a solução fácil. E o CSS para o código acima é

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

Portanto, a tag div pode conter outros elementos. P não deve ser forçado a fazer isso.

Eles têm diferença semântica - um <div>elemento é projetado para descrever um contêiner de dados, enquanto um <p>elemento é projetado para descrever um parágrafo de conteúdo.

A semântica faz toda a diferença. HTML é uma linguagem de marcação, o que significa que foi projetado para "marcar" o conteúdo de maneira significativa para o consumidor da marcação. A maioria dos desenvolvedores acredita que a semântica do documento são os estilos e a renderização padrão que os navegadores aplicam a esses elementos, mas esse não é o caso.

Os elementos que você escolhe para marcar seu conteúdo devem descrevê -lo. Não marque seu documento com base em sua aparência - marque-o com base no que é.

Se você precisar de um contêiner genérico puramente para fins de layoutentão use a <div>. Se você precisar de um elemento para descrever um parágrafo do conteúdo, use a <p>.

Nota: É importante entender que tanto <div>e <p>são elementos de bloco de nível que significa que a maioria dos navegadores irá tratá-los de forma semelhante.

Todas as boas respostas, mas há uma diferença que ainda não vi mencionada, e é assim que os navegadores as processam por padrão. Os principais navegadores renderizarão uma <p>tag com margem acima e abaixo do parágrafo. Uma <div>tag será renderizada sem nenhuma margem.

<p> indica um parágrafo e tem significado semântico.

<div> é simplesmente um contêiner de bloco para outro conteúdo.

Tudo o que pode entrar em um <p>pode entrar em um, <div>mas o inverso não é verdadeiro. <div>as tags podem ter elementos em nível de bloco como filhos. <p>elementos não podem.

Dê uma olhada no 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 -->

A única diferença entre os dois elementos é semântica. Ambos os elementos, por padrão, exibem a regra CSS: block (portanto, no nível do bloco) aplicado a eles; nada mais (exceto margem um pouco extra em alguns casos). No entanto, como mencionado acima, os dois diferem bastante em termos de semântica.

O <p>elemento, como o próprio nome indica, é para parágrafos. Portanto,<p> deve ser usado quando você deseja criar blocos de texto de parágrafo.

O <div>elemento, no entanto, tem pouco ou nenhum significado semanticamente e, portanto, pode ser usado como um elemento genérico em nível de bloco - geralmente, as pessoas o usam em layouts porque ele não faz sentido semanticamente e pode ser usado para geralmente qualquer coisa que você possa precisar. elemento de nível para.

Link para mais detalhes

DIV é um contêiner genérico em nível de bloco que pode conter outros elementos de bloco ou em linha, incluindo outros elementos DIV, enquanto P é agrupar parágrafos (texto).

Talvez seja melhor ver o padrão projetado pelo W3.org. Aqui está o endereço: http://www.w3.org/

Uma tag "DIV" pode quebrar a tag "P", enquanto que uma tag "P" não pode quebrar a tag "DIV" - até agora eu conheço essa diferença. Pode haver mais outras diferenças.

Pense DIVcomo um elemento de agrupamento. Você coloca elementos em um elemento DIV para poder definir seus alinhamentos

Considerando que "p"é simplesmente criar um novo parágrafo.

<p> representa um parágrafo e <div> representa uma 'divisão', suponho que a principal diferença é que divs são semanticamente 'sem sentido', onde como um <p> deve representar algo relacionado ao próprio texto.

Você não gostaria de aninhar <p> s por exemplo, pois isso não faria muito sentido semântico (exceto no sentido de citações). Enquanto as pessoas usam <div> s aninhados para o layout da página.

De acordo com a Wikipedia

No HTML, os elementos span e div são usados ​​onde partes de um documento não podem ser semanticamente descritas por outros elementos HTML.

Uma ptag é para um parágrafo, geralmente usada para texto. Uma divtag é para divisão e geralmente usada para criar seções de texto.

<p> é usado semanticamente para texto, parágrafos geralmente.

<div>é usado para um bloco ou área em uma página da web. Por exemplo, poderia ser usado para criar a área de um cabeçalho.

Eles provavelmente poderiam ser usados ​​de forma intercambiável, mas você não deveria.