Tutorial: Texte formatieren mit HTML

Web-Texte schnell aufhübschen...

Werbung

Einfach bodenlos: Hoch- und tiefgestellter Text

Hoch- und tiefgestellte Zeichen spielen besonders in der Mathematik, der Physik und Chemie eine Rolle. Aber auch bei alltäglichen Texten können sie genutzt werden, um Abkürzungen wie Quadratmeter (m2 statt m2) oder Formeln wie H2O richtig darzustellen.

Das HTML-Tag <sup> steht für „superscript“ (hochgestellt), während das HTML-Tag <sub> seine Bedeutung aus dem Adjektiv „subscript“ (tiefgestellt) ableitet.

Beispiel:

Der Autor dieser Zeilen ist eine <sup>hochgestellte</sup> Persönlichkeit, 
die ganz <sub>tief</sub> stapelt.

Und so sieht’s aus:

Der Autor dieser Zeilen ist eine hochgestellte Persönlichkeit, die ganz tief stapelt.

Experten-Tipp: Möchten Sie nur einzelne Zahlen hoch- bzw. tiefstellen, sollten Sie das entsprechende Unicode-Zeichen verwenden (im Fall der Quadratmeter „²“ U+00B2). Aber Vorsicht, ältere Webbrowser und Mailclients sind nicht immer Unicode-fähig.

Setzt Highlights: Textpassagen markieren

Wie mit einem Textmarker auf Papier können Sie mithilfe des <mark>-Tags einzelne Worte oder ganze Abschnitte optisch hervorheben.

Beispiel:

Nicht vergessen: Abonniere den <mark>Newsletter des 14All-Magazins</mark>.

Und so sieht’s aus:

Nicht vergessen: Abonniere den Newsletter des 14All-Magazins.

Upps: Textabschnitte durchstreichen

Mit dem <strike>-Tag ist es möglich, einzelne Worte oder Textpassagen durchzustreichen. Alternativ können Sie auch die abgekürzte <s>-Form des Tags verwenden.

Beispiel:

Um Texte zu formatieren braucht man HTML <strike>und CSS</strike>!

Und so sieht’s aus:

Um Texte zu formatieren braucht man HTML und CSS!

Für Kleingedrucktes: Schrift verkleinern

Um Worte oder Textabschnitte kleiner als die in den Einstellungen des Webbrowsers definierte Standardschriftgröße darzustellen, nutzen Sie das <small>-Tag.

Beispiel:

Psst... <small>auch mit HTML kann man prima Texte gestalten.</small>

Und so sieht’s aus:

Psst… auch mit HTML kann man prima Texte gestalten.

Für Wichtiges: Schrift vergrößern

Das Gegenteil von <small> gibt es natürlich auch: Mit dem <big>-Tag (was für ein naheliegender Name) können Sie Texte größer als die Standardschriftgröße anzeigen lassen.

Beispiel:

Ich sage es gerne nochmal: 
<big>Das 14All-Magazin ist Pflichtlektüre!</big>

Und so sieht’s aus:

Ich sage es gerne nochmal: Das 14All-Magazin ist Pflichtlektüre!

Anmerkung: Wie Sie in der Überschrift sehen, funktioniert diese Methode nicht immer. Das liegt daran, dass als Bezugsgröße die Standardschrift von Fließtext genutzt wird (und eben nicht die von Überschriften).

Für Spezielles: Dicktengleiche Schrift

Dicktengleich, nicht-proportional, monospace – alle drei Bezeichnungen beschreiben Schriftarten mit gleicher Laufweite einzelner Buchstaben (z.B. nehmen in nicht-proportionalen Schriften „i“ und „w“ den gleichen Raum ein, während sich deren Breite in proportionalen Schriften stark unterscheidet).

Diese Schriften werden gerne für die Darstellung von Code genutzt (siehe auch meine Beispiele), für tabellarische Zahlenreihen oder einfach zum Hervorheben von Text.

Das HTML-Tag <tt> steht für „teletype“ (Fernschreiber) und tut genau jenes – den darin eingeschlossenen Text in einer dicktengleichen Schrift anzuzeigen.

Beispiel:

Nach Eingabe von <tt>dir</tt> unbedingt die <tt>Enter</tt>-Taste drücken.

Und so sieht’s aus:

Nach Eingabe von dir unbedingt die Enter-Taste drücken.


Werbung