HTML-Elemente: Funktionsweise und Aufbau erklärt
HTML-Elemente werden genutzt, um einem HTML-Dokument Struktur zu geben. Sie informieren den Browser darüber, wie mit den eingebundenen Inhalten verfahren werden soll.
Was ist ein HTML-Element?
Ein HTML-Element ist eine Komponente innerhalb eines HTML-Dokuments, das einem Browser anzeigt, wie mit einem Inhalt umgegangen werden soll. Es wird meistens mit einem einleitenden Tag <> begonnen und mit einem schließenden Tag </> beendet. Zwischen den beiden Tags steht der eigentliche Inhalt bzw. Gültigkeitsbereich. Das öffnende Tag gibt eine Anweisung, wie mit dem Inhalt verfahren werden soll. Das schließende Tag schließt diese Anweisung ab. HTML-Elemente werden für die Formatierung, semantische Besonderheiten und die einfache Inhaltswiedergabe genutzt.
- 3x schneller und 60 % günstiger
- Maximale Verfügbarkeit mit > 99.99 %
- Nur bei IONOS: Bis zu 500 GB Speicherplatz inklusive
Die Syntax eines HTML-Elements
Der grundsätzliche Aufbau eines HTML-Elements ist fast immer gleich. Die Syntax sieht wie folgt aus:
<tagname>Hier steht der Inhalt bzw. Gültigkeitsbereich</tagname>Das öffnende Tag <tagname> gibt an, um welche Art von Element es sich handelt. Es folgt der Inhalt bzw. der Gültigkeitsbereich und danach das schließende Tag </tagname>, das die Anweisung beendet.
HTML-Element vs. HTML-Tag: Was ist der Unterschied?
HTML-Tags sind ein wesentlicher Bestandteil eines HTML-Elements. Ein öffnendes Tag markiert den Beginn eines Elements, und ein schließendes Tag markiert dessen Ende. Zusammen mit dem Inhalt bilden sie ein vollständiges HTML-Element.
Beispiel für ein HTML-Element
Im folgenden einfachen Beispiel soll die Funktionsweise eines HTML-Elements verdeutlicht werden. Auch der Einsatz eines zusätzlichen eingebetteten HTML-Elements wird aufgezeigt. Jedes HTML-Dokument nutzt diese Verschachtelung, da auf diese Weise eine hierarchische Struktur geschaffen wird. Im folgenden Code nutzen wir mit <html>, body, <h1> und <p> gleich vier verschiedene HTML-Elemente:
<!DOCTYPE html>
<html>
<body>
<h1>Dies ist eine Headline</h1>
<p>Hier steht ein Absatz.</p>
</body>
</html>Das Element <html> definiert das gesamte Dokument als HTML-Dokument. Alle weiteren Inhalte sind in diesem Element eingefasst. Es folgt das Element <body>, das den sichtbaren Inhalt des Dokuments beinhaltet. Darin eingeschlossen befinden sich die HTML-Elemente <h1> und <p>. <h1> weist den Browser an, den enthaltenen Inhalt als HTML-Überschrift der höchsten Hierarchiestufe zu interpretieren. Das <p>-Element leitet einen Inhaltsabschnitt ein.
Besonderheit: Leere HTML-Elemente
Es gibt einige wenige HTML-Elemente, die keinen Inhalt und kein schließendes Tag benötigen. Dazu gehört unter anderem der HTML-Zeilenumbruch <br>. Dieser wird lediglich durch ein öffnendes Tag initiiert, gilt aber dennoch als HTML-Element. In dem nachfolgenden Beispiel können Sie sehen, wie er innerhalb eines weiteren HTML-Elements eingesetzt wird:
<!DOCTYPE html>
<html>
<body>
<p>Dies ist ein Absatz <br>
mit einem Zeilenumbruch.</p>
</body>
</html>Wichtige HTML-Elemente im Überblick
Bei der Arbeit an HTML-Dokumenten werden Sie zahlreiche HTML-Elemente benötigen. Ein paar der wichtigsten zeigen wir Ihnen abschließend hier:
| HTML-Element | Beschreibung |
|---|---|
<html>
|
Legt HTML als Dokumententyp fest |
<head>
|
Kennzeichnet Informationen, die nicht im Browser abgebildet werden |
<title>
|
Bezeichnet den Meta-Title der Seite |
<base>
|
Kennzeichnet die Basis-URL |
<body>
|
Bezeichnet alle Inhalte, die vom Browser abgebildet werden sollen |
<h1>, <h2>, <h3>, …
|
Kennzeichnung einer Überschrift |
<p>
|
Markiert einen Inhaltsabschnitt |
<ul>
|
Leitet eine ungeordnete Liste ein |
<ol>
|
Definiert eine nummerierte Liste |
Sie wollen mehr über die beliebte Auszeichnungssprache für das World Wide Web erfahren? In unserem großen HTML-Einsteiger-Tutorial haben wir die wichtigsten Tipps und Tricks für den Einstieg für Sie zusammengefasst.