HTML-Elemente Referenz
| HTML-Element | Beschreibung |
|---|---|
| <!--...--> | Dieses HTML-Element definiert einen Kommentar. |
| <!DOCTYPE> | Dieses HTML-Element definiert den Dokumententyp, welcher seit HTML5 immer <!DOCTYPE html> lautet. Dies ist kein HTML-Element sondern ein Hinweis für den Webbrowser in welcher HTML-Version das Dokument verfasst wurde. |
| <a> | Mit diesem HTML-Element werden Hyperlinks zu anderen Webseiten erzeugt. |
| <abbr> | Dieses HTML-Element definiert Abkürzungen oder Akronyme zusätzlich kann das title-Attribut verwendet werden um das abgekürzte Wort als Tooltip anzeigen zu lassen wenn der Besucher unserer Website mit der Maus über das Wort fährt. |
| <address> | Mit diesem HTML-Element sollte man die Kontaktinformationen des Autor/Eigentümer eines Dokuments hinterlegen. |
| <area> | Dieses HTML-Element definiert einen verweisenden Bereich innerhalb einer verweisenden Grafik. Dieses Element wir immer von einem map-Element umschlossen. |
| <article> | Dieses HTML-Element definieren wir einen geschlossenen logischen Bereich auf unserer Webseite. Dieser ist daher unabhängig vom Rest der Webseite. Das könnten z.B. Blogartikel, Forums Posts, User-Kommentare, usw. sein. |
| <aside> | Dieses HTML-Element definiert Bereiche unserer Webseite welche Inhalte bieten, der nur indirekt im Zusammenhang zur restlichen Webseite steht. Diese Informationen sind meist nicht so wichtiger Natur. |
| <audio> | Dieses HTML-Element erlaubt es uns, Audiodateien ohne spezielle Erweiterungen auf unserer Webseite abspielen zu lassen. |
| <b> | Dieses HTML-Element hebt den darin enthaltenen Text in fettgedruckter Schrift hervor. Dieses HTML-Element sollten wir nicht für Textformatierung missbrauchen, dafür steht uns CSS zur Verfügung. Wir setzten dieses HTML-Element nur ein wenn kein anderes HTML-Element für diesen Text passend ist. Um Text hervorzuheben stehen uns <em> für betonten Text, <strong> für wichtigen Text und <mark> für markierten Text zur Verfügung. |
| <base> | Mit diesem HTML-Element können wir die Basis-URL für unser HTML-Dokument definieren. Dies betrifft im Folgenden dann die relativen URL Angaben. Das <base>-Element darf es nur ein einziges Mal in einem HTML- Dokument geben. |
| <bdi> | Dieses HTML-Element definiert einen Bereich für einen Bidirektionalen Text, welcher in einer anderen Richtung formatiert sein könnte. Hilfreich wenn Text aus einer Benutzereingabe oder einer Datenbank stammt, wo die Schreibrichtung nicht bekannt ist. |
| <bdo> | Dieses HTML-Element wird dazu verwendet die Textrichtung innerhalb eines Fließtextes zu ändern. Dies ist nützlich wenn wir einen Text anzeigen lassen möchten der von rechts nach links geschrieben wird, wie z.B. Arabisch. |
| <blockquote> | Mit diesem HTML-Element können wir Text aus anderen Quellen als Zitat in unser HTML-Dokument einfügen. |
| <body> | Dieses HTML-Element definiert den Dokumentenköper unseres HTML-Dokuments. Dies ist der Bereich den der Webbrowser für den Anwender rendert (aufbereitet). |
| <br> | Dieses HTML-Element definiert einen Zeilenumbruch welcher vom Webbrowser beim rendern der Webseite berücksichtigt wird. |
| <button> | Dieses HTML-Element definiert eine anklickbare Schaltfläche. Wir können hier zusätzliche Grafiken und andere HTML-Elemente einbinden. |
| <canvas> | Dieses HTML-Element definiert eine leere Zeichenoberfläche auf der wir z.B. mit Canvas-2D-API einfache Grafiken, via Script, darstellen können. |
| <caption> | Dieses HTML-Element definiert die Überschrift einer Tabelle. Dieses HTML-Element muss direkt nach dem öffnenden <table>-Element hinterlegt werden. Standardmäßig wird diese im Webbrowser über der Tabelle dargestellt. |
| <cite> | Dieses HTML-Element definiert den Titel eines Werkes wie zum Beispiel den Titel eines Buches, Films, Gemälde,... Dieses HTML-Element findet keine Anwendung bei Personen! |
| <code> | Dieses HTML-Element definiert Computercode in unserem HTML-Dokument. Möchten wir mehrere Zeilen Computercode einfügen, dann sollten wir das HTML-Element <pre> verwenden. |
| <col> | Dieses HTML-Element definiert eine Spalte innerhalb einer Tabelle. das <col>-Element muss sich innerhalb des <colgroup>-Elements befinden. |
| <colgroup> | Dieses HTML-Element definiert eine Gruppe von Spalten innerhalb einer Tabelle. |
| <data> | Dieses HTML-Element verknüpft den angegebenen Inhalt mit einer maschinen-lesbarer Übersetzung (Microformats). |
| <datalist> | Dieses HTML-Element erstellt eine Liste von vordefinierten Auswahlmöglichkeiten für eine Dateneingabe. |
| <dd> | Dieses HTML-Element definiert die Beschreibung eines zu beschreibenden Ausdrucks in einer Beschreibungsliste. Dieses HTML-Element befindet sich innerhalb eines <dl>-Elements und folgt auf ein <dt>-Element. |
| <del> | Dieses HTML-Element definiert einen nicht mehr länger gültigen Textabschnitt. Das kann bei aktualisierten Beiträgen nützlich sein, wenn sich etwas an einer Situation nachträglich geändert hat. |
| <details> | Dieses HTML-Element blendet Informationen, zu einem Bereich unseres HTML-Dokuments, auf Wunsch des Anwenders, ein oder aus. |
| <dfn> | Dieses HTML-Element kennzeichnet eine Definition die wir im anschließenden Text noch erläutern <p><dfn>HTML</dfn> ist die Standardsprache um Webseiten zu erstellen</p> |
| <dialog> | Dieses HTML-Element definiert eine Dialogbox oder ein Fenster. |
| <div> | Dieses HTML-Element definiert einen Bereich unseres HTML-Dokuments. Früher hat es quasi ein <div>-Flut gegeben. Dieser wird durch die in HTML5 neu hinzugekommenen Elemente versucht Einhalt zu gewähren. Bevor man ein <div>-Element verwendet, sollte man sich die Frage stellen, ob nicht eines der folgenden HTML-Elemente passen würde: <article>, <aside>, <section>, <header>, <footer>,... |
| <dl> | Dieses HTML-Element definiert eine Beschreibungsliste (früher auch Definitionsliste genannt). Innerhalb dieser Beschreibungsliste werden definieren wir den zu beschreibenden Ausdruck mit dem <dt>-Element, gleich darauf folgt die Erklärung mit dem <dd>-Element. |
| <dt> | Dieses HTML-Element definiert den zu beschreibenden Ausdruck in einer Beschreibungsliste. Die Beschreibung folgt dem zu beschreibenden Ausdruck innerhalb eines dd-Elements. |
| <em> | Dieses HTML-Element definiert einen Textbereich oder ein Wort dem wir Sprachlich eine besondere Betonung verleihen möchten. Möchten wir jedoch den Textbereich oder ein Wort nur in den Focus rücken, dann empfiehlt sich das HTML-Element <strong>. |
| <embed> | Dieses HTML-Element definiert einen Container für externe nicht-HTML-Anwendungen welche nicht nativ vom Webbrowser unterstützt werden können. |
| <fieldset> | Dieses HTML-Element definiert eine optionale Gruppe von Formularelementen die eine logische Zusammengehörigkeit aufweisen. Manche Webbrowser rahmen diesen Bereich optisch ein. Mit dem <legend>-Element können wir dieser Gruppe noch eine Überschrift verleihen. |
| <figcaption> | Dieses HTML-Element definiert Beschriftungen für das <figure>-Element. Es kann innerhalb des <figure>-Elements an erster oder letzter Stelle stehen. |
| <figure> | Dieses HTML-Element haben wir die Möglichkeit, Bilder, Videos, Anmerkungen, Tabellen, Codebeispiele, usw. logisch zu gruppieren und auszuzeichnen. |
| <footer> | Dieses HTML-Element definiert eine Fußzeile in einem Dokument, <article>-Element oder einem <section>-Element. Hier könnten wir Informationen über den Autor, das Copyright oder Kontaktinformationen hinterlegen. |
| <form> | Dieses HTML-Element definiert ein Formular innerhalb unseres HTML-Dokuments. |
| <h1> bis <h6> | Dieses HTML-Element definiert eine Überschrift der ersten Ordnung (<h1>), zweiten Ordnung (<h2>), dritten Ordnung (<h3>), vierten Ordnung (<h4>), fünften Ordnung (<h5>), sechsten Ordnung (<h6>) |
| <head> | Dieses HTML-Element definiert den nicht darstellbaren Bereich unseres HTML-Dokuments. Dieser Kopfbereich eines jeden HTML-Dokuments beinhaltet wichtige Informationen für den Webbrowser, Suchmaschinen, Screen Reader, usw... Damit unser HTML-Dokument valide bleibt, müssen wir im <head>-Element zwingend das <title>-Element hinterlegen. Regulär können sich auch noch folgende Elemente im <head>-Element befinden: <meta>, <link>, <style>, <base>, <script> und <noscript> |
| <header> | Dieses HTML-Element definiert eine Kopfzeile in einem Dokument, <article>-Element oder einem <section>-Element. Hier könnten wir eine Überschrift, einleitenden Text und/oder eine Navigation hinterlegen. |
| <hr> | Dieses HTML-Element definiert einen thematischen Wechsel in unserem HTML-Dokument. Standardmäßig wird dies im Webbrowser als Linie dargestellt. |
| <html> | Dieses HTML-Element definiert unser HTML-Dokument Das <html>-Element beinhaltet sämtliche weiteren HTML-Elemente. |
| <i> | Dieses HTML-Element definiert einen Teil des Textes mit einer anderen Stimme oder Stimmung. In HTML5 sollte dieses HTML-Element nur für inhaltliche spezielle Fachausdrücke, wissenschaftliche Namen, fremdsprachige Wörter oder für einen Gedanken verwenden. |
| <iframe> | Dieses HTML-Element verwenden wir um Dokumente und andere Webseiten in unser HTML-Dokument einzubetten. |
| <img> | Dieses HTML-Element definiert eine Grafik die wir in unser HTML-Dokument einbinden. Das alt-Attribut ist dabei zwingend erforderlich damit unser HTML valide bleibt. Die Grafik wird über das href-Attribut referenziert und ist kein Teil des HTML-Dokuments. |
| <input> | Dieses HTML-Element definiert ein Eingabefeld in unserem HTML-Dokument, in welchem der Besucher verschiedene Arten von Daten eintragen kann. Die Art der Daten hängt vom type-Attribut ab. |
| <ins> | Dieses HTML-Element definiert eine Änderungsmarkierung für einen nachträglich hinzugefügten Text. Das kann bei aktualisierten Beiträgen nützlich sein, wenn sich etwas an einer Situation nachträglich geändert hat. |
| <kbd> | Dieses HTML-Element definiert eine Tastatur Eingabe. |
| <lable> | Dieses HTML-Element definiert eine Beschriftung für ein <input>-Element. |
| <legend> | Dieses HTML-Element definiert eine Überschrift für eine <fieldset>-Gruppe. |
| <li> | Dieses HTML-Element definiert die einzelnen Listenelemente oder auch Listenpunkte genannt. Dies betrifft geordnete Listen (<ol>-Element) genauso wie ungeordnete Listen (<ul>-Element). |
| <link> | Dieses HTML-Element definiert die Beziehung zwischen unserem HTML-Dokument und einer externen Ressource. Ein Beispiel wäre die Referenzierung einer externen CSS-Datei. |
| <main> | Dieses HTML-Element definiert den Hauptinhalt unseres HTML-Dokuments. |
| <map> | Dieses HTML-Element leitet die Definition einer verweis-sensitiven Fläche in einer Grafik ein. |
| <mark> | Dieses HTML-Element definiert einen markierten Text. |
| <meta> | Über dieses HTML-Element stellen wir zusätzliche Informationen bereit, die die korrekte Verarbeitung unseres HTML-Dokuments erleichtern sollen. So können wir dem Webbrowser mitteilen, welchen Zeichensatz (engl. charset) dieser verwenden soll um unsere Webseite korrekt zu rendern. Des Weiteren können wir auf diese Art und Weise Informationen über den Autor, Keywords, Beschreibung, usw. hinterlegen. Diese Informationen benutzen auch Suchmaschinen um den Inhalt unserer Webseite besser interpretieren zu können. Das meta-Element muss sich zwingend innerhalb des <head>-Elements befinden. |
| <meter> | Dieses HTML-Element repräsentiert einen skalaren Wert zur Fortschrittsanzeige einer Aktion. Mit dem value-Attribut kann man den Fortschritt definieren. |
| <nav> | Dieses HTML-Element definiert ein Segment auf unserer Webseite, welche Navigationsleisten, Menüs, unsortierte Listen mit Verweisen auf andere Seiten, usw... beinhaltet. |
| <noscript> | Dieses HTML-Element definiert einen Hinweis welcher ausgegeben wird, für den Fall, dass ein Webbrowser eine Scriptsprache nicht unterstützt. |
| <object> | Dieses HTML-Element definiert einen Container der Elemente beinhaltet, welche nicht nativ vom Webbrowser unterstützt werden. Anders als beim <embed>-Element, haben wir hier die Möglichkeit eine Fallback-Lösung zu hinterlegen. |
| <ol> | Dieses HTML-Element definiert eine geordnete Aufzählungsliste bei der die Reihenfolge der Listenelemente eine Rolle spielt. Die Listenelemente werden über <li>-Elemente definiert. Standardmäßig werden die Listenelemente im Webbrowser nummeriert dargestellt. |
| <optgroup> | Dieses HTML-Element gruppiert vordefinierte Auswahlmöglichkeiten innerhalb einer <select>-Auswahlliste z.B. innerhalb einer Drop-Down-Auswahl. |
| <option> | Mit diesem HTML-Element definieren wir innerhalb einer <select>-Auswahlliste die zur Verfügung stehenden Optionen aus denen ein Anwender wählen kann. |
| <output> | Dieses HTML-Element definiert einen Ausgabebereich für das Ergebnis einer Berechnung. |
| <p> | Dieses HTML-Element definiert einen Textabsatz in unserem HTML-Dokument. Standardmäßig wird dies im Webbrowser mit etwas Platz vor und hinter diesem HTML-Element dargestellt. |
| <param> | Dieses HTML-Element definiert die Parameter für ein <objekt>-Element damit ein Plugin dementsprechend ausgeführt werden kann. |
| <picture> | Dieses HTML-Element definiert ein Container-Element, welches uns erlaubt mehrere Bildquellen zu referenzieren. Der Webbrowser sucht sich dann aus den verschiedenen Bildversionen das passende Bild aus. Das <picture>-Element zeigt dabei keine Bilder an, es beinhalltet lediglich die unterschiedlichen Bildquellen (<source>-Elemente). |
| <pre> | Dieses HTML-Element definiert präformatierten Text, das bedeutet, dass alle Whitespace-Zeichen so dargestellt werden wie diese im Text enthalten sind. Standardmäßig wird dieser Text in einer Monospace-Schriftart dargestellt. |
| <progress> | Dieses HTML-Element visualisiert den Fortschritt einer Aktion. z.B. Fortschrittsanzeige eines Downloads, einer Umfrage, eines Kurses, usw... |
| <q> | Dieses HTML-Element definiert, im Fließtext, einzelne Wörter oder Textabschnitte als zitierten Text. Es ist standardmäßig nicht notwendig diese Textpassage in Anführungszeichen zu setzen, da dies der Webbrowser selbstständig macht. |
| <rp> | Dieses HTML-Element definiert was im Webbrowser angezeigt werden soll, für den Fall, dass dieser keine <ruby>-Anmerkungen unterstützt. |
| <rt> | Dieses HTML-Element definiert eine Erklärung für die Aussprache ostasiatischer Schriftzeichen. |
| <ruby> | Dieses HTML-Element definiert Anmerkungen zu besonderen Schriftzeichen (ostasiatische Schriftzeichen) mit der Angabe der Aussprache zum Zweck diese Information im HTML-Code zu hinterlegen. |
| <s> | Dieses HTML-Element definiert Text der nicht mehr gültig ist. Anstelle des <s>-Elements sollten wir jedoch das <del>-Element bevorzugen. |
| <samp> | Dieses HTML-Element definiert eine beispielhafte Bildschirmausgabe eines Computerprogramms. |
| <script> | Dieses HTML-Element definiert einen clientseitigen Scriptbereich im HTML-Dokument um z.B. ein Javascript einzubinden. Das <script>-Element kann sowohl innerhalb des <head>-Elements stehen als auch, seit HTML5, innerhalb des <body>-Elements. |
| <section> | Dieses HTML-Element definiert themenspezifische oder eigenständige Bereiche innerhalb eines Dokuments oder Artikels. |
| <select> | Dieses HTML-Element definiert eine feste Auswahlliste in einem Formular aus der ein Anwender einen Eintrag wählen kann. |
| <small> | Dieses HTML-Element definiert Text welcher klein gedruckt dargestellt werden soll und somit als weniger bedeutend deklariert wird. Damit lassen sich z.B. Lizenzinformationen, Copyright-Informationen, juristische Hinweise, usw. darstellen. |
| <source> | Mit diesem HTML-Element definieren wir unterschiedliche Versionen/Dateiendungen von identischen Audio-, Bild- und Videodaten. |
| <span> | Dieses HTML-Element fasst einzelne Wörter oder Textpassagen zusammen um diese gesondert über CSS zu stylen. Ohne gesonderte CSS Anweisung unterscheidet sich der Inhalt nicht vom übrigen Text. |
| <strong> | Dieses HTML-Element definiert besonders Wichtige Wörter oder Textabschnitte in einem Fließtext. Standardmäßig wird dies im Webbrowser fettgedruckt dargestellt. |
| <style> | Dieses HTML-Element definiert Bereiche in unserem HTML-Dokument, in dem wir unser Styling definieren können. Seit HTML5 kann dies nicht nur im <head>-Element eines Dokuments definiert werden sondern auch im <body>-Element. |
| <sub> | Dieses HTML-Element definiert Wörter oder Textabschnitte welche im Webbrowser tiefergestellt dargestellt werden. Häufige Anwendung findet dies bei mathematischen oder chemischen Formeln. |
| <summary> | Dieses HTML-Element definiert eine Überschrift für das <details>-Element. Durch das anklicken der Überschrift klappt der Inhalt des <details>-Element aus bzw. ein. |
| <sup> | Dieses HTML-Element definiert Wörter oder Textabschnitte welche im Webbrowser höhergestellt dargestellt werden. Häufige Anwendung findet dies bei mathematischen oder chemischen Formeln. |
| <svg> | Dieses HTML-Element bindet eine skalierbare Vektorgrafik in unsere Webseite ein. |
| <table> | Dieses HTML-Element definiert eine HTML-Tabelle welche wiederum viele Kind-Elemente beinhalten kann, mit dessen Hilfe wir die Struktur der Tabelle definieren. |
| <tbody> | Dieses HTML-Element definiert eine Gruppe von Tabellenzellen die den Hauptinhalt der Tabelle beinhalten. Dieses HTML-Element wird auch in Verbindung mit dem <thead>-Element und/oder <tfoot>-Element verwendet. Einige Webbrowser ergänzen ein fehlendes <tbody>-Element, das kann man beobachten, wenn man im DOM-Inspektor eine Tabelle ohne dem <tbody>-Element analysiert. Dieses HTML-Element finden wir häufig in Verbindung mit den HTML-Elementen <thead> und <tbody> um eine HTML-Tabelle in unterschiedliche Abschnitte aufzuteilen. |
| <td> | Dieses HTML-Element definiert gewöhnliche Tabellenzellen mit Daten, innerhalb einer Tabelle. |
| <template> | Dieses HTML-Element enthält HTML-Code ohne diesen anzuzeigen. Durch Javascript ist es dann möglich diesen in den Dokumentenbaum einzuhängen. |
| <textarea> | Dieses HTML-Element definiert ein mehrzeiliges Text-Eingabefeld. |
| <tfoot> | Dieses HTML-Element definiert den Tabellenfuß einer HTML-Tabelle. Dieses HTML-Element finden wir häufig in Verbindung mit den HTML-Elementen <thead> und <tbody> um eine HTML-Tabelle in unterschiedliche Abschnitte aufzuteilen. |
| <th> | Dieses HTML-Element definiert die Tabellenkopfzellen einer Tabelle. |
| <thead> | Dieses HTML-Element definiert den Tabellenkopf Dieses HTML-Element finden wir häufig in Verbindung mit den HTML-Elementen thead und tbody um eine HTML-Tabelle in unterschiedliche Abschnitte aufzuteilen. |
| <time> | Dieses HTML-Element definiert Datumsangaben und Zeitangaben. Damit wird diese Information auch für z.B. Computer und Suchmaschinen verwertbar. |
| <title> | Dieses HTML-Element definiert den Titel eines HTML-Dokuments. Das <title>-Element wird innerhalb des <head>-Elements definiert und ist für valides HTML zwingend erforderlich. |
| <tr> | Dieses HTML-Element definiert eine neue Tebellenzeile innerhalb einer HTML-Tabelle. Zwischen dem öffnenden und schließenden <tr>...</tr> befinden sich die einzelnen Tabellenzellen welche mit <th> und/oder <td> ausgezeichnet sind. |
| <track> | Dieses HTML-Element bindet Textdateien in Videos und Audioaufnahmen während des Abspielens ein. Dies könnte als Untertitel oder als Beschriftung dienen. |
| <u> | Dieses HTML-Element definiert Wörter oder Textpassagen welche stilistisch anders dargestellt werden sollen. Ein Beispiel wäre, fehlerhaft geschriebene Wörter oder chinesische Eigennamen. |
| <ul> | Dieses HTML-Element definiert eine unsortierte Aufzählungslist bei der es auf die Reihenfolge nicht so ankommt. Die Listenelemente werden über li-Elemente definiert. Standardmäßig wird das Aufzählungszeichen im Webbrowser als Bullet dargestellt. |
| <var> | Dieses HTML-Element definiert in einem Fließtest eine Passage als Variable, Konstante oder eine Größe. |
| <video> | Dieses HTML-Element erlaubt es uns, Videodateien ohne spezielle Erweiterungen auf unserer Webseite abspielen zu lassen. |
| <wbr> | Dieses HTML-Element definiert innerhalb eines Wortes einen optionalen Zeilenumbruch. Somit wird das Wort im Falle eines Umbruches an der gewünschten Stelle umgebrochen. |