HTML/Tutorials/Textauszeichnung

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Während es im vorigen Kapitel um die Gruppierung von Textabschnitten ging, versteht man unter Textauszeichnung die Kennzeichnung von Textstellen mit einer besonderen Bedeutung.

Innerhalb einer Textpassage lassen sich besonders wichtige Informationen hervorheben – zum Beispiel durch Zentrieren, Einrücken, unterschiedliche Schriftgrößen und -farben oder Schriftschnitte in kursiv und bold. Während eine Textverarbeitung wie z. B. Word nur Wert auf das Aussehen legt, können Sie den Text von Webseiten nach seiner inhaltlichen Bedeutung auszeichnen, da Webseiten nicht nur am Bildschirm, sondern auch von Screenreadern gelesen und von Suchmaschinen ausgewertet werden.

Beachten Sie: Bei den Elementen zur Textauszeichnung handelt es sich um sogenannte Inline-Elemente. Deshalb bleibt beispielsweise eine Zuweisung von Länge oder Breite zunächst einmal wirkungslos.

Wie die Browser der verschiedenen Nutzer die Elemente zur Textauszeichnung darstellen, darauf haben Sie mit HTML allein keinerlei Einfluss. Die Browser benutzen zwar default-Einstellungen, diese können sich aber von Browser zu Browser unterscheiden.

Schreib- und Gestaltungsregeln

Es ist empfehlenswert, Texten eine moderne Seitenstruktur mit den neuen HTML5-Elementen wie article, aside und footer zu geben. Verwenden Sie jedoch diese Elemente und auch eigenschaftslose div-Elemente nur sparsam.

Jeder Textblock sollte seine eigene Überschrift haben. Durch die Verwendung der verschiedenen Überschriftenebenen können Sie dem Text eine auch für Screenreader und Suchmaschinen interpretierbare Struktur geben.

Abweichend von Textdokumenten haben sich im Webdesign einige Grundsätze herausgebildet.

Während DIN A4-Seiten oft im Blocksatz gestaltet sind, entstehen dadurch gerade auf kleineren Viewports zu große Lücken zwischen längeren Wörtern.

Empfehlung: Verwenden Sie im Webdesign Flattersatz und verzichten Sie auf text-align: justify;.

Hervorhebungen

span

Das span-Element (engl span für überspannen) ist ein Element, das Text und andere Inline-Elemente enthalten kann, selbst aber keine semantische Bedeutung hat und nichts bewirkt. Es ist dazu gedacht, um mit Hilfe von CSS formatiert zu werden.

Beispiel ansehen …
<h1>Auch <span>grüne</span> Weihnachtsbäume werden <span>braun</span>.</h1>

Das Beispiel zeigt eine Überschrift 1. Ordnung, innerhalb derer zwei span-Elemente festgelegt sind. Den span-Elementen wird mithilfe von CSS eine eigene Schriftfarbe zugewiesen.


Beachten Sie: Oft gibt es Elemente, die eine passende semantische Bedeutung haben.

fett oder kursiv? - b und i

Mit HTML2 wurden einige Textformatierungs-Elemente wie center oder font eingeführt. Auch b und i waren ursprünglich rein präsentationsbezogene Elemente ohne semantische Bedeutung.

  • b (für bold engl. für fett) zeichnet einen Teil eines Fließtextes aus, der sich vom übrigen Text abheben soll, keine besondere Bedeutung hat und üblicherweise in Fettschrift dargestellt wird. Das trifft etwa auf Schlüsselwörter oder Produktnamen zu.[2]
  • i (von italic, kursiv) zeichnet einen Teil eines Fließtextes aus, der sich vom übrigen Text abheben soll, keine besondere Bedeutung hat und üblicherweise kursiv dargestellt wird. Das trifft etwa auf Fachbegriffe, Namen oder Textpassagen, die in einem anderen sprachlichen Zusammenhang stehen, zu.
Beispiel ansehen …
<p>Sie können sich auf der Kundenseite <b>http://example.org/kunden</b> einloggen und Ihre persönlichen Daten einsehen. </p> <p> Ihre Login-Daten lauten:<br> Name: <b>rumpel.stilz</b><br> Passwort: <b>q39a30qPPZ</b> </p>

Wenn es ein Element gibt, welches den Inhalt zutreffender beschreibt, sollte dieses verwendet werden.

Empfehlung: Nutzen Sie etwa
  • das em-Element, um eine andere Betonung auszudrücken,
  • das strong-Element, um eine starke Wichtigkeit auszudrücken oder
  • das mark-Element, um Textabschnitte hervorzuheben.
  • das dfn-Element, um eine Definition eines Begriffes auszuzeichnen.
Beachten Sie: Wenn b und i verwendet werden, ist es meist angebracht, Klassenattribute hinzuzufügen, die beschreiben, was mit der Auszeichnung beabsichtigt wurde, so dass verschiedene Anwendungsfälle voneinander unterschieden werden können.

Betont und stärker betont - em und strong

Nachdem mit dem steigenden Bewusstsein für semantische Auszeichnung rein präsentationsbezogen Elemente verpönt waren, wurden em und strong oft unreflektiert als Ersatz für b und i verwendet. Allerdings haben sie mit HTML eine andere Bedeutung gegenüber der reinen Betonung bewkommen:[3][4]

  • em zeichnet einen Teil eines Fließtextes als anders betont (engl. stress emphasized) aus
  • strong zeichnet einen Teil eines Fließtextes als wichtig (engl. strong importance) aus
Anwendung von strong und em ansehen …
<p>In meinem Hotel in Oslo stellte mir das Zimmermädchen jeden Morgen ein Päckchen mit etwas namens <strong>Bio Tex Bla</strong> hin, ein <em>` Minipakke for ferie ` hybel og weekend `</em> , wie es in der Anleitung hieß.
</p>


mark

Das mark-Element dient dazu, Textstellen aufgrund einer Nutzeraktion oder vermuteter Absicht des Nutzers zu markieren. Dies unterscheidet die Verwendung des mark-Elements von anderen Elementen zur Texthervorhebung wie etwa strong oder em.

Das mark-Element wird verwendet, um

  • auf Textinhalte hinzuweisen
  • Suchbegriffe in Suchergebnissen hervorzuheben
  • vom Seitenautor vorgenommene Hervorhebungen in Zitaten zu kennzeichen
Konzentrationstest ansehen …
<h1>Ein Konzentrationstest</h1> <p>Markieren Sie mit gedrückter <kbd>Strg</kbd>-Taste alle Buchstaben <strong>b</strong>!</p> <button>Führen Sie die Maus über diesen Button um die Lösung anzuzeigen.</button> <div id="testfeld"><div> d d p d p p d p p p d d p d d d <mark>b</mark> p p d d <!-- … --> </div></div> >

Die Browser stellen die mark-Elemente mit unterschiedlichen Farben dar. Diese Darstellung wird unterbunden, wenn der Button nicht gehovert wird.

Empfehlung: Im Beispiel wird das kbd-Element verwendet. Gestalten Sie es mit CSS wie eine Keyboard-Taste.

hoch- und tiefgestellter Text

Sie können ein Textzeichen etwas oberhalb (hochgestellt) oder unterhalb (tiefgestellt) der normalen Basislinie des Typs festlegen:

H2O findet sich überall auf der Erde - alleine die Ozeane umfassen 1.332.000.000 km3 (1.332 × 1018 m3) Wasser. Der jährliche CO2-Ausstoß wird nicht in Millionen m3 , sondern in Millionen Tonnen gemessen.

Hier gibt es mehrere Möglichkeiten der Umsetzung:

  1. Für die meisten Exponentionalzahlen gibt es passende Unicodezeichen.
  2. Die HTML-Elemente sub und sup können beliebigen Text hoch- bzw. tiefstellen. Dies wird in der Regel auch von Screenreadern vorgelesen.[5]
  3. Mit MathML können Sie auch komplexere Terme von der Grundlinie verschieben.

Besonderheiten bei der Formatierung

Eine Tiefstellung mit sub verschiebt einen Teil des Textes vertikal (Browserdefault: sub { vertical-align: sub }), sodass seine Zeilenbox aus der des übrigen Textes herausragt.

Grafik:Unterlänge

Empfehlung: Vergrößern Sie gegebenfalls die Zeilenhöhe mit line-height! Mit open-Type-Fonts können Sie weiteres Fine-Tuning vornehmen.[6]

Editieren mit del und ins

Gerade in immer wieder aktualisierten Web-Dokumenten ist es vorteilhaft, Änderungen (edits) am Dokument sichtbar zu machen.[7] [8]

  • del kennzeichnet einen Teil eines Textes als nicht länger gültig, deleted Text, gelöschter Text.
  • ins kennzeichnet einen Teil eines Textes als eingefügt, inserted Text, eingefügter Text.

Es geht dabei weniger um richtig oder falsch als vielmehr darum, Änderungen nachvollziehbar zu dokumentieren. Wichtig ist das etwa für Gesetzestexte, die sich im Verlauf des Gesetzgebungsverfahrens ändern.

Editierungen mit del und ins ansehen …
<p>Hänsel und <del>Bärbel</del><ins>Gretel</ins> verliefen sich im Wald.</p> <del datetime="2013-03-25" cite="https://de.wikipedia.org/wiki/Sonnensystem/"> <p>In unserem Sonnensystem gibt es 9 Planeten.</p> </del>

Im Zusammenhang mit Änderungsmarkierungen sind zwei Attribute wichtig:

  • datetime, Zeitpunkt der Änderung
  • cite, Quelle, aufgrund der die Änderung vorgenommen wurde.
Beachten Sie: Wie das obige Beispiel zeigt, sind del (und auch ins) Elemente, die entweder als Block- oder als Inline-Elemente fungieren können.

Folgendes Beispiel zeigt ungültiges HTML:

ungültiges HTML
<p> <del> <p>…</p> </del> </p>

s - Falsches auszeichnen

In HTML2 gab es bereits ein mittlerweile obsoletes strike-Element, mit dem Text ausgestrichen werden konnen. Auch das s-Element wurde zwischenzeitlich missbilligt, ist mit HTML5 aber zurückgekommen. Es dient dazu, Text als nicht länger richtig, genau oder relevant auszuzeichnen. Dies ist z. B. bei nicht mehr gültigen Sonderangeboten der Fall.


Falsches mit dem s-Element kennzeichnen ansehen …
s {
  text-decoration: none;
  background-color: red;
  color: white;
  padding: 0 3px;
}
p s {
  background-color: transparent;
  color: inherit;
  padding: 0;
}
s s {
  text-decoration: underline;
  color: red;
  padding: 0 3px;
}
.korrekt {
  font-weight: bold;
  color: green;
}
.korrekt span {
  text-decoration: underline;
  padding: 0 3px;
}

    <h2><span class="korrekt">Standard</span> - <s>Standart</s></h2>
    <dl>
      <dt>Richtige Schreibweise:</dt>
      <dd class="korrekt">Standard</dd>
      <dt>Falsche Schreibweise:</dt>
      <dd><s>Standart</s></dd>
    </dl>
    <p>Wenn man nicht gerade die Art und Weise eines Kiosks meint,
    ist die Schreibweise <em><s>Standar<s