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.

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 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:

<h1>Dies ist eine Headline</h1>

Das HTML-Tag <h> zeichnet Überschriften aus.

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 einer Übersicht der wichtigsten HTML-Befehle zur Hand zu haben. Im Folgenden finden Sie die gängigsten HTML-Befehle in Tabellenform, sortiert nach Kategorien.

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.

Der grundsätzliche Aufbau einer Website mit HTML-Tags

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.

HTML-Tags für den Aufbau eines Dokuments

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.

Passen Sie den Text in Ihrem Dokument an

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>
Hinweis

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.

Formatierung mit einem HTML-Tag

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.

Eine Liste in HTML

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-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.

Fügen Sie ein Bild mit einem HTML-Befehl ein

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.

Formular anlegen

In der Praxis legen Sie ein Formular beispielsweise so an:

<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.

Verlinkungen per HTML-Tag

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-Tag <style> setzen Sie CSS-Codes ein, die das Aussehen Ihrer Website definieren.
<div> Über das HTML-Tag <div> werden Abschnitte eines Dokuments definiert.
<label> Das HTML-Tag <label> wird mit dem Tag <input> verwendet und definiert ein Textfeld für diesen.
<iframe> Durch das HTML-Tag <iframe> können Sie externe Inhalte in Ihre Website einbetten.
<!-- … --> <!-- … --> erlaubt Ihnen, Kommentare in den HTML-Code einzubauen.
Tipp

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.

War dieser Artikel hilfreich?