Grundgerüst einer HTML-Datei

Das Grundgerüst einer Webseite besteht aus mehreren HTML-Elementen, die unterschiedliche Aufgaben haben. Das Element <html> umschließt das gesamte HTML-Dokument. Darin befinden sich der Bereich <head> mit Informationen über die Webseite sowie der Bereich <body> mit allen sichtbaren Inhalten.

Im <head> stehen zum Beispiel Angaben zur Zeichencodierung, zur Darstellung auf mobilen Geräten und Verweise auf CSS-Dateien. Das Element <title> gehört ebenfalls in den Head-Bereich. Es legt den Titel fest, der im Browser-Tab angezeigt wird.

Im <body> steht der Inhalt, den Besucherinnen und Besucher auf der Webseite sehen. Zur übersichtlichen Strukturierung können semantische Elemente verwendet werden: <header> enthält meist Logo, Überschrift oder Einleitung. <nav> enthält die Navigation mit Links zu weiteren Seiten. <main> kennzeichnet den wichtigsten Inhalt der jeweiligen Seite. <footer> bildet den unteren Bereich und enthält häufig Copyright-Hinweise, Kontaktangaben oder weiterführende Links. Suchmaschinen und Screenreader leichter verständlich.

Das Element <div> ist ein allgemeiner Container. Es hat keine feste Bedeutung, kann aber verwendet werden, um Inhalte zusammenzufassen und sie anschließend mit CSS zu gestalten. Semantische Elemente wie <header>, <nav>, <main> und <footer> machen den Aufbau einer Webseite für Menschen, Suchmaschinen und Screenreader leichter verständlich.

Beispiel: Aufbau einer Webseite

<!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>

    <nav>
        <a href="#">Startseite</a>
        <a href="#">Kontakt</a>
    </nav>

    <main>
        <div>
            Hier steht der wichtigste Inhalt der Seite.
        </div>
        <p>
        Normale Absätze werden mit dem p-Element gekennzeichnet.
        Das Design wird üblicherweise in der CSS-Datei festgelegt,
        kann aber auch direkt mit einem Inline-Style formatiert werden,
        vgl. Kapitel
        <a href="styleinfo.html">Arbeiten mit Styles.</a>
        </p>
        
    </main>

    <footer>
        © 2026 Meine Webseite
    </footer>
</body>
</html>

Willkommen!

Dieser Bereich wurde mit einem div zusammengefasst. Das div fasst hier Überschrift und Absatz zu einem gemeinsamen Bereich zusammen; die Klasse info-box in der CSS ermöglicht die gemeinsame Gestaltung.

Quelle: selfhtml