HTML-Tags für Textformatierung
In HTML werden eine Reihe von Elementen verwendet, um Text zu formatieren. Die Formatierungs-Tags werden in zwei Gruppen unterteilt: physische Tags, die zum Stylen des Textes verwendet werden (visuelles Erscheinungsbild des Textes), und logische oder semantische Tags, die den Textteilen semantischen Wert hinzufügen (z. B. Suchmaschinen mitteilen, für welche Schlüsselwörter eine Webseite eingestuft werden soll).
Lassen Sie uns tiefer eintauchen und die Formatierungs-Tags im Detail besprechen.
Die Tags <h1>-<h6>
Die Tags <h1>-<h6> werden verwendet, um HTML-Überschriften zu definieren. Es gibt 6 Überschriftenebenen in HTML, wobei <h1> die wichtigste und <h6> die am wenigsten wichtige Überschrift definiert.
Beispiel für die HTML-Tags <h1>-<h6>:
Beispiel für die HTML-Tags <h1>|Tags für Textformatierung|W3Docs
<!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>
Der Tag <b> ist ein physischer Tag und steht für fetten Text, während der Tag <strong> als logischer Tag verwendet wird, um die Wichtigkeit des Textes hervorzuheben.
Beispiel für die HTML-Tags <b> und <strong>:
Beispiel für die HTML-Tags <b> und <strong>|Tags für Textformatierung|W3Docs
<!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>
Die Tags <i> und <em> definieren kursiven Text. Der Tag <i> ist nur für das visuelle Erscheinungsbild des enthaltenen Textes verantwortlich, ohne zusätzliche Bedeutung. Der Tag <em> definiert hervorgehobenen Text mit zusätzlicher semantischer Bedeutung.
Beispiel für die HTML-Tags <i> und <em>:
Beispiel für die Tags <i> und <em>|Tags für Textformatierung|W3Docs
<!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 Tag <pre>
Der Tag <pre> wird verwendet, um vorformatierten Text zu definieren. Die Browser geben den enthaltenen Text mit Leerzeichen und Zeilenumbrüchen wieder.
Beispiel für den HTML-Tag <pre>:
Beispiel für den HTML-Tag <pre>|Tags für Textformatierung|W3Docs
<!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 Tag <mark>
Der Tag <mark> wird verwendet, um einen Teil des Textes in einem Dokument als markiert oder hervorgehoben zu kennzeichnen, zu Referenzzwecken.
Beispiel für den HTML-Tag <mark>:
Beispiel für den HTML-Tag <mark>|Tags für Textformatierung|W3Docs
<!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 Tag <small>
Der Tag <small> verkleinert die Schriftgröße des Textes um eine Stufe gegenüber der Basis-Schriftgröße des Dokuments (von mittel zu klein oder von x-large zu large). Der Tag enthält normalerweise Inhalte von untergeordneter Bedeutung wie Copyright-Hinweise, Randbemerkungen oder rechtliche Hinweise.
Beispiel für den HTML-Tag <small>:
Beispiel für den HTML-Tag <small>|Tags für Textformatierung|W3Docs
<!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 Tag <del> gibt einen Teil des Textes an, der aus dem Dokument gelöscht wurde. Browser stellen diesen Text als durchgestrichen dar.
Beispiel für den HTML-Tag <del>:
Beispiel für den HTML-Tag <del>|Tags für Textformatierung|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p> She likes <del>violets</del> snowdrops․</p>
</body>
</html>Der Tag <s> definiert Text, der nicht mehr korrekt oder relevant ist.
Beispiel für den HTML-Tag <s>:
Beispiel für den HTML-Tag <s>|Tags für Textformatierung|W3Docs
<!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 als durchgestrichen dargestellt. Trotz der visuellen Ähnlichkeit können diese Tags einander jedoch nicht ersetzen.
Die Tags <ins> und <u>
Der Tag <ins> definiert den Text, der in das Dokument eingefügt (hinzugefügt) wurde. Der Inhalt des Tags wird unterstrichen dargestellt.
Beispiel für den HTML-Tag <ins>:
Beispiel für den HTML-Tag <ins>|Tags für Textformatierung|W3Docs
<!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
Der Tag <u> gibt Text an, der sich stilistisch vom normalen Text unterscheidet, d. h. Wörter oder Textfragmente, die anders dargestellt werden müssen. Das können falsch geschriebene Wörter oder Eigennamen im Chinesischen sein.
Beispiel für den HTML-Tag <u>:
Beispiel für den HTML-Tag <u>|Tags für Textformatierung|W3Docs
<!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 Tag <sub> definiert tiefgestellten Text. Tiefgestellter Text liegt unter der Grundlinie anderer Symbole der Zeile und hat eine kleinere Schrift. Der Tag <sup> definiert hochgestellten Text, der leicht über der normalen Textzeile gesetzt ist und relativ kleiner als der restliche Text ist. Die Grundlinie verläuft durch die obere oder untere Kante der Symbole.
Beispiel für die HTML-Tags <sub> und <sup>:
Beispiel für die HTML-Tags <sub> und <sup>|Tags für Textformatierung|W3Docs
<!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 Tag <dfn>
Der Tag <dfn> wird verwendet, um den Begriff zu definieren, der zum ersten Mal erwähnt wird. Der Inhalt des Tags wird kursiv dargestellt.
Beispiel für den HTML-Tag <dfn>:
Beispiel für den HTML-Tag <dfn>|Tags für Textformatierung|W3Docs
<!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>Die Tags <p>, <br> und <hr>
Der Tag <p> definiert den Absatz. Browser fügen automatisch einen Rand von 1em vor und nach jedem Absatz hinzu.
Beispiel für den HTML-Tag <p>:
Beispiel für den HTML-Tag <p>|Tags für Textformatierung|W3Docs
<!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 Tag <br> fügt einen einzelnen Zeilenumbruch ein. Im Gegensatz zum Tag <p> wird vor der Zeile kein leerer Einzug hinzugefügt.
Beispiel für den HTML-Tag <br>:
Beispiel für den HTML-Tag <br>|Tags für Textformatierung|W3Docs
<!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 Tag <hr> einen thematischen Wechsel zwischen Elementen auf Absatzebene in einer HTML-Seite. In früheren Versionen von HTML wurde er verwendet, um eine horizontale Linie auf der Seite zu zeichnen und den Inhalt visuell zu trennen. In HTML5 hat das Element eine semantische Bedeutung.
Beispiel für den HTML-Tag <hr>:
Beispiel für den HTML-Tag <hr>|Tags für Textformatierung|W3Docs
<!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>Practice
Which of the following HTML tags are used for text formatting?