Schlüsselwörter / Tags / Markups

Je nachdem wo man einen dieser Begriffe aufschnappt, es geht um das gleiche Thema.

Die Schlüsselwörter, mit deren Hilfe der Browser das HTML Dokument rendert, werden auch Tags (engl. für Stichworte) oder markups (engl. mark up für markieren) genannt. Diese Auflistung ist nicht vollständig, allerdings deckt sie den größten Teil der in HTML 5 verfügbaren und relevanten Elemente ab.


Schnellzugriff

! A B C D E F H I K L M N O P Q S T U V W 


!--

Kommentare werden nicht vom Browser ausgewertet und können an beliebiger Stelle im Dokument platziert werden.

!--

<!-- Kommentare schreiben -->
<p>Kommentare können an einer beliebigen Stelle im Dokument geschrieben werden.</p>
<p>Auch innerhalb von Elementen<!-- dürfen Kommentare -->geschrieben werden. </p>
<!-- Kommentare können 
sich auch über mehrere
Zeilen erstrecken.-->

<!DOCTYPE>

Die Dokumenttypdeklaration wird zu Beginn des Dokumentes angegeben, um das Dokument korrekt darzustellen.

!DOCTYPE

<!DOCTYPE html>

A

<a>

<a> definiert einen Hyperlink, das Attribut "href" wird benötigt, um das Ziel anzugeben.

Ein Link verweist auf andere Dokumente, Dateien oder Sprungmarken innerhalb eines Dokumentes.

a

<a href="http://www.example.com">

<abbr>

Wird verwendet, um einen Teil des Textes abzukürzen. Mit dem Attribut "title" kann die Abkürzung beim "hovern" (schweben über ein Element) angezeigt werden.

abbr

<p>Ich schreibe <abbr title="Hypertext Markup Language">HTML</abbr>in einem Texteditor</p>
verstecktes abbr-Element in HTML

Wer mit dem Mauscursor über dem Element schwebt und kurz wartet, der bekommt den Text von "title" ausgegeben.

ersichtliches abbr-Element in HTML

<address>

Im <address>-Element werden die Kontaktdaten für die Webseite angegeben. Es ist nicht für Post- oder E-Mail-Adressen gedacht.

Häufig findet man solche Elemente in der Fußzeile einer Webseite. Achtung, das Element wird mit doppel-d und doppel-s geschrieben.

abbr

<address>Betrieb &bull; Einbahnstrasse 0815 &bull; D-12345 Stadt</address>

Meistens wird der Inhalt vom <address>-Element kursiv dargestellt und durch das Entitie "&bull;" werden kleine Punkte gesetzt.

address-Element in HTML

<area>

Das Element area definiert einen Bereich auf einem Bild.

Area kann nur innerhalb von map verwendet werden.


<article>

Das Element <article> stellt eine in sich geschlossene Komposition in einer Seite dar.

Vergleichbar mit einem Zeitungsartikel.

article

<article>
 Einzelner Artikel.
</article>

<aside>

Der Inhalt muss nicht zwangsläufig etwas mit dem Thema der Hauptseite zu tun haben.

Ein möglicher Einsatz wären Randnotizen.

aside

<aside>
 Abschnitt einer Seite, vom Hauptteil unabhängig.
</aside>

<audio>

Das Element <audio> ermöglicht es, Musik und andere Töne ohne zusätzliches Plugin direkt im Browser wiederzugeben.

audio

<audio controls src="Audio/Titel01.mp3" type="audio/mp3">
Leider kann der Browser diese Tonaufzeichnung nicht wiedergeben.
</audio>

Durch das Attribut "controls" kann ein Bedienfeld eingefügt werden. Das Attribut "src" verweist auf die Quelldatei. Das Attribut "type" verweis auf den "MIME"-Type.

Audioelement mit Controlbutton in HTML

B

<b>

Textauszeichnung Fettdruck.

b

<p><b>Hervorgehoben, Fett geschrieben.</b></p>
Fettgeschriebener Text in HTML

<blockquote>

Mit dem Element <blockquote> werden Zitate von Fremdautoren auf der Webseite integriert.

blockquote

<blockquote>Blockzitat</blockquote>
Blockzitate in HTML

Der Text aus diesem Element wird häufig etwas eingerückt dargestellt.


<body>

Das Element <body> beinhaltet alle sichtbaren Elemente. Dazu gehören Texte, Tabellen Bilder usw.

body

<html>
<head>
 Seiteninformationen
</head>
<body>
 Alle sichtbaren Elemente
</body>
</html>

<br>

Das Element <br> erzeugt einen Zeilenumbruch im Text.

br

<p>Der Text enthält<br>
einen Zeilenumbruch.</p>
Zeilenumbruch in HTML

<button>

<button> erzeugt eine anklickbare Schaltfläche. Durch das klicken auf der erzeugten Schaltfläche wird eine Aktion ausgelöst.

button

<button type="button"> Aktion ausführen</button>
Button in HTML

C

<canvas>

Das Element <canvas> stellt eine Zeichenfläche dar.

Mit JavaScript kann in dieser Fläche gezeichnet werden. Es werden Attribute für die Dimension der Zeichenfläche benötigt.

canvas

<canvas id="leinwand" width="300" height="150"> 
 <p>Der Browser unterstützt nicht das canvas Element</p>
</canvas>
Zeichenflächen in HTML

<cite>

Das Element <cite> bezeichnet den Titel / Autor eines Werkes.

canvas

<p>Ein beliebtes Musical ist <cite>Das Phantom Der Oper</cite></p>

Der durch <cite> definierte Bereich stellt den Inhalt kursiv dar.

Autoren und Titelbezeichnung in HTML

<code>

Die im Element <code> definierten Texte werden als Quelltext gezeichnet.

Im Zusammenspiel mit dem Element <pre> kann vorformatierter Text wie Quellcode im Editor auf dem Browser ausgegeben werden. Das Ergebnis kann so aussehen wie die Boxen mit Quelltext auf dieser Seite.

code

<pre>
 <code>
  Präformatierter Text, 
  so wie er im Codeeditor steht. 
 </code>
</pre>
Präformatierter Text in HTML

Schriftart, Schriftgröße und andere designtechnische Faktoren werden über CSS geregelt.


<col>

Das Element <col> definiert eine Spalte innerhalb einer Tabelle.

Verwendet wird es innerhalb des <colgroup>-Elements.


<colgroup>

Mit <colgroup> können wir eine Spaltengruppe innerhalb einer Tabelle definieren.


D

<datalist>

Das Element <datalist> beinhaltet eine Liste mit <option>-Elementen.

datalist

<input list="wochentage">
<datalist id="wochentage">
 <option value="Montag">
 <option value="Dienstag">
 <option value="Mittwoch">
 <option value="Donnerstag">
 <option value="Freitag">
 <option value="Samstag">
 <option value="Sonntag">
</datalist>

Eingesetzt wird dieses Element innerhalb von Formularen.

Datalist-Element mit Value-Wert in HTML

<dd>

Das Element <dd> steht für description description und wird verwendet, um Begriffe in einer Beschreibungsliste zu erläutern.


<del>

Mit dem Element <del> werden Textabschnitte markiert, die nicht mehr länger gültig sind.

del

<p>Dieser Text enthält <del>nicht mehr länger gültige</del> Bereiche.</p>

Der Text wird vom Browser durchgestrichen dargestellt.

del-Element in HTML

<details>

Durch das Element <details> können Seiteninhalte versteckt werden.

details

<details>
 <summary>
  Hier klicken um den Inhalt zu sehen.
 </summary>
 <p>
  Hier können Bilder, Texte und auch noch mehr "details"-Elemente angegeben werden.
 </p>
</details>

In Kombination mit dem Element <summary> können die versteckten Inhalte wieder sichtbar gemacht werden.

Akkordeon in HTML mit versteckten Elementen

Durch das klicken wird der Inhalt sichtbar gemacht, kann aber auch wieder versteckt werden.

Akkordeon in HTML mit sichtbaren Elementen

<dfn>

Das Element <dfn> markiert einen Textabschnitt, der eine Definition darstellt.

dfn

<p>Normaler Text mit <dfn>definiertem Bereich.</dfn></p>
dfn-Element in HTML

<dialog>

Das Element <dialog> soll die Aufmerksamkeit des Benutzers auf sich ziehen.

dialog

<dialog open>
 <p>Denkbarer Inhalt vom "dialog"-Element</p>
</dialog>

Verwendet wird es üblicherweise in Kombination mit Formularen oder Statusmeldungen.

dialog-Element in HTML

<div>

Das Element <div> ist ein inhaltsloses Blockelement.

Es dient ausschließlich dazu, Grafiken, Texte, Tabellen oder andere Inhalte zusammenzufassen. Zusammengefasste Bereiche können dann über "CSS" gestaltet werden. <div> steht für division was übersetzt für Abteilung / Bereich steht.


<dl>

Das <dl>-Element steht für description list und umfasst Begriffspaare und Beschreibungen innerhalb einer Liste.

dl

<dl>
 <dt>Klasse</dt>
 <dd>Objektorientierung: gemeinsame Struktur und Verhalten von realen Objekten im Softwaredesign.</dd>
 <dd>Mengenlehre: Zusammenfassung von Objekten.</dd>
 <dd>Beförderungsklassen: Tarifstufen im Flug- und Bahnverkehr.</dd>
 <dd>Schulklasse: festgelegte Gruppe von Schülern.</dd>
</dl>
dl-Element in HTML

<dt>

Das Element <dt> beinhaltet den zu beschreibenden Ausdruck einer Beschreibungsliste.


E

<em>

Mit dem Element <em> wird ein Text als emphatisch definiert.

Der mit <em> definierte Text wird in fett abgedruckt.


<embed>

Das Element <embed> stellt einen Punkt dar, über dem interaktive Inhalte oder andere Anwendungen in HTML eingefügt werden können.


F

<fieldset>

Das Element <fieldset> bezeichnet eine Gruppe innerhalb von Formularen.

fieldset

<form action="#">
 <p>Was soll alles auf die Pizza?</p>
 <fieldset>
  <label>
   <input type="checkbox" name="belag" value="tomatensosse">Tomatensoße
  </label>
  <label>
   <input type="checkbox" name="belag" value="salami">Salami
  </label>
  <label>
   <input type="checkbox" name="belag" value="schinken">Schinken
  </label>
  <label>
   <input type="checkbox" name="belag" value="kaese">Käse
  </label>
 </fieldset>
</form>
Checkboxen im Formular

<figcaption>

Teil des <figure>-Elements für das Umschließen des Untertitels.


<figure>

Über das <figure> Element können Abbildungen eingefügt werden, die zum Seiteninhalt gehören.

Dazu gehören Inhalte wie Bilder, Diagramme oder andere Medien wie auch Videos, Programmcode oder Texte sowie Tabellen.

figure

<figure>
 <img src="Bild01.jpg" alt="Bälle 3D">
 <figcaption>
  Hier steht der Bilduntertitel
 </figcaption>
</figure>
Figure Element in HTML

<footer>

Das Element <footer> bezeichnet das Ende einer Webseite, worin Impressum und andere Angaben stehen können.

Der <footer> kann aber auch das Ende eines <article> Elements sein.


<form>

Mit dem Element <form> werden Formulare eingeleitet.

form

<form action="#">
 <label for="eingabetext">Ich bin ein Label</label>
 <input type="text"id="eingabetext">
</form>
Eingabefeld mit Label in einem Formular

H

<h1 - h6>

Mit dem Elementen <h1 - h6> werden Überschriften hierarchisch dargestellt.

h1 - h6

<h1>h1 Überschrift</h1>
<h2>h2 Überschrift</h2>
<h3>h3 Überschrift</h3>
<h4>h4 Überschrift</h4>
<h5>h5 Überschrift</h5>
<h6>h6 Überschrift</h6>
Angeordnete Überschriften im Webbrowser

<head>

<head> ist ein Pflichtelement und enthält die Informationen für das HTML-Dokument.

head

<html>
<head>
 Seiteninformationen
</head>
<body>
 Alle sichtbaren Elemente
</body>
</html>

<header>

Der <header> umschließt den sichtbaren Kopfbereich einer Seite. Dabei beinhaltet er meistens das Logo oder eine Navigation.


<hr>

<hr> steht für horizontal ruler und erzeugt eine horizontale Linie, wodurch ein thematischer Bruch erzeugt wird.


<html>

Das Element <html> beinhaltet die gesamte Internetseite.

html

<html>
<head>
 Seiteninformationen
</head>
<body>
 Alle sichtbaren Elemente
</body>
</html>

I

<i>

Das Element <i> hat keine semantische Bedeutung. Es wird verwendet, um Text besonders hervorzuheben. Der definierte Text wird schräg dargestellt.

i

<p><i>schräg geschriebener Text</i></p>
schräg geschriebener Text in HTML

<iframe>

Das Element <iframe> wird verwendet, um andere Webseiten mit einzubinden.

iframe

<iframe src="https://www.cindiy.de" width="70%" height="450">
 <p>Der Browser kann keine Frames wiedergeben.</p>
</iframe>

<img>

Mit dem Element <img> werden Grafiken in das Dokument eingebunden.

img

<img src="Bild02.jpg" alt="Grünes glühendes Hexagon">
Grünes glühendes Hexagon

<input>

Das Element <input> wird innerhalb von Formularen verwendet, um Daten abzufragen.

input

<form action="#">
 <label for="eingabetext">Ich bin ein Label</label>
 <input type="text"id="eingabetext">
</form>
Eingabefeld mit Label in einem Formular

<ins>

Das Element <ins> wird für die Textauszeichnung verwendet, wenn nachträglich eingefügter Text definiert werden soll.

ins

<p>Im Winter wird es früher dunkel, <ins>auch der Jahreswechsel findet im Winter statt.</ins></p>
ins Element in HTML

Der Text wird unterstrichen dargestellt.


K

<kbd>

<kbd> steht für Keyboard. Dieses Element soll die Eingabe einer Tastatur definieren.

kbd

<p>Die Datei <kbd>index.html</kbd> ist die Startseite.</p>
Keyboardeingabe in HTML

L

<label>

Das Element <label> wird verwendet, um die Eingabefelder in Formularen zu kennzeichnen.

label

<form action="#">
 <label for="eingabetext">Ich bin ein Label</label>
 <input type="text"id="eingabetext">
</form>
Eingabefeld mit Label in einem Formular

<legend>

Das Element <legend> wird verwendet, wenn Überschriften in einem <fieldset> Element erforderlich sind.

legend

<form action="#">
 <p>Was soll alles auf die Pizza?</p>
 <fieldset>
 <legend>Pizzabelag</legend>
  <label>
   <input type="checkbox" name="belag" value="tomatensosse">Tomatensoße
  </label>
  <label>
   <input type="checkbox" name="belag" value="salami">Salami
  </label>
  <label>
   <input type="checkbox" name="belag" value="schinken">Schinken
  </label>
  <label>
   <input type="checkbox" name="belag" value="kaese">Käse
  </label>
 </fieldset>
</form>
Legend-Element in einem Formular

<li>

Das Element <li> steht für list item und verkörpert einen Listenpunkt bei geordneten und ungeordneten Listen.

li

<ul>
 <li>Listenpunkt 1</li>
 <li>Listenpunkt 2</li>
 <li>Listenpunkt 3</li>
</ul>
Listenelemente einer unordered list

<link>

Das Element <link> spezifiziert Beziehungen zu anderen Dokumenten und externen Ressourcen.

link

<html lang="de">
 <head>
  <link href="design.css"rel="stylesheet">
 </head>
</html>

Das Einbinden von Stylesheets ist ein häufiger Einsatz des <link>-Elements.


M

<main>

Das Element <main> beinhaltet den sichtbaren Hauptteil einer Webseite.

main

<html lang="de">
 <body>
  <main>
   Hauptteil einer Webseite
  </main>
 </body>
</html>

<map>

Das Element <map> wird zusammen mit dem Element <area> verwendet, um eine Imagemap zu definieren.


<mark>

Mit dem Element <mark> können Textabschnitte markiert werden.

mark

<p>Text mit <mark>markiertem Bereich.</mark></p>
markierter Bereich in einem Absatz

<meta>

Das Element <meta> enthält Informationen für den Seitenaufbau.

meta

<meta charset="utf-8">

<meter>

Das Element <meter> visualisiert einen Wert in einer Skala.

meter

<meter min="0" max="100" value="70"></meter>
Skala in HTML

N

<nav>

Das Element <nav> beinhaltet Navigationsleisten und Menüs.

nav

<nav>
 <ul>
  <li>Menüpunkt 1</li>
  <li>Menüpunkt 2</li>
  <li>Menüpunkt 3</li>
 </ul>
</nav>

Häufig werden Menüpunkte mithilfe von Listenelementen dargestellt.


<noscript>

Der Inhalt des Elements <noscript> wird angezeigt, wenn JavaScript im Browser deaktiviert ist.

noscript

<noscript>
 <p>
 Wenn dieser Absatz zu lesen ist, dann ist JavaScript deaktiviert.
 </p>
</noscript>

O

<object>

Das Element <object> repräsentiert eine externe Ressource.

PDF, Video, HTML, SVG und andere Daten können mit dem Element <object> eingefügt werden.


<ol>

Das Element <ol> definiert eine geordnete Liste.

ol

<ol>
 <li>Menüpunkt 1</li>
 <li>Menüpunkt 2</li>
 <li>Menüpunkt 3</li>
</ol>

Geordnete Listen verfügen über ein fortlaufendes Anführungszeichen.

Listenpunkte einer geordneten Liste in HTML

<optgroup>

Für verschachtelte Strukturen kann das Element <optgroup> verwendet werden.

optgroup

<form action="#">
 <label>Wohnort:
  <select>
   <optgroup label="A">
    <option label="Aachen">Aachen</option>
    <option label="Amberg">Amberg</option>
    <option label="Augsburg">Augsburg</option>
   </optgroup>
   <optgroup label="B">
    <option label="Berlin">Berlin</option>
    <option label="Bonn">Bonn</option>
    <option label="Bremen">Bremen</option>
   </optgroup>
  </select>
 </label>
</form>

<optgroup> definiert Untergruppen innerhalb eines <select>-Elements.

Optgroup-Element in HTML

<option>

Das Element <option> wird verwendet, wenn der Benutzer eine Auswahl aus einer vorgegebenen Liste treffen soll.

option

<form action="#">
 <label>Wohnort:
  <select>
   <optgroup label="A">
    <option label="Aachen">Aachen</option>
    <option label="Amberg">Amberg</option>
    <option label="Augsburg">Augsburg</option>
   </optgroup>
   <optgroup label="B">
    <option label="Berlin">Berlin</option>
    <option label="Bonn">Bonn</option>
    <option label="Bremen">Bremen</option>
   </optgroup>
  </select>
 </label>
</form>
Optgroup-Element in HTML

<output>

Das Element <output> ist das Gegenstück zum Element <input>.

Eine Ausgabe kann über das <output>-Element erfolgen.


P

<p>

Zur Gliederung eines Textes wird das Element <p> verwendet.

p

<p>Das ist ein Absatz.</p>

<p> steht für paragraph und bildet einen Absatz als Blockelement.

Paragraph-Element in HTML

<param>

Das Element <param> gibt Parameter für ein Plugin an.


<picture>

Das Element <picture> wird verwendet, wenn mehrere Bilder mit unterschiedlicher Auflösung oder Auflösungsdichten für einen bestimmten Bereich definiert werden.

picture

<picture>
 <source media="(min-width: 1000px)" srcset="bild01.jpg">
 <source media="(min-width: 1400px)" srcset="bild02.jpg">
 <img src="Foto01.jpg" alt="Fallback">
</picture>

Das Foto aus dem Element <img> dient als Fallback. Wenn das <source>-Element nicht dargestellt werden kann, wird das Foto als Fallback geladen.


<pre>

Das Element <pre> wird verwendet, um Text formatiert darzustellen.

Im Zusammenspiel mit dem Element <code> kann vorformatierter Text wie Quellcode im Editor auf dem Browser ausgegeben werden. Das Ergebnis kann so aussehen wie die Boxen mit Quelltext auf dieser Seite.

pre

<pre>
 <code>
  Präformatierter Text, 
  so wie er im Codeeditor steht. 
 </code>
</pre>
Präformatierter Text in HTML

Schriftart, Schriftgröße und andere designtechnische Faktoren werden über "CSS" geregelt.


<progress>

Das Element <progress> wird zur Darstellung eines Fortschritts genutzt.

<progress> erwartet die beiden Attribute "max" und "value". Das Attribut "max" muss eine Ganzzahl sein, dessen Wert höher als 0 ist. Das Attribut "value" steht für den Fortschritt und muss einen Wert zwischen 0 und "max" haben.

progress

<progress max="100" value="20">
20% geschafft.
</progress>
Fortschrittsanzeige zu 20% abgeschlossen.

Aus Gründen der Barrierefreiheit sollte auch der Wert des Fortschritts im Element angegeben werden.


Q

<q>

<q> steht für quote was übersetzt Zitat bedeutet.

q

<q>Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt.</q>
Zitat mit dem Element q in HTML.

Die Anführungszeichen werden vom Browser automatisch gesetzt.


S

<s>

Mit dem Element <s> werden Textabschnitte definiert, die nicht länger als relevant oder korrekt gelten.

s

<s>Text wird durchgestrichen dargestellt.</s>
Durchgestrichener Text in HTML.

<samp>

Mit dem Element <samp> wird ein Textabschnitt definiert, der eine Programmausgabe darstellen soll.

samp

<samp>Ausgabe soll eine Computerschrift definieren.</samp>

Programmausgaben können mit dem Element <samp> definiert werden.

Computerausgabe in HTML.

<script>

Das Element <script> definiert einen Bereich, in dem JavaScript-Code ausgeführt werden kann.


<select>

Mit dem Element <select> wird eine Auswahlliste eingeleitet.

select

<form action="#">
 <label>Wohnort:
  <select>
   <optgroup label="A">
    <option label="Aachen">Aachen</option>
    <option label="Amberg">Amberg</option>
    <option label="Augsburg">Augsburg</option>
   </optgroup>
   <optgroup label="B">
    <option label="Berlin">Berlin</option>
    <option label="Bonn">Bonn</option>
    <option label="Bremen">Bremen</option>
   </optgroup>
  </select>
 </label>
</form>
Optgroup-Element in HTML

<small>

Das Element <small> definiert einen Textabschnitt für weniger bedeutsamen Inhalt.

samp

<small>Weniger bedeutsamer Text.</small>
small Element in HTML

<source>

Das Element <source> stellt mehrere Dateien für einen Anwendungsfall bereit.

source

<picture>
 <source media="(min-width: 1000px)" srcset="bild01.jpg">
 <source media="(min-width: 1400px)" srcset="bild02.jpg">
 <img src="Foto01.jpg" alt="Fallback">
</picture>

Das Foto aus dem Element <img> dient als Fallback. Wenn das <source>-Element nicht dargestellt werden kann, wird das Foto als Fallback geladen.


<span>

Das Element <span> ist ein inhaltsloses Inline-Element, welches hauptsächlich verwendet wird, um bestimmte Bereiche mit "CSS" zu definieren.


<strong>

Das Element <strong> wird verwendet, um Textabschnitte besonders zu betonen.

strong

<strong>Besonders betonter Text.</strong>
strong Element in HTML

<style>

Das Element <style> definiert einen Bereich, in dem Stylesheet-Anweisungen angegeben werden, die für das aktuelle Dokument gültig sind.


<sub>

<sub> steht für subscript was übersetzt für Tiefsatz steht.

sub

<p>Normaler Text<sub>Tiefgestellter Text</sub></p>

Das Inlineelement <sub> hat keine semantische Bedeutung und stellt den markierten Text tiefgestellt dar.

Tiefgestellter Text in HTML

<summary>

Das Element <summary> kann versteckte Inhalte wieder sichtbar machen.

summary

<details>
 <summary>
  Hier klicken um den Inhalt zu sehen.
 </summary>
 <p>
  Hier können Bilder, Texte und auch noch mehr "details"-Elemente angegeben werden.
 </p>
</details>
Akkordeon in HTML mit versteckten Elementen

Durch das klicken wird der Inhalt sichtbar gemacht, kann aber auch wieder versteckt werden.

Akkordeon in HTML mit sichtbaren Elementen

<sup>

<sup> steht für superscript was übersetzt hochgestellt bedeutet.

sup

<p>Normaler Text<sup>Hochgestellter Text</sup></p>

Das Inlineelement <sup> hat keine semantische Bedeutung und stellt den markierten Text hochgestellt dar.

Hochgestellter Text in HTML

<svg>

Das Element <svg> definiert einen Bereich, in dem SVG-Grafiken dargestellt werden.


T

<table>

Das Element <table> definiert einen Bereich für eine tabellarisch Zusammenstellung von Daten, in Form von Zeilen und Spalten.

table

<table>
 <tr><td>Zeile 1 / Spalte 1</td><td>Zeile 1 / Spalte 2</td></tr>
 <tr><td>Zeile 2 / Spalte 1</td><td>Zeile 2 / Spalte 2</td></tr>
 <tr><td>Zeile 3 / Spalte 1</td><td>Zeile 3 / Spalte 2</td></tr>
</table>
Eine einfache Tabelle

<td>

Das Element <td> steht für table data und definiert eine Zelle innerhalb eines <table>-Elements.

td

<table>
 <tr><td>Zeile 1 / Spalte 1</td><td>Zeile 1 / Spalte 2</td></tr>
 <tr><td>Zeile 2 / Spalte 1</td><td>Zeile 2 / Spalte 2</td></tr>
 <tr><td>Zeile 3 / Spalte 1</td><td>Zeile 3 / Spalte 2</td></tr>
</table>
Eine einfache Tabelle

<template>

Wird verwendet, wenn zusätzlicher Inhalt nachgeladen wird.


<textarea>

Das Element <textarea> ist ein mehrzeiliges Eingabefeld, welches verwendet wird, um dem Benutzer ausreichenden Platz für Texteingaben zur Verfügung zu stellen.

textarea

<p>Wie war Ihr Tag?</p>
<textarea></textarea>

Über das Dreieck in der rechten unteren Ecke kann die Größe frei bestimmt werden.

textarea in HTML

Um die Größe des Elements vorzugeben, ist die Angabe von Attributen notwendig.


<tfoot>

Das Element <tfoot> definiert den unteren Bereich der Tabelle und wird beim Ausdrucken der Seite auf jede Folgeseite mit ausgedruckt, falls der Tabelleninhalt größer als eine Seite ist.

tfoot

<table border="1">
 <thead>
  <tr><th>Zeile 1 / Spalte 1</th><th>Zeile 1 / Spalte 2</th></tr>
 </thead>
 <tbody>
  <tr><td>Zeile 2 / Spalte 1</td><td>Zeile 2 / Spalte 2</td></tr>
  <tr><td>Zeile 3 / Spalte 1</td><td>Zeile 3 / Spalte 2</td></tr>
 </tbody>
 <tfoot>
  <tr><td>Zeile 4 / Spalte 1</td><td>Zeile 4 / Spalte 2</td></tr>
 </tbody>
</table>
Erweiterte Tabelle mit Rahmen

<th>

Das Element <th> steht für table header und definiert die Kopfzeile der Tabelle.

th

<table border="1">
 <thead>
  <tr><th>Zeile 1 / Spalte 1</th><th>Zeile 1 / Spalte 2</th></tr>
 </thead>
 <tbody>
  <tr><td>Zeile 2 / Spalte 1</td><td>Zeile 2 / Spalte 2</td></tr>
  <tr><td>Zeile 3 / Spalte 1</td><td>Zeile 3 / Spalte 2</td></tr>
 </tbody>
 <tfoot>
  <tr><td>Zeile 4 / Spalte 1</td><td>Zeile 4 / Spalte 2</td></tr>
 </tbody>
</table>
Erweiterte Tabelle mit Rahmen

<thead>

Das Element <thead> definiert den oberen Bereich der Tabelle und wird beim Ausdrucken der Seite auf jede Folgeseite mit ausgedruckt, falls der Tabelleninhalt größer als eine Seite ist.

thead

<table border="1">
 <thead>
  <tr><th>Zeile 1 / Spalte 1</th><th>Zeile 1 / Spalte 2</th></tr>
 </thead>
 <tbody>
  <tr><td>Zeile 2 / Spalte 1</td><td>Zeile 2 / Spalte 2</td></tr>
  <tr><td>Zeile 3 / Spalte 1</td><td>Zeile 3 / Spalte 2</td></tr>
 </tbody>
 <tfoot>
  <tr><td>Zeile 4 / Spalte 1</td><td>Zeile 4 / Spalte 2</td></tr>
 </tbody>
</table>
Erweiterte Tabelle mit Rahmen

<time>

Das Element <time> wird verwendet, um Zeitangaben auch für Suchmaschinen lesbar zu machen.


<title>

Das Element <title> bezeichnet die Registrierkarte und den Titel im Browserfenster. Gleichzeitig wird es für die Anzeige bei Suchmaschinenausgaben verwendet und steht auch im Browserverlauf.


<tr>

Das Element <tr> erzeugt eine neue Zeile in einer Tabelle.

tr

<table border="1">
 <thead>
  <tr><th>Zeile 1 / Spalte 1</th><th>Zeile 1 / Spalte 2</th></tr>
 </thead>
 <tbody>
  <tr><td>Zeile 2 / Spalte 1</td><td>Zeile 2 / Spalte 2</td></tr>
  <tr><td>Zeile 3 / Spalte 1</td><td>Zeile 3 / Spalte 2</td></tr>
 </tbody>
 <tfoot>
  <tr><td>Zeile 4 / Spalte 1</td><td>Zeile 4 / Spalte 2</td></tr>
 </tbody>
</table>
Erweiterte Tabelle mit Rahmen

<track>

Das Element <track> wird verwendet, um Untertitel bei Videos hinzuzufügen.


U

<u>

<u> steht für underline, übersetzt bedeutet das unterstreichen.

u

<p><u>Unterstrichener Text</u></p>

Das Inlineelement <u> hat keine semantische Bedeutung, es unterstreicht den markierten Textabschnitt.

Unterstrichener Text in HTML

<ul>

Ungeordnete Listen werden mit <ul> für unordered list eingeleitet. Innerhalb dieser unordered list werden einzelne Listenpunkte mit <li> (list item) eingesetzt.

ul

<ul>
 <li>Listenpunkt 1</li>
 <li>Listenpunkt 2</li>
 <li>Listenpunkt 3</li>
</ul>
Listenelemente einer unordered list

V

<var>

Das Element <var> bezeichnet Variablen, Konstanten oder andere Größen.


<video>

Das Element <video> erlaubt es uns, Videos direkt in der Seite einzubauen.

video

<video controls src="Video/Film01.mp4" type="video/mp4">
Leider kann der Browser dieses Videomaterial nicht wiedergeben.
</video>
Videoelement mit Controlbutton in HTML

W

<wbr>

Das Element <wbr> definiert einen Bereich, in dem der Browser innerhalb eines Wortes einen Umbruch erzeugen kann.


Zurück zur HTML Startseite Weiter mit CSS (Cascading Style Sheet)