13/02/2022

HTML-Formatierungs-Tags

HTML-Markup besteht standardmäßig aus Tags mit CSS-Eigenschaften. Absätze, Wörter oder Buchstaben in Webseiten können mit CSS-Hilfe formatiert werden (unterstrichen, fett, kursiv …), auch die HTML-Architektur enthält standardmäßig HTML-Formatierungs-Tags mit diesen Funktionen;

Fette Tags <b> & <strong>

<b>Markieren</b>

Bei der Verwendung des Tags <b> (bold) zeigen Internetbrowser den Website-Besuchern den Text zwischen den Tags fett und schwarz an, es wird verwendet, um die Aufmerksamkeit der Website-Besucher zu erregen, es betont nicht die Wichtigkeit des Wortes oder Textes zur Browserseite. Die Verwendung von <b>-Tag in Überschriften ist unnötig, stattdessen sollten Überschriften-Tags (h1, h2, h3, h4, h5, h6) verwendet werden. Wenn das <b>-Tag durch die Zuweisung einer Klasse nicht viel verwendet wird, kann der Text über die CSS-Einstellungen fett gedruckt werden, anstatt das <b>-Tag zu verwenden.

<p>Überschriften-Tags sollten anstelle <b>des fetten</b> Tags in den Titeln der Website-Inhalte verwendet werden.</p>
Browser Ansicht: Überschriften-Tags sollten anstelle des fetten Tags in den Titeln der Website-Inhalte verwendet werden.

<strong>

Wenn das <strong>-Tag verwendet wird, zeigen Internetbrowser den Website-Besuchern den Text zwischen dem <strong>-Tag so fett und schwarz wie im <b>-Tag, wodurch die Bedeutung des Textes auf Seiten des Browsers betont wird.

<p><strong>Das starke Tag</strong> betont die Wichtigkeit des Textes.</p>

Browser Ansicht:

Das starke Tag betont die Wichtigkeit des Textes.

Unterschied zwischen <b> und <strong> Tags

Das <b>-Tag hilft Crawlern im Allgemeinen, Text visuell fett darzustellen, während das <strong>-Tag dem Browser hilft, die Bedeutung von Text hervorzuheben, der für den gesamten Seiteninhalt relevant ist. Diese beiden Tags bieten Website-Besuchern das gleiche Bild, schwarzen und fetten Text, aber der Hauptunterschied liegt auf der Browserseite.

Anstatt das <b>-Tag zu verwenden, kann dasselbe Bild durch Ändern der Schriftarteinstellungen des Textes mit CSS bereitgestellt werden, aber die Präferenz der CSS-Einstellungen anstelle dieses Tags führt nicht zu demselben Ergebnis, da das <strong>-Tag ist wichtig. Aus SEO-Sicht sollte anstelle des <b>-Tags das <strong>-Tag verwendet werden.

Tag <u> unterstreichen

Das Tag <u> (underline) wird verwendet, um einen beliebigen Teil des Textes hervorzuheben und Aufmerksamkeit zu erregen.

<p>Der Text zwischen dem <u>Underline-Tag</u> wird im Browser unterstrichen angezeigt.</p>

Browser Ansicht:

Der Text zwischen dem Underline-Tag wird im Browser unterstrichen angezeigt.

Kursive Tags <i> & <em> & <cite> & <var>

<i>

Das HTML i-Tag (<i> Italic)-Tag zeigt den Text, wie der Name schon sagt, in Kursivschrift an. Es wird im Allgemeinen bei der Beschreibung von biologischen lateinischen Begriffen und bei der Beschreibung von Fachbegriffen verwendet.

Wie das <b>-Tag präsentiert es es nicht nur visuell, sondern gibt den Text innerhalb des <i>-Tags für den Browser an.

<p><i>Proxy-Server</i> steuern und leiten den Datenverkehr weiter.</p>

Browser Ansicht:

Proxy-Server steuern und leiten den Datenverkehr weiter.

<em>

Bei Verwendung des Tags <em> (emphasis) wird Text wie der Tag <i> in Kursivschrift angezeigt. Abgeleitet von den Anfangsbuchstaben der Wörter Hervorhebung, wird dieses Tag verwendet, um hervorzuheben, wie der Name schon sagt. Das Hervorhebungs Tag (<em>) wird verwendet, um Wörter hervorzuheben, die für den Inhalt relevanter sind, anstatt langen Text auf der Seite zu markieren.

Die Verwendung des <em>-Tags zum Zweck der Kursivdarstellung ist bedeutungslos, stattdessen kann die Kursivdarstellung der Schriftart in den CSS-Einstellungen bevorzugt werden.

<p><em>Das Hervorhebungs-Tag</em> wird verwendet, um den Inhalt hervorzuheben.</p>

Browser Ansicht:

Das Hervorhebungs-Tag wird verwendet, um den Inhalt hervorzuheben.

Unterschied zwischen <i> und <em>

Das Tag <i> steht für ein Fremdwort oder einen Fachausdruck, das Tag <em> für das Wort, das den Inhalt hervorhebt. Beide sehen für Website-Besucher optisch gleich aus, auf der Browser-Seite sieht die Situation jedoch anders aus.

<cite>

Cite (citation element)-Tag wird verwendet, wenn über ein Buch, Lied, Gedicht oder einen Film gesprochen wird, um den Namen des betreffenden Werks anzugeben. Internetbrowser stellen den Text im <cite>-Tag kursiv dar, aber der Hauptzweck dieses Tags ist natürlich nicht, als kursive Schriftart verwendet zu werden.

<p><cite>The Lord of the Rings</cite> by J.R.R Tolkien.</p>

Browser Ansicht:

The Lord of the Rings by J.R.R Tolkien

<var>

Das Tag <var> (variable) wird verwendet, um Variablen innerhalb der Seite anzugeben, die Variablen innerhalb des Tags <var> erscheinen standardmäßig kursiv.

Bei der Angabe der Formeln von Wissenschaftszweigen wie Mathematik und Physik werden die Variablen im <var>-Tag angezeigt.

<p><var>E</var>=<var>m</var><var>c<sup>2</sup></var></p>

Browser Ansicht:

E=mc2

<address>

Wie der Name schon sagt, sollte das Tag <address> verwendet werden, wenn eine Adresse angegeben wird. Es wird von Browsern kursiv angezeigt, aber die Verwendung des <address>-Tags, um es kursiv erscheinen zu lassen, ist falsch.

<p>Google-Hauptsitz</p><address>1600 Amphitheatre Parkway Mountain View, CA 94043, ABD</address>

Browser Ansicht:

Google-Hauptsitz

1600 Amphitheatre Parkway Mountain View, CA 94043, ABD

Etiketten, die Text durchstreichen

<s>

Bei Verwendung des durchgestrichenen <s>-Tags (strikethrough) zeigen Internetbrowser den Text zwischen dem <s>-Tag als durchgestrichen an.

Es kann verwendet werden, um einen zuvor geschriebenen Satz zu streichen, der nicht mehr relevant ist.

<p><s>Produkte auf Lager mit 50% Rabatt!</s>Kein Bestand!</p>

Browser Ansicht:

Produkte auf Lager mit 50% Rabatt! Kein Bestand!

<del>

Wenn das <del>-Tag (delete) verwendet wird, zeigt es den Text zwischen dem <del>-Tag als von Internetbrowsern durchgestrichen an, ähnlich wie beim <s>-Tag.

Es stellt dar, dass ein Teil des Textes gelöscht wurde, aber es ist kein Label, das viel verwendet wird.

<p>HTML ist eine <del>Programmier</del> Markup-Sprache.</p>

Browser Ansicht:

HTML ist eine Programmier Markup-Sprache.

<mark>

Das <mark>-Tag wird verwendet, um einen bestimmten Bereich im Text zu markieren, standardmäßig ist die Hintergrundfarbe des Textes innerhalb des <mark>-Tags gelb markiert.

Es betont nicht die Wichtigkeit des Inhalts wie das <strong>-Tag.Das <mark>-Tag wird verwendet, um dem Website-Besucher den gekennzeichneten Bereich mit Farbunterschieden anzuzeigen.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
<mark>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</mark>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Browser Ansicht:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<small>

Normalerweise beträgt die Standardschriftgröße des Browsers 16 Pixel für das <p>-Tag. Bei Verwendung des <small>-Tags ändert sich die Schriftgröße des Textes zwischen dem <small></small>-Tag auf 13,3333 Pixel. Es ist kein sehr bevorzugtes Tag, da es mit CSS dasselbe Aussehen haben kann.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
<small>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</small> 
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Browser Ansicht:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Untere und obere Aussagen

<sub>-Tag

Bei Verwendung von <sub> (subscript), dem Subscript-Tag, wird der Teil zwischen dem <sub></sub>-Tag browserseitig tiefgestellt dargestellt. Es kann in der Chemie verwendet werden, um die Ordnungszahl von Molekülen anzugeben, oder in der Mathematik, um Sequenzen anzugeben.

<p>Die Formel von Wasser, der Quelle des Lebens, ist H<sub>2</sub>O.</p>

Browser Ansicht:

Die Formel von Wasser, der Quelle des Lebens, ist H2O.

<sup>-Tag

<sup> (superscript), bei Verwendung des hochgestellten Tags wird der Teil zwischen dem <sup></sup>-Tag browserseitig hochgestellt angezeigt. Es wird verwendet, um Exponentialausdrücke in der Mathematik darzustellen und die Reihenfolge in Sprachen anzugeben.

<p>(a-b)<sup>2</sup> =a> <sup>2</sup> -2ab +b<sup>2</sup></p><p>5<sup>th</sup></p>

Browser Ansicht:

(a-b)2 = a2 -2ab +b2 5th

Überschriften-Tags

Überschriften-Tags

Jeder der 6 Titel-Tags (h1,h2,h3,h4,h5,h6) in der HTML-Struktur spiegelt den Teil zwischen den Tags mit einer anderen Schriftgröße an den Browser wider. Wenn Sie von H1 zu H6 gehen, nehmen die Wichtigkeit des Tags und die Schriftgröße ab.

<h1>-Tag

Das H1-Tag hat die größte Schriftart unter den Überschriften-Tags. Standardmäßig wird der Titel zwischen dem <h1>-Tag von Browsern als 32px angezeigt.

<h2>-Tag

Die Standardschriftgröße beträgt 24 Pixel.

<h3>-Tag

Die Standardschriftgröße beträgt 18,72 Pixel.

<h4>-Tag

Die Standardschriftgröße beträgt 16 Pixel.

<h5>-Tag

Die Standardschriftgröße beträgt 13,28 Pixel.

<h6>-Tag

Die Standardschriftgröße beträgt 10,72 Pixel.

<h1>Titel 1</h1>
<h2>Titel 2</h2>
<h3>Titel 3</h3>
<h4>Titel 4</h4>
<h5>Titel 5</h5>
<h6>Titel 6</h6>

Browser Ansicht:

Titel 1

Titel 2

Titel 3

Titel 4

Titel 5
Titel 6

Verweise:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element