Textformate und HTML-Semantik <H1>

HTML-Text ist ein Text mit semantischen Auszeichnungen. Die Formatierung mit HTML-Tags markiert in erster Linie die Bedeutung der Text-Elemente, nicht ihre visuelle Erscheinung. Im Folgenden geht es um die korrekte Verwendung von HTML-Tags und darum, wie man das Erscheinungsbild der Text-Elemente steuert.

Überschriften <h2>

Semantik <h3>

Hierarchien <h4>

Überschriften sind hierarchisch organisiert. Für diese Seite sind vier Überschriften-Stile angelegt – Überschrift 1 bis 4. In HTML sieht eine Überschrift so aus: <h1>Ich bin eine Überschrift</h1>. Das h steht für „Heading“, weswegen Überschriften auch H1, H2, … genannt werden.

Die Hauptüberschrift

Suchmaschinen interpretieren eine H1 als die Hauptüberschrift einer Seite. Es sollte daher auf jeder Unterseite nur eine einzige H1 geben. Die H1 ist schon im Quellcode der Seite abgeleg, und enthält deren Titel, ist visuell aber ausgeblendet. Für korrekte Semantik sollte man bei der Textbearbeitung also mit einer H2 starten.

Visuelle Erscheinung

Es kann passieren, dass semantisch eine H2 angebracht ist, man aber möchte, dass sie wie eine H3 oder H4 aussieht. Dafür gibt es das Dropdown-Menü „Aussehen“, mit dem sich die Stile anpassen lassen, ohne Kuddelmuddel bei der Semantik anzurichten.

Überschriften-Anhängsel, die nicht ganz so wichtig sind <small>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a odio venenatis, gravida leo et, molestie est. Morbi malesuada nulla ex, id facilisis dui consequat a. Suspendisse ipsum sapien, consequat vitae lobortis commodo, ultricies sit amet elit. Integer quis lacinia nisi.

Das Anker-Menü

Überschriften können als Anker-Menü-Einträge formatiert werden. Dazu gibt es den Button „Anker-Menu“. Draufgeklickt, und es erscheint ein Dialogfeld, in dem man Namen des Menü-Eintrags festlegen kann. Die ID, die an gleicher Stelle vergeben wird, wird mit einem Hash-Zeichen # an die URL angehängt, wenn auf einen Menüeintrag geklickt wurde. Erlaubte Zeichen einer ID sind Kleinbuchstaben, Ziffern und Bindestriche -. Es ist darauf zu achten, dass eine ID nur einmal pro Seite vergeben wird.

Absatz-Stile

Einleitungen oder auch „Lead“ und sind abgesetzt von normalen Absätzen. Sie haben keinen semantischen Gehalt, sondern dienen der Lesefreundlichkeit.

Auf den Lead folgt in der Regel ein normaler Absatz. Auf dieser Seite die einzige Stelle mit Blindtext. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a odio venenatis, gravida leo et, molestie est. Morbi malesuada nulla ex, id facilisis dui consequat a. Suspendisse ipsum sapien, consequat vitae lobortis commodo, ultricies sit amet elit. Integer quis lacinia nisi. Phasellus volutpat porta leo lacinia efficitur. Donec lobortis, elit eget blandit mollis, metus nulla dictum nulla, sit amet mollis erat turpis eu felis. Vestibulum eget placerat odio. In quis.

Meldungen …

… werden vermutlich gar nicht gebraucht. Aber da es sie schon gibt, hab ich sie mal dringelassen.

Die Erfolgsmeldung: Prima, es hat geklappt.

Die Info-Meldung: Wussten Sie schon: Der Tisch hat vier Beine damit die Tischplatte nicht herunterfällt.

Die Warnmeldung: Bitte achten Sie auf Ihr Handgepäck.

Und die Gefahrenmeldung. Gefahr am Abgrund: Ihr Computer könnte abstürzen.

Listen

Listen haben auch einen sematischen Gehalt. Es folgt eine Liste mit Bulletpoints. In HTML heißt das <ul>, was für „Unordered List“ steht.

  • Mit dem ersten Listeneintrag
  • Auf den der Zweite Listeneintrag folgt.
  • Der vierte Listeneintrag.
  • Ich hab mich geirrt, eben.

Es gibt auch „Ordered Lists“, auch <ol> genannt.

  1. Mit dem ersten Listeneintrag
  2. Auf den der zweite Listeneintrag folgt.
  3. Der vierte Listeneintrag.
  4. Ich hab mich geirrt, eben.

Zitat

Auch eine semantische Auszeichung: ein Zitat, in HTML auch <blockquote> genannt.

Ich bin muss ja ein schlauer Mensch sein, wenn ich hier zitiert werde.

Ausrichtungen

Egal ob linksbündig, …

… zentriert …

… oder rechtsbündig: Der semantische Gehalt ist null.

Zeichenstile

Semantische Stile

Es gibt eine ganze Reihe von Zeichenstilen mit semantischer Bedeutung. Strong, Betont (<em> für „Emphasized“), Small, Big, Durchgestrichen, Code.

Visuelle Stile

Die Textfarbe hat keinen sematischen Gehalt.

Zeilenwechsel und Trennungen

Die Return-Taste erzeugt einen neuen Absatz. Mit Shift-Return wird ein einfacher Zeilenwechsel eingefügt.

Im heutzutage herrschenden Wirrwarr von Geräten können wir nicht davon ausgehen, die Fläche genau zu kennen, in die unser Text einfließt. Fatal ist es daher,
mit manuellen Zeilenwechseln oder Trennungen zu ar-
beiten, um eine gewüschte Breite des Textfeldes zu er-
reichen. Wenn man diese Stelle hier mal auf einem
iPhone oder mit kleingezogenem Browserfenster
anschaut, wird schnell deutlich, was gemeint ist.

Eine manuelle Trennung zerstört zudem die maschinelle Les- barkeit eines Wortes. Eine Suchmaschine liest im dem Wort eben nicht Lesbarkeit sondern die einzelnen Wörter Les und barkeit. Unwahrscheinlich, dass jemand sowas jemals googeln wollen würde …

Glücklicherweise gibt es die Möglichkeit, weiche Trennungen einzufügen, um beispielsweise solch fürchterliche Wörter wie Re­zi­prok­duk­tus­emp­feh­lungs­mar­ke­ting­spe­zia­list zu bändigen. (Auch hier kann man mal mit der Browserfenstergröße herumspielen und gucken, was mit dem Wort passiert.