Meine ersten Tags

Die Tags, die Ihr innerhalb des Bodys verwenden könnt, lassen sich in zwei Gruppen aufteilen. Diese beiden Gruppen unterscheiden sich danach, wie der Browser sie auf die Seite verteilt

Blockelemente

Blockelemente werden vom Browser untereinander angeordnet. Dazu zählen beispielsweise Absätze oder Listen.

Inline-Elemente

Inline-Elemente ordnet der Browser nebeneinander in einer Zeile an, solange genügend Platz ist. Anschließend macht er in der nächsten Zeile nach demselben Prinzip weiter. Inline-Elemente sind bespielsweise Grafiken oder Links.

Zu den Blockelementen gehören die Überschrifts-Tags. Sie heißen h1 ('headline') bis h6. Dabei ist h1 die größte und h6 die kleinste. Üblicherweise stellt der Browser h5 und h6 kleiner als den umgebenden Fließtext dar. Wie das ganze aussieht, zeigt folgender Codeausschnitt (aus dem Body eines HTML-Dokuments)

<h1>Die Überschrift</h1>

<h3>Erstes Kapitel</h3>

<p>Der Fließtext in einem Absatz</p>

<h3>Zweites Kapitel</h3>

<p>Noch mehr Fließtext in einem weiteren Absatz</p>

In diesem Beispiel seht Ihr auch bereits einen weiteren wichtigen Tag, den p-Tag ('paragraph'). Er erzeugt einen Absatz aus dem enthaltenen Text. Innerhalb eines solchen Absatzes wird (wie Ihr es wohl aus Textverarbeitungen gewohnt seid) automatisch am Zeilenende umgebrochen. Ihr könnt dem Browser aber auch angeben, daß er an einer bestimmten Stelle umbrechen oder auch auf keinen Fall umbrechen soll. Für ersteres gibt es das br-Tag ('break')

<p>In HTML könnt Ihr Zeilenumbrüche<br>
erzwingen</p>

Dabei wird der Zeilenumbruch durch das br-Tag und nicht durch den Zeilenumbruch im Code erzeugt. Ihr könntet also genauso schreiben

<p>In HTML könnt Ihr Zeilenumbrüche<br>erzwingen</p>

Umgekehrt kennt HTML ein geschütztes Leerzeichen. Als (Sonder-)Zeichen ist es eine HTML-Entity namens   (non breakable space). Oft findet Ihr auch die numerische Version  . An einem geschützten Leerzeichen wird nicht umgebrochen

Ich will keinen Umbruch zwischen '2' und 'Euro' im Text '2 Euro'

Mehrere Blockelemente könnt Ihr in einem div-Tag zusammenfassen. Ein div-Tag alleine wird vom Browser nicht weiter angezeigt, aber Ihr könnt damit mehrere Blockelemente gemeinsam formatieren (siehe dazu das nächste große Kapitel über CSS)

<div>

  <p>Ein Absatz</p>
  <p>Noch ein Absatz</p>
  <h5>Eine Notitz am Textende</h5>
</div>

Alle bisher erwähnten Blocktags (h1...h6, p, div) kennen ein align-Attribut, mit dem Ihr die Ausrichtung des Texts in diesem Element bestimmen könnt. Mögliche Werte für das align-Attribut sind 'left', 'right', 'center' oder 'justify' (Blocksatz). Das align-Attribut eines div-Tags wirkt auf alle Blockelemente in ihm.

Auch an dieser Stelle eine kurze Anmerkung: Die Möglichkeiten zur «reinen» HTML-Formatierung werde ich nur kurz streifen, da solche Aufgaben mit CSS erledigt werden sollten. Mit den Cascading Style Sheets werden wir uns noch ausführlich befassen.

Eine andere Gruppe von Tags habt Ihr bereits in Aktion gesehen: Listen. Es gibt nummerierte Listen (ol, 'ordered list'), nicht nummerierte Listen (ul, 'unordered list') und Definitionslisten (dl , 'definition list'). Innerhalb eines ol- oder ul-Tags werden die einzelnen Listenpunkte in li-Tags gefaßt. Ihr könnt auch «Sublisten» definieren

<ol>
 <li>Der erste Punkt</li>
 <li>Der zweite Punkt</li>
 <ul>
   <li>Der erste Unterpunkt</li>

   <li>Der zweite Unterpunkt</li>
 </ul>
</ol>

Innerhalb einer Definitionsliste stehen ein oder mehrere Paar von dt- und dd-Tags. Der dt-Tag enthält den zu definierenden Begriff, der dd-Tag die Definition

<dl>

  <dt>Der erste Begriff</dt>
  <dd>Die Definition des ersten Begriffs</dd>

  <dt>Der zweite Begriff</dt>

  <dd>Die Definition des zweiten Begriffs</dd>

</dl>

Auch Definitionslisten könnt Ihr verschachteln, wie oben bei ol und ul gezeigt. Für alle drei Listenformen gibt es Attribute zum Formatieren, aber auch hier gilt der Verweis auf CSS. Insbesondere Definitionslisten werden in den meisten Browsern in der «Standardversion» nicht gerade ansprechend dargestellt, so daß Ihr mit einem Stylesheet nachhelfen müßt.