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 26.04.2024
[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.
Um den Code übersichtlich zu halten und eine klare Struktur für Ihre Webseite zu schaffen, sollten HTML-Elemente hierarchisch eingebettet werden. Es sollten Einzüge verwendet werden, um die HTML-Verschachtelungsebenen deutlich zu machen.
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 <nav>-Element ist ein semantisches HTML5-Element, das verwendet wird, um eine Navigationsleiste oder eine Navigationssektion auf einer Webseite zu kennzeichnen. Es hilft dabei, den Browser und auch Suchmaschinen über den Zweck des enthaltenen Inhalts zu informieren. Das <nav>-Element wird normalerweise verwendet, um eine Liste von Navigationslinks zu gruppieren, die den Benutzern helfen, durch verschiedene Abschnitte einer Webseite zu navigieren. Indem das <nav>-Element verwendet wird, kann eine klare Struktur für die Navigation auf der Website geschaffen und die Benutzererfahrung insgesamt verbessert werden.
Das MAIN-Tag erklärt
Die <main>-Tag dient als Inhalt von allen Informationen und Funktionen. Das <main>-Element ist ein semantisches HTML5-Element, das dazu dient, den Hauptinhalt einer Webseite zu kennzeichnen. Es wird verwendet, um den primären Inhalt einer Webseite zu umschließen, der normalerweise den Großteil der relevanten Informationen für die Besucher enthält. Es verbessert die Suchmaschinenoptimierung und die Barrierefreiheit, indem es die Bedeutung des Hauptinhalts klar definiert. Verwendet wird das <main>-Element, um den Besuchern der Webseite den relevanten und wichtigen Inhalt leicht zugänglich zu machen.
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. Das <footer>-Element ist ein semantisches HTML5-Element, das dazu dient, den Abschluss oder das Ende eines Abschnitts oder der gesamten Webseite zu kennzeichnen. Es wird verwendet, um Informationen am Ende einer Seite darzustellen, wie beispielsweise Copyright-Hinweise, Kontaktinformationen, rechtliche Informationen oder Links zu verwandten Seiten. Es wird verwendet, um wichtige Informationen am Ende einer Seite anzuzeigen und trägt zur Strukturierung, Zugänglichkeit und Benutzererfahrung der Webseite bei.
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.
Text u.a. mit Hilfe von chat.openai.com verfasst