{"id":235,"date":"2017-09-03T17:19:33","date_gmt":"2017-09-03T15:19:33","guid":{"rendered":"http:\/\/evileu.de\/systemberatung\/?p=235"},"modified":"2017-09-03T17:19:33","modified_gmt":"2017-09-03T15:19:33","slug":"dokument-strukturierung-gut-fuer-seo-gut-fuer-den-besucher-spitze-fuer-die-barrierefreiheit","status":"publish","type":"post","link":"https:\/\/evileu.de\/systemberatung\/2017\/09\/03\/dokument-strukturierung-gut-fuer-seo-gut-fuer-den-besucher-spitze-fuer-die-barrierefreiheit\/","title":{"rendered":"Dokument-Strukturierung: gut f\u00fcr SEO, gut f\u00fcr den Besucher, Spitze f\u00fcr die Barrierefreiheit"},"content":{"rendered":"

Zuerst ein bi\u00dfchen Theorie<\/h2>\n

Ein Dokument ist im \u00fcblichen Sprachgebrauch ein Schriftst\u00fcck, allenfalls wird noch ein Word-Dokument so genannt. Im Internet-Sprachgebrauch hei\u00dft eine Webseite auch ein Dokument<\/strong>, und es gibt ellenlange theoretische Abhandlungen \u00fcber das sogenannte DOM (Document Object Model)<\/strong>, hier bei Wiki<\/a> kann man es ganz genau nachlesen.<\/p>\n

Man kann es aber auch ganz einfach ausdr\u00fccken: eine Webseite ist nichts anderes als ein HTML-Dokument<\/strong>, das nach festen Regeln erstellt ist und bestimmte Elemente enth\u00e4lt, die in der HTML-Definition festgelegt sind. Diese Elemente sind standardisiert und werden von ihrem Web-Browser interpretiert und grafisch dargestellt.<\/p>\n

Der heutige Standard ist HTML 5, eine sehr gute Dokumentation der Sprachelemente findet man hier bei selfhtml<\/a>.<\/p>\n

Beispiel f\u00fcr ein HTML-Element: eine simple Tabelle<\/h2>\n

Eine Tabelle in HTML sieht im einfachsten Fall so aus:<\/p>\n

<table><\/span>\r\n  <thead><\/span>\r\n    <tr><\/span>\r\n      <th><\/span>Vorname<\/th><\/span>\r\n      <th><\/span>Name<\/th><\/span>\r\n    <\/tr><\/span>\r\n  <\/thead><\/span>\r\n  <tbody><\/span>\r\n    <tr><\/span>\r\n      <td>Evi<\/span><\/td><\/span>\r\n      <td>Leu<\/span><\/td><\/span>\r\n    <\/tr><\/span>\r\n  <\/tbody><\/span>\r\n<\/table>\r\n<\/span><\/pre>\n
Das erzeugt eine zweispaltige Tabelle mit den Spalten\u00fcberschriften „Vorname“ und „Name“, und einer Tabellenzeile mit den Werten „Evi“ und „Leu“. Im Browser sieht das dann so aus:<\/p>\n
\"dom
dom tabelle<\/figcaption><\/figure>\n
Das ist schon alles. Was die einzelnen Tags wie <table>, <tr>, <td> usw. bedeuten lernt man in HTML f\u00fcr Anf\u00e4nger 1, erstes Semester, und das kann auch jeder selber googlen.<\/p>\n
Es soll hier mal reichen, wir wollten ja nur ein Beispiel daf\u00fcr haben, wie ein DOM-Element aussehen kann.<\/p>\n
Wer braucht das – wir machen doch unsere Webseiten mit WordPress (oder InDesign oder…)<\/h2>\n
Nat\u00fcrlich programmiert heute niemand mehr HTML „zu Fu\u00df“, daf\u00fcr gibt es grafische Bedienoberfl\u00e4chen und WYSIWYG-Editoren zuhauf, die einem die l\u00e4stige Arbeit mit den ganzen Tags abnehmen und es in komfortablen grafischen Editoren erlauben, HTML-Dokumente so einfach zusammenzustellen wie man einen Brief in Word schreibt.<\/p>\n
Trotzdem sollte man als Webdesigner seine HTML-Elemente genauestens kennen und richtig einsetzen, und das ist beileibe nicht selbstverst\u00e4ndlich, da wird im Web geschlampert und geflickschustert, was das Zeug h\u00e4lt.\u00a0 Jeder kennt die Regeln zumindest theoretisch, kaum jemand wendet sie richtig an. \u00a0F\u00fcr \u00dcberschriften sind h1..h6 vorgesehen, eine Tabelle formatiert man mit Hilfe des <table>-Tags, es gibt nummerierte Listen, es gibt\u00a0Image-Tags f\u00fcr die Bilder\u2026 das sind viele, aber doch\u00a0nicht endlos viele. Eine h\u00fcbsche komplette Liste aller HTML5-Tags findet ihr hier bei MDN Web Docs<\/a><\/p>\n
DOM sauber umgesetzt: Trennung von Text und Formatierung<\/h3>\n
Die Idee dabei ist, Text und Formatierung sauber zu trennen, und so wohlstrukturierte Dokumente zu erstellen.<\/p>\n
Ein einfaches Beispiel: eine Haupt\u00fcberschrift soll fett, in Arial und in 30 Punkt Gr\u00f6\u00dfe angezeigt werden. Was macht der WYSIWYG-Webdesigner? Er markiert den betreffenden Textabschnitt, dr\u00fcckt auf das Icon f\u00fcr \u201efett\u201c, w\u00e4hlt in der Dropdownliste f\u00fcr die Schriftart \u201eArial\u201c und scrollt in der Schriftgr\u00f6\u00dfen-Zahleneingabe rauf bis 30. Das erzielt zwar den gew\u00fcnschten Effekt, aber es ist technisch nicht sauber.<\/p>\n
Wie gehts richtig? Die \u00dcberschrift erster Ordnung kriegt die Tags <h1>\u2026<\/h1>, und wenn man es nicht dem Browser \u00fcberlassen will wie eine \u00dcberschrift erster Ordnung dargestellt wird, legt man es in seiner CSS-Datei fest. Hierhin kommen unsere Textattribute, wenn man es richtig machen will.<\/p>\n
Das ist erstens weniger Arbeit bei der Formatierung, und zweitens hat es den unschlagbaren Vorteil, da\u00df ich bei \u00c4nderungsw\u00fcnschen – der Kunde h\u00e4tte jetzt doch lieber eine andere Schriftart f\u00fcr die \u00dcberschriften – nicht alle \u00dcberschriftszeilen einzeln anfassen mu\u00df, sondern die \u00c4nderung einmal zentral in der CSS festlege, und fertig.<\/p>\n
Saubere Gliederung<\/h3>\n
Das habe ich bei der Umarbeitung meiner Webseiten auf barrierefrei neu lernen m\u00fcssen, bei mir hatte sich da \u00fcber die Jahre auch eine gewisse Schlamperei eingeschlichen. Ich schreibe ja sehr viel Text, und lange Textw\u00fcsten auf einer Webseite sind absolutes Bildschirmgift, die liest kein Mensch. Also, umdenken, Text in k\u00fcrzere logische Einheiten unterteilen, Zwischen\u00fcberschriften einf\u00fcgen, wo es Sinn macht, Listen und Tabellen verwenden. Das erh\u00f6ht die Lesbarkeit und h\u00e4lt den Besucher bei der Stange, weil er nicht von unstrukturierten Endlostexten gelangweilt wird.<\/p>\n
Einfaches Beispiel: Rezepte mit Struktur<\/h3>\n
Ich h\u00e4tte da wieder das\u00a0einfache Beispiel: alle meine Rezepte im Inselfisch-Kochbuch haben die selbe logische Gliederung:<\/p>\n