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?
- HTML-Tags für die Grundstruktur eines Dokuments
- HTML-Befehle für die Ausrichtung einer Website
- HTML-Befehle für das Schriftbild
- Abschnitte hervorheben und kennzeichnen
- Tabellen und Listen mit HTML-Tags anlegen
- Medien in HTML einbauen
- HTML-Tags für ein Formular
- Links in HTML einsetzen
- Weitere wichtige HTML-Befehle
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>
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 |
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. |
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.
Ähnliche Artikel
Docker-Befehle
Die Docker-Befehlen dienen zum Steuern der Docker-Engine auf dem lokalen Host. Auf der Kommandozeile eingegeben, werden Sie in API-Calls an den Docker-Daemon übersetzt. Mit Docker-Befehlen lassen sich Images, Container und Volumen verwalten. Arbeitet man viel mit der Software ist es hilfreich, sich gut mit den Docker-Befehlen auszukennen.
Telnet-Befehle in der Übersicht
Mithilfe von Telnet-Befehlen steuern Sie die Verbindung zwischen Ihrem PC oder Laptop und einem externen System, z. B. einem Webserver. Dabei ist es nicht nur wichtig, die entsprechenden Kommandos zu kennen, sondern auch die passenden Optionen. Denn erst durch die Angabe von Parametern entfalten die Telnet-Befehle ihre Wirkung.
HTML Videos auf Website einbinden - so funktioniert´s
HTML5 macht die Bereitstellung von Video-Inhalten einfacher denn je. Die neueste Fassung der Auszeichnungssprache definiert ein natives video-Element und die zugehörige Programmierschnittstelle. Alternativ haben Webseitenbetreiber die Möglichkeit, audiovisuelle Inhalte über Video-Plattformen wie YouTube oder Vimeo auf der eigenen Seite einzubinden.
_target: Linkziele definieren in HTML
Möchten Sie Verlinkungen auf Ihrer Website einbauen, können Sie mit dem HTML-Attribut target festlegen, wo der Link geöffnet werden soll. Dabei entscheiden Sie, ob die Nutzer und Nutzerinnen auf Ihrer Onlinepräsenz bleiben oder zur nächsten Website weitergehen sollen. Hier erfahren Sie, wie Sie _target verwenden und was Sie dabei beachten sollten.
DOCTYPE html: Definition und Beispiele
Der Kennzeichnung DOCTYPE html sollte an der ersten Stelle von HTML-Dokumenten sowie Unterseiten stehen. Mit dem DOCTYPE-Marker verdeutlichen Sie, welche Syntax und Grammatik Sie verwenden. Browser wissen so sofort, um welchen Dokument-Typ es sich handelt. Eine fehlende Kennzeichnung kann zu Problemen mit der Website-Darstellung führen. Erfahren Sie hier alles zu DOCTYPE html.
Was ist HTML (Hyper Text Markup Language)?
Eine eigene Website mit einer unverwechselbaren Handschrift? Das lässt sich mit der Auszeichnungssprache HTML in die Tat umsetzen. Das Besondere an HTML: Sie bietet eine übersichtliche, intuitive Syntax und ist als Open-Source-Sprache kostenlos. Zudem stellt sie für Laiinnen und Laien den optimalen Einstieg in die Welt des Programmierens dar. Wir zeigen, was HTML kann und wie es funktioniert.
