Grundlagen HTML: Unterschied zwischen den Versionen
Keine Bearbeitungszusammenfassung |
|||
| Zeile 104: | Zeile 104: | ||
=== Nicht-semantische Tags === | === Nicht-semantische Tags === | ||
Diese Tags haben | Diese Tags haben '''keine inhaltliche Bedeutung''', sondern dienen nur als Container: | ||
{| class="wikitable" style="width:100%; text-align:center;" | {| class="wikitable" style="width:100%; text-align:center;" | ||
Aktuelle Version vom 28. April 2026, 10:46 Uhr
HTML (HyperText Markup Language) ist die Grundlage aller Webseiten. Mit HTML wird die Struktur und der Inhalt einer Webseite beschrieben, z. B. Texte, Überschriften, Bilder oder Links.
HTML ist keine Programmiersprache, sondern eine Auszeichnungssprache.
Historie von HTML
HTML wurde Anfang der 1990er-Jahre von Tim Berners-Lee am CERN entwickelt. Ziel war es, wissenschaftliche Dokumente über das Internet einfach zu verknüpfen und darzustellen.
Die erste HTML-Version erschien 1991 und enthielt nur wenige grundlegende Elemente für Texte und Links. Mit der zunehmenden Verbreitung des World Wide Web wurde HTML kontinuierlich erweitert.
Wichtige Meilensteine sind:
- HTML 4.01 (1999) – lange Zeit Standard für Webseiten
- XHTML – strengere, XML-basierte Variante
- HTML5 (seit 2014) – moderner Standard mit Unterstützung für Multimedia, Formulare und semantische Elemente
Heute wird HTML als HTML Living Standard kontinuierlich weiterentwickelt.
Aufgabe von HTML
HTML beschreibt:
- welche Inhalte eine Webseite hat
- wie diese Inhalte strukturiert sind
HTML legt nicht fest:
- das Aussehen (→ CSS)
- das Verhalten (→ JavaScript)
Grundprinzip
HTML besteht aus Elementen, die mit sogenannten Tags beschrieben werden.
Beispiel:
<p>Das ist ein Absatz.</p>
<p>→ öffnendes Tag</p>→ schließendes Tag- Inhalt steht dazwischen
Aufbau eines HTML-Dokuments
Ein einfaches HTML-Dokument hat immer den gleichen Grundaufbau:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Meine erste Webseite</title>
</head>
<body>
<h1>Hallo Welt</h1>
<p>Das ist meine erste HTML-Seite.</p>
</body>
</html>
Wichtige HTML-Elemente
| Element | Bedeutung |
|---|---|
| <h1> ... </h1> bis <h6> ... </h6> | Überschriften |
| <p> ... </p> | Absatz |
| <a> ... </a> | Link |
| <img> | Bild |
| <ul>, <ol> | Listen |
| <div> ... </div> | Bereich / Container |
Semantische und nicht-semantische Tags
HTML5 hat sogenannte semantische Elemente eingeführt. Diese beschreiben die Bedeutung eines Inhalts und verbessern Lesbarkeit, SEO und Barrierefreiheit.
Semantische Tags
Semantische Tags geben dem Inhalt eine klare Bedeutung:
| Tag | Bedeutung |
|---|---|
| <header> | Kopfbereich einer Seite oder eines Abschnitts |
| <nav> | Navigationsbereich |
| <main> | Hauptinhalt der Seite |
| <section> | thematischer Abschnitt |
| <article> | eigenständiger Inhalt (z. B. Blogartikel) |
| <footer> | Fußbereich |
Vorteile:
- bessere Struktur
- besser für Suchmaschinen (SEO)
- besser für Screenreader (Barrierefreiheit)
Nicht-semantische Tags
Diese Tags haben keine inhaltliche Bedeutung, sondern dienen nur als Container:
| Tag | Bedeutung |
|---|---|
| <div> | allgemeiner Container |
| <span> | Inline-Container |
Sie werden hauptsächlich für Layout und Styling mit CSS verwendet.
Vergleich
| Typ | Beispiel | Aussage |
|---|---|---|
| semantisch | <header> | „Das ist der Kopfbereich“ |
| nicht-semantisch | <div> | „Das ist ein Bereich“ |
Merke: Wenn möglich, sollten semantische Tags verwendet werden.
Attribute
HTML-Elemente können Attribute besitzen, die zusätzliche Informationen enthalten.
Beispiel:
<a href="https://example.com">Zur Webseite</a>
hrefist ein Attribut- es definiert das Link-Ziel
HTML und CSS
HTML und CSS haben unterschiedliche Aufgaben:
- HTML → Struktur und Inhalt
- CSS → Aussehen (Farben, Schriftarten, Layout)
Beispiel:
<p style="color:red;">Text in Rot</p>
HTML und JavaScript
JavaScript wird verwendet, um Webseiten interaktiv zu machen, z. B.:
- Klickaktionen
- Formulare prüfen
- Inhalte dynamisch ändern
Typische Einsatzgebiete
- Webseiten
- Webanwendungen
- E-Mails (HTML-Mail)
- Benutzeroberflächen in Web-Apps
Kurzmerksatz
HTML beschreibt die Struktur und den Inhalt einer Webseite, nicht das Design und nicht die Logik.
