Was ist HTML Formatting?
IONOS Redaktion7 mins
HTML Formatting bezeichnet den Prozess der Strukturierung und Gestaltung von Webseiteninhalten wie Texten und Bildern durch die Verwendung von HTML-Tags. Die richtige Nutzung dieser Tags ermöglicht es, Inhalte klar, übersichtlich und ansprechend darzustellen.
Definition: Was bedeutet HTML Formatting?
Die Auszeichnungssprache HTML stelltgrundlegende Werkzeuge zur Verfügung, um die verschiedenen Seitenelemente zu strukturieren. Die einzelnen Elemente lassen sich mithilfe von HTML-Tags anordnen, was man als HTML Formatting bezeichnet. Auf diese Weise lässt sich definieren, wie Texte, Bilder und Co. in einem HTML-Dokument angezeigt werden. Die Tags gestatten es beispielsweise, Überschriften festzulegen, Absätze zu erstellen und Aufzählungen als Listen darzustellen.
Welche Zwecke erfüllt HTML Formatting?
HTML Formatting gestattet es, sowohl die Struktur als auch das visuelle Erscheinungsbild der verschiedenen Webseitenelemente zu optimieren. Die richtige Formatierung trägt nicht nur zur Verbesserung der Lesbarkeit von Texten bei, sondern erleichtert Nutzerinnen und Nutzern auch die Navigation auf der Website. Gleichzeitig dient das HTML Formatting der Suchmaschinenoptimierung, da eine übersichtliche und gut strukturierte Website für Suchmaschinen-Crawler (Programme, die Webseiteninhalte analysieren) überschaubarer ist.
In unserem Guide „HTML lernen: Das große Einsteiger-Tutorial“ vermitteln wir Basiswissen zur Auszeichnungssprache HTML.
Welche Arten von Tags für die HTML-Formatierung gibt es?
Beim HTML Formatting wird zwischen physischen und logischen Tags (im Englischen als „physical tags” und „logical tags” bezeichnet) unterschieden:
-
Physische Tags bestimmen das genaue Aussehen eines Seitenelements. Sie definieren direkt, wie Text und andere Elemente visuell dargestellt werden. Beispiele dafür sind das Tag
<b>für fettgedruckten Text und der Befehl<i>für kursiven Text. Auf den semantischen Kontext gehen physische HTML-Tags jedoch nicht ein. -
Logische Tags legen die Bedeutung eines Elements fest und tragen damit zur semantischen Struktur einer Webseite bei. Sie ermöglichen es Suchmaschinen, Browsern und assistiven Technologien, Inhalte besser zu verstehen. Ein Beispiel dafür ist das HTML-Tag
<em>, welches für Betonungen innerhalb eines Textes verwendet wird und oftmals für eine kursive Darstellung der entsprechenden Passage sorgt.
- Flexibel: Hosting, das jedem Website-Traffic standhält
- Verlässlich: Inklusive 24/7-Support und persönlicher Beratung
- Sicher: Kostenloses SSL-Zertifikat, DDoS-Schutz und Backups
Die wichtigsten Tags für HTML Formatting
HTML stellt eine breite Palette von Tags bereit, um Webseiteninhalte zu formatieren. Die Möglichkeiten reichen von der Strukturierung ganzer Seitenlayouts bis hin zur Anpassung einzelner Elemente. Unser Guide zu HTML-Tags bietet einen Überblick über die wichtigsten Befehle. Die nachfolgende Übersicht fokussiert sich speziell auf Tags für das HTML Fomatting von Texten beziehungsweise Textpassagen und ihre jeweiligen Funktionen:
| HTML-Tag | Beschreibung |
|---|---|
<b>
|
Dieses physische Tag sorgt dafür, dass ein Wort, ein Satz oder eine Textpassage fett geschrieben wird. |
<strong>
|
Mit dem logischen HTML-Tag werden Abschnitte hervorgehoben – sowohl visuell als auch für den Browser. |
<i>
|
Durch dieses physische Tag werden einzelne Wörter, Sätze oder Passagen kursiv angezeigt. |
<em>
|
Das logische Tag dient dazu, die Wichtigkeit einzelner Passagen herauszustellen. Oft werden die markierten Inhalte kursiv dargestellt. |
<u>
|
Die markierte Passage wird unterstrichen. |
<h1> bis <h6>
|
Diese Tags dienen der Erstellung von Überschriften. Dabei gilt: Je niedriger die Ziffer, desto größer wird die Headline dargestellt. |
<p>
|
Mit diesem Tag lassen sich Absätze erstellen. |
<big>
|
Mithilfe dieses HTML-Tags werden Abschnitte größer als normal angezeigt. |
<small>
|
Dieses Tag wird genutzt, um die Schriftgröße eines Abschnitts zu verkleinern. |
<sup>
|
Das Tag kommt zum Einsatz, um einzelne Zeichen – beispielsweise in der Gleichung e = mc² – hochzustellen, die dann verkleinert und etwas oberhalb der Zeile dargestellt werden. |
<sub>
|
Durch dieses Tag werden Zeichen tiefgestellt angezeigt. Ein Beispiel dafür ist die Summenformel von Wasser – H<sub>2</sub>O. |
<ins>
|
Das Tag zeigt an, dass Text in ein Dokument eingefügt wurde. |
<del>
|
Das Tag zeigt an, dass Text aus einem Dokument gelöscht wurde. |
<strike>
|
Dieses Tag wird verwendet, um einzelne Passagen durchzustreichen. |
<mark>
|
Mit diesem HTML-Tag lässt sich der Hintergrund von Wörtern, Sätzen und Textabschnitten farblich hervorheben. |
- Inklusive Wildcard-SSL-Zertifikat
- Inklusive Domain Lock
- Inklusive 2 GB E-Mail-Postfach
HTML Formatting: Anwendungsbeispiele
Die HTML-Formatierung bietet unzählige Möglichkeiten, um Texte und andere Elemente auf Webseiten zu strukturieren beziehungsweise ansprechend zu gestalten. Um das Potenzial von HTML Formatting voll auszuschöpfen, ist es wichtig, zu wissen, wie die verschiedenen HTML-Tags eingesetzt werden. Die nachfolgenden Anwendungsbeispiele verdeutlichen, wie dies grundsätzlich funktioniert.
Anwendungsbeispiel 1: Text in Fettschrift darstellen
Damit ein Wort oder eine Textpassage in fetter Schrift angezeigt wird, verwenden Sie das HTML-Tag <b>. Als physisches Tag verändert der Befehl lediglich das Aussehen des entsprechenden Abschnitts.
<!DOCTYPE html>
<html>
<head>
<title>Anwendungsbeispiel für Text in Fettschrift</title>
</head>
<body>
<p>Mithilfe des richtigen Tags wird <b>Text in fetter Schrift</b> abgebildet.</p>
</body>
</html>Output:
Mithilfe des richtigen Tags wird Text in fetter Schrift abgebildet.
Anwendungsbeispiel 2: Textabschnitte hervorheben
Wenn es Ihr Ziel ist, eine Passage sowohl für Leserinnen und Leser als auch für Suchmaschinen und Browser hervorzuheben, verwenden Sie das HTML-Tag <strong>. Dieses betont die Wichtigkeit des markierten Abschnitts. Auch hier wird die entsprechende Passage in der Regel fett angezeigt.
<!DOCTYPE html>
<html>
<head>
<title>Anwendungsbeispiel für die Hervorhebung von Textpassagen</title>
</head>
<body>
<p>Das letzte Wort des Satzes wird <strong>hervorgehoben</strong>.</p>
</body>
</html>Output:
Das letzte Wort des Satzes wird hervorgehoben.
Anwendungsbeispiel 3: Wörter und Textpassagen in kursiv anzeigen lassen
Fremdwörter werden in Texten nicht selten in kursiver Schrift dargestellt, damit sie beim Lesen direkt auffallen. In diesem Fall kommt das HTML-Tag <i> zum Einsatz.
<!DOCTYPE html>
<html>
<head>
<title>Anwendungsbeispiel für kursive Schrift</title>
</head>
<body>
<p>Das nachfolgende Wort wird in <i>Kursivschrift</i> angezeigt.</p>
</body>
</html>Output:
Das nachfolgende Wort wird in Kursivschrift angezeigt.
Anwendungsbeispiel 4: Textabschnitte unterstreichen
Natürlich bietet HTML Formatting auch die Möglichkeit, Wörter oder ganze Passagen zu unterstreichen, also mit einer Linie zu unterlegen. Dazu ist es erforderlich, auf das <u>-Tag zurückzugreifen.
<!DOCTYPE html>
<html>
<head>
<title>Anwendungsbeispiel für unterstrichene Abschnitte</title>
</head>
<body>
<p>Ein Wort zu <u>unterstreichen</u>, ist in unterschiedlichen Situationen sinnvoll.</p>
</body>
</html>Output:
Anwendungsbeispiel 5: Wörter durchstreichen
Inhalte, die vom <strike>-Tag umschlossen sind, werden durchgestrichen angezeigt. Die Verwendung dieses HTML-Tags bietet sich unter anderem an, um veraltete beziehungsweise nicht mehr aktuelle Informationen zu kennzeichnen.
<!DOCTYPE html>
<html>
<head>
<title>Anwendungsbeispiel für durchgestrichene Passagen</title>
</head>
<body>
<p>Das Angebot ist noch bis zum <strike>1. November</strike> 1. Dezember gültig.</p>
</body>
</html>Output:
