Aufbau eines HTML-Elements - Webnumerus Webdesign

Wie sieht der Aufbau eines HTML-Elements aus? Wer Webseiten erstellen oder Webdesign lernen möchte, kommt an HTML nicht vorbei. HTML ist die Grundlage nahezu jeder Website im Internet und beschreibt den Aufbau sowie die Struktur von Inhalten. Texte, Bilder, Buttons oder Tabellen. Alles wird mit sogenannten HTML-Elementen aufgebaut. Doch wie genau ist ein solches Element eigentlich aufgebaut? In diesem Blogartikel erkläre ich Schritt für Schritt, wie ein HTML-Element funktioniert und aus welchen Bestandteilen es besteht.

Inhaltsverzeichnis

Aufbau eines HTML-Elements: Was ist ein HTML-Element?

Ein HTML-Element ist ein Baustein einer Webseite. Es besteht meistens aus einem öffnenden Tag, dem Inhalt und einem schließenden Tag.

Ein einfaches Beispiel:

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

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

Dieses Element erzeugt einen Textabsatz auf der Webseite.

Die Bestandteile eines HTML-Elements

Ein HTML-Element besteht in der Regel aus drei Teilen:

1. Öffnender Tag

Der öffnende Tag markiert den Beginn eines Elements.

<p>

<p>

Das „p“ steht für „Paragraph“, also Absatz.

2. Inhalt

Zwischen den Tags befindet sich der eigentliche Inhalt:

Das ist ein Absatz.

Das ist ein Absatz.

Das kann Text sein, aber auch Bilder, Links oder andere HTML-Elemente.

3. Schließender Tag

Der schließende Tag beendet das Element:

</p>

</p>

Der Schrägstrich zeigt an, dass das Element geschlossen wird.

Wer Webdesign lernen möchte, sollte auf gute Fachbücher setzen. Gerade beim Einstieg in HTML, CSS, WordPress oder responsives Webdesign helfen verständliche Schritt-für-Schritt-Anleitungen und praktische Beispiele enorm weiter. Hochwertige Bücher findest du bei Amazon*.

Das komplette HTML-Element

Zusammengesetzt sieht der Aufbau eines HTML-Elements so aus:

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

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

Dieses einfache Prinzip zieht sich durch nahezu die gesamte HTML-Struktur.

Aufbau eines HTML-Elements

HTML-Elemente mit Attributen

Viele HTML-Elemente besitzen zusätzliche Eigenschaften, sogenannte Attribute. Diese erweitern die Funktion eines Elements.

Beispiel mit einem Link:

<a href="https://example.com">Zur Webseite</a>

<a href="https://example.com">Zur Webseite</a>

Hier passiert Folgendes:

<a> definiert einen Link
href ist ein Attribut
Die URL im Attribut gibt das Ziel des Links an
Der Text zwischen den Tags ist der klickbare Inhalt

Wichtige HTML-Attribute

Einige häufig verwendete Attribute sind:

Attribut	Funktion
`href`	Zieladresse eines Links
`src`	Pfad zu einem Bild
`alt`	Alternativtext für Bilder
`class`	CSS-Klasse für Design
`id`	Eindeutige Kennung eines Elements

Beispiel mit Bild:

<img src="bild.jpg" alt="Beschreibung des Bildes">

<img src="bild.jpg" alt="Beschreibung des Bildes">

Selbstschließende HTML-Elemente

Nicht alle HTML-Elemente besitzen einen schließenden Tag. Manche Elemente enthalten keinen eigenen Inhalt und schließen sich selbst.

Dazu gehören unter anderem:

<img>
<br>
<hr>
<input>

Ein Bild-Element benötigt beispielsweise nur die Bildquelle und optional weitere Attribute.

Verschachtelte HTML-Elemente

HTML-Elemente können ineinander verschachtelt werden.

Beispiel:

<p>Das ist ein <strong>wichtiger</strong> Text.</p>

<p>Das ist ein <strong>wichtiger</strong> Text.</p>

Hier befindet sich das <strong>-Element innerhalb des Absatzes.

Das Ergebnis: Das Wort „wichtiger“ wird fett dargestellt.

Aufbau eines HTML-Elements – Fazit

Der Aufbau eines HTML-Elements folgt einem einfachen, aber sehr wichtigen Prinzip: öffnender Tag, Inhalt und schließender Tag. Ergänzt durch Attribute entstehen daraus die grundlegenden Bausteine moderner Webseiten. Wer HTML versteht, legt das Fundament für Webdesign, CSS, JavaScript und die gesamte Webentwicklung. Gerade Einsteiger profitieren davon, die Struktur von HTML-Elementen früh zu verinnerlichen, denn nahezu jede Webseite basiert auf diesem System.

About
Latest Posts

Sladjan Lazic

Sladjan ist Webdesigner und WordPress-Experte mit dem Schwerpunkt Full Site Editing (FSE). Als Webenthusiast arbeitet er seit 2006 mit HTML und CSS und ab 2016 mit WordPress. Seit 2018 arbeitet er mit WooCommerce und erstellt kleine, minimalistische und responsive Websites sowie kleinere Online-Shops. Seit 2019 ist er Zertifizierter SEM-Manager & Webanalyst (Webmasters Akademie) und seit 2024 Geprüfter Webdesigner (OfG).