HTML-Grundgerüst: Aufbau einer HTML-Seite

Das Internet besteht zu einem Großteil aus HTML-Webseiten. Diese bieten eine breite Auswahl an Gestaltungsmöglichkeiten und lassen sich leicht aufrufen und nutzen. Damit das funktioniert, muss eine solche Webseite professionell und korrekt gestaltet sein. Hierbei hilft Ihnen das HTML-Grundgerüst.

Mit diesem können Elemente und Dateien so in einer Webseite platziert werden, dass sie im Browser fehlerfrei und ansprechend angezeigt werden. Dieser Artikel erklärt die wichtigsten Elemente eines HTML-Grundgerüstes und erläutert deren Funktion.

Was ist das HTML-Grundgerüst?

Ein HTML-Grundgerüst umfasst die minimalen Komponenten, die notwendig sind, um Inhalte in einem Browser anzuzeigen. Hierzu gehören Doctype, Head und Body. Diese umfassen Befehle für den Browser (Doctype), Metadaten (Head) sowie den Inhalt (Body). Das HTML-Grundgerüst kann für die grundlegende Gestaltung einer Webseite genutzt werden.

So ist das HTML-Grundgerüst aufgebaut

Das HTML5-Grundgerüst setzt sich aus mehreren unterschiedlichen Komponenten zusammen. Die für ein HTML5 Dokument-relevanten Bestandteile sowie den Aufbau einer HTML-Seite lernen Sie in der folgenden Zusammenfassung über das HTML-Grundgerüst kennen:

Doctype

Es gibt viele unterschiedliche Dokumententypen, die Sie für den Aufbau einer Webseite nutzen können. HTML ist nur einer davon. Ebenfalls beliebt sind beispielsweise CSS (Cascading Style Sheets) und JavaScript. Damit ein Browser in der Lage ist, die entsprechenden Inhalte korrekt darzustellen, muss er die Information bekommen, um welchen Dokumententyp es sich handelt. Das erledigt Doctype.

Hierbei handelt es sich um kein HTML-Tag, sondern um eine allgemeine Information an den Browser. Darin wird deutlich, welche Befehle er erwarten darf und welcher Standard bei der Gestaltung der Webseite zum Einsatz kam.

Navigation

Eine Webseite verfügt in der Regel über eine Haupt-Navigation, über die alle Unterseiten leicht erreicht werden können. Diese Navigation erleichtert Ihren Besuchern und Besucherinnen die Orientierung auf Ihrer Webseite. Sie finden schneller die Inhalte, die sie interessieren, was zu einer längeren Verweildauer und einer höheren Nutzerfreundlichkeit führt.

Header

Der Header zeigt den sichtbaren Kopfbereich einer Webseite an. Hier können unter anderem ein Titel und das Navigationsmenü; untergebracht werden. Richtig eingesetzt, sorgt der Header für mehr Übersichtlichkeit und macht neugierig auf den Inhalt.

Footer

Der Footer zeigt den sichtbaren Fußbereich einer Webseite an. Hier werden unter anderem Angaben über das Copyright, Kontaktdaten, Links und weitere Zusatzinformationen platziert. Ebenso ist es möglich, hier Fußzeilen und Kommentare unterzubringen. Richtig eingesetzt liefert der Footer Zusatzinformationen und hilft bei der Suchmaschinenoptimierung (SEO).

Head

Der Head (dt.: Kopf) ist für die Nutzer und Nutzerinnen unsichtbar, erfüllt aber dennoch unverzichtbare Aufgaben für eine Webseite. So ist im Head der Title der Webseite zu finden. Auch Informationen zum Autor bzw. der Autorin und zum Copyright werden hier oft untergebracht. Der Head dient der Unterbringung der Metadaten einer Webseite und ist somit für den Browser und die Suchmaschinen extrem wichtig.

Im Head ist der HTML-Tag <title> zu finden. Diese Zeile wird in den Suchmaschinen angezeigt. Sie ist wichtig, um potenziellen Besuchern und Besucherinnen zu zeigen, was sie vom Webauftritt erwarten können. Nur wenn sie die hier angebotenen Inhalte überzeugen, klicken sie auf den Link.

Das erhöht Ihren Traffic und bietet Ihnen die Chance, aus Ihren Besuchern und Besucherinnen neue Kunden und Kundinnen zu machen. Auch weitere Angaben, wie zum Beispiel Informationen zu Stylesheets- oder Javascript-Dateien und Einbindungen einer CSS-Datei, sind dort hinterlegt.

Body

Im Body Ihrer HTML5-Webseite bringen Sie Ihre eigentlichen Inhalte unter. Hier können Sie unter anderem Texte, Fotos und Videos präsentieren, die Ihren Besuchern und Besucherinnen einen echten Mehrwert bieten. Zudem können Sie einzelne Produkte und Dienstleistungen vorstellen und durch die Angaben zu einem Kauf einladen. Abhängig davon, ob Sie einen Blog, einen Onlineshop, eine Videoplattform oder einen anderen Webauftritt gestalten möchten, müssen Sie im Body jeweils anderen Content platzieren.

Tags

Es gibt verschiedene HTML-Tags, mit denen Sie Ihren Webauftritt gestalten können. So haben Sie unter anderem die Möglichkeit, bestimmte Teilbereiche zu fetten oder kursiv darzustellen. Außerdem bietet es sich an, einzelne Bereiche Ihrer Webseite klar als Absätze, Aufzählungen oder Überschriften zu kennzeichnen.

Hierdurch erleichtern Sie dem Browser die Orientierung und vermeiden zudem Darstellungsfehler. Setzen Sie HTML-Tags zielführend ein, damit sie ihren Zweck erfüllen. Achten Sie jedoch darauf, dass der Webauftritt nicht zu überladen wirkt.

Beispiel: Praktische Vorlage für ein HTML-Grundgerüst

Das folgende Beispiel zeigt Zeile für Zeile, wie eine HTML-Webseite aufgebaut ist und welche Angaben die HTML-Struktur auszeichnen. Die untenstehende Kopiervorlage können Sie nutzen, um mit der ansprechenden und professionellen Gestaltung Ihres eigenen Webauftritts zu beginnen:

 

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Titel</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="design.css" rel="stylesheet">
</head>
<body>
<p>Inhalt</p>
</body>
</html>

Fazit: Ein HTML-Grundgerüst professionell einsetzen

Es macht einen Unterschied, ob Sie sich bei der Gestaltung Ihres Webauftritts für HTML, CSS oder JavaScript entscheiden. Für alle HTML-Webseiten ist ein HTML-Grundgerüst eine große Hilfe. Hiermit erstellen Sie einen individuellen und ansprechenden Webauftritt, der perfekt auf Ihre Zielgruppe zugeschnitten ist.

Hierbei kommt Ihnen der klar strukturierte Aufbau von HTML-Webseiten mit Doctype, Navigation, Header, Footer, Head, Body und HTML-Tags zu Hilfe. So können Sie Elemente und Dateien so präsentieren, dass sie im Browser ansprechend dargestellt werden. Hierfür ist es aber erforderlich, jede Zeile sorgfältig, korrekt und professionell zu füllen und so eine attraktive HTML-Webseite zu erstellen.

Titelbild: Phiromya Intawongpan / iStock / Getty Images Plus