Seien Sie dabei!

Als Dienstleister im Markt für Internetanwendungen egal ob browserbasiert oder für das mobile Internet ist die edition-software GmbH eine gute Adresse wenn es um zuverlässige Anwendungen mit einem ausgezeichneten Preis-Leistungsverhältnis geht. Überzeugen Sie sich, sprechen Sie uns gerne an.

Ihre edition-software

Semantisches HTML

Ein kleiner Einblick in ein Thema, das Bücher füllt

Tabellen-Layouts sind längst out, das Erstellen von Web-Seiten ist keine Praktikantenaufgabe mehr. Die Ansprüche ans HTML-Markup einer Website sind in den letzten Jahren deutlich gestiegen. Die Schlagworte hier sind Suchmaschinenfreundlichkeit, Semantik und Barrierefreiheit.

Der Grundgedanke für modernes Markup dabei ist: Das HTML-Gerüst soll den Content nicht nur aufnehmen, sondern inhaltlich gliedern und die Bedeutung des Inhalts unterstützen. Doch an dieser Stelle muss beantwortet werden, was ‚Content‘ eigentlich bedeutet. Ich versuche dazu folgende Definition:
Content ist, was in Bezug auf die inhaltliche Ausrichtung einer Website relevante Information transportiert.

Sieht man es so, ist ein Willkommensgruß wie „Willkommen beim Bootshandel-Magazin online“ * kein Content, sondern eher Dekoration, denn die hier transportierte Information ist eher generischer Natur.
Wo ich die Trennung zwischen Content und Dekoration sehe, möchte ich kurz am Beispiel folgender Überschrift verdeutlichen:

Weihnachten in BerlinWeihnachten in Berlin

Das Markup könnte so aussehen:

<div class="someclass">
  <img alt="Alttext" src="/pics/parcel.jpg">
</div>
<div class="otherclass">
  <h1>Weihnachten in Berlin</h1>
</div>
.someclass {
  float: left; 
}
.otherclass {
  margin-left: 140px; /* Breite des Bildchens parcel.jpg */
}

Das Päckchen-Bild ist als Content, also als <img>, ausgeführt und hat damit im Seitenkontext den selben Stellenwert wie die Aufmacherbilder der auf der Seite folgenden Artikel, ohne aber eine relevante Information zu tragen.
Besser:
<h1 class="section-header">Weihnachten in Berlin</h1>
.section-header {
  background: url("src="/pics/parcel.jpg") no-repeat scroll left top transparent;
  display: block;
  padding: 8px 62px 0 111px;
}

Das dekorative Päckchenbild wird aus dem Markup verbannt und per CSS als Hintergrundbild eingebunden. Die Überschrift selbst wird mit Paddings so zurecht gerückt, dass sie das Hintergrundbild nicht beschneidet. Die Eigenschaft display: block ist notwendig, um der Überschrift, die eigentlich ein inline-Element ist, ein Padding auch oben geben zu können, denn inline-Elemente sind für Fließtext gedacht und können deshalb Innenabstände nur zu den Seiten annehmen.
Das Markup ist so deutlich schlanker geworden, und Suchmaschinen beschäftigen sich nur mit Inhalten, die für den Nutzer verwertbare Informationen tragen.
Die Überlegung bei der Umsetzung einer Website in HTML sollte also sein: Was ist mein Content? Und welcher Teil davon trägt die wesentlichen Informationen?

Sinnvoller Gebrauch von Tags

HTML bringt von Hause aus Werkzeuge mit, mit denen Content sinnvoll gegliedert werden kann. Für Absätze gibt es das <p>-Tag, und für etwas anders als Absätze sollte es auch nicht verwendet werden. Statt bei der Ausgabe von Artikel-Teasern, Kleinanzeigen oder der Ergebnisliste einer Kinosuche <div>-Container übereinander zu stapeln, bietet sich eine <ul>-Liste (unordered list) oder je nach Zusammenhang auch eine <ol>-Liste (ordered list) an. Das Repertoire an Listen ist damit noch nicht ausgeschöpft: HTML bietet noch Definitionslisten sowie Menü- und Verzeichnislisten (mehr dazu: http://de.selfhtml.org/html/text/listen.htm).
Tabellen sind, auch wenn man manchmal gegenteiliges hört, nicht schlechtes HTML, sondern bei der tabellarischen Darstellung von Inhalten wie technischen Daten oder Wahlergebnissen das Mittel der Wahl. Was im Text eine höhere Bedeutung hat, aber keine Überschrift ist, dem kann mit <strong> oder <em> ein höherer Stellenwert verliehen werden. Und speziell für Zitate gibt es <cite>.
Von der Verwendung unsemantischer Tags, also solcher, die lediglich Layout-Informationen tragen wie <center> oder <b>, rate ich eher ab, denn fürs Hübschmachen gibt es CSS.

HTML5 wird noch manche weitere Tags bringen, zum Beispiel <article> oder <section>.
Auch wenn es zwischen einer semantischen und einer weniger semantischen Umsetzung keinen sichtbaren Unterschied gibt, entsteht so ein HTML-Gerüst, das Suchmaschinen ebenso wie Screenreadern die Strukur der Web-Seite deutlich macht und damit nicht zuletzt zur besseren Auffindbarkeit in den Ergebnislisten der Suchmaschinen sorgt.

*
http://www.bootshandel-magazin.de

Technologie

02/29/2012 - 18:43
02/29/2012 - 17:43
01/19/2012 - 11:45
04/06/2011 - 08:58
12/21/2010 - 23:28
11/26/2010 - 15:54
11/14/2010 - 10:42