HTML - Auszeichnungen für Textphrasen

Leon A. -

Arten von Phrase-Tags

<em> Tag

Das <em> Tag hebt Text in einem HTML-Dokument hervor. Der Text innerhalb des <em> Tags wird normalerweise kursiv dargestellt, um ihn visuell vom umgebenden Text abzuheben. Dieses Tag zeigt eine betonte Hervorhebung des Textes an und deutet darauf hin, dass er mit einem anderen Ton oder Rhythmus als der Rest des Inhalts gelesen werden sollte.

Beispielverwendung

<p>Dies ist ein Beispiel für <em>hervorgehobenen Text</em> mit dem <em> Tag.</p>

<strong> Tag

Das <strong> Tag kennzeichnet wichtigen Text in einem HTML-Dokument. Der Text innerhalb des <strong> Tags wird normalerweise fett dargestellt, um seine Bedeutung visuell hervorzuheben. Dieses Tag bedeutet, dass der Text sehr wichtig oder dringend ist und ihm mehr Gewicht als dem umgebenden Inhalt beigemessen werden sollte.

Beispielverwendung

<p>Dies ist ein Beispiel für <strong>wichtigen Text</strong> mit dem <strong> Tag.</p>

<code> Tag

Das <code> Tag stellt ein Stück Computercode in einem HTML-Dokument dar. Der Text innerhalb des <code> Tags wird normalerweise in einer Monospace-Schriftart dargestellt, die eine Schriftart mit fester Breite ist und Zeichen vertikal ausrichtet. Dieses Tag wird häufig verwendet, um Code-Snippets, Schlüsselwörter von Programmiersprachen oder Dateinamen anzuzeigen.

Beispielverwendung

<p>Um eine Variable in JavaScript zu deklarieren, verwenden Sie das Schlüsselwort <code>let</code> gefolgt vom Variablennamen.</p>

<kbd> Tag

Das <kbd> Tag stellt Benutzereingaben oder Tastaturzeichen in einem HTML-Dokument dar. Der Text innerhalb des <kbd> Tags wird normalerweise in einer Monospace-Schriftart dargestellt, ähnlich dem <code> Tag. Dieses Tag zeigt an, dass der Text einen Tastendruck oder eine Kombination von Tastendrücken darstellt, die ein Benutzer eingeben sollte.

Beispielverwendung

<p>Um Text zu kopieren, drücken Sie <kbd>Strg</kbd> + <kbd>C</kbd> unter Windows oder <kbd>Command</kbd> + <kbd>C</kbd> auf dem Mac.</p>

<samp> Tag

Das <samp> Tag stellt eine Beispielausgabe eines Computerprogramms in einem HTML-Dokument dar. Der Text innerhalb des <samp> Tags wird normalerweise in einer Monospace-Schriftart dargestellt, ähnlich den <code> und <kbd> Tags. Dieses Tag wird verwendet, um Ausgaben oder Ergebnisse anzuzeigen, die von einem Programm oder Skript erzeugt wurden.

Beispielverwendung

<p>Nach dem Ausführen des Programms wird die Ausgabe sein: <samp>Hallo, Welt!</samp></p>

<var> Tag

Das <var> Tag stellt eine Variable in Programmier- oder mathematischen Ausdrücken in einem HTML-Dokument dar. Der Text innerhalb des <var> Tags wird normalerweise kursiv dargestellt, um ihn visuell vom umgebenden Text abzuheben. Dieses Tag zeigt an, dass der Text eine Variable oder einen Platzhalter darstellt, der sich ändern oder durch tatsächliche Werte ersetzt werden kann.

Beispielverwendung

<p>Die Formel zur Berechnung der Fläche eines Rechtecks lautet: 
<var>Fläche</var> = <var>Länge</var> × <var>Breite</var>.</p>

Kombinieren von Phrasen-Tags

Sie können Phrasen-Tags in HTML kombinieren, um einem Text mehrere semantische Bedeutungen zuzuweisen. Durch das Verschachteln eines Phrasen-Tags in einem anderen können Sie genauere Informationen über den Inhalt vermitteln. Dies ist nützlich, wenn Sie bestimmte Teile eines Code-Snippets, einer Benutzereingabe oder einer Programmausgabe hervorheben oder betonen möchten.

Beispiel: Verwendung des <strong>-Tags innerhalb eines <code>-Tags

<p>Um eine Konstante in JavaScript zu deklarieren, verwenden Sie das Schlüsselwort <code><strong>const</strong></code> gefolgt vom Namen der Konstante.</p>

In diesem Fall zeigt der <code>-Tag, dass "const" ein Codefragment ist, während der <strong>-Tag seine Bedeutung als Schlüsselwort hervorhebt.

Beispiel: Kombination des <em>-Tags innerhalb eines <var>-Tags

<p>Die Formel zur Berechnung des Volumens eines Zylinders lautet: <var>Volumen</var> = π × <var><em>r</em></var>² × <var>Höhe</var>, wobei <var><em>r</em></var> der Radius der Grundfläche ist.</p>

Hier stellen die <var>-Tags Variablen in der Formel dar, während der <em>-Tag innerhalb eines der <var>-Tags die Bedeutung der Radius-Variable betont.

Durch die Kombination von Phrasen-Tags können Sie aussagekräftigere und semantisch reichhaltigere HTML-Markup erstellen, das die Struktur und Bedeutung Ihres Inhalts sowohl für menschliche Leser als auch für unterstützende Technologien besser vermittelt.