Was ist der Unterschied zwischen <p> und <div>?

Was ist der Unterschied zwischen <p> und <div>?

Können sie austauschbar verwendet werden? Was sind die Anwendungen?

Der vorherige Code war

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

Also muss ich es ändern

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

Es war die einfache Lösung. Und das CSS für den obigen Code ist

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

Das div-Tag kann also andere Elemente enthalten. P sollte nicht dazu gezwungen werden.

Sie haben semantische Unterschiede - ein <div>Element beschreibt einen Datencontainer, während ein <p>Element einen Inhaltsabschnitt beschreibt.

Die Semantik macht den Unterschied. HTML ist eine Auszeichnungssprache, dh, es wurde entwickelt, um Inhalte auf eine Weise zu "markieren", die für den Verbraucher des Auszeichners von Bedeutung ist. Die meisten Entwickler glauben, dass die Semantik des Dokuments die Standardstile und das Rendering sind, die Browser auf diese Elemente anwenden, aber das ist nicht der Fall.

Die Elemente, die Sie zum Markieren Ihres Inhalts auswählen, sollten den Inhalt beschreiben . Markieren Sie Ihr Dokument nicht danach, wie es aussehen soll - markieren Sie es danach, wie es ist.

Wenn Sie einen generischen Container benötigen rein für Layoutzweckedann benutze a <div>. Wenn Sie ein Element zur Beschreibung eines Inhaltsabschnitts benötigen, verwenden Sie a <p>.

Hinweis: Es ist wichtig zu verstehen, dass beide Elemente<div> und Elemente auf Blockebene<p> sind. Dies bedeutet, dass die meisten Browser sie auf ähnliche Weise behandeln.

Alle guten Antworten, aber es gibt einen Unterschied, den ich noch nicht erwähnt habe, und so rendern Browser sie standardmäßig. Die wichtigsten Webbrowser rendern ein <p>Tag mit einem Rand über und unter dem Absatz. Ein <div>Tag wird ohne Rand gerendert.

<p> gibt einen Absatz an und hat eine semantische Bedeutung.

<div> ist einfach ein Blockcontainer für andere Inhalte.

Alles, was in ein <p>gehen kann, kann in ein gehen, <div>aber das Gegenteil ist nicht wahr. <div>Tags können als untergeordnete Elemente Elemente auf Blockebene haben. <p>Elemente können nicht.

Schauen Sie sich die HTML-DTD an .

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

Der einzige Unterschied zwischen den beiden Elementen ist die Semantik. Auf beide Elemente wird standardmäßig die CSS-Regel angezeigt: Block (daher Blockebene) wird auf sie angewendet; nichts mehr (außer etwas mehr Spielraum in einigen Fällen). Wie bereits erwähnt, unterscheiden sich beide jedoch stark in Bezug auf die Semantik.

Das <p>Element ist, wie der Name schon sagt, für Absätze. Daher <p>sollte verwendet werden, wenn Sie Absätze von Absatztext erstellen möchten.

Das <div>Element hat jedoch semantisch wenig bis gar keine Bedeutung und kann daher als generisches Element auf Blockebene verwendet werden. Am häufigsten wird es in Layouts verwendet, da es semantisch bedeutungslos ist und im Allgemeinen für alles verwendet werden kann, was Sie möglicherweise für einen Block benötigen. Ebenenelement für.

Link für mehr Details

DIV ist ein generischer Container auf Blockebene, der alle anderen Block- oder Inline-Elemente enthalten kann, einschließlich anderer DIV-Elemente, während P Absätze (Text) umbrechen soll.

Es ist möglicherweise besser, den von W3.org entworfenen Standard zu sehen. Hier ist die Adresse: http://www.w3.org/

Ein "DIV" -Tag kann das "P" -Tag umschließen, während ein "P" -Tag das "DIV" -Tag nicht umschließen kann - soweit ich diesen Unterschied kenne. Es kann weitere Unterschiede geben.

Stellen Sie sich DIVein Gruppierungselement vor. Sie fügen Elemente in ein DIV-Element ein, damit Sie deren Ausrichtung festlegen können

Während "p"ist einfach, einen neuen Absatz zu erstellen.

<p> stellt einen Absatz dar und <div> stellt eine 'Unterteilung' dar. Ich nehme an, der Hauptunterschied besteht darin, dass divs semantisch 'bedeutungslos' sind, wobei <p> ​​etwas darstellen soll, das sich auf den Text selbst bezieht.

Sie möchten beispielsweise keine verschachtelten <p> s haben, da dies keinen großen semantischen Sinn ergibt (außer im Sinne von Zitaten), während die Benutzer verschachtelte <div> s für das Seitenlayout verwenden.

Laut Wikipedia

In HTML werden die Elemente span und div verwendet, wenn Teile eines Dokuments nicht durch andere HTML-Elemente semantisch beschrieben werden können.

Ein pTag steht für einen Absatz, der normalerweise für Text verwendet wird. Ein divTag dient zur Unterteilung und wird im Allgemeinen zum Erstellen von Textabschnitten verwendet.

<p> wird semantisch für Text verwendet, Absätze normalerweise.

<div>wird für einen Block oder Bereich in einer Webseite verwendet. Zum Beispiel könnte es verwendet werden, um den Bereich eines Headers zu erstellen.

Sie könnten wahrscheinlich austauschbar verwendet werden, aber Sie sollten nicht.