Grundstruktur einer HTML-Seite
2.1. HTML-Dokumentstruktur
Ein HTML-Dokument besteht aus verschiedenen grundlegenden Elementen, die in einer bestimmten Reihenfolge angeordnet sind. Diese Elemente bilden das Grundgerüst jeder Webseite.
Grundstruktur eines HTML-Dokuments:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meine erste HTML-Seite</title>
</head>
<body>
<h1>Willkommen auf meiner ersten HTML-Seite</h1>
<p>Dies ist ein Absatz mit Beispieltext.</p>
</body>
</html>
Erklärung der Elemente:
DOCTYPE-Deklaration
<!DOCTYPE html>
Diese Zeile deklariert das Dokument als HTML5-Dokument. Es ist wichtig, dass diese Deklaration an erster Stelle im Dokument steht.
2. HTML-Tag
<html lang="de">
...
</html>
Das <html>-Tag ist das Wurzelelement des HTML-Dokuments und enthält alle anderen HTML-Elemente. Das lang-Attribut gibt die Sprache des Dokuments an, in diesem Fall Deutsch (de).
Kopfbereich (Head)
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meine erste HTML-Seite</title>
</head>
Der <head>-Bereich enthält Metadaten über das Dokument, die nicht direkt auf der Seite angezeigt werden.
<meta charset="UTF-8">: Definiert die Zeichenkodierung des Dokuments als UTF-8.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Setzt die Ansichtsfensterbreite für responsive Design, um sicherzustellen, dass die Seite auf mobilen Geräten richtig skaliert wird.<title>: Der Titel der Seite, der im Browser-Tab angezeigt wird.
Hauptbereich (Body)
<body>
<h1>Willkommen auf meiner ersten HTML-Seite</h1>
<p>Dies ist ein Absatz mit Beispieltext.</p>
</body>
Der <body>-Bereich enthält den gesamten sichtbaren Inhalt der Webseite, wie Text, Bilder, Links und andere Elemente.
<h1>: Eine Überschrift ersten Grades, die als Hauptüberschrift der Seite dient.<p>: Ein Absatz mit Text.
2.2. Elemente und Tags
In HTML sind Elemente die grundlegenden Bausteine eines Dokuments. Ein Element besteht aus einem öffnenden Tag, dem Inhalt und einem schließenden Tag.
Beispiel für ein HTML-Element:
<p>Dies ist ein Absatz.</p>
- Öffnendes Tag:
<p> - Inhalt:
Dies ist ein Absatz. - Schließendes Tag:
</p>
Selbstschließende Tags:
Einige HTML-Tags sind selbstschließend, was bedeutet, dass sie kein schließendes Tag benötigen.
Beispiele für selbstschließende Tags:
<br> <!-- Zeilenumbruch -->
<img src="bild.jpg" alt="Beispielbild"> <!-- Bild -->
<hr> <!-- Horizontale Linie -->