Text mit HTML Bedeutung geben

Sonntag, 14 September 2008 16:35 MET

Thema:

Webgestaltung  

Stichworte:

HTML, Suchmaschinen  

 

Text mit HTML Bedeutung geben [hyperkontext | Weblog]

Der Sinn von Textauszeichnungen mit HTML

Mit der Sprache HyperText Markup Language (HTML) markieren wir Texte ihrer Bedeutung nach (Semantik) und geben einer Webseite Struktur, um von Programmen interpretiert und ausgewertet werden zu können. Nicht mehr und nicht weniger.

Textauszeichnungen sind HTML-Elemente, die es jedem verarbeitenden Programm ermöglichen, die Bedeutung auf logische Art zu erfassen und individuell zu verarbeiten. Die sichtbare Anzeige einer HTML-Seite ist dabei nur eine von vielen Optionen.

Leider ist dieses Thema für viele entweder überhaupt nicht existent oder wird nicht ausreichend beachtet, weil die visuelle Gestaltung und Positionierung die offensichtliche – im wahren Sinne des Wortes – Handlungsgrundlage darstellt und die Sinnhaftigkeit einer digitalen Basis kaum hinterfragt wird. Siehe auch einen Beitrag aus 2007 von mir: Drei Missverständnisse der Webpublikation.

Die semantische Auswertung von Textauszeichnungen – wenn überhaupt – ist je nach Programm höchst unterschiedlich.

Unheilvolle Wechselwirkung

Die Tatsache, dass derzeit viele Programme die Bedeutung manch logischer Textauszeichnungen in HTML selten geeignet auswerten, ist wohl das Resultat einer unheilvollen Wechselwirkung:

• Durch seltene oder auch falsche Verwendung einiger Bestandteile der Sprache wird die sinnvolle Auswertung vieler HTML-Elemente durch Programm-Ersteller vernachlässigt.
• Mit der Begründung, dass viele logische Textauszeichnungen durch Programme überhaupt nicht ausgewertet werden, werden sie immer weniger eingesetzt und geraten sogar in Vergessenheit.

Die Bedeutung von digitalen Texten im Web

Nachfolgend habe ich aus meinen Beobachtungen Fragen zusammengestellt, die Editorinnen und Texter oft stellen, wenn sie sich des digitalen Hintergrunds zwar bewusst sind, ihnen aber die praxisbezogene Hilfe fehlt. Nicht berücksichtigt ist hier die tiefergehende Thematisierung mit Abkürzungen und Attributen für Sprachauszeichnungen.

Wir müssen beim Erstellen von digitalen Texten weg von der visuellen Orientierung kommen.

Diese einfachen Tipps in Form von Antworten sollen vor allem das Verständnis schärfen, beim Erstellen von digitalen Texten von der visuellen Orientierung weg zu kommen und die jeweils angebrachte Bedeutung zuzuweisen. Die sichtbare Ausgabe ist eine andere Ebene.

8 Fragen auf einen Blick

1. Mein Text ist einem bestimmten Thema oder Gedanken gewidmet. Wie gebe ich dem die entsprechende Bedeutung?
2. Wie betone ich einzelne Wörter oder Satzteile, die mir in einem Zusammenhang besonders wichtig sind?
3. Ich möchte zitieren. Wie markiere ich das?
4. In meinem Text beschreibe ich die Bedienung eines Programms. Soll ich Tastatureingaben speziell markieren?
5. Wenn ich Teile von Quelltexten eines Programmes anzeige, soll ich das speziell markieren?
6. In meinen Texten zeige ich oft Textabschnitte als Beispiel. Gibt es dafür eine eigene Auszeichnung in HTML?
7. Ich möchte einen Textausschnitt visuell hervorheben oder einrücken. Kann ich das in HTML eigens markieren?
8. Ich möchte Teile des Textes zentrieren. Welches HTML Element verwende ich dafür?

8 Fragen und mehr Antworten

1. Mein Text ist einem bestimmten Thema oder Gedanken gewidmet. Wie gebe ich dem die entsprechende Bedeutung?

Antwort überspringen

Überschriften

Es gibt in HTML eine hierarchische Überschriftenordnung durch die Elemente h1 bis h6. Eine Seite, ein Text wird damit strukturiert (siehe Quellenverzeichnis).

Überschriften und Zwischenüberschriften sollten die wesentliche Botschaft schon beim Überfliegen des Textes klar aufzeigen – Von der Einsicht der Struktur zur Vielfalt der Ansichten (2).

Auswirkung:

• Überschriften werden so gut wie von allen Programmen und Ausgabegeräten in irgendeiner Form nach ihrer semantischen Bedeutung ausgewertet.

  • In assistiven Ausgabeprogrammen (zum Beispiel Screen-Reader) können Überschriften direkt angesprungen werden.
  • Viele Ausgabeprogramme – mittlerweile auch manche Browser zur visuellen Anzeige – zeigen alle Überschriften einer Seite in hierarchischer Listenform an.
  • Suchmaschinen gewichten Überschriften nach ihrer Rangfolge und werten diese nach bestimmten Algorithmen aus.
  • Manch spezielle Search-Engines (zum Beispiel in Intranets für Dokumentensuche) zeigen im Suchergebnis zu jedem gefundenen Dokument die Überschriften bis zur vierten Stufe als Zusammenfassung an.
  • Überschriften bieten den idealen Anknüpfungspunkt bei Programmentwicklungen, Dokumente nach bestimmten Kriterien auszuwerten.

• Überschriften sind die sicherste Methode, unserem Text eindeutige Auswertungsmöglichkeiten mitzugeben.

Stichworte

Die uns wichtig erscheinenden Stichworte sollten wir auch in Überschriften unterbringen. Diese (und weitere wichtig erscheinenden) Wörter sollten anschließend auch innerhalb des Textes mehrmals vorkommen; auch in abgewandelter Form.

Auswirkung:

• Das ist eine – nichts desto trotz sehr wichtige – Methode für die Suchmaschinen-Optimierung, genannt auch SEO (Search Engine Optimization). Suchmaschinen orientieren sich auch an der Häufigkeit bestimmter Wörter, die in Texten und Überschriften vorkommen. Daraus errechnen sie sowohl eine Relevanz, als auch die Verwandtschaft zu ähnlichen Themen.

  Das gilt in vielen Fällen auch für Auswertungsprogramme innerhalb von Netzwerken in Organisationen (Intranet, Extranet).

Inhaltsverzeichnis

Bei sehr langem Text, können wir auch am Anfang ein Inhaltsverzeichnis mit internen Sprungmarken hinzufügen. Oder wir teilen unsere Gedanken in mehrere Beiträge auf – und somit auch unterschiedlich erreichbare URIs (Uniform Resource Identifiers).

Auswirkung:

• Inhaltsverzeichnisse beinhalten meist wichtige Stichworte, die sich später im Text wiederholen. Das wirkt auf Suchmaschinen positiv und erhöht die Relevanz für Programme. Abgesehen davon sind Inhaltsverzeichnisse bei langen Texten auch für menschliche Benutzer sehr gebrauchsfreundlich, weil sie einen schnellen Überblick schaffen.

# zu den Fragen

2. Wie betone ich einzelne Wörter oder Satzteile, die mir in einem Zusammenhang besonders wichtig sind?

Antwort überspringen

Leichte Betonung

Für die leichte Betonung verwenden wir das Element em.

Starke Betonung

strong steht für starke Betonung und ist die Steigerung. Mike Cherim hat diesen semantischen Betonungselementen einen lesenswerten detaillierten Beitrag gewidmet: Using the HTML Em and Strong Elements.

Sehr starke Betonung

Widmen wir einen oder mehrere Absätze einem eigenen Abschnitt mit vorangestellter Zwischenüberschrift per <h[X]>. Diese Überschrift sollte die wichtig erscheinenden Wörter beinhalten.

Listen

An manchen Stellen ist auch der Einsatz von Aufzählungslisten für Hervorhebungen von Textabschnitten sehr geeignet.

Listen sind zwar keine direkte Betonung, allein aber durch die semantische Listenauszeichnung und Herausnahme aus dem Textfluss, messen einige Programme Listen auch etwas andere (höhere) Bedeutung zu.

• Die geordnete, nummerierte Liste mit dem Anfangs-Tag <ol> für feste Abfolgen;
• für nicht festgelegte Rangfolgen die ungeordnete Liste <ul>. 

Auswirkung:

• Damit erhöhen wir die Übersicht für Mensch und Maschine und bieten vielen Programmen gleichzeitig die Möglichkeit, Abschnitte anders oder höher zu gewichten, als den Text zuvor und nachher.

# zu den Fragen

3. Ich möchte zitieren. Wie markiere ich das?

Antwort überspringen

Blockzitat

Hierzu verwenden wir das Block-Element blockquote. Innerhalb von blockquote verwenden wir das Element cite, um den Urheber der zitierten Stelle anzugeben.

Anmerkungen:

• Die meisten Ausgabegeräte zur visuellen Darstellung (Browser) rücken blockquote links etwas ein. Dies kann mit CSS (Cascading Style Sheets) dementsprechend korrigiert und nach eigenen Vorstellungen angepasst werden.

• Verwende niemals blockquote, nur um irgend einen Textabschnitt visuell einzurücken. Leider gibt es einige Editoren-Programme, die genau diesen falschen Einsatz des Blockzitats offerieren.

Zitat im Textfluss

Innerhalb eines Absatzes verwenden wir das Element q. Dieses Element kann auch für Wörter verwendet werden, die wir in einem Zusammenhang unter Anführungszeichen setzen.

Anmerkung:

• Hier sei auf Probleme hingewiesen, die so manche Ausgabegeräte mit dem Inline-Element q haben. Hierzu verweise ich auf einen früheren Beitrag von mir: Zitate in HTML: Das umstrittene Q-Element.

# zu den Fragen

4. In meinem Text beschreibe ich die Bedienung eines Programms. Soll ich Tastatureingaben speziell markieren?

Antwort überspringen

Ja, mit dem Element kbd (steht für Keyboard). Das Element darf aber nur eingebettet in einem sogenannten Block-Element vorkommen.

# zu den Fragen

5. Wenn ich Teile von Quelltexten eines Programmes anzeige, soll ich das speziell markieren?

Antwort überspringen

Ja, mit code. Das Element darf nur eingebettet in einem Block-Element vorkommen.

Anmerkung:

• Wenn wir den Quelltext ohne ungewollte Umbrüche darstellen wollen, dann betten wir den Abschnitt code in das Element pre ein, also <pre><code>. Damit wird der Code genauso dargestellt, wie wir ihn beispielsweise aus dem Quelltext-Editor kopiert haben.

# zu den Fragen

6. In meinen Texten zeige ich oft Textabschnitte als Beispiel. Gibt es dafür eine eigene Auszeichnung in HTML?

Antwort überspringen

Ja, das Element samp.

Anmerkungen:

• Da dies ein Inline-Element ist und kein Block-Element beinhalten darf, können wir allerdings nicht mehrere Absatzblöcke in ein samp fassen. Nicht erlaubt ist also <samp> <p>Text</p> <p>Text</p> </samp>.

• Programm-Code kann durchaus auch mit der Kombination <samp><code> eingeleitet werden.

# zu den Fragen

7. Ich möchte einen Textausschnitt visuell hervorheben oder einrücken. Kann ich das in HTML eigens markieren?

Antwort überspringen

Nein. Das ist Sache der Formatierung und nicht der Textauszeichnung.

Anmerkung:

• Wenn wir etwas hervorheben, also betonen wollen, dann verwenden wir die vorher beschriebenen Methoden zur Betonung (Frage 2) . Natürlich können wir für die visuelle Betrachtung die dort besprochenen Elemente mit CSS so gestalten und platzieren wie wir möchten.

# zu den Fragen

8. Ich möchte Teile des Textes zentrieren. Welches HTML Element verwende ich dafür?

Antwort überspringen

Keines. Sichtbare Zentrierung ist eine Art der Ausgabe und daher keine logische Textauszeichnung von HTML. Vielleicht wollen Sie aber mit der Zentrierung eine Betonung ausdrücken (Frage 2).

Anmerkungen:

• Bis HTML 3.2 gab es das Element center. Damit konnten ganze Teile einer Seite zentriert werden. Verwende niemals das veraltete Element center in modernem Markup!

• Wenn wir für die visuelle Ausgabe etwas zentrieren wollen, dann verwenden wir die Formatierungssprache CSS (Cascading Style Sheets). Hierbei steht es uns frei, auf die Betonungselemente em, strong oder Überschriften zurückzugreifen und diese anschließend für die sichtbare Ausgabe mit CSS mittig zu platzieren.

# zu den Fragen

Qualität ist nicht immer sichtbar

Text für digitale Verwendung braucht dementsprechende Auszeichnungen, weil er von verarbeitenden Programmen soweit wie möglich nach seiner Bedeutung erfasst und ausgewertet werden soll. Derzeit – und wohl noch für lange Zeit – ist das die Auszeichnungssprache HTML.

Das Verfassen eines Textes in HTML ist nicht wie das Schreiben eines Dokumentes in einer Textverarbeitung für den anschließenden Druck.

Voraussetzung für Qualität ist, als Anbieter die Bestandteile seines Produktes genau zu kennen.

Texte im Web sind nicht ganz einfach der Wurmfortsatz des Papierdruckes und werden auch nicht so archiviert.

Das Wissen um diesen Unterschied sollte unser Bewusstsein schärfen. Programmiererinnen von Text-Editoren und Online-Texter sollten motiviert sein, ihre Produkte in diesem Sinne qualitativ zu verbessern.

Noch einmal möchte ich darauf hinweisen, dass diese paar Tipps hauptsächlich die Textauszeichnungssprache HTML wieder ins Gedächtnis rufen sollen. Denn das Thema ist natürlich noch viel weitreichender (weitere Elemente, Abkürzungen, Sprachauszeichnungen, diverse Attribute, Grenzfälle und Interpretationen).

Abschnitt 1 von 1

---

Quellenverzeichnis

1. SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Überschriften [selfhtml.org]
2. Überschriften und Absätze – Einführung in XHTML, CSS und Webdesign [jendryschik.de] – Überschriften: Die Elementtypen h1, h2, h3, h4, h5 und h6
3. SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Logische Auszeichnungen im Text [selfhtml.org]
4. Auszeichnung im Text – Einführung in XHTML, CSS und Webdesign [jendryschik.de] – Logische Textauszeichnung: Die Elementtypen em, strong, dfn, code, samp, kbd und var
5. Zitate – Einführung in XHTML, CSS und Webdesign [jendryschik.de]

Weitere Verweise zum Thema

• The Most Important Thing Is to Get the HTML Right [meiert.com] – (Hinzugefügt am 3. Oktober 2008)

Externe Verweise dieses Artikels wurden zuletzt am 3. Oktober 2008 auf Relevanz geprüft.

Datum:

veröffentlicht am 14 September 2008, 16:35 MET.

Artikel:

Text mit HTML Bedeutung geben [hyperkontext | Weblog]

Kurz-URL:

http://hyperkontext.at/s/159

Thema:

Webgestaltung 

Stichworte:

HTML, Suchmaschinen 

---

Dieser Artikel bezieht sich intern auf frühere Einträge:

• Textauszeichnungen in HTML mit Texteditoren vom 18. Juni 2007

Interne Bezugnahme von neueren Artikeln

1. HTML-Element samp im Beispiel vom 27. August 2010

Dieser Eintrag kann nicht mehr kommentiert werden.

---

Mögliche themenverwandte Artikel aus dem Weblog

• Rezension: Das große Little Boxes-Buch von Peter Müller vom 25. Dezember 2011
• August 2011 im Kontext vom 30. September 2011
• Juli 2011 im Kontext vom 3. September 2011
• HTML5-Element menu: Nicht für Website-Navigation gedacht vom 29. Juli 2011
• Juni 2011 im Kontext vom 13. Juli 2011

Blättern (chronologisch)

« neuerer Artikel

Webstandards und die scheinfrommen Prediger von Google

älterer Artikel »

August 2008 im Kontext

---

Navigation Weblog

• Alle Artikel (202)
• Ausgewählte Artikel

Themen

• Webgestaltung
• Kommunikation
• Empfehlungen
  • Bücher

Archiv

• Jahr 2011
• Jahr 2010
• Jahr 2009
• Jahr 2008
• Jahr 2007
• Kommentare (184)
• Toplisten