Im ersten Teil dieser Serie haben wir die Mängel behandelt, die zu den Strukturelementen von HTML5 führen. Im zweiten Teil werden wir uns ausführlich mit den Folgen dieser Mängel befassen.

Ich habe mehrmals gesagt, dass HTML5 eine neue Methode zur Strukturierung einer Webseite einführt, und Sie fragen sich wahrscheinlich, was das eigentlich ist. Es steht genau dort in der Spezifikation führt das Konzept der „Unterteilung von Inhalten“ ein‘: Abschnittsinhalt ist Inhalt, der den Umfang von Überschriften und Fußzeilen definiert. Jedes abschnittsweise Inhaltselement verfügt möglicherweise über eine Überschrift und eine Gliederung.

Die Spezifikation dokumentiert ihren Ansatz Überschriften, Abschnitte und Gliederungen um das Konzept klar zu machen. Nun, klar für diejenigen, die die Funktionalität in Browsern implementieren müssen. Damit wir die Strukturelemente von HTML (Abschnitt, Artikel, Navigation, Seite und die zugehörigen Kopf- und Fußzeilenelemente) und dieses obskure Konzept der „Inhaltsunterteilung“ oder „Gliederung“ verstehen, müssen wir eine kleine Reise durch die HTML-Geschichte unternehmen.

Ein altes Konzept skizzieren

Das in HTML5 eingeführte Outlining-Konzept lässt sich bis ins Jahr 1991 zurückverfolgen und wurde in die unglückliche, in die Sackgasse geratene XHTML 2.0-Spezifikation aufgenommen und erblickt schließlich in HTML5 das Licht der Welt … nur um so schlecht kommuniziert zu werden Die Idee ist bei der Ankunft so gut wie tot.

Vor HTML5 wurde die hierarchische Struktur einer Seite durch die Überschriftenelemente bestimmt – unsere alten Freunde h1 bis h6. Wir könnten eine Seite strukturieren, indem wir sagen, der Seitentitel sei h1, die Artikelüberschrift könnte h2 sein, und vielleicht könnten die Unterüberschriften im Artikel h3 und h4 sein und so weiter.

Für ein einfaches Dokument ist das in Ordnung, aber die Verwendung von Überschriften-Tags zum Erstellen einer logischen Hierarchie oder „Dokumentgliederung“ für eine komplexe, moderne Webseite ist sehr schwierig. Ein Teil des Problems besteht darin, dass es keine Möglichkeit gibt, festzustellen, wo ein Seitenabschnitt beginnt und endet. Angenommen, wir hatten unser zuvor erwähntes Dokument mit h1 für den Seitentitel, h2 für den Artikeltitel und h3 für die Unterüberschriften, wollten dann aber auch den Titel für unsere Seitenleistenabschnitte mit h3-Überschriften auszeichnen.

Der Dokumentumriss, der durch eine solche Struktur erstellt würde, würde etwa so aussehen:

Mein alter Blog

Mein neuester Blog-Beitrag

Unterüberschrift meines Blog-Beitrags

Unterüberschrift meines Blog-Beitrags

Über mich

Archive

Soziale Links

Hier gehören die h3-Elemente dem darüber liegenden h2, auch wenn das wenig Sinn ergibt. Natürlich würden wir diese durch etwas wie „div“ für den Artikel und „div“ für die Seitenleiste aufteilen, aber diese werden von Benutzerprogrammen (z. B. Bildschirmleseprogrammen) ignoriert, die die Seitengliederung allein durch die Überschriftenstruktur bestimmen.

Durch die direkte Verknüpfung der Seitenhierarchie mit häufig Präsentationsüberschriftenebenen sind wir in der Strukturierung einer Seite eingeschränkt.

Ein neuer Versuch, ein altes Ziel anzugreifen

Um dieses Problem zu lösen, führt HTML5 das Konzept der „Abschnittselemente“ ein, d oder „Umriss“ der Seite.

Das heißt, die Hierarchie der Seite wird von den Überschriftenelementen entkoppelt und stattdessen bestimmen diese neuen Abschnittselemente, auf welcher Ebene sich ein Überschriftenelement tatsächlich befindet.

Im ersten Entwurf XHTML 2.0-SpezifikationDie Abschnittserstellung erfolgte mit einem Abschnittselement und einem generischen Header-h-Element. Beim Schreiben von HTML würden wir dann nicht angeben, welche Überschriftenebene wir verwenden wollten, sondern einfach den Browser die Verschachtelungsebene für eine bestimmte Überschrift bestimmen lassen. Wir könnten Abschnittselemente mit einer Tiefe von 99 Ebenen verschachteln, und ein h-Element auf der 99. Ebene würde einem h99-Element entsprechen. Auf diese Weise können wir unsere Dokumente logisch strukturieren, ohne uns Gedanken darüber machen zu müssen, wie wir die begrenzten h1-h6-Elemente verwenden können.

(Diese Idee stammt übrigens tatsächlich aus dem Jahr 1991: as Jeremy Keith Wie bereits erwähnt, schlug Tim Berners-Lee die Idee eines Abschnitts und eines h-Elements vor, um eine Seite am Ende zu strukturieren diese E-Mail vom Oktober 1991.)

Hickson versuchte, dasselbe Konzept in HTML5 einzuführen, allerdings mit einem zusätzlichen Schwierigkeitsgrad: Er wollte die Abwärtskompatibilität aufrechterhalten und einige neue Semantiken einführen, um obendrein das Authoring zu „vereinfachen“. Deshalb haben wir in HTML5 nicht nur ein Abschnittselement, sondern auch ein Artikel-, Navigations- und Seitenelement, die alle das Gleiche tun wie Abschnitt, aber mit unterschiedlichen Namen, die auf unterschiedliche Weise verwendet werden können.

Was sagt die Spezifikation zu diesen Elementen aus? Ich ermutige Sie dazu Lesen Sie die Spezifikation selbstaber hier ist ein Vorgeschmack:

Das Abschnittselement ist die Grundlage für die Abschnittserstellung zur Erstellung einer Dokumentgliederung.

Das Abschnittselement stellt einen generischen Abschnitt eines Dokuments oder einer Anwendung dar. Ein Abschnitt ist in diesem Zusammenhang eine thematische Gruppierung von Inhalten, typischerweise mit einer Überschrift.

Beispiele für Abschnitte wären Kapitel, die verschiedenen Registerseiten in einem Registerdialogfeld oder die nummerierten Abschnitte einer Arbeit. Die Homepage einer Website kann in Abschnitte für eine Einführung, Neuigkeiten und Kontaktinformationen unterteilt werden.

Ein Hinweis in der Spezifikation besagt, dass das Element nicht für reine Styling-Zwecke verwendet werden sollte – ein div wäre dort besser, und das ist verständlich, da Abschnitte, die willkürlich zum Stylen eingefügt werden, zu einer sehr kaputten Dokumentgliederung führen würden.

In der Anmerkung heißt es weiter: „Eine allgemeine Regel besagt, dass das Abschnittselement nur dann angemessen ist, wenn der Inhalt des Elements explizit in der Gliederung des Dokuments aufgeführt wird“, und das ist die klarste Aussage über das Abschnittselement in der Spezifikation.

Wenn wir das Konzept der Unterteilung und Gliederung verstehen, ist die Einbeziehung des Abschnittselements sinnvoll. Es erschien nicht in der Forschung zu gemeinsamen Klassenwerten, aber es erschien in XHTML 2.0 und geht konzeptionell auf das Jahr 1991 zurück.

Die anderen Strukturelemente, die HTML5 einführt – diejenigen, die sich angeblich in der Recherche widergespiegelt haben – bewirken genau das Gleiche wie das Abschnittselement, soweit es die Dokumentgliederung betrifft. Sie erstellen auch die Hierarchie der Seite und damit die Dokumentgliederung.

Nehmen Sie zum Beispiel das Artikelelement. Viele gehen davon aus, dass es sich lediglich um Artikel wie diesen handelt. Aber das ist es überhaupt nicht. Es handelt sich um einen „Artikel“ im Sinne von „Kleidungsstück“. Es ist besser, es als „Artikel“ als als „Kleidungsstück“ zu betrachten, da seine Definition so weit gefasst ist.

Wenn Artikelelemente verschachtelt sind, stellen die inneren Artikelelemente Artikel dar, die im Prinzip einen Bezug zum Inhalt des äußeren Artikels haben. Beispielsweise könnte ein Blogeintrag auf einer Website, der von Benutzern eingereichte Kommentare akzeptiert, die Kommentare als Artikelelemente darstellen, die im Artikelelement für den Blogeintrag verschachtelt sind.

In HTML5 sind Benutzerkommentare, der eigentliche Artikel, Forenbeiträge und sogar „interaktive Widgets und Gadgets“ allesamt Artikel. Die Definition ist so weit gefasst, dass sie nutzlos ist – Semantik soll Bedeutung vermitteln, aber die Verwendung eines Sammelbegriffs für eine so große Vielfalt von Elementen macht das Element bedeutungslos.

Dies ist ein Beispiel, bei dem wir die Spezifikation gespalten haben – einige Leute befolgen die Spezifikation korrekt und machen fast alles zu einem Artikel (Zusammenfassungen von Blogbeiträgen, Blogbeiträgen, Kommentaren, Widgets, Forenbeiträgen usw.), während andere sie nur beibehalten haben für den Hauptartikel auf einer Seite, der nur ein Teil ihrer weit gefassten Definition ist. Sie denken vielleicht, dass es in beiden Fällen keine Rolle spielt, und Sie haben weitgehend Recht. Aber denken Sie an all die Lesedienste, die nur darauf abzielen, den Hauptinhalt der Seite zu analysieren. Welcher Implementierung der Spezifikation sollten sie folgen? Sollten sie den tatsächlichen Angaben in der Spezifikation folgen oder sollten sie sich an die allgemeine Community-Implementierung halten, bei der es normalerweise nur einen kanonischen „Artikel“ auf einer Seite gibt?

Dies ist eine verpasste Chance, und was passiert, wenn die Spezifikation tatsächlich versagt? angebenund der Herausgeber und, um fair zu sein, die Community kommunizieren nicht, was in der Spezifikation tatsächlich steht.

Stellen Sie sich vor, der Artikel würde nicht auch für Kommentare verwendet. Stellen Sie sich zum Beispiel vor, Kommentare bekämen ein eigenes Element und die Akzeptanz würde weit verbreitet sein. Browserhersteller könnten eine Funktion zum Stummschalten von Kommentaren hinzufügen, mit der Kommentare auf Webseiten einfach ausgeblendet (oder auf andere Weise analysiert) werden könnten. Aber Hickson hat es getan lehnte eine Anfrage nach einem Kommentarelement ausdrücklich ab. In HTML5 sind es die Artikel ganz unten.

Aside ist ein weiteres Element, das in Hicksons Recherche zu Klassennamen nirgends vorkommt und obendrein eine sehr eigenartige Definition erhält:

Das Element kann für typografische Effekte wie Anführungszeichen oder Seitenleisten, für Werbung, für Gruppen von Navigationselementen und für andere Inhalte verwendet werden, die vom Hauptinhalt der Seite getrennt betrachtet werden.

Wer weiß, warum Aside sowohl Anführungszeichen, Seitenleisten, Werbung und Gruppen von Navigationselementen abdecken sollte, aber auch neue Abschnitte in der Dokumentgliederung erstellt. Das bedeutet, dass Pull-Quotes einen eigenen Aufzählungspunkt in der Dokumentgliederung erhalten, was, sagen wir mal, „seltsam“ erscheint. Auch hier hat und wird die willkürliche Verwendung durch Webdesigner mit guten Absichten zu zahlreichen fehlerhaften Dokumentumrissen führen.

Das Navigationselement scheint das selbsterklärendste der Abschnittselemente zu sein, und zum Glück wurde die Definition nicht übertrieben.

Das Navigationselement stellt einen Abschnitt einer Seite dar, der auf andere Seiten oder Teile innerhalb der Seite verweist: einen Abschnitt mit Navigationslinks.

Das ist in Ordnung und könnte theoretisch Vorteile für die Barrierefreiheit haben (ein Benutzeragent könnte an den Navigationslinks vorbeispringen oder zu ihnen springen – das tun sie nicht, könnten es aber).

Das Problem besteht darin, dass wir im Sinne der „Vereinfachung des Authorings“ und des Ersetzens von div durch das nav-Element den Navigationsstil für eine andere Untergruppe von Benutzern sprengen. Benutzer von IE6-8 mit deaktiviertem JavaScript (Die Forschung von Yahoo legt nahe 1-2 % aller Benutzer haben JavaScript deaktiviert) sind Opfer dieses Problems. Wenn JavaScript deaktiviert ist, funktioniert der JavaScript-basierte HTML5-Shim, der IE6-8 dabei hilft, HTML5-Elemente zu verstehen, nicht, sodass der Browser HTML5-Elemente nicht formatiert. Dies betrifft möglicherweise nur eine kleine Anzahl von Benutzern, aber warum sollten sie überhaupt betroffen sein?

und

Die Kopf- und Fußzeilenelemente sind ein klassischer Fall, bei dem gebräuchliche Begriffe sehr unterschiedlich verwendet werden.

Die Spezifikation besagt, dass keines dieser Elemente neue Abschnitte in der Dokumentgliederung erstellt, obwohl sie oft als gleichwertig mit Abschnitt, Navigation, Artikel und Seite dargestellt werden. Tatsächlich tun sie überhaupt nichts. Sie werden lediglich eingefügt, um Bereiche eines bestimmten Abschnitts in der Dokumentgliederung abzugrenzen.

Folgendes sagt die Spezifikation über den Header aus: Das Header-Element stellt eine Gruppe von Einführungs- oder Navigationshilfen dar.

Hinweis: Ein Header-Element soll normalerweise die Überschrift des Abschnitts enthalten (ein h1–h6-Element oder ein hgroup-Element), dies ist jedoch nicht erforderlich. Das Header-Element kann auch zum Umschließen des Inhaltsverzeichnisses eines Abschnitts, eines Suchformulars oder relevanter Logos verwendet werden.

und Fußzeile: Das Fußzeilenelement stellt eine Fußzeile für den Abschnittsinhalt seines nächsten Vorfahren oder das Abschnittswurzelelement dar. Eine Fußzeile enthält in der Regel Informationen über den jeweiligen Abschnitt, beispielsweise wer ihn geschrieben hat, Links zu verwandten Dokumenten, Copyright-Daten und Ähnliches.

In HTML5 ist das Body-Element eigentlich das Root-Abschnittselement, daher soll eine allgemeine Kopf- und Fußzeile den Root-Body-Abschnitt beschreiben. Jeder Abschnitt kann eine Kopf- und/oder Fußzeile haben – sie sind nicht nur für allgemeine Kopf- und Fußzeilen gedacht, wie wir vielleicht angenommen haben. Einzelne Kommentare können beispielsweise jeweils eine Kopf- und Fußzeile haben. Tatsächlich gibt die Spezifikation, wie bereits erwähnt, tatsächlich ein Beispiel für die Verwendung einer Fußzeile in einem Kommentar über dem eigentlichen Kommentarinhalt an. Das ist richtig, in HTML5 sind Kommentare Artikel, und sie können eine Fußzeile als Kopfzeile haben, und das steht in der eigentlichen Spezifikation. Wollten Sie ein Fußzeilenelement für die Kopfzeile Ihrer Kommentare? NEIN? Nun, du hast eins.

Auch hier übernimmt HTML5 gängige Begriffe und verwendet sie auf eine Weise, die für den normalen Webautor nicht erkennbar ist.

Das ist Aufteilung, was fehlt?

Aber es gibt etwas, das wir bei der HTML-Implementierung der Abschnittsaufteilung noch nicht berücksichtigt haben. Hast du es entdeckt? Wir haben die Abschnittselemente, aber kein generisches h-Element. Keine Sorge, die Lösung ist in der Spezifikation:

HTML5 möchte abwärtskompatibel sein, daher hat die WHATWG beschlossen, kein h-Element einzuführen (trotz der Einführung einer Reihe neuer Abschnittselemente) und möchte stattdessen das h1-Element zum generischen h-Element umfunktionieren. Verwenden Sie h1 überall und lassen Sie den HTML5-Gliederungsalgorithmus sein wahres Niveau bestimmen … so lautet zumindest die Theorie.

Dies ist aus mehreren Gründen eine schreckliche Idee. Die beiden wichtigsten sind die Zugänglichkeit und das Design.

Barrierefreiheit

Die Verwendung von h1 überall ist sehr schlecht für die Barrierefreiheit. Blinde Benutzer verlassen sich stark auf die Überschriftenstruktur einer Website. Es ist wichtig, dass wir uns alle daran erinnern, wie wichtig die Überschriftenstruktur für die Barrierefreiheit ist. Zum Beispiel ein Dezember 2008 Umfrage unter über 1000 Screenreader-Benutzern Eine von WebAIM durchgeführte Studie ergab, dass 76 % der blinden und sehbehinderten Benutzer „immer oder oft“ nach Überschriften navigierten, wenn diese verfügbar waren. Und eine Umfrage vom Mai 2012 ergab, dass 82,1 % der Überschriftenebenen beim Navigieren auf einer Webseite „sehr nützlich“ oder „eher nützlich“ waren. (Das ist gute, praktische Forschung, also beachten Sie.)

Wenn überall h1s vorhanden sind, wird es für blinde Benutzer schwieriger, auf Websites zu navigieren. Theoretisch würden Screenreader stattdessen den Gliederungsalgorithmus von HTML verwenden und anhand der Dokumentgliederung navigieren. Angesichts der Art und Weise, wie Autoren angewiesen wurden, Abschnittselemente zu implementieren, ist die Gliederung ein Durcheinander, und der Versuch, in Dokumentgliederungen zu navigieren, über die überhaupt nicht nachgedacht wurde, würde dies tun für blinde Benutzer noch schlimmer sein.

Die HTML5-Spezifikation bietet einen Ausweg: Verwenden Sie weiterhin die entsprechenden h1-h6-Ebenen, um die Abwärtskompatibilität aufrechtzuerhalten. Aber jetzt verwalten wir zwei Dokumentgliederungen in einem Dokument, und angesichts der Probleme, die Autoren hatten, als sie die Dokumentgliederung überhaupt berücksichtigten, ist die Wahrscheinlichkeit groß, dass irgendjemand sowohl eine logische H1-H6-Gliederung als auch eine logische, ordnungsgemäße Gliederung pflegt Die in Abschnitte unterteilte HTML5-Gliederung scheint bestenfalls abgelegen zu sein.

Styling

Aber es kommt noch schlimmer. Nehmen wir an, wir möchten mit einer reinen HTML5-Gliederung arbeiten und verwenden überall h1s. Denken Sie daran, dass h1 in der HTML5-Spezifikation nur ein generisches h-Element ist. Sein tatsächliches Niveau wird dadurch bestimmt, wie tief es in Abschnittselementen verschachtelt ist.

Wie stylen wir es? Nun, wir könnten allen unseren h1-Elementen Klassennamen hinzufügen, damit wir sie auswählen können, aber das widerspricht dem erklärten Ziel von HTML5, das Authoring zu vereinfachen; und wir können genauso gut bei h1-h6 bleiben (die alle als generische h-Elemente in einer HTML5-Gliederung behandelt werden).

Wir könnten versuchen, sie durch die Kaskade zu stylen, aber das wird schnell absurd Nicole Sullivan hat darauf hingewiesen. Tatsächlich beschreibt „absurd“ es nur am Anfang. Wenn Sie die möglichen Kombinationen von Abschnitt, Artikel, Navigation und Seite in Betracht ziehen und einen generischen Stil für eine Überschrift erstellen möchten, die beispielsweise fünf Ebenen tief ist (dh das Äquivalent von h5), müssten Sie Stile für alle schreiben mögliche Kombinationen, die bekommt absolut lächerlich. Hier ist der generische Stil für ein h3-Element:

Artikel beiseite nav h1, Artikel beiseite Abschnitt h1,
Artikelnavigation beiseite h1, Artikelnavigation Abschnitt h1,
Artikelabschnitt beiseite h1, Artikelabschnitt nav h1, Artikelabschnitt Abschnitt h1,
beiseite Artikelnavigation h1, beiseite Artikelabschnitt h1,
beiseite Navigationsartikel h1, beiseite Navigationsabschnitt h1,
beiseite Abschnitt Artikel h1, beiseite Abschnitt nav h1, beiseite Abschnitt Abschnitt h1,
Navigationsartikel beiseite h1, Navigationsartikelabschnitt h1,
Navigation beiseite Artikel h1, Navigation beiseite Abschnitt h1,
Navigationsabschnitt Artikel h1, Navigationsabschnitt neben h1, Navigationsabschnitt Abschnitt h1,
Abschnitt Artikel beiseite h1, Abschnitt Artikel Navigation h1, Abschnitt Artikel Abschnitt h1,
Abschnitt beiseite Artikel h1, Abschnitt beiseite Nav h1, Abschnitt beiseite Abschnitt h1,
Abschnittsnavigation Artikel H1, Abschnittsnavigation Seite H1, Abschnittsnavigation Abschnitt H1,
Abschnitt Abschnitt Artikel h1, Abschnitt Abschnitt beiseite h1, Abschnitt Abschnitt nav h1, Abschnitt Abschnitt Abschnitt h1 {
Schriftgröße: 1,00em;
}

Doch genau das bieten uns die Strukturelemente von HTML. Was für ein Chaos.

Hungrig auf mehr? Teil drei dieses Artikels ist jetzt verfügbar und Lukes Buch „The Truth About HTML5“ ist für begrenzte Zeit über unsere Schwesterseite erhältlich MightyDeals.com mit unglaublichen 50 % Rabatt.

Verwenden Sie Artikelelemente mehrfach in einem Dokument? Sind Abschnitte nützlich oder sollten wir bei Divs bleiben? Teilen Sie uns Ihre Meinung in den Kommentaren mit.

Ausgewähltes Bild/Miniaturansicht, Verwendungszwecke Strukturbild über Shutterstock.