Semantik - logische Textauszeichnung

Semantische (logische, ihrer Bedeutung entsprechende) Textauszeichnung ist bei der Erstellung von Webseiten sehr wichtig. Barrierefreies Webdesign ist beispielsweise ohne Semantik kaum denkbar. Im html-Standard wurden deshalb Tags mit bestimmter Bedeutung festgelegt. Mit h1-h6 werden beispielsweise Überschriften definiert. Em hebt wichtige und strong sehr wichtige Passagen innerhalb von Fließtext hervor.

Html-Tags entsprechend ihrer Wortbedeutung verwenden

Texte könnten alternativ per css formatiert und für den menschlichen Betrachter beispielsweise durch fette Hervorhebungen strukturiert sein. Am Monitor könnte so die gleiche Darstellung wie durch semantische Textauszeichnung erreicht werden. Abgesehen davon, dass so umständlich Formatierungen in Css-Klassen geschrieben werden müssen, die eigentlich in Html schon vorhanden sind und der Quellcode unnötig anschwillt, sieht für Suchmaschinen und Reader die Überschrift dann wie normaler Fließtext aus und wird auch so behandelt. Css regelt in diesem Fall nur das Aussehen des Textes. Semantik heißt, die einzelnen Textelemente ihrer Bedeutung entsprechend zu kennzeichnen und für Maschinen (Computerprogramme wie Spider) auswertbar und in Datenbanken sortierbar zu machen.

Es ist also durchaus sinnvoll Html Tags entsprechend ihrer Bedeutung (Semantik) zu verwenden, da sie schon eine gewisse, dem Zweck entsprechende Grundformatierung enthalten. Das heißt nicht, dass beispielsweise eine Überschrift in h1 in ihrer Grundformatierung in die Website integriert werden muß. Per Css sollten zusätzliche Formatierungen vorgenommen werden, um sie an das Layout der weiteren Elemente der Website anzupassen.

H-Tags sind größenmäßig abgestuft und besitzen standardmäßig oben und unten eine Leerzeile. Je nach der Wichtigkeit sollten Sie die h1-h6-Tags einsetzen. H1 als Überschrift erster Ordnung sollte als Hauptüberschrift verwendet werden, genauso wie Sie sie in einem Buch oder Worddokument einsetzen würden. Den Unterthemen sollten Sie dann ihrer Hierarchie entsprechend die weiteren Überschriften zuordnen. H5 und h6 werden dabei sicherlich nicht so häufig zum Einsatz kommen. Bei der Css-Formatierung der Überschriften sollten Sie darauf achten, dass optisch die hierarchische Ordnung weiterhin erkenntlich ist.

Eingeschlossen in p-Tags können Sie den Fließtext in zusammengehörige Absätze untergliedern, ebenso wie Sie es wieder in einem für den Druck bestimmten Medium tun würden. Standardmäßig wird hier, der besseren Lesbarkeit am Bildschirm wegen, am oberen und unteren Ende des Absatzes eine Leerzeile eingefügt. Folgt ein neuer Absatz enstehen zwischen den Absätzen aber nicht, wie zu vermuten wäre, zwei Leerzeilen, sondern der Abstand wird auf eine Leerzeile reduziert. Im Css-Stylesheet können Sie Klassen definieren und so einzelnen Absätzen verschiedene Formatierungen zuweisen, sodass sie sich wenn notwendig zusätzlich voneinander abheben können. Diese Formatierungen, zusammengefasst zu einer Klasse, fügen sie wie folgt in den einleitenden p-Tag ein:

Häufig findet man im Quelltext von Webseiten auch mehrfach hintereinander eingefügte br-Tags um so Absätze deutlich zu machen. Dies zeugt nicht unbedingt von Professionalität und sauberem, schlanken Quellcode.

Text-Hervorhebungen wichtiger Inhalte

Wichtige Textpassagen können in <em> </em> oder <strong> </strong> direkt im Fließtext eingebettet werden. Wobei strong einen noch wichtigeren Bereich kennzeichnet als em. Browser, die diese Hervorhebungen darstellen können, stellen em meist kursiv dar und strong fett. Per Css können Sie diese Darstellung, ebenso wie bereits bei den Überschriften beschrieben, an das Layout Ihrer Website anpassen und so möglicherweise auch eine Hervorhebung in Browsern erzeugen, welche em und strong nicht verstehen.
Auch wenn das semantic web noch Zukunftsmusik ist sollte sich jeder Webdesigner schon jetzt damit befassen. Es lohnt sich, um für die Zukunft gut gerüstet zu sein.