Responsive Webseiten-Vorlage

Startseite > Textgestaltung

Texte gestalten, Textlinks setzen

• ⇓ Texte auszeichnen: fetten, schrägen oder durchstreichen
• ⇓ Textmarker-Effekt, Quellcode-Begriffe im Fließtext
• ⇓ Zusätzliche Zwischenüberschriften verwenden
• ⇓ Zitate im Fließtext kennzeichnen
• ⇓ Wörter im Fließtext abkürzen und Info-Tipps anzeigen
• ⇓ Texte mit abweichender Sprache auszeichnen
• ⇓ Ausgehende Links setzen: Textlinks

Texte auszeichnen: fetten, schrägen oder durchstreichen

Text fetten oder schräg stellen

Bei der Fett- und Schräg-Darstellung von Wörtern muß man unterscheiden: Wenn die Wörter semantisch betont werden sollen, bettet man sie in die HTML-Elemente strong (fett, sehr wichtig) oder em (schräg / kursiv, halb wichtig) ein. Für die rein optische Hervorhebung gibt es (immer noch) die HTML-Elemente b (fett) und i (schräg / kursiv).

Wer für das bloße Aussehen lieber CSS-Regeln benutzt, kann auf meine Klassen fett und kursiv zurückgreifen, die über das HTML-Element span aufgerufen werden: <span class="fett">(hier steht fetter Text)</span> Das Element span ist ein Inline-Element und erzeugt keinen Umbruch.

Text durchstreichen

Das HTML-Element s, mit dem Text durchgestrichen dargestellt wird, war vom W3C schon fast ausgemustert worden. Mit dem HTML-Standard HTML5 ist es wieder auferstanden. Wer für den Durchstrich lieber eine CSS-Regel nutzen will, kann meine Klasse dstrich verwenden, die über das HTML-Element span aufgerufen wird. Beispiel: Ein Paar Bratwürste mit Kraut und Brot kosteten früher 2,60 kosten jetzt 6,20 Euro. Das ist kein Druckfehler ;-) Der Quelltext für den alten Preis: <span class="dstrich">kosteten früher 2,60</span>

Textmarker-Effekt, Quellcode-Begriffe im Fließtext

Text-Hintergrund färben: Textmarker-Effekt

Diese Wörter haben einen blauen, gelben, grauen und grünen Hintergrund. Hierfür werden über das HTML-Element span meine CSS-Klassen blau, gelb, grau oder gruen verwendet. Beispiel: <span class="gruen">(hier steht Text vor grünem Hintergrund)</span> Solche Textmarker-Effekte sind sparsam zu verwenden, sonst wird es den Besuchern zu bunt ;-)

Quellcode-Begriffe im Fließtext auszeichnen

Mit dem HTML-Element code können Quellcode-Begriffe im Fließtext ausgezeichnet werden. Das Element code ist ein Inline-Element und sozusagen der kleine Bruder des Block-Elements pre. Auch hierfür verwenden die Browser eine Schriftart wie monospace, die alle Zeichen einschließlich Leerzeichen jeweils gleich breit anzeigt. Im Text vorkommende HTML-Sonderzeichen wie etwa die größer- und kleiner-Zeichen müssen maskiert werden. Per CSS-Regel habe ich die Silbentrennung für code-Elemente ausgeschaltet und als Textfarbe #DF0066 (das kontrastreiche Weinrot) festgelegt. Quelltext-Beispiel: das Element <code>code</code> ... ;-)

Zusätzliche Zwischenüberschriften verwenden

In dieser Vorlage werden nur Überschriften erster, zweiter und dritter Ordnung (HTML-Elemente h1, h2, h3) verwendet, weil nur diese bei Google™ relevant sind. Für zusätzliche Zwischenüberschriften unterhalb von h3 kann man über das Element p die CSS-Klasse balken nutzen und den Inhalt mit dem Element strong auszeichnen (das zählt bei Google mehr als eine Überschrift 4. Ordnung h4). Quelltext-Beispiel:

<p class="balken">
  <strong>Zwischenüberschrift</strong>
</p>

Zitate im Fließtext kennzeichnen

Um ein Zitat im Fließtext zu kennzeichnen, verwenden Sie das HTML-Element q. Dann werden An- und Abführungszeichen (Gänsefüßchen vorne und hinten) automatisch ergänzt sowie die Schrift schräg dargestellt. Im Deutschen werden Gänsefüßchen oft auch dann verwendet, wenn man einen bestimmten Begriff für lächerlich hält oder gar mißbilligt. Quelltext-Beispiel: <q>Gänsefüßchen</q>

In der von mir wegen der guten Bildschirm-Lesbarkeit bevorzugt verwendeten Fließtext-Schrift Verdana ist das standardmäßige Abführungszeichen (also das rechte Zeichen) doppelt falsch: 1. von oben links nach unten rechts geneigt 2. im Format 99 (statt richtig im Format 66) angezeigt. Ein typografisches Verbrechen. Durch eine CSS-Regel für das Element q erreiche ich wenigstens die richtige Neigung von unten links nach oben rechts; zumindest einer der beiden Verdana-Fehler ist damit behoben ausgebügelt.

Wörter im Fließtext abkürzen und Info-Tipps anzeigen

Webentwickler, die gerne Abkürzungen verwenden, können sich des HTML-Elements abbr bedienen. Wenn für das ausgeschriebene Wort ein title-Attribut angelegt wird, zeigen die Browser den abgekürzten Begriff unterpunktet und beim Übermausen das ganze Wort als Info-Tipp an. Im Firefox sieht's schöner aus als in den Chromium-Browsern, finde ich.

(Beispieltext für Abkürzungen)

Mch. Leute wie zB ich haben einen Abk.-Fml. ;-)

HTML-Quelltext für den Fml

<abbr title="Fimmel">Fml.</abbr>

Texte mit abweichender Sprache auszeichnen

Im html-Element aller Seiten sollte das Sprachattribut lang angegeben werden, das die auf der jeweiligen Seite verwendete Sprache angibt. Zulässig sind alle Sprachenkürzel nach ISO 639-1. Die Angabe ist wichtig für die Silbentrennung in Browsern und für die Aussprache von Vorlese-Programmen. Auf diesen Musterseiten habe ich Deutsch als Sprache festgelegt: <html lang="de">.

Wer abweichend hiervon einzelne ausländische Wörter verwendet, sollte sie sprachlich kennzeichnen. Das sorgt (hoffentlich) für die richtige Aussprache von Vorlese-Programmen und für die richtige Silbentrennung. Beispiele: Das Element span ist ein <span lang="en">Inline</span>-Element. Die Halbinsel <span lang="hr"> Pelješac</span> liegt in Süddalmatien.

Das Sprachattribut lang ist auch bei anderen Elementen wie zB a, q, p, div oder section zulässig. Parallele Mehrsprachigkeit für gleiche Inhalte auf einer Seite ist im Hinblick auf Suchmaschinen aber nicht empfehlenswert. Stattdessen sollte für jede verwendete Sprache eine eigene Seite erstellt werden. Die Suchmaschine Google™ wertet die Angaben im lang-Attribut übrigens nicht aus, sondern hat eine eigene Spracherkennung.

Ausgehende Links setzen: Textlinks

Ausgehende Links werden mit dem Inline-Element a erstellt. Die Grundform für einen ausgehenden Textlink ist <a href="https://example.com/">Beispielseite</a>. Einziges Pflichtattribut ist das Attribut href für die Adresse der Ziel-Webseite, denn ohne diese Angabe würde der Link nicht funktionieren. Zwischen Anfangs- und Ende-tag des Elements a wird der im Browser dann sichtbare Linktext eingetragen.

Wie alle HTML-Elemente kann auch das Element a mit zusätzlichen Attributen erweitert werden. Ich selbst verwende ausgehende Links oft mit folgenden Attributen (die Reihenfolge ist egal, und Sie können auch alles in eine Zeile schreiben):

<a class="extern" title="Link zu example.com"
  target="_blank" href="https://example.com/"
  rel="noopener noreferrer">Beispielseite
</a>
  

Erläuterung der Attribute

1. class="extern" (nur für Textlinks): Die Klasse extern zeigt als attribut-bedingte CSS-Zuweisung im Browser hinter dem Link automatisch ein blaues Symbol (kleines Quadrat mit Pfeil nach rechts oben) an.
2. title="Link zu ...": Das Attribut title="..." zeigt im Browser beim Übermausen den Titel-Inhalt an (für Suchmaschinen ist die Angabe belanglos).
3. target="_blank": Dieses Attribut veranlaßt den Browser, das Linkziel in einem neuen Tab zu öffnen. Die Angabe target="_blank" ist umstritten: Manche Leute behaupten, damit würden Besucher bevormundet. Ich verwende die Angabe aber, weil ich keinen Besucher von meinen eigenen Seiten verjage.
4. href="https://example.com/": Im Attribut href wird die Adresse der Ziel-Webseite eingetragen (Pflichtattribut).
5. rel="noopener noreferrer": Diese Werte des Attributs rel dienen dem Schutz der eigenen Webseite gegen Hacker. Näheres hat Mathias Bynens im Artikel About rel=noopener beschrieben.
6. Wenn Sie auf Ihren Seiten inhaltsfremde Gefälligkeitslinks, Werbelinks oder bezahlte Links setzen, empfehle ich dringend, den Inhalt des rel-Attributs um die Angabe nofollow zu ergänzen. Damit entwerten Sie den Link gegenüber Google und vermeiden eine Gefährdung Ihres Rankings: rel="nofollow noopener noreferrer"