HTML-Dokumentstruktur Erklärt
Zunächst untersuchen wir den Aufbau eines HTML-Dokuments.
Aufbau eines HTML-Dokuments
Jedes HTML-Dokument muss einer einheitlichen Struktur folgen. Die hier aufgeführten Elemente bilden die Grundlage für die Organisation von Inhalten, die Definition der Seitenstruktur und die Verbesserung der Nutzererfahrung im Web.
html-Tag
Das <html>-Tag ist das Wurzelelement eines HTML-Dokuments. Alle anderen Elemente werden darin geschrieben. Das öffnende <html>-Tag markiert den Beginn des HTML-Dokuments, während das schließende </html>-Tag das Ende kennzeichnet.
Beispiel:
<html>
<!-- Other elements go here -->
</html>
head-Tag
Das <head>-Tag enthält Metainformationen über das HTML-Dokument, wie Titel, Zeichenkodierung und externe Ressourcen wie Stylesheets und Skripte. Es enthält keine Inhalte, die für den Benutzer direkt auf der Webseite sichtbar sind.
Beispiel:
<head>
<title>Title of the Document</title>
<meta charset="UTF-8" />
<!-- Other meta tags, links, and scripts go here -->
</head>
Erläuterung:
- Das
<title>-Tag definiert den Titel einer Webseite. Dieser wird in der Titelleiste des Webbrowsers oder im Browser-Tab angezeigt. Der Titel einer Seite gibt einen kurzen Überblick über deren Inhalt und erleichtert es den Nutzern, den Zweck der Seite zu verstehen und effizienter durch mehrere Tabs zu navigieren; <meta charset="UTF-8">ist zuständig für die Angabe der im HTML-Dokument verwendeten Zeichenkodierung. Diese Zeichenkodierung bestimmt, wie Webbrowser Text interpretieren und darstellen;- Einige gängige Meta-Tags sind:
<meta name="description" content="Brief description of the page">: Liefert eine prägnante Beschreibung des Seiteninhalts, die in den Suchergebnissen erscheinen kann;<meta name="keywords" content="keyword1, keyword2, ...">: Gibt Schlüsselwörter an, die für den Seiteninhalt relevant sind, und unterstützt die Suchmaschinenoptimierung (SEO);<meta name="viewport" content="width=device-width, initial-scale=1.0">: Definiert die Viewport-Einstellungen für responsives Design und sorgt für eine korrekte Skalierung auf verschiedenen Geräten.
body-Tag
Das <body>-Tag enthält den Hauptinhalt, der für Benutzer auf einer Webseite sichtbar ist. Dieser Inhalt umfasst Text, Bilder, Links, Formulare und andere Elemente, mit denen Benutzer während des Besuchs der Website interagieren können. Im Wesentlichen enthält das <body>-Tag alles, was Benutzer sehen und womit sie auf einer Website interagieren.
Beispiel:
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph of text.</p>
<!-- Other content goes here -->
</body>
Dokumenttyp-Deklaration
Die Dokumenttyp-Deklaration informiert den Webbrowser über die im Dokument verwendete HTML-Version. Diese Deklaration stellt sicher, dass der Webbrowser das Dokument gemäß dem angegebenen HTML-Standard korrekt rendert. Für HTML5-Dokumente lautet die Doctype-Deklaration <!DOCTYPE html>.
Beispiel:
<!DOCTYPE html>
Ergebnisstruktur
Abschließend fassen wir alle bisher behandelten Elemente zusammen und kombinieren sie zu einem einzigen HTML-Dokument.
<!DOCTYPE html>
<html>
<head>
<title>Title of the Document</title>
<meta charset="UTF-8" />
<!-- Other meta tags, links, and scripts go here -->
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph of text.</p>
<!-- Other content goes here -->
</body>
</html>
Unten sehen Sie, wie das HTML-Dokument im Webbrowser dargestellt wird.
Videoanleitung
1. Welches Tag ist das Wurzelelement eines HTML-Dokuments?
2. Was enthält das <head>-Tag?
3. Was definiert das <title>-Tag?
4. Was ist der Zweck des <body>-Tags?
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Awesome!
Completion rate improved to 3.13HTML-Dokumentstruktur Erklärt
Swipe um das Menü anzuzeigen
Zunächst untersuchen wir den Aufbau eines HTML-Dokuments.
Aufbau eines HTML-Dokuments
Jedes HTML-Dokument muss einer einheitlichen Struktur folgen. Die hier aufgeführten Elemente bilden die Grundlage für die Organisation von Inhalten, die Definition der Seitenstruktur und die Verbesserung der Nutzererfahrung im Web.
html-Tag
Das <html>-Tag ist das Wurzelelement eines HTML-Dokuments. Alle anderen Elemente werden darin geschrieben. Das öffnende <html>-Tag markiert den Beginn des HTML-Dokuments, während das schließende </html>-Tag das Ende kennzeichnet.
Beispiel:
<html>
<!-- Other elements go here -->
</html>
head-Tag
Das <head>-Tag enthält Metainformationen über das HTML-Dokument, wie Titel, Zeichenkodierung und externe Ressourcen wie Stylesheets und Skripte. Es enthält keine Inhalte, die für den Benutzer direkt auf der Webseite sichtbar sind.
Beispiel:
<head>
<title>Title of the Document</title>
<meta charset="UTF-8" />
<!-- Other meta tags, links, and scripts go here -->
</head>
Erläuterung:
- Das
<title>-Tag definiert den Titel einer Webseite. Dieser wird in der Titelleiste des Webbrowsers oder im Browser-Tab angezeigt. Der Titel einer Seite gibt einen kurzen Überblick über deren Inhalt und erleichtert es den Nutzern, den Zweck der Seite zu verstehen und effizienter durch mehrere Tabs zu navigieren; <meta charset="UTF-8">ist zuständig für die Angabe der im HTML-Dokument verwendeten Zeichenkodierung. Diese Zeichenkodierung bestimmt, wie Webbrowser Text interpretieren und darstellen;- Einige gängige Meta-Tags sind:
<meta name="description" content="Brief description of the page">: Liefert eine prägnante Beschreibung des Seiteninhalts, die in den Suchergebnissen erscheinen kann;<meta name="keywords" content="keyword1, keyword2, ...">: Gibt Schlüsselwörter an, die für den Seiteninhalt relevant sind, und unterstützt die Suchmaschinenoptimierung (SEO);<meta name="viewport" content="width=device-width, initial-scale=1.0">: Definiert die Viewport-Einstellungen für responsives Design und sorgt für eine korrekte Skalierung auf verschiedenen Geräten.
body-Tag
Das <body>-Tag enthält den Hauptinhalt, der für Benutzer auf einer Webseite sichtbar ist. Dieser Inhalt umfasst Text, Bilder, Links, Formulare und andere Elemente, mit denen Benutzer während des Besuchs der Website interagieren können. Im Wesentlichen enthält das <body>-Tag alles, was Benutzer sehen und womit sie auf einer Website interagieren.
Beispiel:
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph of text.</p>
<!-- Other content goes here -->
</body>
Dokumenttyp-Deklaration
Die Dokumenttyp-Deklaration informiert den Webbrowser über die im Dokument verwendete HTML-Version. Diese Deklaration stellt sicher, dass der Webbrowser das Dokument gemäß dem angegebenen HTML-Standard korrekt rendert. Für HTML5-Dokumente lautet die Doctype-Deklaration <!DOCTYPE html>.
Beispiel:
<!DOCTYPE html>
Ergebnisstruktur
Abschließend fassen wir alle bisher behandelten Elemente zusammen und kombinieren sie zu einem einzigen HTML-Dokument.
<!DOCTYPE html>
<html>
<head>
<title>Title of the Document</title>
<meta charset="UTF-8" />
<!-- Other meta tags, links, and scripts go here -->
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph of text.</p>
<!-- Other content goes here -->
</body>
</html>
Unten sehen Sie, wie das HTML-Dokument im Webbrowser dargestellt wird.
Videoanleitung
1. Welches Tag ist das Wurzelelement eines HTML-Dokuments?
2. Was enthält das <head>-Tag?
3. Was definiert das <title>-Tag?
4. Was ist der Zweck des <body>-Tags?
Danke für Ihr Feedback!
