Was sind HTML Tags?
HTML ist die Abkürzung von “HyperText Markup Language“. HTML ist keine richtige Programmiersprache, sondern eine textbasierte Auszeichnungssprache, die insbesondere für Webseiten genutzt wird. Und das Wort “tag” wird ins Deutsche mit “Schild oder Etikett” übersetzt.
Somit handelt es sich bei einem HTML-Tag dem Wort nach um ein “HTML-Etikett”.
HTML-Tags sind Bestandteil der HTML-Elemente, in dem sie den Anfang und das Ende der HTML-Elemente markieren.
Beispiel eines HTML-Elements mit HTML-Tags:
<h1>Hier wird die Überschrift des Artikels reingeschrieben</h1>Mit Hilfe der HTML-Elemente bestimmt man unter anderem folgende Punkte für eine Internetseite:
- Dokumententyp
- Grundsätzlicher Aufbau
- Struktur des Textes
- Verwendung von Medien
- Erstellung von Formularen
- Visuelle Gestaltung
Die Gesamtheit der HTML-Elemente wiederum bilden den HTML-Code der Webseite.
Hier ein Beispiel eines einfachen HTML-Dokuments mit verschiedenen HTML-Tags:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Titel des Artikels</title>
</head>
<body>
<h1>Überschrift des Textes</h1>
<p>Hier ist der eigentliche Text des Artikels.</p>
</body>
</html> Wie werden HTML-Tags verwendet?
HTML-Tags sind Teil der HTML-Elemente und folgen grundsätzlich immer der gleichen Syntax (Regeln zur Zusammenfügung von Zeichen).
Zuerst wird das Anfangs-Tag eingegeben, gefolgt von dem Gültigkeitsbereich auf den das Tag angewendet werden soll und zum Schluss noch ein End-Tag.
Die Befehle werden immer von spitzen Klammern “< >” eingerahmt.
So lautet ein Anfangs-Tag beispielsweise:
<em>Ein End-Tag unterscheidet sich immer vom Anfang-Tag durch ein zusätzliches Zeichen, einen Schrägstrich “/”. Auf diese Weise können Anfangs- und End-Tag immer unterschieden werden.
Ein End-Tag lautet daher beispielsweise:
</em>Ein komplettes HTML-Element mit Anfangs- und End-Tag sieht daher beispielsweise folgendermaßen aus:
<em>Dieser Text wird hervorgehoben</em>.Mit Hilfe der HTML-Tags kann dann die Art und der grundsätzliche Aufbau der Webseite definiert werden. So wird beispielsweise der Dokumententyp (z.B. <html>), der Navigationsbereich (<nav>), der Head (<head>), Body (<body>) und Footer-Bereich (<footer>) einer Webseite bestimmt. Mit HTML-Tags können aber auch grundlegende visuelle Gestaltungen des Textes definiert werden, z.B. fette oder kursive Schreibweise, unterstrichene oder durchgestrichene Textpassagen oder die Text-Hintergrundfarbe. Daneben gibt es noch eine Vielzahl weiterer Anwendungen von HTML-Tags.
Liste von HTML Tags
Im Folgenden finden Sie eine alphabetisch geordnete Liste von HTML-Tags mit der jeweiligen Funktion:
| HTML-Tag | Beschreibung |
| <!–…–> | Definiert einen Kommentar. |
| <!DOCTYPE> | Definiert den Dokumenttyp. |
| <a> | Definiert einen Hyperlink. |
| <abbr> | Definiert eine Abkürzung oder ein Akronym. |
| <acronym> | Wird in HTML5 nicht unterstützt. Verwenden Sie stattdessen <abbr>. Definiert ein Akronym. |
| <address> | Definiert Kontaktinformationen für den Autor/Eigentümer eines Dokuments. |
| <applet> | Wird in HTML5 nicht unterstützt. Verwenden Sie stattdessen <embed> oder <object>. Definiert ein eingebettetes Applet. |
| <area> | Definiert einen Bereich innerhalb einer Imagemap. |
| <article> | Definiert einen Artikel. |
| <aside> | Definiert Inhalte neben dem Seiteninhalt. |
| <audio> | Definiert eingebetteten Soundinhalt. |
| <b> | Definiert fetten Text. |
| <base> | Gibt die Basis-URL/das Ziel für alle relativen URLs in einem Dokument an. |
| <basefont> | Wird in HTML5 nicht unterstützt. Verwenden Sie stattdessen CSS. Gibt eine Standardfarbe, -größe und -schriftart für den gesamten Text in einem Dokument an. |
| <bdi> | Isoliert einen Teil des Textes, der möglicherweise in einer anderen Richtung als anderer Text außerhalb formatiert ist. |
| <bdo> | Überschreibt die aktuelle Textrichtung. |
| <big> | Wird in HTML5 nicht unterstützt. Verwenden Sie stattdessen CSS. Definiert großen Text. |
| <blockquote> | Definiert einen Abschnitt, der aus einer anderen Quelle zitiert wird. |
| <body> | Definiert den Hauptteil des Dokuments. |
| <br> | Definiert einen einzelnen Zeilenumbruch. |
| <button> | Definiert einen anklickbaren Button. |
| <canvas> | Wird zum schnellen Zeichnen von Grafiken über Skripte (normalerweise JavaScript) verwendet. |
| <caption> | Definiert eine Tabellenüberschrift. |
| <center> | Wird in HTML5 nicht unterstützt. Verwenden Sie stattdessen CSS. Definiert zentrierten Text. |
| <cite> | Definiert den Titel eines Werkes. |
| <code> | Definiert ein Stück Computercode. |
| <col> | Gibt Spalteneigenschaften für jede Spalte innerhalb eines <colgroup>-Elements an. |
| <colgroup> | Gibt eine Gruppe von einer oder mehreren Spalten in einer Tabelle zur Formatierung an. |
| <data> | Fügt eine maschinenlesbare Übersetzung eines bestimmten Inhalts hinzu. |
| <datalist> | Gibt eine Liste vordefinierter Optionen für Eingabesteuerelemente an. |
| <dd> | Definiert eine Beschreibung/Wert eines Begriffs in einer Beschreibungsliste. |
| <del> | Definiert Text, der aus einem Dokument gelöscht wurde. |
| <details> | Definiert zusätzliche Details, die der Benutzer anzeigen oder ausblenden kann. |
| <dfn> | Gibt einen Begriff an, der innerhalb des Inhalts definiert werden soll. |
| <dialog> | Definiert ein Dialogfeld oder Fenster. |
| <dir> | Wird in HTML5 nicht unterstützt. Verwenden Sie stattdessen <ul>. Definiert eine Verzeichnisliste. |
| <div> | Definiert einen Abschnitt in einem Dokument. |
| <dl> | Definiert eine Beschreibungsliste. |
| <dt> | Definiert einen Begriff/Namen in einer Beschreibungsliste. |
| <em> | Definiert hervorgehobenen Text. |
| <embed> | Definiert einen Container für eine externe Anwendung. |
| <fieldset> | Gruppiert verwandte Elemente in einem Formular. |
| <figcaption> | Definiert eine Beschriftung für ein <figure>-Element. |
| <figure> | Gibt eigenständige Inhalte an. |
| <font> | Wird in HTML5 nicht unterstützt. Verwenden Sie stattdessen CSS. Definiert Schriftart, Farbe und Größe für Text. |
| <footer> | Definiert eine Fußzeile für ein Dokument oder einen Abschnitt. |
| <form> | Definiert ein HTML-Formular für Benutzereingaben. |
| <frame> | Wird in HTML5 nicht unterstützt. Definiert ein Fenster (einen Frame) in einem Frameset. |
| <frameset> | Wird in HTML5 nicht unterstützt. Definiert eine Reihe von Frames. |
| <h1 bis <h6> | Definiert HTML-Überschriften. |
| <head> | Enthält Metadaten/Informationen zum Dokument. |
| <header> | Definiert eine Kopfzeile für ein Dokument oder einen Abschnitt. |
| <hr> | Definiert einen thematischen Wechsel des Inhalts. |
| <html> | Definiert den Stamm eines HTML-Dokuments. |
| <i> | Definiert einen Textteil in einer alternativen Stimme oder Stimmung. |
| <iframe> | Definiert einen Inline-Frame. |
| <img> | Definiert ein Bild. |
| <input> | Definiert ein Eingabesteuerelement. |
| <ins> | Definiert einen Text, der in ein Dokument eingefügt wurde. |
| <kbd> | Definiert Tastatureingaben. |
| <label> | Definiert ein Label für ein <input>-Element. |
| <legend> | Definiert eine Beschriftung für ein<fieldset>-Element. |
| <li> | Definiert ein Listenelement. |
| <link> | Definiert die Beziehung zwischen einem Dokument und einer externen Ressource (am häufigsten verwendet, um auf Stylesheets zu verlinken). |
| <main> | Gibt den Hauptinhalt eines Dokuments an. |
| <map> | Definiert eine Imagemap. |
| <mark> | Definiert markierten/hervorgehobenen Text. |
| <meta> | Definiert Metadaten zu einem HTML-Dokument. |
| <meter> | Definiert eine skalare Messung innerhalb eines bekannten Bereichs (ein Messgerät). |
| <nav> | Definiert Navigationslinks. |
| <noframes> | Wird in HTML5 nicht unterstützt. Definiert einen alternativen Inhalt für Benutzer, die Frames nicht unterstützen. |
| <noscript> | Definiert einen alternativen Inhalt für Benutzer, die keine clientseitigen Skripts unterstützen. |
| <object> | Definiert einen Container für eine externe Anwendung. |
| <ol> | Definiert eine geordnete Liste. |
| <optgroup> | Definiert eine Gruppe verwandter Optionen in einer Dropdown-Liste. |
| <option> | Definiert eine Option in einer Dropdown-Liste. |
| <output> | Definiert das Ergebnis einer Berechnung. |
| <p> | Definiert einen Absatz. |
| <param> | Definiert einen Parameter für ein Objekt. |
| <picture> | Definiert einen Container für mehrere Bildressourcen. |
| <pre> | Definiert vorformatierten Text. |
| <progress> | Stellt den Fortschritt einer Aufgabe dar. |
| <q> | Definiert ein kurzes Zitat. |
| <rp> | Definiert, was in Browsern angezeigt werden soll, die Ruby-Anmerkungen nicht unterstützen. |
| <rt> | Definiert eine Erklärung/Aussprache von Zeichen (für ostasiatische Typografie). |
| <ruby> | Definiert eine Ruby-Anmerkung (für ostasiatische Typografie). |
| <s> | Definiert Text, der nicht mehr korrekt ist. |
| <samp> | Definiert Beispielausgaben von einem Computerprogramm. |
| <script> | Definiert ein clientseitiges Skript. |
| <section> | Definiert einen Abschnitt in einem Dokument. |
| <select> | Definiert eine Dropdown-Liste. |
| <small> | Definiert kleineren Text. |
| <source> | Definiert mehrere Medienressourcen für Medienelemente (<video und <audio). |
| <span> | Definiert einen Abschnitt in einem Dokument. |
| <strike> | Wird in HTML5 nicht unterstützt. Verwenden Sie stattdessen <del> oder <s>. Definiert durchgestrichenen Text. |
| <strong> | Definiert wichtigen Text. |
| <style> | Definiert Stilinformationen für ein Dokument. |
| <sub> | Definiert tiefgestellten Text. |
| <summary> | Definiert eine sichtbare Überschrift für ein <details>-Element. |
| <sup> | Definiert hochgestellten Text. |
| <svg> | Definiert einen Container für SVG-Grafiken. |
| <table> | Definiert eine Tabelle. |
| <tbody> | Gruppiert den Body-Inhalt in einer Tabelle. |
| <td> | Definiert eine Zelle in einer Tabelle. |
| <template> | Definiert einen Container für Inhalte, die beim Laden der Seite ausgeblendet werden sollen. |
| <textarea> | Definiert ein mehrzeiliges Eingabefeld (Textbereich). |
| <tfoot> | Gruppiert den Inhalt der Fußzeile in einer Tabelle. |
| <th> | Definiert eine Kopfzelle in einer Tabelle. |
| <thead> | Gruppiert den Kopfzeileninhalt in einer Tabelle. |
| <time> | Definiert eine bestimmte Zeit (oder datetime). |
| <title> | Definiert einen Titel für das Dokument. |
| <tr> | Definiert eine Zeile in einer Tabelle. |
| <track> | Definiert Textspuren für Medienelemente (<video> und <audio>). |
| <tt> | Wird in HTML5 nicht unterstützt. Verwenden Sie stattdessen CSS. Definiert Fernschreibtext. |
| <u> | Definiert Text, der nicht artikuliert und anders gestaltet ist als normaler Text. |
| <ul> | Definiert eine ungeordnete Liste. |
| <var> | Definiert eine Variable. |
| <video> | Definiert eingebettete Videoinhalte. |
Weiterführende Informationen
HTML lernen: https://wiki.selfhtml.org/wiki/HTML
