Qual è la differenza tra <p> e <div>?

Qual è la differenza tra <p> e <div>?

Possono essere usati in modo intercambiabile? Quali sono le applicazioni?

Il codice precedente era

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

Quindi devo cambiarlo in

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

È stata la soluzione semplice. E il CSS per il codice sopra è

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

Quindi il tag div può contenere altri elementi. P non dovrebbe essere costretto a farlo.

Hanno una differenza semantica : un <div>elemento è progettato per descrivere un contenitore di dati, mentre un <p>elemento è progettato per descrivere un paragrafo di contenuto.

La semantica fa la differenza. L'HTML è un linguaggio di markup che significa che è progettato per "contrassegnare" il contenuto in modo significativo per il consumatore del markup. La maggior parte degli sviluppatori ritiene che la semantica del documento siano gli stili e il rendering predefiniti che i browser applicano a questi elementi, ma non è così.

Gli elementi che scegli di contrassegnare i tuoi contenuti dovrebbero descriverli . Non contrassegnare il documento in base a come dovrebbe apparire, contrassegnarlo in base a ciò che è.

Se hai bisogno di un contenitore generico puramente per scopi di layoutquindi usa a <div>. Se hai bisogno di un elemento per descrivere un paragrafo di contenuto, usa a <p>.

Nota: E 'importante capire che sia <div>e <p>sono elementi block-level , che significa che la maggior parte dei browser trattarli in modo simile.

Tutte buone risposte, ma c'è una differenza che non ho ancora visto menzionato, ed è così che i browser le visualizzano di default. I principali browser Web visualizzeranno un <p>tag con margine sopra e sotto il paragrafo. Un <div>tag verrà reso senza alcun margine.

<p> indica un paragrafo e ha un significato semantico.

<div> è semplicemente un contenitore di blocchi per altri contenuti.

Tutto ciò che può andare in a <p>può andare in a <div>ma non è vero il contrario. <div>i tag possono avere elementi a livello di blocco come elementi secondari. <p>gli elementi non possono.

Dai un'occhiata al 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 -->

L'unica differenza tra i due elementi è la semantica. Entrambi gli elementi, per impostazione predefinita, hanno la visualizzazione della regola CSS: blocco (quindi a livello di blocco) applicato a loro; niente di più (tranne qualche margine in più in alcuni casi). Tuttavia, come già detto, entrambi differiscono notevolmente in termini di semantica.

L' <p>elemento, come suggerisce il nome in qualche modo, è per i paragrafi. Pertanto, <p>dovrebbe essere utilizzato quando si desidera creare blocchi di testo di paragrafo.

L' <div>elemento, tuttavia, ha poco o nessun significato semanticamente e quindi può essere usato come un elemento a livello di blocco generico: più comunemente, le persone lo usano all'interno di layout perché è insignificante semanticamente e può essere usato per qualsiasi cosa che potresti richiedere un blocco- elemento di livello per.

Link per maggiori dettagli

DIV è un contenitore a livello di blocco generico che può contenere qualsiasi altro blocco o elementi inline, inclusi altri elementi DIV, mentre P deve avvolgere i paragrafi (testo).

Potrebbe essere meglio vedere lo standard progettato da W3.org. Ecco l'indirizzo: http://www.w3.org/

Un tag "DIV" può avvolgere il tag "P", mentre un tag "P" non può avvolgere il tag "DIV", per ora conosco questa differenza. Potrebbero esserci altre differenze.

Pensa DIVcome un elemento di raggruppamento. Inserisci gli elementi in un elemento DIV in modo da poter impostare i loro allineamenti

Considerando che "p"è semplicemente creare un nuovo paragrafo.

<p> rappresenta un paragrafo e <div> rappresenta una 'divisione', suppongo che la differenza principale sia che i div sono semanticamente 'insignificanti', dove come <p> dovrebbe rappresentare qualcosa relativo al testo stesso.

Non avresti voluto annidare <p> s per esempio, dato che non avrebbe molto senso semantico (tranne nel senso delle citazioni) Considerando che le persone usano <div> s annidate per il layout di pagina.

Secondo Wikipedia

In HTML, gli elementi span e div sono utilizzati laddove parti di un documento non possono essere descritte semanticamente da altri elementi HTML.

Un ptag è per un paragrafo, generalmente utilizzato per il testo. Un divtag è per la divisione e generalmente utilizzato per creare sezioni di testo.

<p> è usato semanticamente per il testo, i paragrafi di solito.

<div>viene utilizzato per un blocco o un'area in una pagina Web. Ad esempio, potrebbe essere utilizzato per creare l'area di un'intestazione.

Probabilmente potrebbero essere usati in modo intercambiabile, ma non dovresti.