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>
ansehen …

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>
ansehen …

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 Texabschnitte 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>
ansehen …


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> >
ansehen …

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>
ansehen …

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>t</s></s></em> falsch.</p>
    <p>Die korrekte Schreibweise lautet <em class="korrekt">Standar<span>d</span></em>,
    weil Standard eben nichts mit Standarte zu tun hat.</p>
ansehen …

kbd - Tastenkombinationen mit CSS sichtbar machen

Das Element kbd zeichnet einen Teil eines Fließtextes als Benutzereingabe, etwa über die Tastatur, aus. kbd steht dabei für keyboard, eng. Tastatur.

Es wird in den browsereigenen Einstellungen meist nur in einer monospace-Schriftart dargestellt. Im CSS unseres Wikis werden Textauszeichnungen mit kbd mit einem typischen Tastatur-Look versehen:

Klammergriff im Tastatur-Look ansehen …
kbd {
    background: #f9f9f9 linear-gradient(to bottom, #eee, #f9f9f9, #eee) repeat scroll 0 0;
    border: thin solid #aaa;
    border-radius: 2px;
    box-shadow: 1px 2px 2px #ddd;
    font-family: inherit;
    font-size: 0.9em;
    padding: 0 0.5em;
}
ansehen …

Im Beispiel ist ein Textabsatz notiert und innerhalb davon eine Textauszeichnung des sogenannten „Klammergriffs“ mit dem kbd-Element.
Dieses wurde mit CSS so gestylt, dass es optisch einer Computer-Taste ähnelt.

address

Ein address-Element enthält Informationen, wie der Autor oder inhaltlich Verantwortliche einer Seite oder eines Abschnittes zu erreichen ist. Dies muss nicht zwangsläufig eine E-Mail- oder Postadresse sein, sondern kann auch einfach nur ein Link zu einer weiteren Seite mit Kontaktinformationen sein.

Beachten Sie: address-Elemente sind ausschließlich für die Bereitstellung von Kontaktdaten gedacht. Zum Auszeichnen beliebiger Adressen verwenden Sie herkömmliche Absätze.
Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Beispiel zum address-Element</title> <style> body { margin: 2em; } article { border: 2px solid #abc; border-radius: .5em; padding: 1em; } footer { margin-top: 5em; border-top: 1px solid #abc; padding-top: 1em;} </style> </head> <body> <h1>selfhtml-blog</h1> <article> <h1>Blogbeitrag</h1> <p>Inhalt des Beitrages</p> <address> Autor: <a href="../autoren/mustermann.html">Max Mustermann</a> </address> </article> <footer> <address> © 1998-2013 SELFHTML <a href="http://selfhtml.org/impressum.html">Impressum</a> Software: Classic Forum 3.4 </address> </footer> </body> </html>
ansehen …

Abhängig von seinem Umfeld (seinen Elternelementen) enthält das address-Element verschiedene Kontaktinformationen. Das address-Element innerhalb des Artikels enthält einen weiterführenden Link auf eine Seite zum Ersteller des Beitrages, das im footer der Seite verlinkt auf ein Impressum.

Beachten Sie: address-Elemente dürfen keine die Seite strukturierenden Elemente wie etwa article, aside oder Überschriften enthalten. Elemente der Textstrukturierung wie beispielsweise Textabsätze oder Listen sind hingegen möglich.

Kontaktseite

Besonderer Wert sollte auf gut lesbare und zugängliche Kontaktdaten gelegt werden. Im Forum wurde dazu von MrMurphy1 ein Beispiel veröffentlicht, das als Grundlage für dieses Kapitel dient.[9]

Zu einer benutzerfreundlichen Übersicht gehört, keine Abkürzungen zu verwenden. Außerdem sollten entweder jeder oder gar kein Block mit Überschriften versehen werden.

Adressen sollten immer vollständig angegeben werden, auch wenn sich einzelne Zeilen doppeln. So können sie jeweils in einem Rutsch markiert und zum Beispiel in eine Textverarbeitung übernommen werden. Es ist nicht benutzerfreundlich, wenn Daten zwar über die Zwischenablage übernommen werden können, dazu jedoch mehrmals hin- und hergeklickt werden muss.

klickbare Telefonnummer

Telefonnummern müssen kein Text sein. Wenn Sie sie als Link auszeichnen, können Benutzer auf mobilen Geräten mit einem Klick den Wählvorgang einleiten.

Telefonnummer 
  <address>
    <dl>
      <dt>Tel.</dt>
      <dd><a href="tel:+49-89-00000000">089 0000 0000</a></dd>
      …
Beachten Sie: Fügen Sie immer das Pluszeichen und die internationale Vorwahl hinzu, vergessen Sie nicht, die führende Null der Ortsvorwahl zu entfernen.

Nach DIN 5008 sollen die Telefonnummern zwar außer nach der Vorwahl keine Leerstellen enthalten. Bei der Telefonnummer im Linktext können aber zur besseren Lesbarkeit trotzdem zusätzliche Leerzeichen eingefügt werden.

Fax-Nummern werden im allgemeinen nur abgelesen oder kopiert, deshalb sollten sie nur als Text ausgezeichnet werden.

E-Mail-Adresse

Früher war es üblich Links auf eine E-Mail-Adresse mit mailto einzuleiten. Bei einem Klick auf den Link wird dann das Standard-Mailprogramm des Nutzers geöffnet.

Kontaktadressen 
<p>
  Kontaktieren Sie uns per <a href="mailto:kontakt@example.com">Mail an kontakt@example.com</a> 
  oder mit nachfolgendem Formular:
</p>
<form …>

Eine Alternative wäre ein Kontaktformular.


Kontaktadresse -fertiges Ergebnis ansehen …
  <h2>Kontakt</h2>
  <address>
    <dl>
      <dt>Tel.</dt>
      <dd><a href="tel:+49-89-00000000">089 0000 0000</a></dd>

      <dt>Fax</dt>
      <dd>089 0000 0001</dd>

      <dt>Öffnungszeiten</dt>
      <dd><span>Mo–Fr:</span> <span>7:00–21:00 Uhr</span></dd>			
      <dd><span>Sa:</span> <span>9:00–15:00 Uhr</span></dd>

      <dt>E-Mail Adresse</dt>
      <dd><a href="mailto:kontakt@example.com">kontakt@example.com</a></dd>

      <dt>Geschäftsadresse</dt>
      <dd>Fiktives Unternehmen<br/>
        Musterstraße 93<br/>
        80331 München
      </dd>

      <dt>Rücksendungen an</dt>
      <dd>Fiktives Unternehmen<br/>
        Musterstraße 93<br/>
        80331 München
      </dd>
    </dl>
  </address>
ansehen …

Bei den Öffnungszeiten gehört vor und hinter die Bindestriche kein Leerzeichen.

Mit dem neuen Grid Layout ist auch die Positionierung der dl kein Problem mehr:

Kontaktadressen ansehen …
dl.grid { 
  display: grid; 
  grid-template-columns: 1fr 100%; 
}
dd { 
  margin: 0; 
  padding-left: 1em; 
}
dl.grid dd {
  margin-bottom: 1em;
}

a[href^="tel"] { white-space: nowrap; }
ansehen …

Die Beschreibungsliste mit den Kontaktdaten wird mit display: grid zum Raster, das mit grid-template-columns zwei Spalten pro Reihe erhält. Auf eine feste Breitenangabe wird verzichtet, die zweite Spalte soll 100% des Inhalts betragen. Beachten Sie aber, dass dieses Grid nur funktioniert, wenn es zu jedem <dt> genau ein <dd> gibt, andernfalls funktioniert die automatische Verteilung nach links und rechts nicht mehr.

Über den Attributselektor a[href^="tel"] werden alle Links, die auf eine Telefonnummer verweisen, mit white-space: nowrap an einem Umbruch gehindert. So werden die Nummern immer in einer Zeile dargestellt.


Siehe auch

Referenz zum schnellen Überblick

  • sub - tiefgestellter Text
  • sup - hochgestellter Text
  • time
  • u
  • var
  • wbr - Stelle für einen impliziten Zeilenumbruch

Weblinks

  1. ↑ Wikipedia: DIN 5008
  2. ↑ W3C: FAQ Verwendung von b- und i-Elementen
  3. ↑ You’re using〈em〉wrong And I am too. And so is everybody else. (Farrundo Corradini)
  4. ↑ Mediaevent: HTML-Tag em, strong, b und i Text betonen oder hervorheben
  5. ↑ VoiceOver mit Safari oder Chrome auf Mac, wie erwartet:
    log₁₀ – „log“;
    log10 – „log zehn“;
    VoiceOver mit Firefox auf Mac:
    log₁₀ – „log zehn“ (ui!);
    log10 – „log“, Inhalt von sub-Elementen wird nicht angesagt (WTF‽) Da VoiceOver aber sowieso mit Safari am besten zusammenspielt, würde ich der VoiceOver/Firefox-Kombination keine besondere Relevanz zukommen lassen.
    SELF-Forum: Butons korrekt ausrichten vom 30.04.2023 von Gunnar Bittersmann
  6. ↑ SELF-Forum: Buttons korrekt ausrichten vom 29.04.2023 von Gunnar Bittersmann
  7. ↑ 14 HTML <del> & <ins> with CSS Examples
  8. ↑ Comparing and contrasting ins, del, and s August 20th, 2013 by Oli Studholme
  9. ↑ Selfhtml-Forum: Seiten-Element gestaltet von MrMurphy1 vom 20.11.2015
Abgerufen von „http://wiki.selfhtml.org/index.php?title=HTML/Tutorials/Textauszeichnung&oldid=93815“