HTML Block- und Inline-Elemente
Jedes HTML-Element hat einen Standardanzeigewert, je nachdem, um welche Art von Element es sich handelt.
Es gibt zwei Anzeigewerte: Block und Inline.
Elemente auf Blockebene
Ein Element auf Blockebene beginnt immer in einer neuen Zeile und die Browser fügen vor und nach dem Element automatisch etwas Leerzeichen (einen Rand) ein.
Ein Element auf Blockebene nimmt immer die gesamte verfügbare Breite ein (dehnt sich so weit wie möglich nach links und rechts aus).
Zwei häufig verwendete Blockelemente sind: <p> und <div>.
Das Element <p> definiert einen Absatz in einem HTML-Dokument.
Das Element <div> definiert eine Unterteilung oder einen Abschnitt in einem HTML-Dokument.
Das <p>-Element ist ein Element auf Blockebene.
Hier sind die Elemente auf Blockebene in HTML:
Inline-Elemente
Ein Inline-Element beginnt nicht in einer neuen Zeile.
Ein Inline-Element nimmt nur so viel Breite wie nötig ein.
Dies ist ein <span>-Element innerhalb eines Absatzes.
Hier sind die Inline-Elemente in HTML:
Hinweis: Ein Inline-Element kann kein Block-Level-Element enthalten!
Das <div>-Element
Das Element <div> wird häufig als Container für andere HTML-Elemente verwendet.
Das Element <div> hat keine erforderlichen Attribute, aber style, class und id sind üblich.
Bei Verwendung zusammen mit CSS kann das Element <div> zum Formatieren von Inhaltsblöcken verwendet werden:
Beispiel
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
Try it Yourself »
Das <span>-Element
Das Element <span> ist ein Inline-Container, der zum Markieren eines Teils eines Textes oder eines Teils eines Dokuments verwendet wird.
Das Element <span> hat keine erforderlichen Attribute, aber style, class und id sind üblich.
Bei Verwendung zusammen mit CSS kann das Element <span> verwendet werden, um Teile des Textes zu formatieren:
Beispiel
<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>
Try it Yourself »
Kapitelzusammenfassung
- Es gibt zwei Anzeigewerte: Block und Inline
- Ein Element auf Blockebene beginnt immer in einer neuen Zeile und nimmt die gesamte verfügbare Breite ein
- Ein Inline-Element beginnt nicht in einer neuen Zeile und nimmt nur so viel Breite wie nötig ein
- Das Element
<div>ist ein Element auf Blockebene und wird oft als Container für andere HTML-Elemente verwendet - Das
<span>-Element ist ein Inline-Container, der zum Markieren eines Teils eines Textes oder eines Teils eines Dokuments verwendet wird
HTML-Tags
| Tag | Beschreibung |
|---|---|
| <div> | Definieren Sie einen Abschnitt in einem Dokument (Blockebene) |
| <span> | Definieren Sie einen Abschnitt in einem Dokument (inline) |
Eine vollständige Liste aller verfügbaren HTML-Tags finden Sie in unserer HTML-Tag-Referenz.
