HTML-Tags zur Textformatierung
HTML-Textformatierungstags erklärt: semantische Tags wie strong und em vs. präsentationsbezogene Tags wie b und i, warum der Unterschied wichtig ist.
HTML bietet eine Reihe von Inline-Elementen zur Textformatierung. Sie lassen sich in zwei Gruppen einteilen, und der Unterschied zwischen ihnen ist das Wichtigste auf dieser Seite.
- Semantische (logische) Tags beschreiben, was der Text bedeutet — ob ein Wort wichtig ist, betont wird, ein definierter Begriff oder eine Abkürzung ist. Beispiele:
<strong>,<em>,<mark>,<abbr>. - Präsentationsbezogene (physische) Tags beschreiben, wie der Text aussehen soll — fett, kursiv, unterstrichen — ohne etwas über seine Bedeutung auszusagen. Beispiele:
<b>,<i>,<u>,<small>.
Warum der Unterschied wichtig ist
Zwei Elemente können im Browser identisch aussehen und dennoch sehr unterschiedliche Bedeutungen tragen:
- Screenreader und Barrierefreiheit. Ein Screenreader kann seinen Tonfall für
<strong>und<em>ändern und so einem blinden Benutzer Wichtigkeit und Betonung signalisieren. Bei<b>und<i>tut er das nicht — diese sind lautlos und rein visuell. - SEO. Suchmaschinen gewichten semantisches Markup. Wird ein Schlüsselbegriff in
<strong>eingeschlossen, signalisiert das den Crawlern seine Relevanz;<b>ändert nur die Schriftart. - Wartbarkeit. Die Bedeutung bleibt korrekt, wenn sich das CSS ändert. Wenn wichtiger Text später rot statt fett dargestellt werden soll, bedeutet
<strong>immer noch „wichtig" — man gestaltet es einfach neu.
Eine gute Faustregel: Zuerst nach dem semantischen Tag greifen. Verwende ein präsentationsbezogenes Tag nur, wenn du gezielt einen visuellen Effekt ohne zugrundeliegende Bedeutung erzeugen möchtest.
Schauen wir uns jeden Formatierungs-Tag im Detail an.
Die <h1>-<h6>-Tags
Die <h1>-<h6>-Tags werden verwendet, um HTML-Überschriften zu definieren. In HTML gibt es 6 Überschriftenebenen: <h1> definiert die wichtigste und <h6> die am wenigsten wichtige Überschrift.
Beispiel der HTML-Tags <h1>-<h6>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>Ergebnis
Die Tags <b> und <strong>
Beide werden standardmäßig fett dargestellt, haben in HTML5 jedoch unterschiedliche Bedeutungen.
- Der
<strong>-Tag ist ein semantischer Tag, der Text als besonders wichtig, ernst oder dringend kennzeichnet — Inhalt, den der Leser nicht übersehen sollte. - Der
<b>-Tag ist ein präsentationsbezogener Tag, der Text als stilistisch hervorgehoben gegenüber dem umgebenden Fließtext kennzeichnet, ohne zusätzliche Bedeutung zu vermitteln — zum Beispiel ein Produktname, ein Stichwort in einem Index oder der Einleitungssatz eines Artikels.
Welcher Tag? Wenn die Fettschrift dazu dient, Wichtigkeit zu signalisieren, verwende <strong>. Wenn du nur für eine typografische Konvention ohne zusätzliche Bedeutung fett schreiben möchtest, verwende <b> (oder besser: gestalte den Text mit CSS).
Beispiel der HTML-Tags <b> und <strong>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>We use the <strong> tag to highlight the importance <strong> of this part of the text</strong>.</p>
<p>The <b> tag is a physical tag that stands for <b>bold text</b>.</p>
</body>
</html>Die Tags <i> und <em>
Beide werden standardmäßig kursiv dargestellt, haben in HTML5 jedoch unterschiedliche Bedeutungen.
- Der
<em>-Tag ist ein semantischer Tag, der Betonung kennzeichnet — die Art von Betonung, die den Sinn eines Satzes verändert ("Ich liebe HTML" vs. "Ich liebe HTML"). Ein Screenreader kann ihn mit besonderem Nachdruck vorlesen. - Der
<i>-Tag ist ein präsentationsbezogener Tag für Text in einer anderen Stimme oder Stimmung: ein Fachbegriff, ein fremdsprachiger Ausdruck, ein Gedanke, ein Schiffsname oder anderer Inhalt, der traditionell kursiv gesetzt wird — ohne Betonung zu implizieren.
Welcher Tag? Wenn du ein Wort betonst, das beim Vorlesen mit besonderem Nachdruck gesprochen würde, verwende <em>. Für eine kursive typografische Konvention ohne Betonung verwende <i>.
Beispiel der HTML-Tags <i> und <em>:
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph</p>
<p>The important part of the text is defined <em> in italic</em>.</p>
<p><i>Lorem ipsum</i>, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. </p>
</body>
</html>Der <pre>-Tag
Der <pre>-Tag wird verwendet, um vorformatierten Text zu definieren. Browser stellen den eingeschlossenen Text mit Leerzeichen und Zeilenumbrüchen dar.
Beispiel des HTML-Tags <pre>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<pre>Spaces
and line breaks
within this element
are shown as typed.
</pre>
</body>
</html>Der <mark>-Tag
Der <mark>-Tag wird verwendet, um einen Teil des Textes in einem Dokument als markiert oder hervorgehoben darzustellen — zu Referenzzwecken.
Beispiel des HTML-Tags <mark>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Learn the HyperText Markup Language on <mark>W3Docs.com</mark>.</p>
</body>
</html>Ergebnis
Der <small>-Tag
Der <small>-Tag verringert die Schriftgröße des Textes um eine Stufe gegenüber der Basisschriftgröße des Dokuments (von „medium" zu „small" oder von „x-large" zu „large"). Das Tag enthält üblicherweise Inhalte von sekundärer Bedeutung wie Urheberrechtshinweise, Randkommentare oder rechtliche Hinweise.
Beispiel des HTML-Tags <small>:
<!DOCTYPE html>
<html>
<head>
<title>Usage of the SMALL tag</title>
</head>
<body>
<p>The interest rate is only 10%*</p>
<small>* per day</small> /
</body>
</html>Die Tags <del> und <s>
Der <del>-Tag kennzeichnet einen Teil des Textes, der aus dem Dokument gelöscht wurde. Browser zeigen diesen Text mit Durchstreichung an.
Beispiel des HTML-Tags <del>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p> She likes <del>violets</del> snowdrops․</p>
</body>
</html>Der <s>-Tag markiert Text, der nicht mehr korrekt oder relevant ist — zum Beispiel ein alter Preis neben einem rabattierten. (Hinweis: <s> ist nicht für Löschungen in einem bearbeiteten Dokument gedacht; hierfür ist <del> zu verwenden.)
Beispiel des HTML-Tags <s>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p><s>I am studying in high school.</s></p>
<p>I am studying in a university.</p>
</body>
</html>Der Inhalt beider Tags wird durchgestrichen dargestellt. Trotz der visuellen Ähnlichkeit sind diese Tags jedoch nicht austauschbar: <del> bedeutet „in einer Bearbeitung entfernt", während <s> „nicht mehr korrekt" bedeutet.
Die Tags <ins> und <u>
Der <ins>-Tag definiert Text, der in das Dokument eingefügt (hinzugefügt) wurde — üblicherweise als Gegenstück zu <del>. Der Inhalt wird standardmäßig unterstrichen dargestellt.
Beispiel des HTML-Tags <ins>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>She likes <del>violets</del> <ins>snowdrops</ins>․</p>
</body>
</html>Ergebnis
In HTML5 steht der <u>-Tag für eine unartikulierte, nicht-textuelle Anmerkung — Text, der mit einer Formatierung (standardmäßig Unterstreichung) versehen ist, die eine Bedeutung trägt, die im Text selbst nicht ausgedrückt wird. Typische Verwendungen sind das Kennzeichnen eines falsch geschriebenen Wortes oder das Markieren von Eigennamen in chinesischem Text. Vermeide <u> zur reinen Dekoration, da Benutzer eine Unterstreichung mit einem Link verwechseln könnten; verwende stattdessen CSS text-decoration.
Beispiel des HTML-Tags <u>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Here we used <u>the <u> tag</u>.</p>
</body>
</html>Die Tags <sub> und <sup>
Der <sub>-Tag definiert tiefgestellten Text. Tiefgestellter Text befindet sich unterhalb der Grundlinie der anderen Zeichen der Zeile und hat eine kleinere Schrift. Der <sup>-Tag definiert hochgestellten Text, der leicht oberhalb der normalen Schriftlinie liegt und im Verhältnis zum Rest des Textes kleiner ist. Die Grundlinie verläuft durch die Ober- oder Unterkante der Zeichen.
Beispiel der HTML-Tags <sub> und <sup>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The formula of water is H<sub>2</sub>O, and the formula of alcohol is C<sub>2</sub>H<sub>5</sub>OH </p>
<p>E = mc<sup>2</sup>, where E — rest energy, m — mass, c — the speed of light. </p>
</body>
</html>Ergebnis
Der <dfn>-Tag
Der <dfn>-Tag markiert die definierende Stelle eines Begriffs — die Stelle im Text, an der der Begriff definiert wird, nicht jede Stelle, an der er vorkommt. Es ist ein semantisches Tag; Browser stellen ihn standardmäßig kursiv dar, aber diese Formatierung ist zufällig und kann mit CSS geändert werden.
Beispiel des HTML-Tags <dfn>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p><dfn>HTML</dfn> (HyperText Markup Language ) — The standardized markup language for documents on the World Wide Web. Most web pages contain a description of the markup in the language HTML</p>
</body>
</html>Weitere semantische Textelemente
HTML verfügt über mehrere weitere Inline-Tags, die bestimmten Textarten Bedeutung verleihen. Sie dienen nicht der Formatierung — jeder beschreibt was der Text ist:
<abbr>— eine Abkürzung oder ein Akronym, z. B.<abbr title="HyperText Markup Language">HTML</abbr>. Dastitle-Attribut liefert die vollständige Auflösung beim Hovern.<cite>— der Titel eines zitierten Werks (ein Buch, Film, Artikel usw.).<q>— ein kurzes Inline-Zitat; der Browser fügt automatisch Anführungszeichen hinzu.<code>— ein Fragment von Computercode, in einer Festbreitenschrift dargestellt.<kbd>— Tastatureingabe, die der Benutzer tippen soll, z. B. Ctrl + C.<samp>— Beispielausgabe eines Programms oder Systems.<var>— eine Variable in einem mathematischen Ausdruck oder Programmierkontext.
Beispiel semantischer Textelemente:
<!DOCTYPE html>
<html>
<body>
<p>The <abbr title="HyperText Markup Language">HTML</abbr> spec is huge.</p>
<p>As stated in <cite>The HTML Handbook</cite>:
<q>Use the right element for the job.</q></p>
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to run <code>document.title</code>.</p>
<p>The program printed <samp>Hello, world!</samp> where <var>x</var> = 5.</p>
</body>
</html>Veraltete Tags — Nicht verwenden
Eine Reihe alter Formatierungstags wurde aus dem HTML-Standard entfernt. Sie können in Browsern noch funktionieren, sollten aber nie mehr verwendet werden — ersetze Präsentation durch CSS und Bedeutung durch semantische Tags:
| Veralteter Tag | Was er tat | Stattdessen verwenden |
|---|---|---|
<font> | Farbe, Größe, Schriftart festlegen | CSS color, font-size, font-family |
<center> | Inhalt zentrieren | CSS text-align: center oder margin: auto |
<tt> | Fernschreiber / Monospace-Text | <code>, <kbd>, <samp> oder CSS font-family: monospace |
<strike> | Durchgestrichener Text | <del> / <s> oder CSS text-decoration: line-through |
<big> | Größerer Text | CSS font-size |
Strukturtags: <p>, <br> und <hr>
Die folgenden drei Tags sind keine Text-Formatierungs-Tags — sie strukturieren den Inhaltsfluss, anstatt Wörter inline zu gestalten — sind aber eng verwandt und es lohnt sich, sie hier zu behandeln.
Der <p>-Tag definiert den Absatz. Browser fügen vor und nach jedem Absatz automatisch einen 1em-Abstand hinzu.
Beispiel des HTML-Tags <p>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The first paragraph</p>
<p>The second paragraph</p>
</body>
</html>Der <br>-Tag fügt einen einzelnen Zeilenumbruch ein. Im Gegensatz zum <p>-Tag wird vor der Zeile kein leerer Einzug hinzugefügt.
Beispiel des HTML-Tags <br>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document.</title>
</head>
<body>
<h1>How to use the <br /> tag</h1>
<p> We can insert the <br /> tag inside the paragraph, <br /> to transfer a part of the text to another line if necessary.</p>
</body>
</html>In HTML5 definiert der <hr>-Tag einen thematischen Wechsel zwischen Elementen auf Absatzebene in einer HTML-Seite. In früheren HTML-Versionen wurde er verwendet, um eine horizontale Linie zu zeichnen, die den Inhalt visuell trennt. In HTML5 hat das Element eine semantische Bedeutung.
Beispiel des HTML-Tags <hr>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Football</h1>
<p>A team sport involving kicking a ball to score a goal. </p>
<hr />
<h1>Basketball</h1>
<p>A game that is played between two teams of five players.</p>
</body>
</html>