Martin: HTML5-Serie: Der Weg zu HTML5

Beitrag lesen

Unter dem Buzzword "semantisches Markup" versteht man eigentlich etwas Selbstverständliches: Dass man konsequent die HTML-Elemente nutzt, die die Struktur des Dokuments am besten wiedergeben. Also beispielsweise h1, h2, h3,... für Überschriften; ul/ol für Listen oder listenähnliche Aufzählungen; fieldset zum Gruppieren von Formularelementen; eine Tabelle dann, wenn wirklich Tabellendaten wiedergegeben werden sollen. Das Ergebnis ist, dass man auch schon anhand des ungestylten HTML-Codes die Dokumentstruktur erkennen kann. Gegenbeispiele, also nicht semantisches Markup, sind etwa die Verwendung von Tabellen als Layoutmittel oder die übermäßige Verwendung von speziell gestylten div-Elementen, wo andere Elemente die Bedeutung besser treffen. Manche Webautoren scheinen zu glauben, dass man unbedingt div-Container bräuchte, um mit CSS darauf einzuwirken. Nein, das ist ganz sicher nicht so! Mit CSS kann man jedes Element formatieren (mit kleinen Einschränkungen bei Elementen, die eine bestimmte Funktion haben). Das div-Element ist eigentlich nur zum Gruppieren gedacht, also um mehrere Elemente zu einem Block zusammenzufassen (ein div mit nur einem Kindelement ist daher seltenst sinnvoll). Wenn man den Begriff etwas weiter fassen mag, versteht man unter semantischem Markup oft auch noch die saubere Trennung von Inhalt und Gestaltung, soll heißen: Der HTML-Quellcode enthält im Idealfall weder Hinweise auf das gewünschte Aussehen, noch wird er von darstellungsbezogenen Absichten beeinflusst sein. Als oft gesehenes schlechtes Beispiel mag die Verwendung eines h3- oder h4-Elements gelten, nur "weil die Schriftgröße dann so ist, wie ich sie haben will", und nicht, weil der damit markierte Text eine Überschrift dritter oder vierter Ordnung ist.