Die Textdarstellung am Bildschirm hängt davon ab, welche HTML-Tags für ihre Formatierung verwendet wurden. Die Tags der Formatierung werden unter zwei Kategorien geteilt: die Tags der physischen Markierung, die für die Stilerledigung (das fettige Aufzeichnen, die Kursivschrift, die Schrift usw.) des Textes verantwortlich sind, und die Tags der logischen Markierung, die die Bedeutungsbelastung haben (zum Beispiel, sie deuten den Suchsystemen, nach welchen Wörtern die Webseite rangiert werden soll).
Unten werden wir die Formatierungtags ausführlich betrachten und ihre Einzelheiten erklären.
Die Tags <h1>-<h6>
Die Tags <h1>-<h6> werden für die Strukturierung von Kopfzeilen verwendet. In HTML werden 6 Levels von Kopfzeilen von <h1> bis <h6> verwendet. <h1> verwendet man für die Bestimmung der wichtigsten Kopfzeile und <h6> für die unwichtigste Kopfzeile.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel der Webseite</title>
</head>
<body>
<h1>Die Kopfzeile des ersten Levels</h1>
<h2>Die Kopfzeile des zweiten Levels</h2>
<h3>Die Kopfzeile des dritten Levels</h3>
<h4>Die Kopfzeile des vierten Levels</h4>
<h5>Die Kopfzeile des fünften Levels</h5>
<h6>Die Kopfzeile des sechsten Levels</h6>
</body>
</html>Ergebnis
Die Tags <b> und <strong>
Das Tag <b> ist ein physisches Tag. Es wird für fettiges Aufzeichnen der Schrift verwendet und hebt den Text ohne Betonung seiner Wichtigkeit hervor, während das Tag <strong> seine besondere Wichtigkeit hervorhebt.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel der Webseite</title>
</head>
<body>
<p>Wir haben das Tag <strong> verwendet, um <strong> diesen wichtigen Teil des Textes</strong> zu betonen.</p>
</body>
</html>Ergebnis
Die Tags <i> und <em>
Die Tags <i> und <em> geben die kursive Aufzeichnung der Schrift auf. Das Tag <i> ist ein Element der physischen Markierung, das heißt, dass der eingeschlossene Text sich nur visuell unterscheidet und von den Browsern und den Suchmaschinen als nicht wichtig wahrgenommen wird. Das Tag <em> hebt das Fragment des Textes expressiv-emotional hervor.Beispiel
<!DOCTYPE html>
<html>
<body>
<p>Das ist ein Absatz.</p>
<p>Wichtiges Fragment des Textes wird <em>durch kursive Schrift</em> hervorgehoben.</p>
</body>
</html>Ergebnis
Das Tag <pre>
Das Tag <pre> wird für den Einschluss ins HTML-Dokument vorläufig formatierten Textes verwendet. Im Tag beigefügten Text werden alle Leerzeichen und Zeilenbumrüche gespeichert (die Browser zeigen eine beliebige Anzahl von nacheinander folgenden Leerzeichen als ein Leerzeichen voreingestellt an).
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<pre>Leerzeichen
und Zeilenumbrüche
innerhalb dieses Elements
sind angezeigt.
</pre>
</body>
</html>Ergebnis
Das Tag <mark>
Das Tag <mark> bestimmt den hervorgehobenen / eingeblendeten Text. Visuell sieht der Inhalt des Tages wie vom gelben Marker bemerkt aus.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<p>Lernen Sie HyperText Markup Language mit <mark>https://de.w3docs.com</mark>.</p>
</body>
</html>Ergebnis
Das Tag <small>
Das Tag <small> bestimmt die Schriftgröße des Textes auf eine Größe kleiner, als beim Elternelement. In HTML5 wird das Tag für die Speicherung der Information von Urheberrechte sowie für die Bestimmung der kleinen oder juristischen Schrift verwendet.Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Ein Beispiel des Tages SMALL</title>
</head>
<body>
<p>Prozentsatz beträgt 10%*</p>
<small>* - pro Tag</small> /
</body>
</html>Ergebnis
Die Tags <del> und <s>
Das Tag <del> hebt den Textteil, der vom Dokument gelöscht wurde, hervor.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<p> Sie mag <del>violette</del> Schneeglöckchen․</p>
</body>
</html>Ergebnis
Das Tag <s> wird für die Bestimmung des Textes, der nicht mehr aktuell ist, verwendet.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<p><s>Ich studiere in der Highschool.</s></p>
<p>Ich studiere an einer Universität.</p>
</body>
</html>Ergebnis
Die Browser stellen den Inhalt von beiden Tags als durchgestrichener Text dar. Ungeachtet der äußerlichen Ähnlichkeit, können diese Tags einander nicht ersetzen.
Die Tags <ins> und <u>
Das Tag <ins> bestimmt den Textteil, der zum Dokument hinzugefügt wurde. Der Inhalt des Tages wird im Browser als unterstrichener Tex angezeigt.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<p>Sie mag <del>violette</del> <ins>Schneeglöckchen</ins>․</p>
</body>
</html>Ergebnis
Im Tag <u> wird der Text, der sich stilistisch vom übrigen Text unterscheidet, eingeschlossen (zum Beispiel die Wörter mit orthographischen Fehlern oder der Text auf anderer Sprache).
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<p>Hier haben wir das Tag <u> <u></u> verwendet.</p>
</body>
</html>Ergebnis
Die Tags <sub> und <sup>
Das Tag <sub> wird für die Bestimmung des Textes mit der Unterstellung verwendet. Das Tag <sup> wird für die Bestimmung des Textes mit der Hochstellung.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<p>Die Formel des Wassers ist H<sub>2</sub>O, die Formel des Spiritus ist C<sub>2</sub>H<sub>5</sub>ОН </p>
<p>E = mc<sup>2</sup>, wo E — die Energie des Objekts, m — seine Masse, c — Lichtgeschwindigkeit ist. </p>
</body>
</html>Ergebnis
Das Tag <dfn>
Das Tag <dfn> wird für die Absonderung des Terminus, der zum ersten Mal erwähnt wird, verwendet. Im Browser wird der Inhalt des Tages durch kursive Schriftart hervorgehoben.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<p><dfn>HTML</dfn> (eng. HyperText Markup Language — «Hypertext-Auszeichnungssprache») — Die standardisierte Auszeichnungssprache der Dokumente im Weltnetz. Die meisten Webseiten enthalten die Beschreibung der Markierung auf der Sprache HTML.</p>
</body>
</html>Ergebnis
Die Tags <p>, <br> und <hr>
Das Tag <p> bestimmt den Absatz im Text. Voneinander werden die Absätze durch eine Leerzeile abgetrennt. Der Browser ergänzt den oberen und unteren Einzug, der 1em gleich ist, dabei werden die Einzüge von benachbarten Absätzen automatisch "eingeklappt".
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<p>Das ist der erste Absatz</p>
<p>Das ist der zweite Absatz</p>
</body>
</html>Ergebnis
Das Tag <br> stellt die Versetzung der Zeile fest, das heißt der nach ihm kommender ganzer Text an eine neue Zeile versetzt wird. Im Unterschied zum Tag <p> wird vor der Zeile kein leerer Rand ergänzt.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<h1>Ein Gebrauchsbeispiel des Tages <br></h1>
<p> Innerhalb des Absatzes können wir das Tag <br /> <br /> einstellen, um einen Teil des Textes auf andere Zeile falls notwendig zu verlegen.</p>
</body>
</html>Ergebnis
In HTML5 wird das Tag <hr> wird für die thematische Unterteilung des Contents auf der Seite verwendet. In den vorigen HTML-Versionen wurde es für die Erstellung von horizontalen Linien auf der Seite verwendet. In der neuen Version hat es eine Bedeutungsbelastung und bestimmt nicht nur die visuuelle, sondern auch die thematische Unterteilung des Contents.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<h1>Fußball</h1>
<p>
Fußball ist eine Ballsportart, bei der zwei Mannschaften mit dem Ziel gegeneinander antreten</p>
<hr>
<h1>Basketball</h1>
<p>Basketball ist eine Ballsportart, bei der zwei Mannschaften versuchen, den Ball in den jeweils gegnerischen Korb zu werfen</p>
</body>
</html>Ergebnis
Übe dein Wissen
