Semantisches Markup

Wozu semantisches Markup ?

Ziel ist die Implementierung einer vom Verfasser gewollten Präsentation des Textes für:

1. Menschen
2. Inhaltsanalyse durch Suchmaschinen
3. JavaScript im Browser zur Implementierung von Interaktion

Die Präsentation kann visuell auf Bildschirmen und Druckern, oder hörbar durch Reader erfolgen. Durch die Präsentation werden die textuelle Information mit zusätzlichen visuellen oder akkustischen Reizen angereichert. Z.B. wirkt ein im Schriftfont Arial präsentierter Text mit schwarzer Schrift auf weißem Hintergrund eher förmilich, während ein Schriftfont, der Schreibschrift immitiert, eher privat, vertraulich wirkt.

Phasen der Implementierung einer Präsentation

Die Textauszeichnung mit Markup ist der erste Schritt bei der Implementierung der Repräsentation. Durch das Auszeichnen von Text mit Tags wird dieser in Teilmengen von Texten aufgeteilt:

Im zweiten Schritt können jeder Teilmenge z.B. durch CSS Layoutregeln zugeordnet werden. Diese definieren das Erscheinungsbild im Detail.

Begriffsbildung semantisches Markup

Da eine Layoutregel immer auf eine durch Markup definierte Teilmenge von Text wirkt, erscheint dieser in einer einheitlichen Präsentation und wird als Block vom Betrachter wahrgenommen. Visuelle Blöcke suggerieren einen Zusammenhang der gebotenen Informationen. Die Textauszeichnung sollte also so erfolgen, das die visuellen Blöcke auch tatsächlich zusammenhängende Informationen darstellen. Semantisches Markup von HTML 5 folgt dieser Idee, indem für grundlegende Strukturen eines Textes wie Artikel, Überschriften und Absätze spezielle Tags bereitgestellt werden.

Beschränkungen in HTML 4

HTML 4 war vom Markup unzureichend, um allegemeine Textstrukturen wie Kopf, Fußzeile, Artikel auszuzeichnen. Man behalf sich mit allgemeinen <div> Blöcken, deren CSS- class Attribut auf allgemein bekannte CSS Klassen verwies wie header, article, footer.

Zudem band HTML 4 Tags an fixe Layouts. Dies schränkte die Präsentationsmöglichkeiten unnötig ein.

Erweiterung in HTML 5

HTML5 führt neue Tags zur Textgliederung wie <header>, <footer>, <article> etc. ein. Das Markup wird durch den Wegfall der Attribute schlanker, allgemeiner und besser lesbar.

Zudem wird das das Prinzip der Trennung zwischen Textauszeichnung und auf diesen aufbauenden Layoutregeln vertieft. Dazu werden bereits bekannte Tags, die ursprünglich die Anwendung fixer Lauoutregeln auf Text definierten, neu als rein semantische Tags interpretiert. Ihre Bindung an fixe Layoutregeln entfällt.

Einschränkungen von HTML 5, und der Sinn von Komponeten, ARIA und Microdata

Die Textauszeichung von HTML 5 beschränkt sich auf:

1. Die Gliederung von Texten (Artikel, Kopf- und Fußzeilen, Listen etc.)
2. Berschreibung von Formularen
3. Die Markierung von Eigennamen, Fachbegriffen, betonten Textstellen
4. Die Dokumentation des Entwicklungsprozesses eines Textes (markieren irrelevat gewordener Tesxtstellen)
5. die Defiinition elementarer Datentypen editierbarer Eigenschaften von präsentierten Geschäftsobjekten (Formularelemente)

Dies ist jedoch für die Programmierung von Webanwendungen, über die Geschäftsprozesse gesteuert werden, unzureichend. Denn für die explizite Darstellung von Geschäftsobjekten definiert HTML keine Regeln. Es ist der Phantasie und dem Geschmack des Programmierers überlassen, wie er z.B. Benutzerkonten einer Anwendung darstellt, die folgende Struktur haben:

Geschäftsobjekte durch Komponenten präsentieren

Die Präsentation eines Geschäftsobjektes mittesl Markup und CSS wird Komponente genannt. Eine mögliche Komponente für einen User wäre:

<article>
  <dl>
     <dt>UserName</dt>
     <dd>Martin</dd>
     <dt>Email</dt>     
     <dd>Martin.Korneffel@mk-prg-net.de</dd>
     <dt>Roles</dt>
     <dd>
        <ol>
            <li>Admin</li>
            <li>Author</li>
        </ol>
     </dd>
  </dl>
</article>

Textauszeichnung mittels Attribute erweitern

Der Trick aus HTML 4, die Grenzen des eingeschränkten Markups durch Attribute zu überwinden, ist in HTML 5 expliziter Bestandteil. Dabei werden zwei Ansätze unterstützt:

1. WAI ARIA: Erweiterte semantische Auszeichung durch Attributen mit der Zielstellung barrierefreier Webseiten
2. MICRODATA Semantische Auszeichnung durch Attributen zwecks besserer Analyse durch Suchmaschinen (Semantisches WEB)

WAI Aria

Quellen:

Mit dem Attribut role kann jedem HTML- oder SVG- Element eine Bedeutung zugewiesen werden. Da das semantische Markup von HTML bereits feste Bedeutungen hat, sind die Werte der Aria- role- Attribute bereits festgelegt (ARIA Defaultrollen).

Sinn macht die Zuweisung von Rollen bei Komponenten oder z.B. SVG Elementen, mit denen anspruchsvolle Textgrafiken erzeugt werden, wobei die semantische Gliederung mittels role Attributen erfolgt.

role=none oder role=presentation nimmt einem Element seine ursprüngliche semantische Bedeutung.

Alte Tags mit neuer Bedeutung

<b> und <i> heben hervor, ohne die Betonung/Bedeutung zu steigern

In HTML 4.01 markierten <b> fett gesetzten, und <i> kursiven Text, und verstießen damit gegen den Vorsatz, Markup ausschließlich zu Strukturierung einzusetzen.

In HTML5 werden mittels <b> z.B. Produkt- oder Typnamen hervorgehoben. Auch Artikel- Previews bez. Teaser können mittels <b> vom restlichen Text abgesetzt werden.

<i> dient in HTML5 zur Hervorhebung von Fachbegriffen/Fremdwörtern. Mittels des Attributs lang kann bei Fremdwörtern auf die Sprache verwiesen werden, aus der sie stammen.

Ein Beispiel ist der Begriff <i lang="en">Parser<i>, der als aus der englischen Sprache stammender Fachbegriff markiert wurde.

In seiner Grundeinstellung stellt der Browser nach wie vor <b> und <i> als fett und kursiv dar. Der Webentwickler kann aber mittels CSS3 Layoutregeln die Darstellung im Sinne der neuen Bedeutungen optimieren.

<code> und <var> zum Hervorheben von Quelltext (Programmiersprache) in Fachartikeln

Variablen in Computerprogrammen oder Platzhalter in Kommandos können mittels <var> markiert werden:
dir Verzeichnispfad.
Hier wurde Verzeichnispfad als Platzhalter im DOS- Kommando dir markiert

Quelltextschnipsel werden mittels <code> markiert:
dir Verzeichnispfad
Hier wurde das komplette DOS- Kommando mittels code markiert.

<s> zur Markierung irrelevant gewordener Textstellen

<s> diente in HTML 4.01 zur Darstellung von durchgestrichenem Text, und hatte damit eine reine Layoutfunktion.

HTML5 macht nun die mit durchgestrichenem Text naheliegende Assoziation von bedeutungslos/irrelevant gewordnenem Text zum primären Inhalt von <s>. Mittels CSS3 kann der Webentwickler diese Bedeutungslosigkeit nun nach seinem belieben visualisieren.

<hr> markiert inhaltliche Brüche in einem Artikel

<small> zur Markierung von Kleingedrucktem

Auch <small> hatte in HTML 4.01 eine reine Layoutfunktion: der gesamte Text innerhalb von <small> wurde im Vergleich zum Standardschriftgrad etwas kleiner dargestellt.

HTML5 definiert für <small> die Bedeutung, Zusatz/Detailinformationen vom restlichen Text abzugrenzen. Während eine Layoutfunktion die Darstellung von Informationen festlegt, wird durch eine Semantikfunktion eine inhaltliche Abgrenzung und Klassifizierung von Informationen realisiert

Neue semantische Elemente zur Textauszeichnung

Zeitangaben mit <time> markieren

Zeitangaben können mittels <time> als solche markiert, und bei Bedarf zusätzlich maschinelesbaren gemacht werden.

Publikationsdatum eines Artikels mit <time pubdate datetime=...> dokumentieren

figure: Grafiken und alternative Darstellungen von Artikelinhalten

Bilder Tabellen und Grafiken, die mit einem Textinhalt in zusammenhang stehen, werden in HTML5 in <figure> Elementen gekapselt.

Einsatz des figure- Elements und des alt Attributs bei Bildinhalten

Ergebnisse von Benutzerinteraktionen markieren

Werden auf einer Webseite z.B. Begriffe durch einen Benutzer gesucht, dann können die Suchergebnisse mittels dem neuen <mark> Element markiert werden.

Neue semantische Elemente für die Gliederung

In HTML 4.01 erfolgte die semantische Gliederung ausschließlich durch eine feste Hierarchie von Überschriften <h1> bis <h6>. Ein semantischer Abschnitt spannt sich dabei zwichen einer Überschrift der Ebene i und einer nachfolgenden der Ebene i oder j < i auf.

In HTML5 neue Abschnittselemente ein, welche die Möglichkeiten der semantischen Gliederung erweitern und verfeinern.

Detailierte Informationen zum HTML5 Outline- Algorithmus gibt es hier