Einführung in HTML-Tags: Ein umfassender Leitfaden
Für angehende Front-End-Entwickler ist das Erlernen von HTML ein unumgänglicher erster Schritt. Die Hypertext Markup Language, kurz HTML, bildet das Fundament des Großteils des Internets.
HTML ist aus verschiedenen Elementen wie Tags, Attributen und Elementen aufgebaut. Hier konzentrieren wir uns auf HTML-Tags. Sie dienen dazu, Browsern Anweisungen zu geben, wie Inhalte in Überschriften, Absätzen, Bildern und anderen Formaten strukturiert werden sollen. HTML-Tags fungieren somit als Schlüsselwörter, die die Anzeige und Formatierung von Inhalten durch den Browser festlegen.
Browser interpretieren HTML-Tags sequentiell von oben nach unten. Die Anzahl der HTML-Tags innerhalb einer Webseite ist unbegrenzt.
- Sämtliche HTML-Tags werden von spitzen Klammern <> umschlossen.
- Jedes einzelne HTML-Tag hat eine eigene spezifische Funktion.
- Die Mehrheit der HTML-Tags besteht aus einem öffnenden <tag> und einem schließenden </tag>.
HTML-Tags, -Elemente und -Attribute: Eine Differenzierung
Häufig werden die Begriffe HTML-Tags und -Elemente synonym verwendet. Es ist jedoch wichtig zu verstehen, dass es sich technisch gesehen um unterschiedliche Konzepte handelt.
HTML-Tags sind der Baustein für HTML-Elemente. Ein HTML-Element entsteht durch das Umschließen von Inhalt mit einem öffnenden und einem schließenden Tag, der den Inhaltstyp definiert.
Ein Beispiel für ein HTML-Element:
<p> Dies ist ein Absatz </p>
<p> ist hier ein HTML-Tag.
HTML-Attribute liefern Zusatzinformationen über HTML-Elemente und werden innerhalb der öffnenden Tags platziert.
Hier ein Beispiel für ein HTML-Attribut:
<button id="SubmitOrder" class="btn">Bestellen</button>
HTML-Tags: Ein grundlegendes Repertoire
Seit seiner Einführung durch Tim Berners-Lee im Jahr 1993 hat sich HTML als Auszeichnungssprache kontinuierlich weiterentwickelt. Die erste HTML-Version umfasste 18 Tags. Mit jeder neuen HTML-Version wurden weitere hinzugefügt, wobei HTML5 im Jahr 2014 das jüngste Update darstellt.
Ein Vergleich zwischen HTML und HTML5 zeigt, dass letzteres semantische Tags wie <article>, <header> und <footer> beinhaltet, die den Inhalt präziser beschreiben. Inzwischen existieren über 100 HTML-Tags. Hier stellen wir einige der wichtigsten vor:
<!DOCTYPE>
Der DOCTYPE ist technisch gesehen keine Kennzeichnung, sondern eine Deklaration, die dem Browser mitteilt, um welchen Dateityp es sich handelt. Dieses Tag signalisiert dem Browser den HTML-Standard, der genutzt wird.
In HTML5 wird dies durch den Ausdruck deklariert:
<!DOCTYPE html>
oder
<!doctype html>
Wichtig: Diese Deklaration hat kein schließendes Tag und ist unabhängig von Groß- und Kleinschreibung.
<html> </html>
Das Tag <html>…</html> folgt auf die DOCTYPE-Deklaration. Es kennzeichnet das Dokument als Webseite und schließt alle weiteren Elemente ein. Das <html>-Tag definiert den Beginn und das Ende eines HTML-Dokuments.
Ein <html>-Tag sieht wie folgt aus:
<html>Inhalt</html>
<head> </head>
Der Kopfbereich eines HTML-Dokuments wird durch das <head>-Tag repräsentiert. Dieses Tag, das innerhalb des <html>-Tags enthalten ist, enthält allgemeine Informationen über die Webseite.
Das <head>-Tag beinhaltet weitere Tags, die detaillierte Informationen zur Seite liefern, wie beispielsweise den Titel und den Autor. Der Inhalt dieses Bereichs ist auf der Seite selbst nicht sichtbar.
Die Syntax eines <head>-Tags:
<head> …….. </head>
<title> </title>
Das <title>-Tag bestimmt den Titel der Webseite und befindet sich innerhalb des <head>-Tags. Dieser Titel erscheint in der Titelleiste oder auf der Registerkarte des Browserfensters, nicht aber auf der Webseite selbst.
Die Syntax für das <title>-Tag lautet:
<title>HTML-Tags für Anfänger</title>
Innerhalb eines <head>-Tags sieht dies wie folgt aus:
<head> <title>HTML-Tags für Anfänger</title> </head>
<body> </body>
Das <body>-Tag repräsentiert den gesamten sichtbaren Inhalt einer Webseite. Bilder, Links, Texte, Videos und mehr werden zwischen <body> und </body> eingefügt.
Weitere häufige Tags innerhalb des Body-Bereichs sind das <p>-Tag für Absätze, das <a>-Tag für Links, das <strong>-Tag für fett gedruckten Text und das <ol>-Tag für geordnete Listen, um nur einige zu nennen.
Die Syntax des <body>-Tags:
<body> Inhalt </body>
<h1> bis <h6>-Tags
Ein HTML-Dokument kann bis zu sechs Überschriften-Tags enthalten. Diese werden durch Zahlen von 1 bis 6 als <h1>, <h2>, <h3>, <h4>, <h5> und <h6> dargestellt.
<h1> ist das größte und <h6> das kleinste Überschriften-Tag.
In einem HTML-Dokument können Überschriften-Tags wie folgt verwendet werden:
<h1>Überschrift 1</h1> <h2>Überschrift 2</h2> <h3>Überschrift 3</h3> <h4>Überschrift 4</h4> <h5>Überschrift 5</h5> <h6>Überschrift 6</h6>
Die Tags <h1> bis <h6> sind innerhalb des <body>-Tags enthalten.
Ein <h1>-Tag wird beispielsweise wie folgt platziert:
<body> <h1> Dies ist Überschrift 1 >/h1> </body>
<p> </p>
Das <p>-Tag, auch Absatz-Tag genannt, wird genutzt, um Inhalte in Absätzen zu strukturieren. Ein Zeilenumbruch im Code-Editor führt nicht automatisch zu einem neuen Absatz.
Für mehrere Absätze sind separate <p>-Tags innerhalb des <body>-Tags erforderlich.
Die Syntax für ein Absatz-Tag ist:
<p> ….Inhalt hier….</p>
Wenn vier Absätze benötigt werden, sieht der Code wie folgt aus:
<body> <p>Inhalt des ersten Absatzes.</p> <p>Inhalt des zweiten Absatzes.</p> <p>Inhalt des dritten Absatzes.</p> </body>
<b> </b>
Das Tag <b>…</b> stellt den eingeschlossenen Inhalt fett dar.
Das Fett-Tag kann sowohl in Überschriften als auch in Absätzen verwendet werden.
Hier sind Beispiele für ein Fett-Tag:
<b> Fettes Tag </b>
Der Ausdruck „Fettes Tag“ wird fett dargestellt.
<h1> Coole Sache, <b> Fünfte Edition </b>, die Gewinnerausgabe </h1>
Die „Fünfte Edition“ wird fett gedruckt.
<i> </i>
Das Kursiv-Tag, <i>, stellt den Text innerhalb der Tags kursiv dar.
Beispiel:
<i> Das ist kursiv </i>
Die Worte „Das ist kursiv“ erscheinen kursiv.
<u> </u>
Das Unterstreichungs-Tag, <u>, wird verwendet, um Textabschnitte zu unterstreichen.
Beispiel:
<u> Diese Wörter unterstreichen </u>
Der Satz zwischen den Tags wird unterstrichen.
<center> </center>
Das Center-Tag <center> dient dazu, Inhalte im HTML-Dokument zu zentrieren.
Um beispielsweise ein <h2>-Tag mit dem Inhalt „Inhalt in HTML zentrieren“ zu zentrieren, wird folgender Code genutzt:
<center> <h2> Inhalt in HTML zentrieren </h2> </center>
<span> </span>
Das Span-Tag <span> ist ein allgemeiner Inline-Container ohne vordefinierten Stil. Es dient der Gruppierung von Textteilen, die formatiert werden sollen.
Span-Tags können innerhalb anderer Tags wie Überschriften und Absätze verwendet werden:
<h2> Lerne HTML <span> von Experten </span> und sei bereit für den Markt </h2>
<p> Lerne HTML <span> von Experten </span> und sei bereit für den Markt </p>
<div> </div>
Das Division-Tag, kurz <div>, wird genutzt, um verschiedene Tags im HTML-Dokument zu gruppieren.
Einem <div>-Tag kann eine Klasse zugewiesen werden, um externe Stile mit CSS hinzuzufügen.
Hier ein Beispiel für ein <div>-Tag, das <h1>, <h2> und ein Absatz-Tag umschließt:
<div >
<h1> Lerne HTML </h1>
<h2> HTML Tags </h2>
<p> HTML ist eine Auszeichnungssprache……… </p>
</div>
<em> </em>
Das Emphasis-Tag, <em>, wird verwendet, um bestimmte Wörter in einem HTML-Dokument hervorzuheben.
Inhalte zwischen <em>-Tags erscheinen schräg oder kursiv.
Hervorgehobene Inhalte innerhalb eines Absatzes können wie folgt aussehen:
<p> Das Meeting beginnt um <em> 08:00 Uhr </em>, bitte seid pünktlich </p>
<sup> </sup>
Das <sup>-Tag, auch hochgestelltes Tag genannt, lässt den eingeschlossenen Text über der regulären Zeile erscheinen. Dies ist besonders nützlich bei mathematischen Ausdrücken oder Markensymbolen.
Syntax für <sup> innerhalb eines Absatzes:
<H1> Harveys <sup>TM </sup> Company Limited </H1>
<sub> </sub>
Das <sub>-Tag, auch tiefgestelltes Tag genannt, ist das Gegenteil des hochgestellten Tags. Der Text innerhalb des <sub>-Tags wird unterhalb der normalen Textzeile dargestellt, zum Beispiel für chemische Formeln.
Syntax für das tiefgestellte Tag:
Beachte, dass H <sub> 2 </sub> 0 die chemische Formel für Wasser ist
<br>
ist ein selbstschließendes Tag, das für einen Zeilenumbruch steht. Der Inhalt nach <br /> beginnt in einer neuen Zeile.
Die Syntax für <br /> innerhalb eines Absatzes lautet:
<p> HTML ist die Abkürzung für Hypertext Markup Language <br> Es wird diskutiert, ob es eine Programmiersprache ist oder nicht <br> Wir können jedoch seine Bedeutung nicht schmälern <br> HTML wird heute in über 95 % der Webseiten verwendet </p>
<ol> </ol> und <li> </li>
Das Ordered-List-Tag, <ol>, wird in Verbindung mit dem <li>-Tag für Listenelemente verwendet.
Diese Tags können im Code wie folgt aussehen:
<ol> <li> Asien </li> <li> Afrika </li> <li> Europa </li> </ol>
Im Browser werden die Inhalte nummeriert dargestellt.
<img src=““/>
Für die visuelle Gestaltung kann es notwendig sein, Bilder oder Logos einzufügen. Das selbstschließende Image-Tag <img src=““/> ist dafür ideal.
Die Syntax für das Image-Tag lautet:
<img src="https://cdn.pixabay.com/photo/2015/08/19/15/44/seo-896175_960_720.png"/>
Der in Anführungszeichen stehende Inhalt ist die Quell-URL des Bildes.
Zusammenfassung
Es existieren über 100 HTML-Tags, doch die hier genannten bilden eine solide Grundlage für Anfänger. HTML wird von den meisten Code-Editoren unterstützt, sodass das Erlernen der Grundlagen kein Problem darstellen sollte.