HTML-Struktur

Erste Schritte: HTML-Struktur: <!DOCTYPE html>, <head>, <body>

Wer PHP lernen möchte, sollte zuerst ein solides Verständnis der
HTML-Struktur haben. HTML (HyperText Markup Language) bildet das Gerüst
einer jeden Webseite und legt fest, wie die Inhalte im Browser angezeigt werden.
Obwohl du später mit PHP dynamische Inhalte generierst, musst du wissen, an welcher
Stelle das Gerüst von HTML beginnt und wo du deine Skripte, Styles oder Metadaten
einfügst. In diesem Tutorial erfährst du, wie du deine HTML-Dateien aufbaust
und was die wesentlichen Elemente sind.

Was bedeutet <!DOCTYPE html>?

Der sogenannte Doctype am Anfang eines HTML-Dokuments informiert
den Browser, welche Version von HTML er interpretieren soll. In aktuellen Projekten
empfiehlt sich die moderne Deklaration <!DOCTYPE html>, um den Browser
in den „Standard-Modus“ zu versetzen und so konsistent mit
HTML5-Standards zu arbeiten. 

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Meine moderne HTML-Seite</title>
</head>
<body>
    <h1>Willkommen!</h1>
    <p>Dies ist ein kurzer Text im Body-Bereich.</p>
</body>
</html>

Frühere HTML-Versionen (z. B. HTML4, XHTML) hatten längere oder komplexere
Doctype-Angaben. Doch seit HTML5 ist <!DOCTYPE html> die einfache,
konforme Standarddeklaration.

<head> – Was gehört hinein?

Der <head>-Bereich enthält Informationen, die der Browser
zur Verarbeitung des Dokuments nutzt, aber in der Regel nicht direkt auf
der Seite angezeigt. Typische Elemente im head sind:

  • <meta charset=“UTF-8″>:
    Stellt sicher, dass Umlaute und Sonderzeichen korrekt dargestellt werden.
  • <title>…</title>:
    Definiert den Seitentitel, der in Browser-Tabs oder Suchmaschinen-Ergebnissen
    angezeigt wird.
  • CSS-Links:
    Binden externe Stylesheets ein, z. B. 

    <link rel="stylesheet" href="styles.css">
  • Meta-Tags:
    <meta name=“description“ content=“…“> oder
    <meta name=“viewport“ content=“width=device-width, initial-scale=1.0″>
    für responsive Websites.
  • Scripts (optional):
    Viele fügen JavaScript eher am Ende des body ein, um das Laden
    zu beschleunigen. Du kannst aber bestimmte Skripte (z. B. zum Tracking)
    auch im head platzieren.

<body> – Die sichtbaren Inhalte

Alles, was deine Besucher tatsächlich sehen (Texte, Bilder, Videos, Formulare, Listen, Tabellen),
gehört in den <body>-Bereich.
Hier strukturierst du deine Website mithilfe von HTML-Tags und CSS-Klassen oder ID-Attributen,
um später das Design festzulegen.

  • <h1>…</h1> bis <h6>…</h6>:
    Überschriften unterschiedlicher Hierarchie. <h1> ist die Hauptüberschrift,
    <h2> eine Unterüberschrift usw.
  • <p>…</p>:
    Absätze für Fließtext.
  • <img>:
    Bilder (mit src und alt-Attribut).
  • <div>:
    Ein grundlegendes Container-Element, um größere Bereiche zu gruppieren.
  • Semantische Elemente:
    <header>, <main>, <footer>, <section>, <article>, <nav> etc.

Während du deine Seite weiter ausbaust, kannst du mithilfe von PHP dynamische Daten
(Artikel, Produkte, Profilinformationen) in den body einfügen.
So siehst du, an welcher Stelle deine Skripte die Inhalte platzieren.

Sprachangabe mit lang=“de“ (oder en, fr…)

Im <html>-Tag kannst (und solltest) du mit lang=“de“ (Deutsch),
lang=“en“ (Englisch) oder einer anderen Sprache festlegen,
für welche Sprache die Seite gedacht ist.
Suchmaschinen und Screenreader profitieren davon, dass sie wissen, in welcher Sprache
die Inhalte verfasst sind.

Beispiel-HTML-Datei (Alles in einem)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Eine kurze Demo-Seite">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML-Struktur-Beispiel</title>
    <link rel="stylesheet" href="styles.css"> 
</head>
<body>
    <header>
        <h1>Willkommen auf meiner Seite</h1>
    </header>

    <main>
        <article>
            <h2>Was ist das hier?</h2>
            <p>Dies ist ein Beispiel, wie du eine typische HTML-Seite aufbaust.</p>
        </article>
    </main>

    <footer>
        <p>© 2025 - Mein Projekt</p>
    </footer>

    <!-- JavaScript (meist am Ende des Body) -->
    <script src="app.js"></script>
</body>
</html>

Zusammenfassung

  • <!DOCTYPE html>:
    Minimalistische Deklaration, die den Browser in den Standards-Modus versetzt.
  • <head>…</head>:
    Enthält Metainformationen, Scripts, Styles und den seitentitel.
  • <body>…</body>:
    Beinhaltet alle sichtbaren Inhalte (Text, Bilder, Formulare usw.).

Fazit

Die HTML-Struktur bildet den Grundrahmen, in dem du später deinen
PHP-Code einbetten und dynamische Features umsetzen kannst.
Gerade wenn du PHP lernen möchtest, hilft es zu verstehen,
an welcher Stelle welche Informationen stehen.
Ist dir klar, wofür <!DOCTYPE html>, <head> und <body> zuständig sind,
wird dir die Entwicklung moderner, effizienter Webseiten leichter fallen.
Im nächsten Schritt kannst du CSS- oder JavaScript-Dateien einbinden und dein Projekt
immer weiter ausbauen, bis du schließlich dynamische Inhalte per PHP hineinlädst.