Inline und Block-Elemente

[Mel]

Hi zusammen,

habe vielleicht eine dumme Frage, da ich aber neu im Business bin: disst mich bitte nicht.

Können alle Elemente in Inline und Block-Elemente unterteilt werden?

Ich möchte mir gerade so eine Art Spickzettel machen, mit allen HTML-Tags und wollte diese farblich unterteilen, in Inline- und Block-Elemente. Ist das unnötig?

In Eurem Wiki sind die Angaben in den Tags nicht gesetzt, darum vermute ich, dass es unnötig ist?

VG Melanie

[Gunnar Bittersmann]

@@Mel

habe vielleicht eine dumme Frage, da ich aber neu im Business bin: disst mich bitte nicht.

“You’ve come to the right place.” —David Walliams 😆

Können alle Elemente in Inline und Block-Elemente unterteilt werden?

Einfache Antwort: njein.

Ausführliche Antwort: Die HTML-Spezifaktion kennt da andere Arten von Inhalt.

Und es gibt Elemente, die per User-Agent-Stylesheet für die display-Eigenschaft einen anderen Wert als inline oder block haben: list-item, table, table-row, table-cell u.a.m.

Kwakoni Yiquan

[Matthias Scharwies]

Servus!

@@Mel

Herzlich willkommen!

Ich möchte mir gerade so eine Art Spickzettel machen, mit allen HTML-Tags und wollte diese farblich unterteilen, in Inline- und Block-Elemente. Ist das unnötig?

Zuerst würde ich mir noch mal die Begriffe angucken:

• HTML/Tutorials/Element, Tag und Attribut

HTML zeichnet Inhalt nach der Bedeutung aus; das sind die Elemente - eine Überschrift h1 oder ein li-Listenelement. Tags sind die „Etiketten“, die teilweise optional sind. (Bitte trotzdem immer setzen!)

Können alle Elemente in Inline und Block-Elemente unterteilt werden?

Einfache Antwort: njein.

Seitenstrukturierung:

• p
• h1, h2, h2, ...
• ul, ol, li

und die „Kapitel“ (gibt's nen besseren Begriff?)

• header
• main
• article
• section
• aside
• footer

sind von Haus aus „Blockelemente“, d. h. sie werden auf Bildschirmen 100% breit und wachsen bei mehr Inhalt nach unten.

In einem Absatz oder Listenelement kannst Du

• img
• a
• b

oder

• em tun, diese nehmen nur ihre Breite ein und der Text läuft davor und danach normal weiter, d.h sie sind inline-Elemente.

• HTML/Tutorials/Textauszeichnung

Und jetzt kommt's:

Manchmal kann es notwendig sein, inline-Elemente größer als die ursprüngliche Zeilenhöhe darzustellen.

Ein solcher Anwendungsbereich findet sich in Navigationen, wo die Klickflächen der Links größer und einheitlich formatiert werden sollen. Die Links sind inline-Elemente innerhalb der Blockelemente li. Eine Festlegung von Außen- oder Innenabständen wirkt sich in Schreibrichtung aus, nicht jedoch auf die Zeilenhöhe!

li {
  background: #dfac20;
  display: inline;
  padding: 0;	
  margin: 1em;	
}

a {
  display: inline-block;	
  border: thin solid;
  ...
  padding: .5em;	
  margin: .5em;		
}

Mit CSS machst du das a-Element zum inline-block oder block!

Hauptartikel: CSS/Tutorials/Ausrichtung/display

Und jetzt wird's total verwirrend: Du kannst ein a-Element um mehrere Absätze packen und so wird das inline-Element automatisch zum Block.

Ausführliche Antwort: Die HTML-Spezifaktion kennt da andere Arten von Inhalt.

Gibt es auch im Wiki:

• HTML/Tutorials/Kategorien

Und es gibt Elemente, die per User-Agent-Stylesheet für die display-Eigenschaft einen anderen Wert als inline oder block haben: list-item, table, table-row, table-cell u.a.m.

Herzliche Grüße

Matthias Scharwies

[Mel]

Danke schonmal für Deine/Eure Antworten! Wie es aussieht, sollte ich in der Materie noch etwas baden, bevor mein Spickzettel lebendig wird.

Ich komme bestimmt wieder. 😉

VG Melanie

[Gunnar Bittersmann]

@@Matthias Scharwies

Tags sind die „Etiketten“, die teilweise optional sind.

Für HTML-Tags halte ich den Begriff „Etiketten“ für falsch – auch in Gänsefüßchen.

Für Kategorie-Tags wie hier im Forum passt er. (Mel hat „sonstiges“ gewählt; ich finde „html“ passender und habe meine Antwort dementsprechend getaggt.)

Seitenstrukturierung:

• p
• h1, h2, h2, ...
• ul, ol, li

Hier müssten wir uns verständigen, was mit „Blockelement“ denn genau gemeint sein soll. Wie ich schon schrub, ist li kein display: block-Element.

Für die Bedeutung „erzeugt (auch bei mehrzeiligem Inhalt) irgendeine rechteckige Box“ gilt das j in meinem „njein“.

Wenn’s um die Seitenstrukturierung, muss man verschiedene Blockelemente unterscheiden: solche mit sectioning content und solche ohne.

Und jetzt wird's total verwirrend: Du kannst ein a-Element um mehrere Absätze packen und so wird das inline-Element automatisch zum Block.

Das ist nicht richtig, wovon man sich leicht überzeugen kann.

Kwakoni Yiquan

[Mel]

@@Matthias Scharwies

Tags sind die „Etiketten“, die teilweise optional sind.

Für HTML-Tags halte ich den Begriff „Etiketten“ für falsch – auch in Gänsefüßchen.

Aber, Markup, bedeutet doch auszeichnen, labeln, etikettieren? Demnach ist es doch korrekt?

Für Kategorie-Tags wie hier im Forum passt er. (Mel hat „sonstiges“ gewählt; ich finde „html“ passender und habe meine Antwort dementsprechend getaggt.)

Eigentlich ist Kategorie schon sehr treffend, wird hier in der Erklärung auch so genannt. Meine anfängliche Unterscheidung zwischen Inline- und Block-Elementen ist halt veraltet, und es folgt eine Kategorisierung durch Sinn und Funktion. Wie im letzten Link von Matthias nachzulesen ist.

Seitenstrukturierung:

• p
• h1, h2, h2, ...
• ul, ol, li

Hier müssten wir uns verständigen, was mit „Blockelement“ denn genau gemeint sein soll. Wie ich schon schrub, ist li kein display: block-Element.

Ja, doch. Block-Elemente sind Elemente, die die volle Breite des Screens nutzen und genau das macht ein li-Element. Die Bezeichnung und Aussage, dass es kein "display: block`-Element" ist, halte ich für sehr kritisch und verwirrend, denn letzendlich ist der Schreibstil erstmal eine CSS-Eigenschaft und verwirrt mich ...

Und jetzt wird's total verwirrend: Du kannst ein a-Element um mehrere Absätze packen und so wird das inline-Element automatisch zum Block.

Das ist nicht richtig, wovon man sich leicht überzeugen kann.

Doch, das ist richtig, wenn ich als Anfänger den ganzen Käse richtig verstanden habe, ist das a-Element blanko und nackt ein reines Inline-Element, was bedeutet, es ist nur so groß wie sein Inhalt. Bei der Verschachtelung mit p-Tags, wird es tatsächlich zu einem Block-Element und wird demnach so breit, wie eine ganze Zeile Platz im Bildschirm hat.

Das kannst du prüfen, indem du deinen Code, mit einem a-Element erweiterst und die Untersuchungsfunktion deines Browser nutzt. In deinem Beispiel, ist das a-Element ein Block-Element und geht über die ganze Breite.

VG Melanie, die sich jetzt schon schlauer fühlt, als gestern um 01:00.

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

Tags sind die „Etiketten“, die teilweise optional sind.

Für HTML-Tags halte ich den Begriff „Etiketten“ für falsch – auch in Gänsefüßchen.

Aber, Markup, bedeutet doch auszeichnen, labeln, etikettieren? Demnach ist es doch korrekt?

Für Kategorie-Tags wie hier im Forum passt er. (Mel hat „sonstiges“ gewählt; ich finde „html“ passender und habe meine Antwort dementsprechend getaggt.)

Eigentlich ist Kategorie schon sehr treffend, wird hier in der Erklärung auch so genannt. Meine anfängliche Unterscheidung zwischen Inline- und Block-Elementen ist halt veraltet, und es folgt eine Kategorisierung durch Sinn und Funktion. Wie im letzten Link von Matthias nachzulesen ist.

Seitenstrukturierung:

• p
• h1, h2, h2, ...
• ul, ol, li

Hier müssten wir uns verständigen, was mit „Blockelement“ denn genau gemeint sein soll. Wie ich schon schrub, ist li kein display: block-Element. Ja, doch. Block-Elemente sind Elemente, die die volle Breite des Screens nutzen und genau das macht ein li-Element. Die Bezeichnung und Aussage, dass es kein "display: block`-Element" ist, halte ich für sehr kritisch und verwirrend, denn letzendlich ist der Schreibstil erstmal eine CSS-Eigenschaft und verwirrt mich ...

Und jetzt wird's total verwirrend: Du kannst ein a-Element um mehrere Absätze packen und so wird das inline-Element automatisch zum Block.

Das ist nicht richtig, wovon man sich leicht überzeugen kann.

Doch, das ist richtig, wenn ich als Anfänger den ganzen Käse richtig verstanden habe, ist das a-Element blanko und nackt ein reines Inline-Element, was bedeutet, es ist nur so groß wie sein Inhalt. Bei der Verschachtelung mit p-Tags, wird es tatsächlich zu einem Block-Element und wird demnach so breit, wie eine ganze Zeile Platz im Bildschirm hat.

Das kannst du prüfen, indem du deinen Code, mit einem a-Element erweiterst und die Untersuchungsfunktion deines Browser nutzt. In deinem Beispiel, ist das a-Element ein Block-Element und geht über die ganze Breite.

Jein, das hat Gunnar mit seinem Beispiel ja bewiesen: die outline des a-Elements legt sich um die Zeilen der Absätze und bildet eben keinen Block.

Ich würde es hierbei belassen und feststellen, dass aus diesem Grund die vermeintlich logische Einteilung aufgegeben wurde.

BTW: Diese Einteilung gilt ja nur für Screen, HTML ist eben mehr!

VG Melanie, die sich jetzt schon schlauer fühlt, als gestern um 01:00.

Super!

Herzliche Grüße

Matthias Scharwies