HTML-Basics

Erste Schritte: HTML-Basics

Bevor du PHP lernen und dynamische Websites programmieren kannst,
lohnt sich ein kurzer Abstecher in die Welt des HTML.
HyperText Markup Language ist das Fundament jeder Webseite.
Sie legt fest, wie die Inhalte strukturiert sind – unabhängig von Design
und Optik, die später über CSS hinzugefügt werden.
In diesem Crashkurs erfährst du, wie eine typische HTML-Datei aufgebaut ist,
welche Grundelemente wichtig sind und wie du erste eigene Seiten erstellen kannst.

Grundstruktur einer HTML-Seite

Jede moderne HTML-Datei basiert auf dem doctype <!DOCTYPE html> und
enthält die Bereiche <head> und <body>.
Der head ist für Metainformationen gedacht (Titel, CSS-Verknüpfungen,
Skripte etc.), während der body alle sichtbaren Inhalte (Texte, Bilder,
Formulare) enthält. 

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Meine erste HTML-Seite</title>
</head>
<body>
    <h1>Hallo Welt!</h1>
    <p>Hier steht ein Absatz mit Text.</p>
</body>
</html>

– <!DOCTYPE html> signalisiert dem Browser, dass es sich um eine moderne HTML5-Seite handelt.
– <meta charset=“UTF-8″> legt die Zeichenkodierung fest (UTF-8 ist heute Standard).
– <title> definiert den Titel, der im Browser-Tab oder in Suchmaschinen erscheint.
– <h1>…</h1> ist eine Überschrift der höchsten Ebene.

Typische HTML-Tags

HTML verwendet Tags, um Inhalte zu strukturieren.
Jeder Tag ist in spitze Klammern eingeschlossen und hat meistens ein
passendes schließendes Tag. Hier einige wichtige Beispiele:

  • <p>…</p>: Absatz.
    In diesen Tags verpackst du gewöhnlich Fließtext.
  • <div>…</div>: Container.
    Häufig genutzt, um Bereiche zu gruppieren und im CSS gezielt zu gestalten.
  • <a>…</a>: Link.
    Mit dem href-Attribut kannst du zu anderen Seiten (oder Dateien) verlinken.
  • <img>: Bild.
    Setze das src-Attribut auf die Bilddatei und das alt-Attribut für Barrierefreiheit.
  • <form>…</form>: Formular.
    Enthält Eingabeelemente wie <input>, <textarea> usw.
    Wird später mit PHP verarbeitet.
  • <ul> <li>…</li> </ul>: Liste.
    Ein ungeordneter Aufzählungsblock (Punkte).
    Für nummerierte Listen nutzt du <ol> (Ordered List).

Semantische HTML-Elemente

Mit HTML5 kamen neue semantische Tags hinzu,
die den Aufbau einer Seite besser beschreiben:

  • <header> – Kopfbereich, oft Logo, Navigation oder Überschriften
  • <main> – Hauptinhalt, der den essenziellen Teil der Seite ausmacht
  • <footer> – Fußbereich, meist Impressum, Links oder Copyright
  • <article> – eigenständiger Artikel oder Beitrag
  • <section> – logische Sektion innerhalb des Dokuments
  • <nav> – Navigationsbereich (Menü) 
<header>
    <h1>Meine Website</h1>
    <nav>
        <ul>
            <li><a href="index.html">Startseite</a></li>
            <li><a href="about.html">Über Uns</a></li>
        </ul>
    </nav>
</header>
<main>
    <article>
        <h2>Hauptthema</h2>
        <p>Ein paar Absätze zum Thema.</p>
    </article>
</main>
<footer>
    <p>© 2025 – Mein Projekt</p>
</footer>

Block- vs. Inline-Elemente

HTML kennt Block-Elemente, die immer auf einer neuen Zeile beginnen
(z. B. <div>, <p>, <h1>)
und Inline-Elemente, die sich im Fließtext einfügen
(z. B. <span>, <a>, <em>).
Im CSS kannst du das Verhalten aber ändern (block, inline, inline-block, etc.),
wenn du bestimmte Layout-Effekte möchtest.

Kommentare & Metadaten

Kommentare helfen dir, den HTML-Code zu strukturieren oder Notizen zu hinterlassen.
Sie werden vom Browser ignoriert: 

<!-- Dies ist ein HTML-Kommentar -->

Im <head>-Bereich kannst du zudem Metadaten einfügen,
z. B. <meta name=“description“ content=“…“> für Suchmaschinen
oder <meta name=“viewport“ content=“width=device-width, initial-scale=1.0″>
für responsives Design.

Praktische Tipps zum Start

  • Saubere Einrückung:
    Achte auf gut strukturierte Zeilen und Einrückungen. Das erleichtert das Lesen und Pflegen des Codes.
  • Valides HTML:
    Tools wie der W3C Validator helfen dir, Fehler im HTML-Code aufzuspüren.
  • Zusammenspiel mit CSS:
    HTML definiert die Struktur, CSS kümmert sich um Layout, Farben und Typografie.
  • Barrierefreiheit:
    Nutze sinnvolle Tags, Beschriftungen (z. B. alt bei <img>)
    und semantische Elemente, damit Screenreader und Suchmaschinen den Inhalt verstehen.

Fazit

HTML ist das Grundgerüst jeder Website.
Wer PHP lernen will, sollte unbedingt die wichtigsten HTML-Basics beherrschen,
denn nur so kannst du wirklich effektive und gut strukturierte Webanwendungen bauen.
Mit den vorgestellten Tags, semantischen Elementen und Grundsätzen bist du in der Lage,
saubere und übersichtliche Seiten zu erstellen.
Im nächsten Schritt kannst du dann CSS einsetzen, um das Layout zu gestalten,
und JavaScript, um die Seite interaktiver zu machen.
Sobald das Fundament steht, öffnen sich dir die Türen zu dynamischen PHP-Funktionen,
Formularverarbeitung und Datenbankanbindungen.