HTML Tutorial – Unterschied Div, Span und P

Unterschied zwischen Div, Span und P

Was ist der Unterschied zwischen Div, Span und P-Elementen?
Die beiden wichtigen Element-Typen
Was ist ein HTML Block-Element?
Was ist ein HTML Inline-Element?
Was unterscheidet ein DIV von einem P-Element?
Der Unterschied zwischen DIV, Span und P live in Action

Heute gehen wir mal zurück zu den Anfängen von HTML, da diese Frage doch bei Anfängern immer wieder aufkommt:

Was ist der Unterschied zwischen Div, Span und P-Elementen?

Der Unterschied liegt in der Art des HTML Containers.
Diese Antwort hat Euch sicherlich nicht weitergeholfen, deshalb werde ich nun darauf ein wenig genauer eingehen:

Es gibt zwei sehr wichtige HTML-Elementtypen:

Eines ist das Block Element und das andere ist das Inline Element. Es gibt auch noch das Inline-Block Element, aber ich möchte Euch jetzt nicht verwirren.

Was ist ein HTML Block-Element?

Nach einem Block-Element wird standardmäßig von den Browsern umgebrochen, man kann sich das vorstellen, wie einen Kasten (Block). Dieser Kasten hat eine Höhe und eine Breite. Diese Höhe und Breite kann man dann per CSS beeinflussen. Wenn man nun nichts besonderes per CSS verändert, wird immer nach einem solchen Kasten (Block-Element) umgebrochen, also eine neue Zeile angefangen.

Ein DIV-Element ist per Standard ein Block Element. Nach einem DIV wird also in der Regel umgebrochen.

Was ist ein HTML Inline-Element?

Nun gibt es aber Inline-Elemente. Also Elemente „in einer Linie“. Diese Elemente können einzelne Wörter oder ganze Sätze in einem Text sein. Solche Inline Elemente fügt man in Texte ein, damit man diese dann zum Beispiel fett anzeigen lassen kann, oder mit einer anderen Farbe hervorheben kann.

Ein SPAN-Element ist per Standard ein Inline-Element.

Ein P-Element ist wiederum ein Block Element.

Was unterscheidet ein DIV von einem P-Element?

Ein DIV darf ineinander verschachtelt sein und somit darf ein DIV-ELement auch andere Block Elemente beinhalten. Ein P-Element darf nur Inline Elemente beinhalten.
Es gibt noch einen weiteren wesentlichen Unterschied zwischen DIV und P-Elementen, die Browser behandeln standardmäßig P-Elemente anders als DIV-Container. Browser setzen vor und nach P-Elementen per Standard einen margin… also einen richtigen Abstand zu dem davorliegenden und nachfolgenden Bereich. Chrome und Safari bspw. setzen per standard den margin 1em. Der Internet Explorer setzt einen Abstand von 16px (zumindest in der aktuellen Version). Wenn Ihr diesen in allen Browser vereinheitlichen wollt, müsste Ihr per CSS für p einen festen margin setzen.

Hier könnt Ihr direkt den Unterschied zwischen den Elementen sehen, den Beispielcode könnt Ihr Euch dort herauskopieren:

Ich hoffe, ich konnte Euch ein wenig den Unterschied zwischen DIV, Span, und P-Element erklären.