HTML For­mat­ting be­zeich­net den Prozess der Struk­tu­rie­rung und Ge­stal­tung von Web­sei­ten­in­hal­ten wie Texten und Bildern durch die Ver­wen­dung von HTML-Tags. Die richtige Nutzung dieser Tags er­mög­licht es, Inhalte klar, über­sicht­lich und an­spre­chend dar­zu­stel­len.

De­fi­ni­ti­on: Was bedeutet HTML For­mat­ting?

Die Aus­zeich­nungs­spra­che HTML stellt­grund­le­gen­de Werkzeuge zur Verfügung, um die ver­schie­de­nen Sei­ten­ele­men­te zu struk­tu­rie­ren. Die einzelnen Elemente lassen sich mithilfe von HTML-Tags anordnen, was man als HTML For­mat­ting be­zeich­net. Auf diese Weise lässt sich de­fi­nie­ren, wie Texte, Bilder und Co. in einem HTML-Dokument angezeigt werden. Die Tags gestatten es bei­spiels­wei­se, Über­schrif­ten fest­zu­le­gen, Absätze zu erstellen und Auf­zäh­lun­gen als Listen dar­zu­stel­len.

Welche Zwecke erfüllt HTML For­mat­ting?

HTML For­mat­ting gestattet es, sowohl die Struktur als auch das visuelle Er­schei­nungs­bild der ver­schie­de­nen Web­sei­ten­ele­men­te zu op­ti­mie­ren. Die richtige For­ma­tie­rung trägt nicht nur zur Ver­bes­se­rung der Les­bar­keit von Texten bei, sondern er­leich­tert Nut­ze­rin­nen und Nutzern auch die Na­vi­ga­ti­on auf der Website. Gleich­zei­tig dient das HTML For­mat­ting der Such­ma­schi­nen­op­ti­mie­rung, da eine über­sicht­li­che und gut struk­tu­rier­te Website für Such­ma­schi­nen-Crawler (Programme, die Web­sei­ten­in­hal­te ana­ly­sie­ren) über­schau­ba­rer ist.

Tipp

In unserem Guide „HTML lernen: Das große Ein­stei­ger-Tutorial“ ver­mit­teln wir Ba­sis­wis­sen zur Aus­zeich­nungs­spra­che HTML.

Welche Arten von Tags für die HTML-For­ma­tie­rung gibt es?

Beim HTML For­mat­ting wird zwischen phy­si­schen und logischen Tags (im Eng­li­schen als „physical tags” und „logical tags” be­zeich­net) un­ter­schie­den:

  • Physische Tags bestimmen das genaue Aussehen eines Sei­ten­ele­ments. Sie de­fi­nie­ren direkt, wie Text und andere Elemente visuell dar­ge­stellt werden. Beispiele dafür sind das Tag <b> für fett­ge­druck­ten Text und der Befehl <i> für kursiven Text. Auf den se­man­ti­schen Kontext gehen physische HTML-Tags jedoch nicht ein.
  • Logische Tags legen die Bedeutung eines Elements fest und tragen damit zur se­man­ti­schen Struktur einer Webseite bei. Sie er­mög­li­chen es Such­ma­schi­nen, Browsern und as­sis­ti­ven Tech­no­lo­gien, Inhalte besser zu verstehen. Ein Beispiel dafür ist das HTML-Tag <em>, welches für Be­to­nun­gen innerhalb eines Textes verwendet wird und oftmals für eine kursive Dar­stel­lung der ent­spre­chen­den Passage sorgt.
Web­hos­ting
Das beste Web­hos­ting zum Spit­zen­preis
  • 3x schneller und 60 % günstiger
  • Maximale Ver­füg­bar­keit mit > 99.99 %
  • Nur bei IONOS: Bis zu 500 GB Spei­cher­platz inklusive

Die wich­tigs­ten Tags für HTML For­mat­ting

HTML stellt eine breite Palette von Tags bereit, um Web­sei­ten­in­hal­te zu for­ma­tie­ren. Die Mög­lich­kei­ten reichen von der Struk­tu­rie­rung ganzer Sei­ten­lay­outs bis hin zur Anpassung einzelner Elemente. Unser Guide zu HTML-Tags bietet einen Überblick über die wich­tigs­ten Befehle. Die nach­fol­gen­de Übersicht fo­kus­siert sich speziell auf Tags für das HTML Fomatting von Texten be­zie­hungs­wei­se Text­pas­sa­gen und ihre je­wei­li­gen Funk­tio­nen:

HTML-Tag Be­schrei­bung
<b> Dieses physische Tag sorgt dafür, dass ein Wort, ein Satz oder eine Text­pas­sa­ge fett ge­schrie­ben wird.
<strong> Mit dem logischen HTML-Tag werden Ab­schnit­te her­vor­ge­ho­ben – 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 Wich­tig­keit einzelner Passagen her­aus­zu­stel­len. Oft werden die mar­kier­ten Inhalte kursiv dar­ge­stellt.
<u> Die markierte Passage wird un­ter­stri­chen.
<h1> bis <h6> Diese Tags dienen der Er­stel­lung von Über­schrif­ten. Dabei gilt: Je niedriger die Ziffer, desto größer wird die Headline dar­ge­stellt.
<p> Mit diesem Tag lassen sich Absätze erstellen.
<big> Mithilfe dieses HTML-Tags werden Ab­schnit­te größer als normal angezeigt.
<small> Dieses Tag wird genutzt, um die Schrift­grö­ße eines Ab­schnitts zu ver­klei­nern.
<sup> Das Tag kommt zum Einsatz, um einzelne Zeichen – bei­spiels­wei­se in der Gleichung e = mc² – hoch­zu­stel­len, die dann ver­klei­nert und etwas oberhalb der Zeile dar­ge­stellt werden.
<sub> Durch dieses Tag werden Zeichen tief­ge­stellt angezeigt. Ein Beispiel dafür ist die Sum­men­for­mel 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 durch­zu­strei­chen.
<mark> Mit diesem HTML-Tag lässt sich der Hin­ter­grund von Wörtern, Sätzen und Text­ab­schnit­ten farblich her­vor­he­ben.
Domain kaufen
Re­gis­trie­ren Sie Ihre perfekte Domain
  • Inklusive 1 SSL-Wildcard-Zer­ti­fi­kat pro Vertrag
  • Inklusive Domain Lock
  • Inklusive Domain Connect für einfache DNS-Ein­rich­tung

HTML For­mat­ting: An­wen­dungs­bei­spie­le

Die HTML-For­ma­tie­rung bietet unzählige Mög­lich­kei­ten, um Texte und andere Elemente auf Webseiten zu struk­tu­rie­ren be­zie­hungs­wei­se an­spre­chend zu gestalten. Um das Potenzial von HTML For­mat­ting voll aus­zu­schöp­fen, ist es wichtig, zu wissen, wie die ver­schie­de­nen HTML-Tags ein­ge­setzt werden. Die nach­fol­gen­den An­wen­dungs­bei­spie­le ver­deut­li­chen, wie dies grund­sätz­lich funk­tio­niert.

An­wen­dungs­bei­spiel 1: Text in Fett­schrift dar­stel­len

Damit ein Wort oder eine Text­pas­sa­ge in fetter Schrift angezeigt wird, verwenden Sie das HTML-Tag <b>. Als phy­si­sches Tag verändert der Befehl lediglich das Aussehen des ent­spre­chen­den Ab­schnitts.

<!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>
html

Output:

Mithilfe des richtigen Tags wird Text in fetter Schrift ab­ge­bil­det.

An­wen­dungs­bei­spiel 2: Text­ab­schnit­te her­vor­he­ben

Wenn es Ihr Ziel ist, eine Passage sowohl für Le­se­rin­nen und Leser als auch für Such­ma­schi­nen und Browser her­vor­zu­he­ben, verwenden Sie das HTML-Tag <strong>. Dieses betont die Wich­tig­keit des mar­kier­ten Ab­schnitts. Auch hier wird die ent­spre­chen­de 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>
html

Output:

Das letzte Wort des Satzes wird her­vor­ge­ho­ben.

An­wen­dungs­bei­spiel 3: Wörter und Text­pas­sa­gen in kursiv anzeigen lassen

Fremd­wör­ter werden in Texten nicht selten in kursiver Schrift dar­ge­stellt, 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>
html

Output:

Das nach­fol­gen­de Wort wird in Kur­siv­schrift angezeigt.

An­wen­dungs­bei­spiel 4: Text­ab­schnit­te un­ter­strei­chen

Natürlich bietet HTML For­mat­ting auch die Mög­lich­keit, Wörter oder ganze Passagen zu un­ter­strei­chen, also mit einer Linie zu un­ter­le­gen. Dazu ist es er­for­der­lich, auf das <u>-Tag zu­rück­zu­grei­fen.

<!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>
html

Output:

Bild: HTML Formatting: Beispiel mit unterstrichenem Text
HTML For­mat­ting: Beispiel mit un­ter­stri­che­nem Text

An­wen­dungs­bei­spiel 5: Wörter durch­strei­chen

Inhalte, die vom <strike>-Tag um­schlos­sen sind, werden durch­ge­stri­chen angezeigt. Die Ver­wen­dung dieses HTML-Tags bietet sich unter anderem an, um veraltete be­zie­hungs­wei­se nicht mehr aktuelle In­for­ma­tio­nen zu kenn­zeich­nen.

<!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>
html

Output:

Bild: HTML Formatting: Beispiel mit durchgestrichenem Text
HTML For­mat­ting: Beispiel mit durch­ge­stri­che­nem Text
Zum Hauptmenü