So baust du deine Website richtig auf (HTML)

Lerne die komplette Grundstruktur einer HTML-Seite kennen. Verstehe, warum du dies genau so auch machen solltest, um bei der Suchmaschinenoptimierung (SEO) erfolgreich zu sein.

Erstellt/geändert am 30.09.2022

So baust du deine Website richtig auf (HTML)

[Learning HTML] - Teil 2 - Hier lernst du, wie du eine HTML-Website richtig strukturierst. Mit dem richtigen Aufbau gibt es im SEO-Ranking bei den Suchmaschinen keine Probleme.

Die richtige Grundstruktur ist für eine Website essentiell und wird auch von den Suchmaschinen überprüft. Wenn eine Seite Fehler enthält, wird diese entweder nicht richtig angezeigt oder wird im schlimmsten Fall dadurch sogar weiter hinten in den Suchergebnissen auftauchen. Dies ist natürlich nicht gewollt und deshalb muss die Struktur stimmen. Damit du dir dies auch visuelle vorstellen kannst, kannst du diese Seite analysieren. Wir zeigen dir jetzt, wie eine HTML-Seite aussehen muss.

Mehr zum HTML-Grundkurs

Teil 1 HTML Grundkurs für deine eigene Website Teil 2 So baust du deine Website richtig auf (HTML) Teil 3 Texte und Bilder in die Website implementieren (HTML)

Die HTML-Grundstruktur

Wie damals in der Deutsch-Klassenarbeit besteht auch das HTML-Gerüst aus dem Kopfteil, dem Hauptteil und dem Fußteil. Im Kopfteil wird die Website für die Suchmaschinen vorbereitet und wichtige Daten geladen. Im Hauptteil besteht aus dem wichtigen sichtbaren Teil der Website. Im Fußteil sind meist die rechtlichen Angelegenheiten, dem sogenannten Kleingedrucktem, geregelt.

Die HTML-Struktur einer Website ist recht einfach zu verstehen. man kann sich dies wie ein paar Kartons vorstellen, die ineinander gestapelt werden können. Dabei ist der größte Karton das sogenannte <html>-Tag, in welches alle anderen Kartons hineinkommen. Als nächstes nehmen wir nun zwei Kartons. Einer davon ist das <head>-Tag und der andere ist das <body>-Tag. in das <body>-Tag müssen nun noch drei weitere Kartons hineinpassen. Dies sind die <nav>,<main> und <footer>-Tags.

<html>

Starttag der HTML-Seite. Hier beginnt alles.

<head></head>

Hier stehen wichtige Infos für die Suchmaschine und es werden Daten wie z.B. CSS und Javascript geladen.

<body>

Der Starttag des sichtbaren Teils der Website. Der Content wird hier stehen.

<nav></nav>

Die Navigation mit dem Logo.

<main></main>

Der Main-Content ist hier enthalten.

<footer></footer>

Im Footer stehen meist rechtliche Hinweise wie z.B. das Impressum.

</body>

Hier schließt sich der Body.

</html>

Das schließende Tag deiner HTML-Seite. Hiernach kommt nichts mehr.

Das HEAD-Tag erklärt - Der Kopfteil der Website

Damit du auch weißt, warum bestimmte Informationen im eingefügt werden müssen, erklären wird diese hier kurz und prägnant. Die hier aufgeführten Informationen sind die wichtigsten, damit eine Seite auch bei Google und co. indexiert wird. Es gibt u.a. für Twitter, Facebook und co. auch noch weitere Informationen, damit diese deine Website ordentlich auslesen können. Diese sind aber optional. In einem anderen Artikel erklären wir auch nochmal, warum diese head-Infos so wichtig sind.

<html itemscope="" itemtype="https://schema.org/WebPage" lang="de-DE" prefix="og: http://ogp.me/ns#">
<head>
<meta content="Bildurl" itemprop="image"/>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,viewport-fit=cover,user-scalable=no"/>
<link rel="alternate" href="//www.famecontent.com/de/" hreflang="de"/>
<link rel="canonical" href="//www.famecontent.com/de/"/>
<link rel="shortlink" href="//www.famecontent.com/de/"/>
<meta name="robots" content="index, follow">
<link rel="shortcut icon" href="Url zum Favicon"/>
<link type="text/css" rel="stylesheet" media="all" href="Url zur CSS-Datei"/>
<script src="Url zum Javascript"></script>
<title>Der Titel dieser Seite</title>
<meta name="description" content="Beschreibung dieser Seite"/>
<meta name="keywords" content="Optionale Keywords"/>
</head>

Die <link>-Tags beschreiben die Einbindung von z.B. CSS (Cascading Style Sheets)- oder Javascript-Dateien.

Die <meta>-Tags dienen den Suchmaschinen zur besseren Einordnung der Website anhand verschiedener Informationen wie z.B. der Description. Diese wird in der Suchmaschine (unter dem Title) angezeigt, falls Ihre Website in der Suchausgabe erscheint.

Der <title>-Tag ist einer der wichtigsten Tags und beschreibt in 50-60 Zeichen den Inhalt der angezeigten Seite. Er muss dringend zum Inhalt passen und sollte max. 1-2 Keywords enthalten.

Das BODY-Tag erklärt - Der Hauptteil <Body> der Website

Hier spielt sich alles ab: im Body der Website stehen alle Informationen und Bilder, die deinen Webauftritt ausmachen. Der Body besteht aus <nav>, <main> und <footer>. Im <nav> ist gewöhnlicherweise das Logo mit einer Navigation. Dieser Abschnitt sollte auf jeder Unterseite gleich sein. Das <main> beinhaltet dann alles, worum es sich auf der Seite handelt. Im <footer> sind letzte Informationen wie z.B. rechtliche Infos. Dieser Abschnitt sollte ebenfalls auf jeder Unterseite gleich sein.

<body>
<nav>Navigation und Kopfteil</nav>
<main>Hauptteil mit allen Infos und Funktionen</main>
<footer>Fußzeile</footer>
</body>

Das NAV-Tag erklärt

Der <nav>-Tag beinhaltet die Navigation und das Logo deiner Seite. Die Navigation sollte auf jeder Unterseite gleich sein, damit es für den Nutzer einfacher ist, sich zurecht zu finden.

Das MAIN-Tag erklärt

Die <main>-Tag dient als Inhalt von allen Informationen und Funktionen..

Das FOOTER-Tag erklärt

Der <footer>-Tag kommt zum Schluss und sollte auch auf jeder Unterseite gleich sein. Hier tauchen meist die Links zum Impressum, dem Datenschutz und den AGB auf.

Fazit Die Grundstruktur einer Website ist bei jeder Website und jedem noch so großen Betreiber gleich. Das heißt auch für dich, dass du nach genau diesem HTML-Prinzip deine Website aufbauen solltest, um in Zukunft erfolgreich zu sein.