Homepapa-Logo Home Einleitung Grundlagen Elemente und Attribute HTML-Dokumente strukturelles Markup Headings White Space Absatz oder Paragraph Style Sheets Block und Inline Elemente weitere Elemente generische Strukturen Attribute Anwendung (1) Anwendung (2) Site Management Hyperlinks Bilder und Grafiken ohne Fehl und Tadel Spezialfälle Tabellen Formulare Schlussbemerkungen
Schlagwortregister
Übungs-Übersicht
Übungs-Dateien

HTML und XHTML

strukturelles Markup

weitere Elemente

Überschriften und Absätze kennen wir bereits, aber es gibt noch ein paar weitere Textarten, die uns schon aufgefallen sind.

Übung 7

Überleg dir mal, aus welchen Gründen Text in Büchern, Artikeln und anderswo

dargestellt werden könnte.

Alle drei können zur Hervorhebung bestimmter Passagen herbeigezogen werden. Unterstrichen werden vielleicht auch Buchtitel, die irgendwo referenziert werden, kursive Schrift könnte für Zitate oder Fremdwörter beigezogen werden. Allerdings: Verbindliche Regeln gibt's nicht und sogar der übliche Gebrauch ist international verschieden.

Aber natürlich basieren solche Darstellungen nicht auf dem Zufall. Sie sind vom Autor gewählt worden, um einen bestimmten inhaltlichen Aspekt optisch auszudrücken. HTML erlaubt es uns nun, diesen Aspekt ausdrücklich festzuhalten, und nicht nur über eine vage visuelle Konvention.

So können wir zum Beispiel einen Text, der besonderen Nachdruck verdient, mit <em> (für Emphasis) oder gar mit <strong> (für strong emphasis) bezeichnen, und das wird dann im Browser für eine entsprechende Hervorhebung sorgen.

Bei Zitaten steht uns das Element <cite> zur Verfügung, dessen Inhalt der Titel des zitierten Werkes ist, oder <q> für kurze und <blockquote> für längere zitierte Textpassagen, wobei letzteres offensichtlich ein Block-Element ist.

Du siehst bereits, dass die Auszeichnung eines HTML-Dokumentes keine rein technische Aktivität ist: Du musst dich anhand des Inhaltes entscheiden, welche Elemente zum Zuge kommen sollen.

Kehren wir nun also zu unserer Seite index.html zurück, an der wir bis jetzt gearbeitet haben, und zeichnen wir die Elemente, über die wir soeben gesprochen haben, aus.

Übung 8

Suche im Dokument index.html nach Zitaten, Hervorhebungen und so weiter, und versieh sie mit den entsprechenden Markierungen. Du solltest
<em>
<strong>
<cite>
<q>
<blockquote>
alle mindestens einmal verwenden können. Die Style Sheets sind auf die Lösung dieser Übung schon vorbereitet und enthalten Anweisungen zur Darstellung all dieser Elemente.

Übrigens: All diese Elemente kann man einfach um den entsprechenden Text anordnen. <blockquote> hat aber noch eine Besonderheit: Trotzdem es selber ein Block-Element ist, sollte es nicht für sich selber stehen, sondern immer mindestens ein <p>-Element enthalten. Es dürfen auch mehrere sein. In unserem Fall wirst du das <blockquote>-Element um zwei <p>-Elemente herum gruppieren müssen, aber auch wenns nur ein einziges wäre, wäre die Lösung einfach: Lass das <p>-Element stehen und leg das <blockquote>-Element einfach darum herum.

Natürlich kann es unterschiedliche Auffassungen geben, wenn's um <em> und <strong> geht, aber letztlich solltest du ja in der Lage sein, den Inhalt zu interpretieren.

Hier ist meine Lösung:

zum Vergleich

Du kannst, wenn du unerklärliche Differenzen entdeckst, ja immer noch einen Blick in den HTML-Code werfen.

Ein Nachtrag zum <cite>-Element: Es ist ein Inline-Element. Da Inline-Elemente nicht unbeaufsichtigt rumstehen dürfen, sondern in einem Block-Element stehen müssen, haben wir den Absatz (Paragraph) als Behälter um das <cite>-Element stehen lassen.

Nimm dir die nötige Zeit, zu überprüfen, ob deine Lösung stimmt. Achte wie immer darauf, dass alle Elemente korrekt abgeschlossen sind und einander nicht überlappen. Manchmal ist eine solche Überprüfung lästig, aber sie ist wichtig, und wir werden später eine einfachere Möglichkeit kennen lernen, sie vorzunehmen und Syntax-Fehlern im HTML-Code auf die Spur zu kommen.

Homepapa
März 2004
Vorheriger Abschnitt:
Block und Inline Elemente
Nächster Abschnitt:
generische Strukturen