HTML - Grundlagen - Elementtypen

1. Ein Hinweis vorab

Was ich euch jetzt zu erklären versuche, kommt eigentlich erst beim Thema CSS wirklich zur Geltung. Ich packe es aber trotzdem hier hin, da es sich um ein grundlegendes Konzept von HTML handelt.

2. Unterschiede

Grundsätzlich werden in HTML zwei Arten von Tags unterschieden, die so genannten Block- und Inline-Elemente.

3. Block-Elemente

Block-Elemente zeichnen sich einfach ausgedrückt durch folgende Eigenschaften aus (wobei sehr oft die eine natürlich die andere bedingt):

• sie nehmen die gesamte zur Verfügung stehende Breite (zum Beispiel des Browserfensters) ein
• an ihrem Ende wird zwingend ein Zeilenumbruch gesetzt
• vorherige oder nachfolgende Elemente stehen oberhalb bzw. unterhalb dieses Elements
• der vertikale Abstand zu anderen Elementen ergibt sich aus der Art des Elements
• sie können Text, Inline- und weitere Block-Elemente enthalten

4. Inline-Elemente

Inline-Elemente dagegen bewegen sich solange im Textfluss, bis die Breite des übergeordneten Block-Elements für die Darstellung des Inhaltes nicht mehr ausreicht. Erst dann erfolgt ein "weicher" Zeilenumbruch, der sich fließend anpasst. Inline-Elemente können Text und weitere Inline-Elemente enthalten, aber keine Block-Elemente!

5. Übersicht

Ohne euch jetzt schon die einzelnen HTML-Tags um die Ohren hauen zu wollen, folgt eine kurze Übersicht, welche Elemente zu welchem Typ gehören:

Blockelemente

• Tabellen (wenn auch nur sehr eingeschränkt, da sie ohne Zusatzanweisung nicht die komplette Breite einnehmen)
• Listen (sowohl als Ganzes als auch die einzelnen Aufzählungen)
• Formulare (als Ganzes)
• Absätze
• Überschriften
• Blockzitate
• das spezielle <div>-Tag

Inline-Elemente

• stinknormaler Text
• (fast) alle Elemente eines Formulars
• Bilder
• Links
• Image-Maps
• sog. metasyntaktische Auszeichnungen
• das spezielle <span>-Tag

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt