Semantik - logische Textauszeichnung im Webdesign

Semantische (logische, ihrer Bedeutung entsprechende) Textauszeichnungen an den richtigen Stellen im Quelltext einzusetzen ist bei der Erstellung von Webseiten sehr wichtig um die Maschinenauswertbarkeit zu opimieren. Im HTML-Standard wurden deshalb Elemente mit bestimmter Bedeutung festgelegt. Mit <h1> - <h6> werden demnach Überschriften definiert. <Em> hebt wichtige und <strong> sehr wichtige Passagen innerhalb von Fließtext hervor. Barrierefreies Webdesign ist ein gutes Beispiel für den sinnvollen Einsatz logischer statt physischer Auszeichnungen. Wenn eine Überschrift in <h>-Tags eingebettet wurde, können Screenreader dem blinden oder sehbehinderten Besucher mitteilen, dass nun ein neues Thema beginnt oder hervorgehobener, wichtiger Text im Fließtext erscheint wenn er mit <strong> ausgezeichnet wurde. Diese semantischen Textauszeichnungen sollten deshalb auf keinen Fall zweckentfremdet, zur bloßen Gestaltung von Layouts verwendet werden. Dafür stehen physische Elemente oder CSS-Klassen zur Verfügung.

Html-Tags entsprechend ihrer Wortbedeutung verwenden

Html in Verbindung mit CSS kann auf verschiedenen Wegen das gleiche Erscheinungsbild erzeugen. Es kommt jedoch darauf an semantisch richtig auszuzeichnen. Verwenden Sie für die Darstellung von Überschriften auf alle Fälle die <h>-Tags in ihrer hierarchischen Anordnung und ziehen sie bei der Hervorhebung wichtiger Textpassagen den logischen <strong>-Tag den physischen <b> oder <i>-Tags vor.

Folgendes sollten Sie nicht tun:

Überschriften könnten alternativ per CSS-Klasse im div-Container formatiert werden so dass sie für den menschlichen Betrachter im Browser genau so aussehen als wären sie semantisch richtig in <h>-Tags eingebettet. Abgesehen davon, dass auf diese Art 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 optische Aussehen des Textes.

Semantik heißt, die einzelnen Textelemente ihrer Bedeutung entsprechend zu kennzeichnen und für Maschinen auswertbar und in Datenbanken sortierbar zu machen. Bestes Beispiel dafür sind Computerprogramme wie Spider von Suchmaschinen, die semantische Textauszeichnungen bevorzugt auslesen und in der Sortierung in ihren Datenbanken besonders berücksichtigen.

Folgendes sollten Sie tun:

Es ist also durchaus sinnvoll Html Tags entsprechend ihrer Bedeutung (Semantik) zu verwenden, schon deshalb, weil sie zusätzlich zu den Vorzügen der Maschinenauswertbarkeit, eine gewisse, dem Zweck entsprechende Grundformatierung enthalten, einen schlanken, übersichtlichen Quellcode erzeugen und deshalb sehr bequem in der Anwendung sind. Das heißt nicht, dass beispielsweise eine sehr große Überschrift in <h1> in ihrer Grundformatierung in die Website integriert werden muß. Formatierungen per CSS sollten zusätzliche vorgenommen werden, um sie an das Layout der weiteren Elemente der Website anzupassen.

Überschriften von <h1> - <h6>

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 um den Besucher nicht zu täuschen oder falsche Prioritäten zu setzen und die Übersichtlichkeit der Seiten zu gewährleisten.

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, geben <em> meist kursiv aus 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.

Wann Sind logische Elemente fehl am Platz?

Sehr genau muss unterschieden werden ob eine Textpassage wirklich wichtig ist und in strong-Tags gesetzt werden muss oder ob sie nur optisch hervorgehoben werden soll um das Layout aufzuwerten. Zu rein gestalterischen Zwecken des Layouts sollten <b> oder <i>-Tags statt <strong> eingesetzt werden, die ebenfalls über Klassen in CSS weiter formatiert werden können.

Oft werden <h>-Tags mißbraucht, da sie bequem in der Anwendung sind und sofort fetten, großen Text mit größerem Abstand zu oberen und unteren Elementen erzeugen. In solch einem Fall hat sich der Webdesigner keine Gedanken über hierarchische Strukturen auf seinen Webseiten gemacht. Er war scheinbar nur bestrebt ein Layout schnell, ohne weiter darüber nachzudenken, umzusetzen oder es war einfach fehlendes Wissen seinerseits. Maschinell sind solche Seiten schlecht oder gar nicht auswertbar. Es kann dadurch zu falschen Listungen kommen. Manchmal werden diese Praktiken eingesetzt um Suchmaschinen zu täuschen, was aber heute, wenn es erkannt wird, mit einer Abwertung und schlechteren Auffindbarkeit der Seiten über die Suchmaschinen geahndet wird.

Auch wenn das semantic web noch nicht konsequent umgesetzt wird, sollte sich jeder Webdesigner intensiv damit befassen und seine Webdesigns so gut wie möglich im semantischen Sinne umsetzen. Es lohnt sich, um für die Zukunft gut gerüstet zu sein.

Absätze mit <p>-Tags erzeugen

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 bei Verwendung der <p>-Tags, 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:

<p class="klassenname">

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