HTML Formatierung (engl.: HTML Formatting): In HTML gibt es eine Vielzahl von Tags, die speziell für die Formatierung von Text entwickelt wurden. Diese Tags helfen Ihnen dabei, den Text auf Ihrer Webseite zu strukturieren und optisch ansprechend zu gestalten. Im Folgenden werde ich Ihnen die wichtigsten Tags zur Textformatierung in HTML zeigen und erklären, wie Sie sie verwenden können.
1. Fettgedruckter Text (<strong> und <b>)
Um Text fett zu formatieren, gibt es zwei verschiedene Tags:
<strong>: Dieser Tag wird verwendet, um semantisch wichtigen Text zu markieren. Text innerhalb von<strong>wird nicht nur fett dargestellt, sondern auch als bedeutend gekennzeichnet.<b>: Dieser Tag wird verwendet, um Text einfach nur fett darzustellen, ohne eine besondere semantische Bedeutung.
Beispiel:
<p>Dies ist ein <strong>wichtiger</strong> Text.</p>
<p>Das ist einfach nur <b>fett</b>.</p><strong> wird bevorzugt verwendet, wenn Sie dem Text auch inhaltlich eine besondere Bedeutung geben möchten, während <b> nur visuelle Fettformatierung bietet.
2. Kursiver Text (<em> und <i>)
Für kursive Darstellung gibt es ebenfalls zwei Tags:
<em>: Dieser Tag betont den Text semantisch, ähnlich wie<strong>, und zeigt den Text gleichzeitig kursiv an.<i>: Dient lediglich der optischen Formatierung, indem der Text kursiv dargestellt wird.
Beispiel:
<p>Das ist <em>betonter</em> Text.</p>
<p>Dies ist einfach nur <i>kursiv</i>.</p>Auch hier wird <em> für betonten, wichtigen Text verwendet, während <i> nur stilistische Zwecke erfüllt.
3. Unterstrichener Text (<u>)
Der <u>-Tag unterstreicht Text, allerdings wird dieser Tag heutzutage seltener verwendet, da unterstrichener Text oft mit Links verwechselt werden kann.
Beispiel:
<p>Dieser Text ist <u>unterstrichen</u>.</p>Seien Sie vorsichtig mit der Verwendung von unterstrichenem Text, um Verwirrung zu vermeiden.
4. Durchgestrichener Text (<del> und <s>)
Um Text durchzustreichen, gibt es zwei Tags:
<del>: Wird verwendet, um anzuzeigen, dass der Text gelöscht oder ersetzt wurde.<s>: Dient nur der visuellen Darstellung von durchgestrichenem Text, ohne Bedeutung.
Beispiel:
<p>Der <del>alte</del> Text wurde durch diesen neuen Text ersetzt.</p>
<p>Dieser Text ist <s>falsch</s>, aber bleibt noch stehen.</p>Verwenden Sie <del>, um Änderungen oder Korrekturen anzuzeigen, und <s> für visuelle Darstellung.
5. Hochgestellter und tiefgestellter Text (<sup> und <sub>)
Wenn Sie Text oder Zahlen hoch- oder tiefstellen möchten (z. B. in chemischen Formeln oder mathematischen Ausdrücken), verwenden Sie <sup> (hochgestellt) und <sub> (tiefgestellt).
Beispiel:
<p>H<sub>2</sub>O ist die chemische Formel für Wasser.</p>
<p>5<sup>2</sup> ergibt 25.</p>Das <sup>-Tag wird für hochgestellte Zeichen und das <sub>-Tag für tiefgestellte Zeichen verwendet.
6. Vorformatierter Text (<pre>)
Der <pre>-Tag zeigt Text genau so an, wie er im HTML-Code geschrieben wurde, inklusive Leerzeichen und Zeilenumbrüchen. Dies ist besonders nützlich, um Codeblöcke oder bereits formatierten Text anzuzeigen.
Beispiel:
<pre>
Dies ist ein vorformatierter
Text mit allen Zeilenumbrüchen
und Leerzeichen.
</pre>In der Ausgabe bleibt der Text so, wie Sie ihn im HTML-Quellcode eingegeben haben.
7. Markierter Text (<mark>)
Der <mark>-Tag hebt Text hervor, als ob er mit einem Textmarker markiert worden wäre.
Beispiel:
<p>Dieser Text ist <mark>hervorgehoben</mark>.</p>Dieser Tag ist nützlich, um wichtige Informationen visuell zu betonen.
8. Abkürzungen und Definitionen (<abbr> und <dfn>)
Wenn Sie Abkürzungen oder Definitionen anzeigen möchten, verwenden Sie die folgenden Tags:
<abbr>: Kennzeichnet eine Abkürzung und zeigt den vollen Text bei einem Mouseover an, wenn dastitle-Attribut verwendet wird.<dfn>: Markiert einen definierten Begriff.
Beispiel:
<p>Die <abbr title="World Health Organization">WHO</abbr> ist eine globale Gesundheitsorganisation.</p>
<p>Ein <dfn>Algorithmus</dfn> ist eine präzise Folge von Anweisungen zur Lösung eines Problems.</p>Mit <abbr> können Sie eine vollständige Erklärung anzeigen lassen, während <dfn> den Fokus auf Begriffe legt.
9. Blockzitate (<blockquote> und <q>)
<blockquote>: Wird für längere Zitate verwendet und rückt den Text oft etwas ein.<q>: Dient für kurze, Inline-Zitate und fügt automatisch Anführungszeichen hinzu.
Beispiel:
<blockquote>
"Das Leben ist wie eine Schachtel Pralinen, man weiß nie, was man bekommt."
</blockquote>
<p>Sie sagte: <q>Es wird ein schöner Tag.</q></p>Längere Zitate werden mit <blockquote> ausgezeichnet, während <q> für kurze Zitate im Fließtext gedacht ist.
10. Monospace-Schriftart (<code>, <kbd>, <samp>)
<code>: Verwendet für Code oder Programmbefehle.<kbd>: Kennzeichnet Benutzereingaben über die Tastatur.<samp>: Stellt die Ausgabe eines Programms dar.
Beispiel:
<p>Geben Sie <kbd>python main.py</kbd> in die Konsole ein.</p>
<p>Der folgende Code gibt "Hallo, Welt!" aus:</p>
<pre><code>
print("Hallo, Welt!")
</code></pre>
<p>Die Ausgabe lautet: <samp>Hallo, Welt!</samp></p>Diese Tags sind besonders nützlich, wenn Sie technische Dokumentationen oder Anleitungen für Code schreiben.
Häufige Fragen zur HTML Formatierung
Was ist der Unterschied zwischen <strong> und <b>?
<strong> hat eine semantische Bedeutung und zeigt an, dass der Text besonders wichtig ist, während <b> nur fett darstellt, ohne zusätzliche Bedeutung.
Wann sollte ich <em> statt <i> verwenden?
<em> wird verwendet, wenn der Text betont werden soll. Es hat eine semantische Bedeutung, die von Suchmaschinen und Screenreadern erkannt wird. <i> dient lediglich der visuellen Kursivdarstellung.
Kann ich mehrere Formatierungs-Tags kombinieren?
Ja, Sie können mehrere Formatierungstags kombinieren. Zum Beispiel, um Text fett und kursiv darzustellen.
Was ist der Vorteil von <mark> gegenüber anderen Tags zur Hervorhebung?
<mark> hebt Text visuell hervor, als ob er mit einem Textmarker markiert worden wäre. Es ist ideal, um wichtige Informationen zu kennzeichnen, die sofort ins Auge fallen sollen.
Wann sollte ich <pre> verwenden?
Verwenden Sie <pre>, wenn Sie Text oder Code genauso anzeigen möchten, wie er im HTML-Quelltext geschrieben ist, inklusive Leerzeichen und Zeilenumbrüchen.