Eine semantische Struktur erschaffen

Deutsche Übersetzung des Artikels "Creating Semantic Structure" © 2010 - WebAIM

Anmerkung des Übersetzers - translators note:
Beim Übersetzen habe ich mich soweit möglich an den genauen Wortlaut der Originalversion gehalten. Sollten Sie auf Fehler oder Unklarheiten stoßen, bitte ich Sie um eine Nachricht an Joomla Programmieren per E-Mail.

Gliederung

1. Die Beschaffenheit von HTML
2. Mit Überschriften den Inhalt strukturieren
3. Überschriften richtig verwenden
4. Listen richtig verwenden

Die Beschaffenheit von HTML

Die Vordenker von HTML waren Wissenschaftler, die eine standardisierte Methode benötigten, um Dokumente aus der Teilchenphysik gemeinsam nutzen zu können. Sie waren kaum an der präzisen grafischen Erscheinungsform auf dem Bildschirm interessiert. Stattdessen war HTML ursprünglich dazu bestimmt, eine saubere Trennung zwischen Inhaltsstruktur und grafischer Gestaltung zu erzwingen. Die Absicht war, ein weltweites Netz von Seiten zu erschaffen, die auf jedem System und Browser verfügbar waren, einschließlich Browsern, die visuell beeinträchtigten Benutzern Texte auf Websites „vorlesen“. Auch sollte dieses Netz genau auswertbar sein von automatisierten Such- und Analysesystemen.

Die Erfinder des Netzes erkannten die Möglichkeiten des Netzes für die grafische Darstellung nicht, und so wurde HTML nicht vor dem Hintergrund der Darstellung konstruiert. Sie waren so beschäftigt, Dokumente im Netz maschinenfreundlich zu gestalten, dass sie Dokumente erstellten, die nur Maschinen (oder Teilchenphysiker) lesen wollten. Einzig und allein auf die strukturelle Logik der Dokumente konzentriert ignorierten sie den Bedarf an visueller Logik für Grafikdesign und Typographie. Dieses Fehlen eines visuellen Schwerpunktes des Netzes verursacht Webdesignern Kopfschmerzen, Webseiten so aussehen zu lassen, wie sie es wollen. Dieser Druck veranlasst Firmen von Browersoftware, damit zu beginnen, die Standards von korrektem HTML zu ignorieren und zusätzliche Funktionen oder Erweiterungen von HTML für Optik und Layout in ihre Browser einzubinden.

Beispielsweise meiden die meisten Grafikdesigner die Verwendung der standardisierten Marken für Überschriften in HTML (<h1>, <h2>, und so weiter), weil diesen Feinheiten fehlen: In den meisten Webbrowsern machen diese Marken die Überschriften unsinnig groß (<h1>, <h2>) oder lächerlich klein (<h4>, <h5>, <h6>). Die Überschriftmarken in HTML wurden jedoch nicht mit dem Hintergedanken an Grafikdesign eingeführt. Ihr einziger Zweck ist, eine Bedeutungshierarchie der Überschriften von zu bestimmen, so dass sowohl menschliche Benutzer als auch automatisierte Suchmaschinen beim Auswerten eines Dokuments die Informationsstruktur einfach erfassen können. Nur zufällig erschufen Browserdesigner eine optische Hierarchie für HTML Überschriften durch Zuweisung unterschiedlicher Schriftgrößen und Stufen des Fettdrucks für jedes Überschriftelement, aber diese Schriftgrößen waren innerhalb der HTML Sprache relativ eingeschränkt.

Mit Überschriften den Inhalt strukturieren

Trotz der Beschaffenheit des Netzes und der weitgehenden Wandlung in seiner Rolle vom strukturellen Medium zu einem optischen Medium, ist es immer noch wichtig, dass Inhalte im Netz richtig strukturiert werden. Mit verbesserter Unterstützung von Cascading Style Sheets (CSS) in neueren Versionen von Webbrowsern können die Entwickler die Erscheinung struktureller Elemente verändern, um ihr Design und ihre optischen Vorlieben umzusetzen.

Beispiel

Schauen Sie sich die Inhaltsstruktur einer Ihrer Webseiten an unter https://validator.w3.org/detailed.html (externer Link). Geben Sie die URL Ihrer Website in das Textfeld ein, setzen Sie ein Häkchen bei „Show Outline“ (zu Deutsch: „Gliederung anzeigen“) unter der Rubrik „More Options“ (zu Deutsch: „Weitere Optionen“) und klicken Sie auf „Check“ (zu Deutsch: „Testen“). Ignorieren Sie diesmal etwaige Fehler im HTML und scrollen Sie zum Ende der Seite, um die Gliederung der Seite zu sehen. Sie sehen eine kurze Gliederung der Inhaltsstruktur Ihrer Website, wie sie mit den Überschriftmarken (<h1> - <h6>) bestimmt ist. Wenn das Ergebnis nicht so aussieht wie die wirkliche Gliederung, ist es wahrscheinlich, dass die Überschriftmarken nicht korrekt verwendet wurden (oder es sind keine Überschriftmarken vorhanden).

Mit Bildschirmleseprogrammen und anderen unterstützenden Technologien haben Benutzer die Möglichkeit, durch Websites anhand ihrer Struktur zu navigieren. Das bedeutet, dass der Benutzer direkt zu den Elementen der obersten Ebene (<h1>), der nächsten Ebene (<h2>), der dritten Ebene (<h3>) und so weiter springen kann. Lesen oder Hören dieser Gliederung sollte ihnen einen guten Überblick über den Inhalt und die Struktur der Seite verschaffen.

Seiten sollten hierarchisch strukturiert werden. Überschriften erster Ordnung (<h1>) sind die Wichtigsten (üblicherweise der Seitentitel oder die Seitenüberschrift), dann folgen die Überschriften zweiter Ordnung (<h2> - normalerweise Überschriften der größeren Abschnitte) bis hin zu den Überschriften dritten Grades (Unterabschnitte der <h2>) und so weiter. Technisch gesehen sollten Überschriften niedrigen Grades in den Überschriften des nächst höheren Grades enthalten sein. Die folgende Gliederung zeigt die Gliederung des möglichen Inhalts einer Website. Tatsächlich zeigt sie die Hierarchie der wesentlichen Inhaltsbereiche der Seite, wobei unterschiedliche Ordnungen der Überschriften höhere oder niedrigere Stufen der Inhaltshierarchie repräsentieren. Sie können auf jedes beliebige Überschriftelement klicken, um zu dem Abschnitt innerhalb der Seite zu springen.

• Überschrift 1
  • Überschrift 2
  • Überschrift 2
  • Überschrift 2
  • Überschrift 2

Überschriften richtig verwenden

Verwenden Sie keine Textformatierung, wie Schriftgröße oder Fettdruck, für die optische Erscheinung Ihrer Überschriften - venwenden Sie die jeweilige Überschrift (<h1> - <h6>) für alle Inhaltsüberschriften. Unterstützende Technologien und andere Browser sind auf die eigentlichen Textauszeichnungen angewiesen, um die Struktur zu bestimmen. Elemente in Fettdruck oder mit größerer Schriftgröße werden nicht als Strukturelemente ausgewertet.

Verwenden Sie ebenfalls keine Überschriften, nur um optische Effekte zu erzielen. Wenn Sie beispielsweise ein Element Ihres Inhalts, das keine Überschrift ist, unterstreichen oder betonen wollen (so wie ich es mit dem letzten Satz getan habe), sollten Sie keine Überschriftmarken verwenden, um die gewünschte optische Erscheinung zu erreichen. Nutzen Sie stattdessen Schriftgröße, Fett- und Kursivdruck. Eigentlich sollten Sie Styles (zu Deutsch: Formelemente) verwenden, um optische Effekte zu erzielen. Wenn Sie etwas betonen wollen, sollten Sie technisch die <strong> Marke statt <bold> und die <em> Marke statt <i> verwenden. Fettdruck und Kursivschrift (<i>) bewirken beide eine optische Hervorhebung, dahingegen drückt (<em>) eine semantische Hervorhebung aus. Optischen sehen <b> und <strong> oder <em> und <i> identisch, aber Entwickler sollten die richtigere HTML Marke verwenden. Bei Dreamweaver können Sie über Edit > Preferences > General einstellen, <strong> und <em> statt <b> und <i> zu verwenden.

Listen richtig verwenden

HTML Listen - <ul>, <ol>, und <dl> - transportieren ebenfalls eine hierarchische Inhaltsstruktur. Jedes dieser Elemente folgt Regeln bezüglich ihrer Verwendung. Ungeordnete Listen sollten verwendet werden, wenn die Reihenfolge oder Bedeutung keine Rolle spielt. Sortierte Listen deuten auf eine Reihenfolge oder Steigerung hin. Definitionslisten sollten ausschließlich zur Strukturierung von Definitionen verwendet werden. Analog zu Überschriften sollten Listen korrekt und für den richtigen Zweck verwendet werden. Ungeordnete und sortierte Listen sollten immer Listenelemente enthalten. Listen sollten niemals lediglich für Einrückung oder andere Layoutzwecke verwendet werden. Verschachtelte Listen sollten sauber codiert werden.

Empfehlungen und Informationen:

• Lektorat
• Reiki
• Infrared heating and electric radiators