Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Beispielseiten

Inhaltsbereich

4.3 Weitere nützliche HTML-Elemente

Diese kurze HTML-Einführung ist keine komplette Referenz und zeigt nur die wichtigsten Elemente. Zur Abrundung hier noch ein paar nützliche Vertreter: br, address, span, blockquote und cite.

Beginne eine neue Zeile: <br />

Falls Sie an einer bestimmten Stelle im Textfluss einen Zeilenumbruch wünschen, können Sie diesen mit br erzeugen, was für Break steht (»Umbruch«):

<br /> (br – Leerstelle – Schrägstrich)

br ist ein sogenanntes leeres Element, ein Element ohne Inhalt. Ähnlich wie bei img wird der Ende-Tag mit der Zeichenfolge Leerstelle – Schrägstrich am Ende des Tags integriert.

Zeilenumbruch sparsam einsetzen

Sie sollten den Zeilenumbruch br sehr sparsam einsetzen, da der Textfluss auf Webseiten durch eine Vielzahl von Faktoren bestimmt wird und anders als auf Papierseiten vom Autor nicht wirklich kontrolliert werden kann.

address für Kontaktadressen

Wenn Sie auf einer Webseite eine Kontaktadresse darstellen, bietet es sich an, dafür das Element address zu benutzen, denn es ist eines der wenigen HTML-Elemente, bei denen man am Namen zumindest halbwegs sehen kann, was der Inhalt bedeutet. address schreibt man im Englischen mit Doppel-d und Doppel-s.

ToDo: Eine Adresse (mit Zeilenumbruch) erstellen
  1. Öffnen Sie ggf. die Beispielseite index.html.
  2. Ergänzen Sie den folgenden Quelltext im Fußbereich:

    <address>
    Little Boxes &middot; Kästchenweg 12 &middot; 01234 Boxberg
    <br />
    Tel: 01234 567890 &middot; Fax: 01234 567891
    </address>

  3. Speichern Sie die Seite und betrachten Sie sie in einem Browser.

&middot; ergibt übrigens einen kleinen runden Punkt, der in der Mitte der Zeile steht. Die meisten Browser stellen das Element address kursiv dar, aber das können (und werden) Sie per CSS ändern:

Abbildung 4.6: Das Element address wird im Browserfenster kursiv dargestellt
Abbildung 4.6: Das Element address wird im Browserfenster kursiv dargestellt

span ist ein neutrales Inline-Element

Das neutrale Block-Element div zur Gruppierung von anderen Elementen kennen Sie bereits. span (»umspannen«) ist ein neutrales Inline-Element, mit dem Sie bei Bedarf beliebigen Fließtext markieren können, wobei Sie im Browserfenster keinerlei Veränderung sehen werden:

<h1><span>Dieser Text ist von span umgeben</span><h1>

Sie werden span nicht so häufig sehen wie div, aber bei der Gestaltung mit CSS ist es manchmal sinnvoll, bestimmte Textpassagen mit span zu markieren, und deshalb wird es hier kurz erwähnt.

Genau wie div wird auch span häufig zusammen mit den Attributen id und class benutzt.

ToDo: Ein Wort mit span umspannen
  1. Öffnen Sie ggf. die Beispielseite index.html und fügen Sie in den Kopfbereich das Element span ein:

    <p>Webseiten gestalten mit HTML und CSS. <span>Grundlagen</span>.</p>

  2. Speichern Sie die Seite.

Wenn Sie die Seite im Browser betrachten, werden Sie keine Änderung feststellen, aber wer weiß, vielleicht brauchen Sie das span ja später noch (z. B. zur Hervorhebung des Wortes "Grundlagen").

blockquote und cite für Zitate

Wie der Name schon andeutet, ist blockquote ein Block-Element für Zitate. Das Element ist ideal geeignet für längere Zitate. Der Text innerhalb von blockquote sollte zusätzlich von anderen Block-Elementen wie z. B. p umschlossen werden.

Mithilfe des Inline-Elements cite können Sie kurze Zitate im Fließtext markieren oder wie im folgenden Beispiel am Ende eines Block-Zitats eine Quelle angeben:

<p>Der folgende Absatz ist ein Block-Zitat mit Quellenangabe:</p>
<blockquote>
<p>Sie können Zitate von Fremdautoren in einem eigenen, anders formatierten (zumeist eingerückten) Absatz hervorheben.</p>
<p>Es handelt sich dabei jedoch um eine logische, inhaltliche Auszeichnung. Wie diese Absätze genau formatiert werden, bestimmt letztlich der Webbrowser. Die Vorgabe ist jedoch, solche Absätze auffällig und vom übrigen Text unterscheidbar anzuzeigen.
<cite>(Quelle:
<a href="http://de.selfhtml.org/html/text/zitate_adressen.htm">SelfHTML</a>)</cite></p>
</blockquote>

Im Browser sieht das dann so aus:

Abbildung 4.7: Blockquote mit zwei Absätzen und cite
Abbildung 4.7: Blockquote mit zwei Absätzen und cite