HTML/Tutorials/HTML5/Textauszeichnung

Aus SELFHTML-Wiki
< HTML‎ | Tutorials‎ | HTML5(Weitergeleitet von HTML/Textauszeichnung)
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
20min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
Grundkenntnisse in
Einstieg in HTML

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.

Hervorhebungen[Bearbeiten]

span[Bearbeiten]

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.

Der Titel dieses Artikels ist mehrdeutig. Bei HTML-Tabellen existiert das gleichnamige span-Attribut;
im Grid Layout das Schlüsselwort span.


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[Bearbeiten]

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.[1]
  • 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>

Information

Sowohl das b- als auch das i-Element
haben keine besondere Bedeutung.

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[Bearbeiten]

Dieser Artikel behandelt das HTML-Element em. Für die gleichnamige CSS-Maßeinheit siehe CSS/Wertetypen/Zahlen, Maße und Maßeinheiten/em.


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:[2][3]

  • 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


ToDo (weitere ToDos)

Beispiel folgt. --Matthias Scharwies (Diskussion) 08:25, 16. Jan. 2021 (CET)

mark[Bearbeiten]

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.

Editieren mit del und ins[Bearbeiten]

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

  • 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<del>, Max</del> und Gretel 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 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[Bearbeiten]

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>


Siehe auch[Bearbeiten]

Einzelseiten

  • kbd - Benutzereingaben etwa über die Tastatur
  • small - nebensächliche Informationen
  • sub - tiefgestellter Text
  • sup - hochgestellter Text
  • samp - Ausgabe eines Programmes oder Programmteils
  • bdo - Textrichtung überschreiben
  • br - expliziter Zeilenumbruch
  • wbr - Stelle für einen impliziten Zeilenumbruch

Referenz[Bearbeiten]

zum schnellen Überblick


Weblinks[Bearbeiten]

  1. W3C: FAQ Verwendung von b- und i-Elementen
  2. You’re using〈em〉wrong And I am too. And so is everybody else. (Farrundo Corradini)
  3. Mediaevent: HTML-Tag em, strong, b und i Text betonen oder hervorheben
  4. 14 HTML <del> & <ins> with CSS Examples
  5. Comparing and contrasting ins, del, and s August 20th, 2013 by Oli Studholme