Inline- oder Block-Tag?

Man kann HTML-Elemente nach 2 Haupttypen kategorisieren: block oder inline.

Die Kenntnis des Anzeigetyps eines HTML-Elements ist für die Erstellung und Formatierung von Webseiten unerlässlich, da sich Elemente des Typs block und des Typs inline auf der Seite unterschiedlich verhalten und bestimmte CSS-Eigenschaften nicht auf die gleiche Weise angewendet werden.

Die Art der Anzeige kann durch die Eigenschaft display entsprechend unseren CSS-Bedürfnissen geändert werden. Wir werden später auf CSS zurückkommen, aber behalten Sie es in der Kopfzeile ;) !

Inline

Inline-Tags erzeugen keinen Zeilenumbruch und werden normalerweise innerhalb anderer Elemente eingefügt. Inline-Tags werden verwendet, um Text oder kleine Teile des Inhalts zu markieren. Sie nehmen nur den Platz ein, der um den Inhalt, den sie umschließen, benötigt wird.

Hier sind die genauen Merkmale eines Inline-Tags:

  • Ein Element vom Typ inline wird standardmäßig nur die Breite einnehmen, die für die Anzeige seines Inhalts erforderlich ist;
  • Elemente vom Typ inline werden versuchen, sich inline zu platzieren, d. h. neben (auf derselben Zeile) dem Element, das im HTML-Code vor ihnen steht;
  • Ein Element vom Typ inline kann andere Elemente vom Typ inline enthalten, sollte aber keine Elemente vom Typ block enthalten.

Beachten Sie außerdem, dass die Höhe, die Breite und der Abstand eines Elements vom Typ inline nicht standardmäßig geändert werden können, da die Haupteigenschaft dieses Elementtyps darin besteht, nur den Platz zu belegen, der für die Anzeige seines Inhalts erforderlich ist.

<p>
    Ich bin ein <strong>fett gedruckter Text</strong> innerhalb eines Absatzes.
</p>

In diesem Beispiel ist das <p>-Tag ein Block und es enthält das <strong>-Tag, das seinerseits inline ist.

Die gängigsten inline-Tags sind die folgenden:

  • <em>
  • <strong>
  • <span>
  • <a>
  • <input>
  • <textarea>
  • <select>
  • <img>

Block

Tags vom Typ Block hingegen erstellen Elemente, die auf der Seite separate Blöcke bilden. Sie beginnen in der Regel in einer neuen Zeile und nehmen standardmäßig die gesamte verfügbare Breite ein. Block-Tags werden verwendet, um größere Inhaltsabschnitte wie Absätze, Teiler, Listen usw. zu strukturieren.

Elemente vom Typ block werden die folgenden Eigenschaften besitzen:

  • Ein Element vom Typ block wird immer die gesamte verfügbare Breite innerhalb seines Elternelements (oder Containerelements) einnehmen.
  • Ein Element vom Typ block wird immer "zur Linie gehen" (einen Zeilenumbruch vor und nach dem Element erzeugen), d. h. eine neue Zeile auf einer Seite einnehmen und niemals neben einem anderen Element als Standard positioniert werden.
  • Ein Element vom Typ block kann andere Elemente vom Typ block oder vom Typ inline enthalten.
<p>Dies ist ein Absatz, der die gesamte verfügbare Breite einnimmt.</p>
<p>Dieser andere Absatz wird unterhalb des ersten Absatzes positioniert.</p>
<div>Ich bin ein div und damit ein eigener Block.</div>
<ul>
    <li>Listenelement 1</li>
    <li>Listenelement 2</li>
</ul>

Die gängigsten block-Tags sind die folgenden:

  • <body>
  • <div>
  • <section>
  • <article>
  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
  • <p>
  • <ul>, <ol>, <li>
  • <figure>

Zusammenfassend lässt sich sagen, dass HTML-Inline-Tags für kleinere Elemente verwendet werden, die in den Textfluss eingefügt werden, während HTML-Block-Tags für größere Elemente verwendet werden, die separate Blöcke auf der Seite bilden.

Quellen & nützliche Links:

Inhaltsverzeichnis