???? Was ist HTML?

HTML (HyperText Markup Language) ist die Grundlage jeder Website. Es ist eine Auszeichnungssprache, die die Struktur und den Inhalt von Webseiten definiert.

HTML besteht aus Tags, die dem Browser sagen, wie Inhalte angezeigt werden sollen. Jedes Tag hat eine spezifische Bedeutung und Funktion.

???? Warum HTML lernen?

  • Grundlage des Webs: Jede Website verwendet HTML
  • Einfach zu lernen: Keine Programmierkenntnisse erforderlich
  • Vielseitig: Kombinierbar mit CSS und JavaScript
  • Karriere: Einstieg in die Webentwicklung

???? Wie funktioniert HTML?

Grundlegendes HTML-Dokument:

<!DOCTYPE html> <html lang=„de“> <head> <meta charset=„UTF-8“> <title>Meine erste Website</title> </head> <body> <h1>Willkommen!</h1> <p>Dies ist mein erster Absatz.</p> </body> </html>

????️ HTML-Struktur

Grundaufbau eines HTML-Dokuments

Jedes HTML-Dokument folgt einer klaren Struktur mit verschiedenen Bereichen:

<!DOCTYPE html>
Definiert den Dokumenttyp (HTML5)
<html>
Wurzelelement der Seite
<head>
Enthält Metadaten und Einstellungen
<body>
Enthält den sichtbaren Inhalt

Der <head>-Bereich

<head> <!– Zeichensatz festlegen –> <meta charset=„UTF-8“> <!– Seitentitel im Browser-Tab –> <title>Meine Website</title> <!– Responsive Design –> <meta name=„viewport“ content=„width=device-width“> <!– Beschreibung für Suchmaschinen –> <meta name=„description“ content=„Beschreibung“> </head>

Der <body>-Bereich

Im Body-Bereich werden alle sichtbaren Inhalte platziert:

  • Überschriften (h1-h6)
  • Texte und Absätze (p)
  • Bilder (img)
  • Links (a)
  • Listen (ul, ol, li)
  • Formulare (form)

????️ Die wichtigsten HTML-Tags

Text-Tags

<h1> bis <h6>
Überschriften (h1 = wichtigste)
<p>
Absatz / Paragraph
<strong>
Wichtiger Text (fett)
<em>
Betonter Text (kursiv)
<br>
Zeilenumbruch
<span>
Inline-Container für Text

Struktur-Tags

<header>
Kopfbereich der Seite
<nav>
Navigationsbereich
<main>
Hauptinhalt der Seite
<section>
Thematischer Abschnitt
<article>
Eigenständiger Artikel
<footer>
Fußbereich der Seite
<div>
Allgemeiner Container

Listen und Links

Ungeordnete Liste:

<ul> <li>Erster Punkt</li> <li>Zweiter Punkt</li> </ul>

Links erstellen:

<a href=„https://example.com“ target=„_blank“> Besuche Example.com </a>

Bilder und Medien

<!– Bild einf����gen –> <img src=„bild.jpg“ alt=„Beschreibung“> <!– Video einbetten –> <video controls> <source src=„video.mp4“> </video>

???? Fortgeschrittene Konzepte

Formulare erstellen

<form> <label for=„name“>Name:</label> <input type=„text“ id=„name“ required> <label for=„email“>E-Mail:</label> <input type=„email“ id=„email“> <button type=„submit“>Absenden</button> </form>

Tabellen

<table> <thead> <tr> <th>Name</th> <th>Alter</th> </tr> </thead> <tbody> <tr> <td>Max</td> <td>25</td> </tr> </tbody> </table>

Semantisches HTML

Semantische Tags verbessern die Struktur und Zugänglichkeit:

  • <article> – Eigenständige Inhalte
  • <aside> – Seitenleiste oder Zusatzinfo
  • <figure> – Medien mit Beschriftung
  • <time> – Datum/Zeit-Angaben
  • <mark> – Hervorgehobener Text

Best Practices

✅ Valides HTML
Tags korrekt öffnen und schließen
✅ Semantik nutzen
Passende Tags für den Inhalt wählen
✅ Alt-Texte
Bilder immer beschreiben
✅ Einrückung
Code übersichtlich formatieren
✅ Kommentare
Komplexe Bereiche dokumentieren
✅ Barrierefreiheit
Labels für Formularfelder verwenden