Inline- und Blockelemente

[Torsten]

Hi,

ich hab bis jetzt noch nicht so recht den Unterschied zwischen Inline- und Blockelementen verstanden. Würde mich freuen wenn mir jemand dies verständlich erläutern könnte. Vielleicht versteh auch ich dann den Unterschied.

Sind Blockelemente alle Elemente die mit einem Anfangs-Tag und einem End-Tag notiert sind, z.B. <div></div>? Und Inline wäre dann z.B. <img [...] >?

Torsten

[Shepard]

Hi,

Sind Blockelemente alle Elemente die mit einem Anfangs-Tag und einem End-Tag notiert sind, z.B. <div></div>? Und Inline wäre dann z.B. <img [...] >?

Stimmt zwar oft, aber nicht immer. <span> z.B. erzeugt ein inline-Element.

Vereinfacht gesagt, fangen Blockelemente eine neue Zeile an, Inlineelemente nicht.

Shepard

[Christoph Schnauß]

hallo,

Stimmt zwar oft, aber nicht immer. <span> z.B. erzeugt ein inline-Element.

<span> ist ein inline-Element, aber es "erzeugt" gar nichts.

Vereinfacht gesagt, fangen Blockelemente eine neue Zeile an, Inlineelemente nicht.

Blockelemente bilden einen eigenen Absatz. Siehe auch http://de.selfhtml.org/html/referenz/elemente.htm

Grüße aus Berlin

Christoph S.

[Tim Tepaße]

Hallo Christoph,

ok, wenn Du unbedingt klugscheissen willst:

Stimmt zwar oft, aber nicht immer. <span> z.B. erzeugt ein inline-Element.
<span> ist ein inline-Element, aber es "erzeugt" gar nichts.

Das ist kein Element, schon gar nicht inline. Das ist das Start-Tag eines Inline-Elementes.

Wird in Span-Element in einem wohlgeformten und möglichst auch validen Dokument erfolgreich geparst, erzeugt es im CSS-Kontext eine Box (nach Browsereinstellung meistens inline dargestellt), im DOM-Kontext erzeugt es ein Objekt, das das Interface HTMLElement implementiert.

Manchmal glaube ich, man sollte Dich genauso korinthenkackerisch behandeln, wie Du Neulinge hier behandelst. Ich fange hiermit mal damit an.

Tim

[Shepard]

Hallo Tim,

ich melde ich hier nur, weil es meine Antwort war, die Christoph verbessert hat.

Manchmal glaube ich, man sollte Dich genauso korinthenkackerisch behandeln, wie Du Neulinge hier behandelst.

Was ich ihm nicht wirklich übel nehme, da er in der Sache Recht hat. Über Tonfall kann man streiten, aber er hat definitiv nur meine Aussage korrigiert, nicht mich persönlich irgendwie angegriffen.

Also, von meiner Seite kein Problem.

So long
Shepard

[Tim Tepaße]

Hallo,

Was ich ihm nicht wirklich übel nehme, da er in der Sache Recht hat. Über Tonfall kann man streiten, aber er hat definitiv nur meine Aussage korrigiert, nicht mich persönlich irgendwie angegriffen.

Ja, mich stört auch weniger die Sache, sondern die über lange Zeit gehende Penetranz in solch Korinthenkackerei, wie. z.b. auch hier. Manchmal muss man dann mal explodieren.

Tim

[Gunnar Bittersmann]

Hello out there!

Sind Blockelemente alle Elemente die mit einem Anfangs-Tag und einem End-Tag notiert sind, z.B. <div></div>? Und Inline wäre dann z.B. <img [...] >?

Stimmt zwar oft,

?? a, acronym, abbr, b, cite, code, em, i, kbd, q, sub, sup, strong, ...

See ya up the road,
Gunnar

[Jonathan]

ich hab bis jetzt noch nicht so recht den Unterschied zwischen Inline- und Blockelementen verstanden. Würde mich freuen wenn mir jemand dies verständlich erläutern könnte. Vielleicht versteh auch ich dann den Unterschied.

OK ;)

Sind Blockelemente alle Elemente die mit einem Anfangs-Tag und einem End-Tag notiert sind, z.B. <div></div>? Und Inline wäre dann z.B. <img [...] >?

Nein. Blockelemente sind Elemente, die einen Zeilenumbruch erzeugen, abso beispielsweise div, p, h1, ul, li, form
Blockelemente haben gewöhnlich im CSS von Haus aus display:block

Inline-Elemente sind Elemente, die sich innerhalb eines Textes befinden und nicht zwandsläufig einen neue Zeile verursachen, z.B. a, b, strong, em, img, font, code, abbr
Inlineelemente haben gewöhnlich im CSS von Haus aus display:inline

Blockelemente dehnen sich auch auf die verfügbare Breite aus und können Inline- und Blockelemente enthalten, sie sind so etwas wie rechteckige Behälter für Text und weitere Elemente. Inline-Elemente sind nur so breit wie nötig, nur dadurch, dass du einen Text über <i> kursiv machst, entsteht kein zusätzlicher Zeilenumbruch oder Abstand. Außerdem können inline-Elemente eben keine Blockelemente enthalten.

[Torsten]

Hi Jonathan,

vielen Dank für deine ausführliche und verständliche Erklärung.
Jetzt hab auch ich es verstanden :)

Grüße
Torsten

[Christoph Schnauß]

hallo,

Blockelemente sind Elemente, die einen Zeilenumbruch erzeugen

Das tun sie nicht. Aber sie stehen in einem eigenen Absatz.

Blockelemente haben gewöhnlich im CSS von Haus aus display:block

Blockelemente sind HTML-Elemente und lassen sich mit allem, was CSS bereitstellt, formatieren. Sie lassen sich ebensogut mit "display:inline" behandeln wie andere Elemente auch. Siehe display

Inline-Elemente sind Elemente, die sich innerhalb eines Textes befinden und nicht zwandsläufig einen neue Zeile verursachen

"Inline-Elemente erzeugen keinen eigenen Absatz im Textfluss. Inline-Elemente sind als untergeordnete, "innere" Elemente für Block-Elemente gedacht" steht in SELFHTML.

Inlineelemente haben gewöhnlich im CSS von Haus aus display:inline

"display" kann jedem beliebigen HTML-Element zugeordnet werden.

Blockelemente [...] sind so etwas wie rechteckige Behälter für Text und weitere Elemente.

Blockelemente sind keine Behälter.

Außerdem können inline-Elemente eben keine Blockelemente enthalten.

Das ist richtig.

Grüße aus Berlin

Christoph S.

[Swen Wacker]

Moin,

Blockelemente sind Elemente, die einen Zeilenumbruch erzeugen

Das tun sie nicht. Aber sie stehen in einem eigenen Absatz.

Könnte wir uns beim gemeinsamen Korinthenkacken auf ein "weder noch" einigen und folgend Satz nehmen: Generally, block-level elements begin on new lines oder Im Allgemeinen beginnen Block-Elemente in einer neuen Zeile?  ;-)

Swen

[Torsten]

Könnte wir uns beim gemeinsamen Korinthenkacken auf ein "weder noch" einigen und folgend Satz nehmen:

korinthenkacken, dieses wort hab ich gesucht! ;)

Torsten

[Christoph Schnauß]

hallo Swen,

Könnte wir uns beim gemeinsamen Korinthenkacken auf ein "weder noch" einigen

In diesem Fall nicht. "Zeilenumbruch" ist in HTML <br>. Blockelemente erzeugen nun aber keineswegs immer ein zusätzliches <br>.

und folgend Satz nehmen: Generally, block-level elements begin on new lines oder Im Allgemeinen beginnen Block-Elemente in einer neuen Zeile?  ;-)

Gegen den Satz ist nichts einzuwenden.

Grüße aus Berlin

Christoph S.

[Torsten]

Hallo Christoph,

Könnte wir uns beim gemeinsamen Korinthenkacken auf ein "weder noch" einigen

In diesem Fall nicht. "Zeilenumbruch" ist in HTML <br>. Blockelemente erzeugen nun aber keineswegs immer ein zusätzliches <br>.

ich denke in diesem Fall war die Rede von einem gedanklichem Zeilenumbruch und nicht von einem "HTML Break".

Und wenn ich dazu auch ein wenig Korinthenkacken darf:
Blockelemente erzwingen "komischerweise" Zeilenumbrüche:

http://de.selfhtml.org/html/text/zeilenumbruch.htm#erzwingen

Torsten

[Christoph Schnauß]

hallo,

Und wenn ich dazu auch ein wenig Korinthenkacken darf:
Blockelemente erzwingen "komischerweise" Zeilenumbrüche:
http://de.selfhtml.org/html/text/zeilenumbruch.htm#erzwingen

Es geht an der angegebenen Stelle _nicht_ allgemein um Blockelemente, sondern speziell um die Eläuterung des HTML-Elements <br>.

Grüße aus Berlin

Christoph S.

[Torsten]

hallo,

Und wenn ich dazu auch ein wenig Korinthenkacken darf:
Blockelemente erzwingen "komischerweise" Zeilenumbrüche:
http://de.selfhtml.org/html/text/zeilenumbruch.htm#erzwingen

Es geht an der angegebenen Stelle _nicht_ allgemein um Blockelemente, sondern speziell um die Eläuterung des HTML-Elements <br>.

ich will mich ja nicht streiten aber...

Jonathan:

Blockelemente sind Elemente, die einen Zeilenumbruch erzeugen

Christoph Schnauß:

Das tun sie nicht.

Torsten:

http://de.selfhtml.org/html/text/zeilenumbruch.htm#erzwingen

vielleicht stört dich auch nur das wörtchen "erzeugen"!?
welches Jonathan bestimmt mit erzwingen verwechselt hat!?

Torsten

[Torsten]

naja, es muss halt immer noch jemanden geben der seinen senf überheblicherweise dazu geben muss ;) aber letztendlich hab ich jonathan verstanden und kenne nun die "praxisorientierten" unterschiede, was letztendlich für mich als "praktischer" entwickler ausreichend ist :)

Torsten

[Jonathan]

Hallo,

Blockelemente sind Elemente, die einen Zeilenumbruch erzeugen

Das tun sie nicht. Aber sie stehen in einem eigenen Absatz.

Wurde bereits diskutiert. Ich halte es für gleichwertig zu sagen, dass eine neue Zeile erzwungen wird, erzeugt wird, oder dass der Text in einer neuen Zeile beginnt. Ich denke, es ich klar, dass wenn ich ein <div> schreibe, dass dann kein zusätzliches <br> irgendwo generiert wird.

Blockelemente haben gewöhnlich im CSS von Haus aus display:block

Blockelemente sind HTML-Elemente und lassen sich mit allem, was CSS bereitstellt, formatieren. Sie lassen sich ebensogut mit "display:inline" behandeln wie andere Elemente auch. Siehe display

Ich habe nichts anderes gesagt. Natürlich lässt sich die display-Eigenschaft ändern. Ich schrieb ja auch "gewöhnlich" und "von Haus aus" (bedeutet: Voreinstellung vom Browser, lässt sich mit CSS überschreiben).

"display" kann jedem beliebigen HTML-Element zugeordnet werden.

Ich habe nichts anderes behauptet. Außerdem gibt es eben noch die unterscheidung zwischen CSS-Blockelementen und HTML-Blockelementen, auf die ich der Verständlichkeit halber nicht näher eingegangen bin.

Blockelemente sind keine Behälter.

Aber Blockelemente können doch andere Elemente enthalten!? ;)

MfG Jonathan.

[Christoph Schnauß]

hallo,

Aber Blockelemente können doch andere Elemente enthalten!? ;)

Generell können sie inline-Elemente enthalten. Einige können auch weitere Blockelemente umschließen.

Grüße aus Berlin

Christoph S.

[Gunnar Bittersmann]

Hello out there!

Generell können [Blockelemente] inline-Elemente enthalten.

Nein. 'hr' bspw. kann das nicht.

See ya up the road,
Gunnar

[Gunnar Bittersmann]

Hello out there!

ich hab bis jetzt noch nicht so recht den Unterschied zwischen Inline- und Blockelementen verstanden.

Da gilt es zu unterscheiden zwischen HTML und CSS.

In HTML sind Blockelemente solche, die auch weitere Blockelemente enthalten dürfen; Inline-Elemente hingegen dürfen keine Blockelemente enthalten.

Zu CSS-Block- und Inline-Elementen siehe [CSS2 §9.2]

Zu den Zusammenhängen siehe http://forum.de.selfhtml.org/archiv/2006/6/t132132/#m854853 und https://forum.selfhtml.org/?t=135911&m=882972.

See ya up the road,
Gunnar

[CarstenP]

Hallo Gunnar,

In HTML sind Blockelemente solche, die auch weitere Blockelemente enthalten dürfen

*hüstel* Zum Beispiel p, hx, ...? ;-)

Viele Grüße
Carsten

[Torsten]

Hi,

In HTML sind Blockelemente solche, die auch weitere Blockelemente enthalten dürfen

*hüstel* Zum Beispiel p, hx, ...? ;-)

also langsam hab ich das gefühl ich bin hier beim gluckscheissertreff gelandet. jeder will es besser als der andere wissen. ich würde mich freuen wenn Carsten seine aussage etwas genauer erläutern könnte. ich kann über insider statements leider nicht mit schmunzeln...

Torsten

[Mathias Brodala]

Hallo Torsten.

In HTML sind Blockelemente solche, die auch weitere Blockelemente enthalten dürfen

*hüstel* Zum Beispiel p, hx, ...? ;-)

also langsam hab ich das gefühl ich bin hier beim gluckscheissertreff gelandet. jeder will es besser als der andere wissen. ich würde mich freuen wenn Carsten seine aussage etwas genauer erläutern könnte. ich kann über insider statements leider nicht mit schmunzeln...

Carsten wollte zum Ausdruck bringen, dass man Blockelemente nicht zwangsläufig daran erkennen kann, dass sie weitere Blockelemente enthalten dürfen. Bei Absätzen und Überschriften ist dies zum Beispiel nicht der Fall.

Zur Unterscheidung muss man sich wohl oder übel auf den optischen Aspekt beschränken, welcher hier ja schon genannt wurde.

Einen schönen Mittwoch noch.

Gruß, Mathias

[Gunnar Bittersmann]

Hello out there!

*hüstel* Zum Beispiel p, hx, ...? ;-)

@CarstenP: Ludgers Hüsteln hat aber eine lange Inkubationszeit. SCNR.

Natürlich hast du recht.

also langsam hab ich das gefühl ich bin hier beim gluckscheissertreff gelandet.

@Torsten: Das Gefühl trügt nicht. SCNR.

ich kann über insider statements leider nicht mit schmunzeln...

Wenn das nicht Ansporn ist, selbst „gluck“ und damit zum Insider zu werden ...

Zur Unterscheidung muss man sich wohl oder übel auf den optischen Aspekt beschränken, welcher hier ja schon genannt wurde.

@Mathias: Anhand des optischen Effekts unterscheidet man aber eher CSS-Blockelemente von CSS-Inline-Elementen denn HTML-Blockelemente von HTML-Inline-Elementen.

See ya up the road,
Gunnar

[Siechfred]

Hell-O!

In HTML sind Blockelemente solche, die auch weitere Blockelemente enthalten dürfen
*hüstel* Zum Beispiel p, hx, ...? ;-)
also langsam hab ich das gefühl ich bin hier beim gluckscheissertreff gelandet.

Ist ja zum Glucksen.

ich würde mich freuen wenn Carsten seine aussage etwas genauer erläutern könnte.

Es gibt Blocklevelelemente, die weitere enthalten dürfen, es gibt aber auch Blocklevelelemente, die keine weiteren enthalten dürfen. Es gibt also eine Art Hierarchie bei diesen Elementen, die für einen Laien nicht so ohne weiteres zu überblicken ist, letztlich kommt dem Inhalt des Elementes entscheidende Bedeutung zu:

Ein DIV dient der Gruppierung von Elementen jeder Art, also muss es auch erlaubt sein, dass innerhalb des DIV andere Blockelemente (z.B. Überschriften, Listen oder Textabsätze) vorkommen.

Eine Überschrift enthält nur Text, der einen Teil des Inhaltes zusammenfasst. Innerhalb einer Überschrift kann es nach gesundem Menschenverstand weder Listen noch Textabsätze geben, weshalb sie auch in HTML an dieser Stelle nicht erlaubt sind. Lediglich Inline-Elemente zur Strukturierung der Überschrift sind erlaubt (z.B. um ein Schlagwort zu betonen oder um Code als solchen auszuzeichnen).

Ähnlich verhält es sich mit Tabellen, Formularen etc. Dafür, welche Regeln genau für welches HTML-Element gelten, wirst du mit der Zeit ein Gefühl entwickeln, das du dir nur noch über den HTML-Validator deines Vertrauens bestätigen lassen musst.

ich kann über insider statements leider nicht mit schmunzeln...

Das war kein Insider, sondern eine berechtigte Richtigstellung bzw. Ergänzung.

Siechfred

[CarstenP]

Hallo Torsten,

da ich nach Lektüre der übrigen Postings den Eindruck hatte, daß Du fürs erste hinreichend aufgeklärt wurdest, hielt ich es nicht für nötig, noch Großartiges hinzuzufügen, das entweder im Thread oder in den verlinkten Seiten sowieso schon erwähnt wurde. Ich wollte lediglich Gunnar mit einem Augenzwinkern darauf hinweisen, daß seine Aussage so nicht ganz richtig ist.

Und eines kann ich Dir versichern: Wenn ich anfange gluckzuscheissern, dann liest sich das anders ... ;-)

ich würde mich freuen wenn Carsten seine aussage etwas genauer erläutern könnte.

Das haben die anderen ja mittlerweile freundlicherweise übernommen.

Viele Grüße
Carsten

[Orlando]

Hallo Carsten,

Wenn ich anfange gluckzuscheissern, dann liest sich das anders ... ;-)

Das Gluckscheißen beginnt mit dem Zieleinlauf.

Grüße
 Roland

[Christoph Schnauß]

hm,

Das Gluckscheißen beginnt mit dem Zieleinlauf.

Ich dachte, es wäre eine Wurfsportart, sowas wie Hammerwerfen oder so ...

Grüße aus Berlin

Christoph S.

[Der Martin]

Hallo Christoph,

Das Gluckscheißen beginnt mit dem Zieleinlauf.
Ich dachte, es wäre eine Wurfsportart, sowas wie Hammerwerfen oder so ...

nein, hier war nicht das Sch_m_eißen gemeint!

*scnr*
 Martin

[Christoph Schnauß]

hallo Martin,

nein, hier war nicht das Sch_m_eißen gemeint!

Achso. Hm. Schade. Ich habe schon einen Statutenentwurf für ein Komitee geschrieben, das Hühnerweitwurf zur olympischen Sportart macen will.

Grüße aus Berlin

Christoph S.

[Gunnar Bittersmann]

Hello out there!

Ich habe schon einen Statutenentwurf für ein Komitee geschrieben, das Hühnerweitwurf zur olympischen Sportart macen will.

Die armen Viecher. Hühner sind zwar die so ziemlich hässlichsten Vögel, aber dafür auch die praktischsten: Deren Eier passen genau in den Eierbecher.

Dann doch lieber Flugratten werfen. http://forum.de.selfhtml.org/archiv/2003/6/t48964/#m267339

See ya up the road,
Gunnar