Block-Elemente in HTML

Jetzt sind wir schon ganz schön weit gekommen - eine gute Gelegen­heit noch ein bisschen HTML- Grund­lagen­wissen ein­zustreu­en.

Im HTML- Sprachgebrauch unter­scheidet man zwischen Block- Elementen und Inline- Elementen. Bisher haben wir uns nur mit den Block- Elementen beschäf­tigt, aber den Inline- Elementen werden wir uns auch noch widmen.

Aber jetzt erst mal eine Liste der Block-Elemente und wofür man sie einsetzt:
Die Liste ist alphabetisch sortiert.

<address>

Definiert Bereich für Kontakt­angabe zum Autor eines Inhalts

<article>

Kennzeichnung von relevanten Doku­menten­inhalten (nur in HTML 5)

<aside>

Kennzeichnung nebensächlicher Informa­tionen zu einem Dokumen­ten­inhalt (nur in HTML 5)

<audio>

Integriert Audio- Medieninhalte (nur in HTML 5)

<blockquote>

Kennzeichnet ein Zitat in Form eines eigenen Text­absatzes

<canvas>

Fügt ein Canvas ein - das canvas- Element erzeugt eine Zeichen­ober­fläche (nur in HTML 5)

<del>

Hiermit ausgezeichnete Bereiche werden als gelöschter Inhalt angezeigt (Änderungs­markierung)

<div>

Erzeugt einen allgemeinen Bereich

<dl>

Erzeugt eine Definitionsliste mit dt- und dd- Elementen

<fieldset>

Kennzeichnet eine Gruppe von Elementen in einem Formular

<figcaption>

Fußzeile von gruppierten Medien­inhalten (nur in HTML 5)

<figure>

Kennzeichnet eine Gruppe von Medien­inhalten (nur in HTML 5)

<footer>

Definiert die Fußzeile eines Doku­menten­inhaltes (nur in HTML 5)

<form>

Erzeugt ein Formular, Dialog

<h1> - <h6>

Überschrift 1.-6. Ordnung

<header>

Definiert den Kopfbereich eines Dokument­en­inhaltes (nur in HTML 5)

<hr>

Erzeugt eine horizontale Trennlinie

<ins>

Kennzeichnet eingefügten Inhalt

<li>

Listenpunkt in einer ul-, ol- oder menu- Liste

<menu>

Erzeugt eine Menüliste

<noscript>

Erzeugt einen Bereich für Inhalte, die angezeigt werden, wenn JavaScript im Browser de­akti­viert oder nicht verfüg­bar ist

<ol>

Erzeugt eine sortierte Liste (zu meist nummeriert)

<output>

Spezifiziert einen Ausgabebereich für dynamische Berechnungen (nur in HTML 5)

<p>

Textabsatz

<pre>

Fügt einen Bereich für Präformatierter Text ein (alle Whitespace- Zeichen werden im Browser so dar­gestellt wie im Text enthalten)

<section>

Unterteilt einen article in unterschiedliche Sektionen (nur in HTML 5)

<table>

Fügt eine Tabelle ein

<td>

Fügt eine Tabellenzelle ein

<tfoot>

Fügt den Fußbereich einer Tabellen ein

<th>

Fügt den Tabellenkopfzelle ein

<tr>

Fügt den Tabellenzeile ein

<track>

Einbindung von Beschriftungstext für Medien-Elemente (nur in HTML 5)

<ul>

Fügt eine unsortierte Liste ein (Aufzählungs­liste)

<video>

Integriert audiovisuelle Medien­inhalte (nur in HTML 5)

Ganz schön viele - nee? Und ich bin mir noch nicht mal sicher, ob ich sie hier alle auf­ge­listet habe. Aber keine Sorge - auswendig lernen muss man das nicht, man muss nur im Zweifels­fall wissen, wo man nach­schauen kann. Da gibt es im Netz ganz viele Quellen, wo dies­bezüg­liche Informationen zur Verfügung gestellt werden. Eine der wichtigsten und umfassen­dsten Bezugs­quellen für alles rund um HTML und CSS ist SelfHTML - sehr zu empfehlen! In der Liste oben kannst du auch auf die einzelnen Elemente klicken und kommst dann auf die ent­sprech­enden Er­läuter­ungen bei SelfHTML.

Block- Elemente bringen in der Regel einige Eigen­schaften mit, die sie auf ihre Inhalts­elemete anwenden. Mit CSS und/ oder Tag- Ergänzungen kann man jedoch diese mit­gebrachten Eigen­schaften nach den eigenen Bedürf­nissen anpassen. Einige der oben auf­ge­listeten Elemente, vor allem die, die erst mit HTML 5 eingeführt wurden, dienen mehr der Struktur­ierung des HTML- Dokumentes - ändern also weinig bis gar nichts an der Formatierung, sondern sorgen dafür, dass Such­maschinen den Inhalt besser ana­lysie­ren können und dass die Barriere­freiheit des Dokumentes gefördert wird.
Einige Eigenschaften von Block- Elementen treffen aber auf fast alle zu (keine Regel ohne Ausnahme). Sie werden als 'Block' in das Dokument eingefügt, starten also in einer neuen Zeile, erzeugen an ihrem Ende einen Zeilen­umbruch und schaffen sich nach oben und unten einen mehr oder weniger großen 'Freiraum'. Außerdem gelten bestimmte Ver­schachtel­ungs­regeln, die jedoch von Element zu Element ab­weich­end sein können. Block- Elemente können beliebige Inline- Elemente enthalten und in manchen Block- Elemente können andere Block- Elemente verwendet werden - in anderen aber nicht. Details zu diesen Regeln der einzelnen Elemente findest du auch wieder bei SelfHTML.

Hier mal ein paar Beispiele:

Zu sehen ist, dass <blockquote> den zitierten Text als Block zentriert, um ihn 'anders' aussehen zu lassen, als den restlichen Text. Das kann man mit CSS noch etwas aufhübschen! Achte im nächsten Beispiel auf den öffnenden <blockquote> Tag.

Was habe ich da gemacht? Einfach mit der style=" " Tag- Ergänzung dem <blockquote> gesagt, er möge bitte

• der Hintergrundfarbe (background-color) eine Farbwert #eeeeee (helles grau) zuweisen,
• der Schriftfarbe (color) eine Farbwert #0000ff (blau) zuweisen,
• um das ganze Zitat einen Rahmen (border) malen, der 1 Pixel (1px) breit, durch­gehend (solid) und schwarz (#000000) ist,
• ja... und dann sollen die Ecken des Rahmens abgerundet sein mit einem Radius von 5 Pixeln - border-radius: 5px;

Ich habe schon mehrfach 'Ver­schachtel­ungs­regeln' erwähnt. Hier ein gutes Beispiel dafür - schau mal den obigen Code an und merke... bevor der <blockquote> anfängt, habe ich das vorhergehende Block- Element (<p>) durch den Ende- Tag </p> geschlossen und nach dem </blockquote> ein neues <p>...</p> angefangen. Der Grund dafür ist einfach. Beides, <blockquote> und <p>, sind Block- Elemente und gemäß HTML- Spezifi­kation darf <blockquote> nicht innerhalb von <p> verwendet werden!

Gleich noch ein Beispiel - die Kenn­zeichnung von gelöschten und hinzu­gefügten Inhalten mit <del> und <ins>

Gut zu erkennen, ein mit <ins> gekenn­zeichnet­er Inhalt wird unter­strichen dargestellt, ein mit <del> markierter Bereich wird durch­ge­strichen.
Diese beiden Tags <ins> und <del> haben eine Besonder­heit an sich. Sie können sowohl als Block- Element, wie auch als Inline- Element verwendet werden. Inline- Elemente werden aber noch in den nächsten Abschnitten näher betrachtet.

Nach meiner Meinung das wichtigste und vielseitigste Block- Element ist aller­dings das unschein­bare <div>!
Es ist so eine Art Container, in den ich beliebige Block- und Inline- Elemente hinein­packen kann - ich kann es beliebig formatieren und positionieren - das gesamte Layout dieser Seite hier beruht irgendwie auf <div>'s. Also wenn du dir von den Block- Elementen irgendwas merken solltest, dann ist es dieses <div>!

Hier mal ein kleines Beispiel.

Was du da siehst, sind 2 <div>'s, die in einem 'größeren' <div> ein­gebettet sind! Jedes dieser <div>'s ist mit CSS - mittels dieser schon bekannten Tag- Ergänzung style="" - formatiert und etwas aufge­hübscht. Zwischen den einzelnen <div style=""></div>- Tags könnten auch noch beliebige andere Inhalte eingefügt werden.
Versuche doch mal, ob du an dem Code da oben erkennst, wie das gemacht wurde?

Viele von den neuen HTML 5 Tags, mit denen unter­schied­lichen Bereichen eine Bezeichnung gegeben wird (z.B. <article>, <aside>, <footer>, <header>....) funktionieren übrigends genau so wie ein <div>, sie haben nur einem anderen Namen.

Ein paar von den anderen Block- Elementen haben wir ja schon in den vorherigen Abschnitten vorgestellt - und die Restlichen kannst du bei Bedarf selber ausprobieren.

Noch eine Bemerkung zu der Größe von Block- Elemente.
Die Größe wird vom Inhalt bestimmt und das Element dehnt sich so weit aus, wie es eben kann - es wächst zunächst in die Breite, bis es eben am Bild­schirm­rand angekommen ist und dann dehnt es sich nach unten aus, so weit, wie eben Inhalt da ist. Wächst es über den Bild­schirm­rand unten hinaus, erscheint rechts der Scoll­balken. Normaler­weise ist es das <body>- Element, dass als erstes 'überläuft', dann scrolled der gesamte Bildschirm und alle im <body> </body> ent­haltenen Elemente mit.
Wir können mit den CSS- Anweisungen width und/ oder height jedoch auch die Größe eines Elements festlegen, wir sind dann aber auch selber dafür verantwortlich, was mit den Inhalten passiert.
Zum Einen können wir natürlich dafür sorgen, dass nur so viel Inhalt eingefügt wird, wie Platz vorhanden ist. Oder wir müssen dem Element mitteilen, wie mit dem Inhalt umzugehen ist. Die CSS- Anweisung dafür ist 'overflow'.
Folgende Anweisungen sind zulässig:

overflow: hidden;

Die Inhalte, die nicht in das Element passen werden nicht angezeigt.

overflow: visible;

Die Inhalte, die nicht in das Element passen werden angezeigt und ragen dann ggf über die Element­grenzen hinaus.

overflow: auto;

Im Bedarfsfall werden Scroll­balken angezeigt, die ein Scrollen des Inhaltes ermöglichen. Das Element bleibt in der vor­gege­benen Größe und es ragen keine Inhalte über die Element­grenzen hinaus.

overflow: scroll;

Unabhängig vom tatsächlich vorhandenen Inhalt werden Scroll­balken angezeigt, die im Bedarfsfall ein Scrollen des Inhaltes ermöglichen. Das Element bleibt in der vor­gege­benen Größe und es ragen keine Inhalte über die Element­grenzen hinaus.

Diese CSS- Formatierung 'overflow' gibt es auch in den Varianten:
overflow-x: Anweisung;
overflow-y: Anweisung;
je nachdem, welche overflow- Richtung man beeinflussen möchte.

Hier geht es weiter!