Semantisches HTML
Warum sollte die Gliederung einer Webseite auch im HTML erkennbar sein?
Programme, die den HTML-Code einer Webseite auswerten, können daraus erkennen, welche Rolle einzelne Inhalte haben. Eine Überschrift lässt sich im Browser zwar allein durch große, fette Schrift hervorheben. Erst die passende Kennzeichnung im HTML hält jedoch ausdrücklich fest, dass dieser Text eine Überschrift ist.
Semantisches HTML macht auch Zusammenhänge erkennbar: welche Überschrift einen Abschnitt einleitet, welche Schritte zu einer Anleitung gehören und welche Angaben in einer Tabelle zusammenstehen. Diese Informationen können KI-Systeme nutzen, wenn sie den HTML-Code einer Webseite für die Beantwortung einer Frage auswerten.
Was die HtmlRAG-Studie über die Verarbeitung von HTML zeigt
In der Studie „HtmlRAG“ untersuchen die Autoren, wie abgerufene Webseiten für die Beantwortung von Fragen aufbereitet werden können. Sie befassen sich mit Retrieval-Augmented Generation, kurz RAG. Bei diesem Verfahren erhält ein Sprachmodell zusätzliche Informationen aus abgerufenen Dokumenten, um eine Frage zu beantworten.
In der HtmlRAG-Studie beschreiben die Autoren ein Problem bei der Umwandlung von HTML in reinen Text: Kennzeichnungen für Überschriften und Tabellen können dabei verloren gehen. Ihr Verfahren bereinigt die abgerufenen HTML-Dokumente und wählt daraus Inhalte für die jeweilige Frage aus. Wichtige Strukturen sollen dabei erhalten bleiben. In den Versuchen konnten die Sprachmodelle mit den aufbereiteten HTML-Inhalten Fragen genauer beantworten als mit reinem Text.
Überschriften kennzeichnen Themen und Unterthemen
Die HTML-Elemente h1, h2 und h3 stehen für unterschiedliche Überschriftenebenen. Die Hauptüberschrift einer Seite wird mit h1 gekennzeichnet. Eine h2-Überschrift beginnt einen größeren Abschnitt; eine h3-Überschrift gliedert ein Unterthema innerhalb dieses Abschnitts. Die Ebenen sollen dem Aufbau des Textes folgen. So wird erkennbar, welche Erläuterungen zu welchem Thema gehören.
Auch ganze Inhaltsbereiche lassen sich kennzeichnen. Das Element section fasst einen thematisch zusammengehörigen Abschnitt zusammen, in der Regel mit einer eigenen Überschrift. Das Element article bezeichnet einen eigenständigen Beitrag, der auch außerhalb der Seite für sich verständlich sein kann.
Wie HTML Definitionen, Schrittfolgen und Tabellen kennzeichnet
Eine Definitionsliste verbindet Begriffe mit ihren Erklärungen. Im HTML kennzeichnet dl die gesamte Liste, dt den jeweiligen Begriff und dd die dazugehörige Erklärung. Die Zuordnung bleibt dadurch im Code erkennbar.
Für eine Anleitung mit aufeinanderfolgenden Schritten eignet sich eine geordnete Liste. Das HTML-Element ol kennzeichnet, dass die Reihenfolge der Einträge wichtig ist. So bleibt der Ablauf auch in der technischen Gliederung festgehalten.
Eine Tabelle ordnet gleichartige Angaben in Zeilen und Spalten an. Für Vergleiche lässt sich damit zeigen, welche Werte oder Eigenschaften zusammengehören. Das HTML-Element table kennzeichnet diese Angaben als Tabelle.
In der Studie „Better Think with Tables“ verglichen die Autoren, wie Sprachmodelle dieselben Angaben als Tabelle und als Fließtext verarbeiten. Untersucht wurden Aufgaben zur Datenauswertung, bei denen etwa Informationen nach mehreren Bedingungen ausgewählt werden mussten. Mit der tabellarischen Anordnung erzielten die untersuchten Modelle bessere Ergebnisse. Die Studie belegt damit Vorteile von Tabellen für diese Aufgaben; sie untersucht nicht die Wirkung einzelner HTML-Elemente auf die Sichtbarkeit einer Website.
Den Hauptinhalt von Navigation und Footer trennen
Das HTML-Element main kennzeichnet den Hauptinhalt einer Webseite. Die Navigation der Website und der wiederkehrende Fußbereich am Seitenende, der Footer, stehen außerhalb dieses Bereichs. Programme, die diese HTML-Gliederung auswerten, können dadurch den Hauptinhalt von den wiederkehrenden Bereichen unterscheiden.
Die Kennzeichnung des Hauptinhalts mit dem HTML-Element main hilft dabei, die für eine Frage wichtigen Informationen zu erkennen, ohne sie mit Navigationslinks oder anderen wiederkehrenden Angaben zu vermischen. Der Text im Hauptbereich muss dafür selbst klar gegliedert sein: Jede Überschrift benennt das Thema des folgenden Abschnitts, und zusammengehörige Aussagen stehen beieinander.
HTML-Elemente nach ihrer Funktion auswählen
Die HTML-Elemente div und span fassen Inhalte zusammen, ohne ihnen eine bestimmte inhaltliche Funktion zuzuweisen. Sie können etwa für die Gestaltung verwendet werden. Aus einer solchen Kennzeichnung allein geht jedoch nicht hervor, ob der Inhalt eine Überschrift, eine Liste oder eine Definition ist. Die Webentwickler verwenden deshalb für solche Inhalte die jeweils passenden HTML-Elemente.
Semantisches HTML beschreibt den Aufbau der sichtbaren Inhalte. Strukturierte Metadaten sind zusätzliche maschinenlesbare Angaben über die Seite. Beide ergänzen sich: Metadaten ersetzen die Gliederung der Inhalte im HTML nicht.
W3C Web Accessibility Initiative: „Headings“ und „Page Sections“. Die Anleitungen erläutern die semantische Gliederung von Webseiten.
HTML-Standard: Gliederung von Inhalten, Listen und Seitenbereichen
https://html.spec.whatwg.org/multipage/grouping-content.html
Studie: „HtmlRAG: HTML is Better Than Plain Text for Modeling Retrieved Knowledge in RAG Systems“
https://arxiv.org/abs/2411.02959
Studie: „Better Think with Tables: Tabular Structures Enhance LLM Comprehension for Data-Analytics Requests“
https://arxiv.org/abs/2412.17189
Wenn Sie erfahren möchten, wie Sie die Inhalte und die Struktur Ihrer Website für KI-Systeme verbessern können, vereinbaren Sie ein kostenloses Erstgespräch mit mir.