Unterschied zwischen einem Div-Element und einem P-Element in HTML

zum Menu
Es gibt formell betrachtet keinen Unterschied zwischen einem Div-Element und einem P-Element. Es gibt aber einen logischen Unterschied. Dieser ist wichtig, weil bei Nichtbeachtung nicht valides HTML entsteht. Das bedeutet, du darfst kein Div-Element innerhalb eines P-Elementes verpacken. Umgekehrt ist es völlig in Ordnung, wenn man ein P-Element in ein Div-Element einpackt.
fehlerhaftes Markup bewirkt nicht valides HTML
Fehlerhaftes Markup bewirkt nicht valides HTML.
 
richtig:
<div>
<p>
Lorem ipsum dolor sit amet, consetetur 
sadipscing elitr, sed diam nonumy eirmod 
tempor invidunt ut labore et dolore magna aliquyam erat
, sed diam voluptua. At vero eos et accusam et justo 

</p>
</div>
falsch:
<p>
<div>
Lorem ipsum dolor sit amet, consetetur 
sadipscing elitr, sed diam nonumy eirmod 
tempor invidunt ut labore et dolore magna aliquyam erat
, sed diam voluptua. At vero eos et accusam et justo
</div>
</p>

Code und Ergebnis

P-Elemente

<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
</p>

<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
</p>

<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
</p>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet

Div-Elemente

<div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
</div>
<div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
</div>
<div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
</div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet

Stylesheet defaults - das User-Stylesheet

Es ist wichtig zu wissen, dass um die Gleichheit der Elemente zu demonstrieren, vorher ein sogenannter CSS-Reset gemacht wurde. Das bedeutet, dass die Seitenabstände der wichtigsten Elemente alle auf 0 gesetzt wurden. Default ist der Ausgangszustand. Dieser ist, wenn man keinen Reset macht, so beschaffen, dass P-Elemente, also Paragraphen, einen Abstand voneinander aufweisen. Das tun sie hier nicht eben wegen dem Reset. Hätte man den Reset nicht gemacht, so würden P-Elemente und DIV-Elemente nicht das gleiche Aussehen vom Browser bekommen. DIV-Elemente rücken den Text in eine neue Zeile, P-Elemente tun das auch, aber sie erzeugen auch einen Abstand zum nächsten Element. Weil P- und DIV-Elemente den Text in die nächste Zeile drücken (einen sogenannten Zeilenumbruch bewirken), nennt man diese beiden Elemente auch Blockelemente. Es ist auch wichtig zu wissen, dass es einen browserinternen Stylesheet gibt, der schon deinen Text formatiert, bevor du die erste Zeile CSS geschrieben hast und der dann dieses Verhalten erklärt. So sieht der Reset aus.
<style>
/*css reset to default all NULL*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td
{
      margin: 0;
      padding: 0;
      border: 0;
      outline: 0;
}
</style>
    © primitivecode.com    CSS ist valide!