HTML-Tags: Ein Überblick über die wichtigsten Befehle
Mit HTML-Befehlen bauen Sie eine Website übersichtlich auf und hinterlegen die wichtigsten Informationen für alle Browser. Neben HTML-Tags für die Grundstruktur gibt es auch einige, mit denen Sie Medien einbauen, Formulare erstellen oder das Schriftbild festlegen können.
- Profi-Website in Sekunden dank KI
- Aus tausenden Vorlagen auswählen
- 30 Tage kostenlos testen
Was sind HTML-Tags?
Möchten Sie HTML lernen oder einen eigenen HTML-Code schreiben, sind HTML-Tags Ihr wohl wichtigstes und wirkungsvollstes Werkzeug. Die HTML-Befehle werden dazu verwendet, Informationen an die unterschiedlichen Browser weiterzugeben. Die Website wird so bestmöglich strukturiert und kann durch die hinterlegten Informationen von jedem Browser angezeigt werden.
Dargestellt werden HTML-Tags in der Regel durch ein Anfangs- und ein End-Tag. Die HTML-Befehle werden in spitze Klammern gesetzt und umschließen die gewünschte Information, wobei das End-Tag durch einen Schrägstrich markiert wird. Die Kombination aus Anfangs-Tag, Information und End-Tag nennt man Element. Es ist möglich, dem Element ein HTML-Attribut zuzuweisen, das weitere Informationen beisteuert.
Hier sehen Sie exemplarisch den Aufbau eines HTML-Tags (für Überschriften):
<h1>Dies ist eine Headline</h1>Nicht jedes HTML-Element besteht aus einem Start- und einem End-Tag. Sogenannte Self-closing Tags (auch leere Tags genannt) sind HTML-Elemente, die keinen Inhalt zwischen einem Start- und End-Tag benötigen. Sie bestehen daher nur aus einem einzelnen Tag, zum Beispiel <br> für einen Zeilenumbruch. Sie schließen sich somit selbst und sind syntaktisch vollständig ohne separates End-Tag.
Es gibt zahlreiche verschiedene HTML-Tags, und Sie werden wahrscheinlich nicht alle benötigen. Hinzu kommt, dass einige HTML-Tags seit der Einführung von HTML 5 und später HTML 5.1 keine Verwendung mehr finden. Auch daher ist es hilfreich, immer eine Übersicht der wichtigsten HTML-Befehle zur Hand zu haben.
Im Folgenden finden Sie die gängigsten HTML-Befehle in Tabellenform, sortiert nach Kategorien. Die hier gezeigten Befehle werden allesamt in der aktuellen HTML-Version 5.2 sowie im HTML Living Standard unterstützt. Letzterer bildet den aktuellen Stand der Webtechnologien ab und wird fortlaufend aktualisiert.
HTML-Tags für die Grundstruktur eines Dokuments
Die folgenden HTML-Tags strukturieren die Website und bilden den Rahmen für alle weiteren Elemente innerhalb des Dokuments.
| HTML-Tag | Beschreibung |
|---|---|
<!DOCTYPE>
|
Dieses HTML-Tag bestimmt den Typ des Dokuments. |
<html>
|
Durch dieses HTML-Tag wird ein Dokument als HTML-Dokument definiert. |
<head>
|
Im Bereich <head> werden Metadaten über das Dokument hinterlegt.
|
<title>
|
In diesem HTML-Befehl wird der Titel des Dokuments hinterlegt, der auch in der Titelleiste des Browsers angezeigt wird. |
<body>
|
<body> ist der Hauptbereich und umfasst den Inhalt, der im Browser angezeigt wird.
|
<nav>
|
Dies ist der Navigationsbereich einer Website. |
<section>
|
Durch <section> können Elemente zu einer Gruppe zusammengefasst werden.
|
<article>
|
<article> ist der Inhaltsbereich einer Homepage.
|
<header>
|
<header> definiert den Kopfbereich einer Seite oder eines Abschnitts.
|
<footer>
|
Über <footer> wird der Fußbereich einer Seite oder eines Abschnitts definiert.
|
Das Grundgerüst einer Website kann beispielsweise so aussehen:
<!DOCTYPE html>
<html>
<head>
<title>Der Titel Ihrer Website</title>
</head>
<body>Hier ist Platz für Texte oder Bilder.</body>
</html>HTML-Befehle für die Ausrichtung einer Website
Es gibt zahlreiche HTML-Tags, mit denen Sie einzelne Bereiche oder die gesamte Seite unterteilen und aufbauen können.
| HTML-Tag | Beschreibung |
|---|---|
<h1> bis <h6>
|
Headlines werden mit den unterschiedlichen h-Tags angelegt. Je kleiner die Ziffer, desto größer die Überschrift. |
<p>
|
Durch <p> wird ein Absatz gekennzeichnet.
|
<br>
|
Mit dem HTML-Tag <br> wird ein Zeilenumbruch erzwungen.
|
<hr>
|
<hr> erzeugt eine optische Trennlinie, die zwischen zwei Inhalten erscheint.
|
<div>
|
Mit dem HTML-div-Tag können zusammengehörige Inhalte blockweise gruppiert werden. |
Ein Beispiel für die Verwendung der strukturellen HTML-Tags:
<body>
<h1>Hier steht eine Überschrift</h1>
<p>Hier ist Platz für einen Fließtext.</p>
<h2>Eine Zwischenüberschrift gliedert den Inhalt</h2>
<p>Weiterer Text und dazwischen <br> ein Umbruch.</p>
</body>HTML-Befehle für das Schriftbild
Mit verschiedenen HTML-Befehlen können Sie das Schriftbild Ihres Dokuments verändern.
| HTML-Tag | Beschreibung |
|---|---|
<b>
|
Einzelne Worte, Sätze oder Absätze werden fett geschrieben. |
<i>
|
Einzelne Worte, Sätze oder Absätze werden kursiv angezeigt. |
<u>
|
Der eingefasste Teil wird unterstrichen. |
<s>
|
Die berücksichtigte Schrift wird durchgestrichen. |
<sup>
|
Mit dem HTML-Tag <sup> können Zeichen hochgestellt werden, wie z. B. bei 1st.
|
<sub>
|
Mit <sub> können tiefgestellte Zeichen dargestellt werden, wie z. B. bei H2O.
|
Ein Beispiel für Anpassungen des Schriftbildes durch HTML-Befehle:
<body>
<p>Hier steht ein Beispieltext und <i>dieser Teil wird kursiv geschrieben</i>.</p>
</body>Um die Farbe der Schrift zu verändern, nutzen Sie am besten CSS. Ein umfangreiches CSS-Tutorial finden Sie im Digital Guide.
Abschnitte hervorheben und kennzeichnen
Um Abschnitte zu formatieren oder zu kennzeichnen, finden vor allem die folgenden HTML-Tags Verwendung:
| HTML-Tag | Beschreibung |
|---|---|
<strong>
|
Mit <strong> können Sie bestimmte Abschnitte hervorheben.
|
<em>
|
Durch <em> werden Textfragmente akzentuiert.
|
<q>
|
Mit <q> lassen sich Zitate innerhalb eines Textes kennzeichnen.
|
<blockquote>
|
<blockquote> markiert einen ganzen Absatz als Zitat.
|
<code>
|
<code> formatiert einen Abschnitt als Programmcode.
|
Hier ein Beispiel für den Einsatz dieser HTML-Befehle:
<body>
<p>Dies ist ein Fließtext. <strong>Dieser Teil wird hervorgehoben</strong>.</p>
</body>Tabellen und Listen mit HTML-Tags anlegen
Auch Tabellen und Listen können Sie in einem HTML-Dokument anlegen. Dies sind die passenden HTML-Tags:
| HTML-Tag | Beschreibung |
|---|---|
<table>
|
Mit dem HTML-Tag <table> wird eine Tabelle definiert.
|
<caption>
|
<caption> definiert den Titel einer Tabelle.
|
<tr>
|
Mit <tr> werden Tabellenzeilen beschriftet.
|
<td>
|
<td> definiert eine bestimmte Zelle in einer Tabelle.
|
<th>
|
Über <th> wird die Kopfzelle einer Tabelle definiert.
|
<ol>
|
Mit <ol> wird eine Liste mit Ordnungszahlen angelegt.
|
<ul>
|
Mit <ul> wird eine ungeordnete Liste mit Aufzählungszeichen angelegt.
|
<li>
|
<li> steht für die einzelnen Einträge der Liste.
|
<dl>
|
<dl> weist eine Definitionsliste aus.
|
<dt>
|
<dt> definiert einen Begriff oder eine Position in einer Definitionsliste.
|
<dd>
|
<dd> ist eine Definitionsbeschreibung innerhalb einer Liste.
|
So sieht eine (unnummerierte) Liste in einem HTML-Dokument aus:
<body>
<ul>
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
<li>Dritter Punkt</li>
</ul>
</body>Medien in HTML einbauen
Verschiedene HTML-Tags erlauben es Ihnen, Bilder, Videos und Audiodateien in ein Dokument einzubauen und diese zu formatieren. Die Medien werden in der Regel über eine URL abgerufen. Dies sind die gängigsten HTML-Befehle:
| HTML-Tag | Beschreibung |
|---|---|
<img>
|
Das HTML-img-Tag bestimmt ein Bild. |
<map>
|
Über <map> kann eine Karte im Dokument eingebaut werden.
|
<audio>
|
<audio> erlaubt es Ihnen, Audioinhalte einzubauen.
|
<video>
|
Mit <video> fügen Sie Videoinhalte hinzu.
|
Wenn Sie einen Medieninhalt einbauen möchten, müssen Sie zusätzlich die HTML-Attribute src für die Quelle und alt für den Alternativtext einsetzen. Das sieht dann so aus:
<body>
<img src="img/beispielbild.png" alt="Beschreibung des Bildes" />
</body>HTML-Tags für ein Formular
Möchten Sie ein Formular auf Ihrer Website einbauen, nutzen Sie die folgenden HTML-Befehle:
| HTML-Tag | Beschreibung |
|---|---|
<form>
|
Mit <form> legen Sie ein Formular an.
|
<input>
|
<input> wird für die Eingabesteuerung genutzt.
|
<button>
|
Über <button> fügen Sie einen Button hinzu.
|
<select>
|
Mit <select> erstellen Sie eine Auswahlliste.
|
<option>
|
<option> repräsentiert ein Element innerhalb einer Auswahlliste.
|
Formular anlegen
In der Praxis legen Sie ein Formular wie unten gezeigt an. Beachten Sie, dass zusätzliche Attribute genutzt werden, um beispielsweise die gewünschte HTTP-Anfrage (in unserem Falle POST) zu spezifizieren.
<body>
<form method="post" action="mailto:mail@beispiel.com">
Name: <input type="text" name="name" />
Password: <input type="password" name="password" />
</form>
</body>Button einbauen
Einen Button fügen Sie so ein:
<body>
<h2>Hier wird der Button platziert</h2>
<button type="button">Click</button>
</body>Links in HTML einsetzen
Mit diesen HTML-Tags bauen Sie Verlinkungen in Ihr Dokument ein:
| HTML-Tag | Beschreibung |
|---|---|
<a>
|
Mit <a> wird der Hyperlink bestimmt.
|
<link>
|
<link> stellt die Verbindung zwischen dem Dokument und einer externen Quelle her.
|
<nav>
|
Durch <nav> werden die Links für die Navigation erstellt.
|
Zusätzlich wird das href-Attribut im Link verwendet, um die Zieladresse anzugeben. So verlinken Sie in einem HTML-Dokument:
<body>
<h2>Kontakt</h2>
<p>Schreiben Sie uns gerne <a href="mailto:mail@beispiel.de">per Mail</a>.</p>
</body>Weitere wichtige HTML-Befehle
Es gibt zahlreiche weitere HTML-Tags, die Sie etwa in einem HTML-Editor verwenden können und die Ihnen die Arbeit erleichtern. Dies ist eine kleine Auswahl:
| HTML-Tag | Beschreibung |
|---|---|
<style>
|
Mit dem HTML-style-Tag setzen Sie CSS-Codes ein, die das Aussehen Ihrer Website definieren. |
<label>
|
Das HTML-Tag <label> wird mit dem Tag <input> verwendet und definiert ein Textfeld für diesen.
|
<iframe>
|
Durch das HTML-iframe-Tag können Sie externe Inhalte in Ihre Website einbetten. |
<!-- … -->
|
<!-- … --> erlaubt Ihnen, Kommentare in den HTML-Code einzubauen.
|
Individuell statt gewöhnlich: Mit dem Homepage-Baukasten gestalten Sie Ihre eigene Website genau nach Ihren Vorstellungen. Falls Sie dabei Hilfe benötigen, steht unser Expertenteam Ihnen gerne tatkräftig zur Seite.
- Professionelle Templates
- Änderungen am Design mit nur einem Klick
- Domain, SSL und E-Mail-Postfach inklusive