Web Development
HTML
HTML-Grundstruktur, Tags, Head, Meta-Angaben, Links, Bilder, Navigation und Formulare.
HTML
HTML steht für HyperText Markup Language. HTML beschreibt die Struktur und Bedeutung einer Webseite.
Grundstruktur
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meine Webseite</title>
</head>
<body>
<header>
<h1>Meine Webseite</h1>
</header>
<main>
<p>Inhalt der Seite</p>
</main>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
DOCTYPE
Der DOCTYPE steht ganz am Anfang eines HTML-Dokuments. Er teilt dem Browser mit, wie das Dokument interpretiert werden soll.
Für HTML5:
<!DOCTYPE html>
Head-Bereich
Der <head> enthält Informationen über das Dokument, die nicht direkt als Seiteninhalt angezeigt werden.
Typische Elemente:
| Element | Zweck |
|---|---|
<title> | Titel im Browser-Tab |
<meta charset="UTF-8"> | Zeichencodierung |
<meta name="viewport"> | Darstellung auf mobilen Geräten |
<meta name="description"> | Beschreibung für Suchmaschinen |
<link rel="stylesheet"> | CSS-Datei einbinden |
<link rel="icon"> | Favicon |
Häufige HTML-Tags
| Tag | Bedeutung |
|---|---|
<header> | Kopfbereich |
<nav> | Navigation |
<main> | Hauptinhalt |
<section> | thematischer Abschnitt |
<article> | eigenständiger Inhalt |
<footer> | Fußbereich |
<h1> bis <h6> | Überschriften |
<p> | Absatz |
<a> | Link |
<img> | Bild |
<form> | Formular |
Links
Externer Link:
<a href="https://example.com">Example</a>
Interner Sprung:
<a href="#kontakt">Zum Kontakt</a>
<section id="kontakt">...</section>
Mail-Link:
<a href="mailto:[email protected]">Kontakt</a>
Bilder
<img src="bild.jpg" alt="Beschreibung des Bildes">
Der alt-Text ist wichtig für:
- Screenreader
- Barrierefreiheit
- SEO
- Situationen, in denen das Bild nicht geladen wird
HTML ist nicht nur Optik. Semantische Tags helfen Browsern, Suchmaschinen und assistiven Technologien, die Seite zu verstehen.
Zuletzt aktualisiert: 6. Juni 2026