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](https://wiki.selfhtml.org/wiki/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](https://wiki.selfhtml.org/wiki/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!* ~~~ CSS 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](https://wiki.selfhtml.org/wiki/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](https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content). Gibt es auch im Wiki: * [HTML/Tutorials/Kategorien](https://wiki.selfhtml.org/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 -- Die Signatur findet sich auf der Rückseite des Beitrags.

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](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Element,_Tag_und_Attribut) HTML zeichnet Inhalt nach der Bedeutung aus; das sind die **Elemente**. ***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](https://wiki.selfhtml.org/wiki/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!* ~~~ CSS 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](https://wiki.selfhtml.org/wiki/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](https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content). Gibt es auch im Wiki: * [HTML/Tutorials/Kategorien](https://wiki.selfhtml.org/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 -- Die Signatur findet sich auf der Rückseite des Beitrags.

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](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Element,_Tag_und_Attribut) HTML zeichnet Inhalt nach der Bedeutung aus; das sind die **Elemente**. ***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](https://wiki.selfhtml.org/wiki/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!* ~~~ CSS 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](https://wiki.selfhtml.org/wiki/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](https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content). Gibt es auch im Wiki: * [HTML/Tutorials/Kategorien](https://wiki.selfhtml.org/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 -- Die Signatur findet sich auf der Rückseite des Beitrags.