Fabian Letscher - Blog + Portfolio » Qualität http://fabianletscher.de WordPress, Webdesign, HTML5, CSS Tue, 06 Apr 2010 12:23:18 +0000 http://wordpress.org/?v=9103 en hourly 1 Qualität im Web II http://fabianletscher.de/web/qualitaet-im-web-ii.html http://fabianletscher.de/web/qualitaet-im-web-ii.html#comments Fri, 04 Dec 2009 22:29:04 +0000 Fabian http://fabianletscher.de/?p=429 Nachdem ich im ersten Artikel zu “Qualität im Web” Bezug auf eine konkrete Fehlbildung im Web genommen habe, soll dieser Artikel eher Fehler hinter den Kulissen aufweisen.

Im Großen und Ganzen sollen hier zwei verschiedene Aspekte angesprochen werden, die dem Web Qualität geben. Jedoch ist dieses in der Tat schwieriger zu bewerkstelligen, da teilweise der “Autor” eines Textes keinen direkten Einfluss darauf hat.

Die Syntax im Web – ein Muss!

Unter der Syntax versteht man salopp gesagt, die Grammatik des Quelltextes. Um über dessen Richtigkeit eine Aussage treffen zu können, muss man zunächst erahnen um welche “Sprache” es sich handelt. Dies ist leicht vergleichbar mit der Wirklichkeit: Deutsch und Englisch sind beides Sprachen, jedoch folgen sie verschiedenen Richtlinien bzw. Grammatiken. Demnach ist der erste Schritt zu einer syntaktischen Webseite die Dokumenttypdeklaration anzugeben und somit die Sprache festzulegen. Beispielsweise könnte das <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> oder auch der wesentlich einfachere Doctype für HTML5 sein: <!doctype html>. Hier freut sich natürlich der Webentwickler, dass er sich nun endlich mal diese Zeile merken kann.

Weiterhin zur Syntax lässt sich nun nicht mehr viel sagen. Die üblichen Fehler können mit einem Validierungs-Tool überprüft und bereinigt werden. Eine Validierung der Webseite ist keine Pflicht, sollte aber durchaus als Kriterium für eine gute Webseite angesehen werden. Wobei man auch sagen muss, dass durch die Erzeugung dynamischen Inhalts (WYSIWYG-Editoren) leicht mal ein solcher Fehler sich einschleichen kann. Webmaster freuen sich aber in der Regel über einen solchen Hinweis.

Am Rande sei bemerkt, dass eine Validierung der CSS-Datei ebenfalls möglich ist, allerdings nicht unbedingt notwendig. Die richtige Auszeichnung des Inhalts sollte eine höhere Priorität haben als die Richtigkeit einer Formatierungsdatei.

Die Semantik – Streben nach Vollendung

Das ganze führt nun schließlich zum wichtigeren Teil, der in der Vergangenheit oft vernachlässigt wurde und nun seit einiger Zeit mehr im Vordergrund steht. Semantik bedeutet in diesem Sinne, dass die durch HTML vollzogene Auszeichnung des Inhalts logisch ist. Das Wort “logisch” beinhaltet auch schon einen Knackpunkt: Nicht immer ist man sich so einig, was semantisch richtig ist und was nicht. Semantik lässt sich nur sehr schwer in ein starres Konzept pressen, indem jedes Individualproblem ausreichend behandelt wird. Daher ist bei der Gestaltung einer Webseite auch nicht die Syntax, sondern die Semantik die höhere Hürde.

Aber wie genau kann man jetzt Semantik verstehen – dazu ein Ausblick: Man könnte so herangehen und zunächst festhalten, dass HTML eine Sprache zur Auszeichnung von Inhalt ist. Als Inhalt betrachtet man jeweils eine einzelne Seite. Diese Inhalte haben in der Regel eine logische Bedeutung und diese wird mit HTML untermauert. Fehler, die durch falsche Auszeichnung entstehen, können also grammatikalisch richtig sein, aber die falsche Bedeutung vermittlen.

Als Beispiel könnte man sich folgendes vorstellen: Die Kommentare eines Artikels werden zu einem blockquote zusammengefasst. Allerdings entspricht dies nicht einem üblichen Zitat – und hat somit eine falsche Bedeutung.

Semantik als Diskussionsstoff

Bei der semantischen Betrachtung gibt es im Gegensatz zur syntaktischen Richtigkeit keine eindeutigen Regelungen. Vielmehr muss der Mensch die Aufgabe übernehmen und logische Zusammenhänge auszeichnen. Dabei sollte klar sein, dass man sich nicht immer einig ist, wenn es um die Umsetzung geht. Daher möchte ich im Folgendem ein paar verschiedene Beispiele erläutern. Viele davon entstanden eng im Zusammenhang mit dem Entwurf von HTML5.

  • In HTML gibt es eine Unterscheidung zwischen logischen und physikalischen Ausdrücken. Vereinfacht kann man sagen, dass logische Ausdrücke dem Inhaltsabschnitt eine gewisse Bedeutung zukommen lassen während die physischen Ausdrücke eher der Darstellungsverbesserung dienen. So wurde das b-Element (fett) auf die Abschuss-Liste gesetzt, da es “keinerlei” Bedeutung hat und durch das strong-Tag nahezu ersetzt wird. Bei einer einfachen Betrachtung könnte man darauf schließen, dass dies die richtige Entscheidung sei. HTML5 sieht aber eine Wiederbelebung des b-Tags vor. b kennzeichnet äußerlich eine Textstelle, da man diese wirklich als fett kennzeichnen möchte und keine höhere Bedeutung hat. Als Anwendungsfall wäre ein Lexika-Artikel zu nennen. Der zu erläuternde Begriff verdient eine optische Hervorhebung im Text – allerdings wird diesem Wort keine Betonung gegeben. Auch wenn man nun mit “Trennung von Inhalt und Design” gegen das Fett argumentieren will, so hat dies durchaus seine Berechtigung.

  • Eine weitere Sache, die eng mit der HTML5 Einführung zu tun hat sind die beiden Elemente span (Inline) und div (Block). Die Bedeutung dieser Elemente ist “leer”, wenn man das so sagen darf. Prinzipiell könnten diese beiden Tags ausreichen um eine Webseite zu gestalten (abgesehen von input/textarea). HTML-Dokumente basieren grundlegend auf solchen div-span-Konstrukten (“Box-Layout”). Allerdings geben diese dem Dokument keine logische Struktur. Abhilfe schaffen da die neuen HTML5 Elemente wie header, footer, aside,…

  • Eine der wichtigsten Funktionen einer Webseite nimmt die Navigation ein. Überlicherweise wird diese als ungeordnete Liste dargestellt. Das hat auch seine Berechtigung. Zum einen ist eine Liste angebracht, da sie die verschiedenen Menüpunkte gruppiert und eine “Auswahl” lässt. Ungeordnet daher, da man ansonsten mit einer geordneten Liste den verschiedenen Punkten unterschiedliche Prioritäten zuweist. Das haben sie aber nicht, denn beispielsweise ist das Impressum genauso wichtig wie die Startseite. Ebenen können stattdessen mit Verschachtelungen der ungeordneten Liste dargestellt werden.

  • Die übliche Überschriftenstruktur reicht bis zur sechsten Ebene – danach ist Schluss – zumindest bei HTML4 und XHTML1.0. HTML5 stellt hier einen Ausweg bereit, welcher in diesem Artikel erklärt wird.

Es gibt noch mehr an Diskussionsstoff, was hier aber nun letztlich den Rahmen sprengen würde.

]]> http://fabianletscher.de/web/qualitaet-im-web-ii.html/feed 1