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.
Beachte: 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.
Es ist empfehlenswert, Texten eine moderne Seitenstruktur mit den neuen HTML5-Elementen wie article, aside und footer zu geben. Verwende 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: Verwende im Webdesign Flattersatz und verzichte auf text-align: justify;.
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.
HTML-Code
<h1>Auch <span>grüne</span> Weihnachtsbäume werden <span>braun</span>.</h1>
Browseransicht
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.
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.
HTML-Code
<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>
Browseransicht
Man kann 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:
Für die meisten Exponentionalzahlen gibt es passende Unicodezeichen. Die HTML-Elemente sub und sup können beliebigen Text hoch- bzw. tiefstellen. Dies wird in der Regel auch von Screenreadern vorgelesen. Mit MathML kann man auch komplexere Terme von der Grundlinie verschieben.
Eine Tiefstellung mit sub verschiebt einen Teil des Textes vertikal (Browserdefault: sub { vertical-align: sub }), sodass seine Zeilenbox aus der des übrigen Textes herausragt.
Gerade in immer wieder aktualisierten Web-Dokumenten ist es vorteilhaft, Änderungen (edits) am Dokument sichtbar zu machen.
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.
HTML-Code
<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>
Browseransicht
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:
HTML-Code
<h1>Tastenkombinationen mit kbd sichtbar machen</h1> <h2>Tastaturen, Mäuse und Touchgeräte</h2> <p>Webseiten im <a href="https://wiki.selfhtml.org/wiki/JavaScript/Fullscreen">Fullscreen</a>-Modus können mit <kbd>ESC</kbd> wieder in die klassische Ansicht zurückgesetzt werden, nur nicht auf Touch-Geräten, da es dort keine Tasten gibt. Auch der Klammergriff ( <kbd>strg</kbd> + <kbd>alt</kbd> + <kbd>entf</kbd> ) ist auf Touchgeräten nicht möglich. </p>
CSS-Code
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; }
Browser-Ansicht
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.
HTML-Code
<address> Autor: <a href="../autoren/mustermann.html">Max Mustermann</a> </address>
Telefonnummern müssen kein Text sein. Wenn man sie als Link auszeichnet, können Benutzer auf mobilen Geräten mit einem Klick den Wählvorgang einleiten.
HTML-Code
<address> <dl> <dt>Tel.</dt> <dd><a href="tel:+49-89-00000000">089 0000 0000</a></dd> </dl> </address>
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.
HTML-Code
<p> Kontaktieren Sie uns per <a href="mailto:kontakt@example.com">Mail an kontakt@example.com</a> oder mit nachfolgendem Formular: </p>
Eine Alternative wäre ein Kontaktformular.
Fertiges Beispiel:
HTML-Code
<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>
CSS-Code
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; }
Browser-Ansicht
