HTML/Tutorials/Textauszeichnung
Text-Info
- 20min
- einfach
- 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.
Inhaltsverzeichnis
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.
im Grid Layout das Schlüsselwort span.
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.
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.
Information
b- als auch das i-Elementhaben keine besondere Bedeutung.
Wenn es ein Element gibt, welches den Inhalt zutreffender beschreibt, sollte dieses verwendet werden.
Betont und stärker betont - em und strong[Bearbeiten]
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
<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[Bearbeiten]
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
Die Browser stellen die mark-Elemente mit unterschiedlichen Farben dar. Diese Darstellung wird unterbunden, wenn der Button nicht gehovert wird.
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.
Im Zusammenhang mit Änderungsmarkierungen sind zwei Attribute wichtig:
-
datetime, Zeitpunkt der Änderung -
cite, Quelle, aufgrund der die Änderung vorgenommen wurde.
del und ins Elemente, die entweder als Block- oder als Inline-Elemente fungieren können.
Folgendes Beispiel zeigt ungültiges HTML:
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.
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>
kbd - Tastenkombinationen mit CSS sichtbar machen[Bearbeiten]
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:
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;
}
{{BeispielText|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.
Siehe auch[Bearbeiten]
- HTML/Tutorials/Links
- a Verweise (Hyperlinks)
- HTML/Tutorials/Code in HTML darstellen
- code
- var
- CSS/Tutorials/Tooltips mit CSS
- abbr
- dfn
- CSS/Tutorials/Zitate interessant gestalten
- cite - Titel einer Publikation
- q - Zitat im Fließtext
Einzelseiten
- kbd - Benutzereingaben etwa über die Tastatur
- small - nebensächliche Informationen
- sub - tiefgestellter Text
- sup - hochgestellter Text
- samp - Ausgabe eines Programmes oder Programmteils
- HTML/Elemente/bdo - Textrichtung überschreiben
- br - expliziter Zeilenumbruch
- wbr - Stelle für einen impliziten Zeilenumbruch
Referenz[Bearbeiten]
zum schnellen Überblick
Weblinks[Bearbeiten]
- ↑ W3C: FAQ Verwendung von b- und i-Elementen
- ↑ You’re using〈em〉wrong And I am too. And so is everybody else. (Farrundo Corradini)
- ↑ Mediaevent: HTML-Tag em, strong, b und i Text betonen oder hervorheben
- ↑ 14 HTML <del> & <ins> with CSS Examples
- ↑ Comparing and contrasting ins, del, and s August 20th, 2013 by Oli Studholme
