Lerne Coding
HTML Basis: Erklärung der HTML5 Grundstruktur
01.01.2022

HTML 5, das Grundgerüst erklärt!

Inhaltsverzeichnis
[[TABLE OF CONTENTS]]
access_timeGeschätzte Lesezeit ca. Minuten

HTML (Hypertext Markup Language) ist eine Auszeichnungssprache mit der Webseiten strukturiert werden. Texte können als Link, Button oder mit Textformatierungen wie “kursiv” oder “fett” ausgezeichnet werden.

Anfangs fällt es oft schwer die richtige Einordnung der Auszeichnung für bestimmte Elemente zu finden. Mit diesem Guide will ich euch einen möglichst einfachen Einstieg geben.

Das Standard-HTML-Grundgerüst einer Webseite hat den unten abgebildeten Aufbau. Dabei wird grundlegend zwischen Kopf (<head>) und Körper (<body>) unterschieden. Im Kopf befinden sich die Meta-Daten. Also zusätzliche Informationen, die der Nutzer nicht direkt sehen kann. So kann dort der Charset oder auch der Viewport definiert werden. Der Viewport ist dafür verantwortlich, dass alle Inhalte auf verschieden großen Displays gleich gut lesbar sind und korrekt dargestellt werden.

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dokument</title>
</head>
<body>
    <nav></nav>

    <header></header>

    <main></main>

    <footer></footer>
</body>
</html>

Doctype für HTML 5 - Was ist der Doctype?

Der Doctype am Anfang eines Dokuments definiert den HTML-Standard, der verwendet wird. Neben dem heutzutage üblichen Doctype für HTML 5 <!DOCTYPE html> gibt es auch ältere Varianten. Wie zum Beispiel HTML 4, XHTML 1.0 oder XHTML 2.0.

Diese Varianten haben außer bei älteren Webseiten keine Relevanz mehr und sollten auch nicht mehr verwendet werden. Der Standard DOCTYPE, mit dem wir arbeiten existiert seit 2014 und es gibt keinen Grund mit einem älteren Doctype zu arbeiten, außer es wird für den alten Internet Explorer entwickelt. Und das möchte niemand mehr.

HTML Tag - Was kann ich hier definieren?

Im HTML Tag sollte immer die Sprache der Webseite definiert werden, um Screenreadern und Suchmaschinen mitzuteilen, in welcher Sprache die Webseite verfügbar ist. Natürlich kann hier auch mit Klassen und IDs gearbeitet werden, wie bei allen anderen HTML-Elementen auch.

<html lang="de"></html>

Head - der Kopf für die Meta-Daten

Im Head der Seite werden die Meta Daten definiert. Diese sind kleine Informations-Snippets für das Styling, die Scripte und allgemeine Meta Informationen wie Title und Description. Im nachfolgenden erkläre ich einige Parameter, die verwendet werden können.

Was ist die Viewport-Angabe?

Im Head sollte auf jeden Fall eine Viewportangabe definiert sein, damit deine Seite immer die Breite des vom User genutzten Displays verwendet. Andernfalls hättest du nicht die richtigen Breiten auf mobilen Geräten.

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

Der Wert Initial-Scale gibt an, dass die Webseite im Verhältnis 1:1 ausgegeben werden soll. So dass die Webseite auch definitiv keinen Zoom am Anfang besitzt und alles richtig dargestellt werden kann.

Was sind Title und Description?

Title und Description einer Seite sind vor allem dafür da, den Nutzer darüber zu informieren, was für Inhalte die Webseite bietet.

Der Title hat ein eigenes Tag. Er sollte maximal 60 Zeichen lang sein und dem Nutzer auffordern weiterzulesen.

<title>dein Title</title>

Die Description wird über ein allgemeines Meta-Tag definiert, wobei hier der Inhalt der Seite etwas detaillierter beschrieben werden kann. Dabei sollte eine maximal Länge von 160 Zeichen nicht überschritten werden.

<meta name="description" content="deine Beschreibung">

Wie definiere ich das Favicon?

Das Favicon oder inzwischen auch Touchicon genannt, kann über verschiedene Meta Angaben definiert werden. Zusätzlich gibt es Favicon Generatoren für Webseiten, dort muss nur einmalig ein Logo in einer großen Auflösung hochgeladen werden, um Favicons zu erstellen.

Um ein Favicon zu generieren kann ich die Webseite https://www.favicon-generator.org/ empfehlen. Dort werden alle gängigen Formate generiert.

Falls ein favicon.ico als Datei im Root der Webseite abgelegt wurde, wird diese automatisch verwendet, ohne eine Verknüpfung im HTML selbst.

Ein reguläres Meta-Tag um eine Favicon anzugeben kann wie im nachfolgenden Beispiel aussehen.

<link rel="icon" type="image/png" sizes="32x32" href="/favicon.png">

Dabei können auch weitere Größen angeben werden, um für alle Eventualitäten gewappnet zu sein.

Wie definiere ich Styles und Scripts?

Styles und Scripte sollten fast immer in externe Dateien ausgelagert werden, das hat den Hintergrund, dass Styles und Funktionen auf mehreren Seiten verwendet werden können, ohne diese in jede einzelne Seiten-Datei zu schreiben.

Das Anlegen von CSS Dateien gestaltet sich wie folgt über einen link - Tag. Hier wird als erstes definiert, um welchen Typus von Datei es sich handelt. Anschließende folgt via href die Definition der Datei.

<link rel="stylesheet" href="https://hellocoding.de/css/style.css">

Eine Script wird nicht via Link-Tag aufgebaut, sondern mittels Script-Tag. Hier über SRC eine externe Datei geladen. Alternativ kannst du zwischen den Tags deine JS-Source angeben.

<script src="https://hellocoding.de/js/load-manager.min.js"></script>

Wichtig: JavaScript kannst du auch im <body> deiner Seite definieren. CSS mittels <link> oder <style> darf nur im <head> definiert werden

Was bringen mir Open Graph Meta-Daten?

Open Graph ist ein ursprünglich von Facebook entwickeltes Format für erweitere Meta-Daten.

Darüber können für Social Media zusätzliche Informationen angegeben werden.

Zum Beispiel werden diese von Discord ausgelesen, um Artikel previews von HelloCoding zu erstellen.

Discord Meta-Daten Open Graph
Discord Meta-Daten Open Graph

Dokumentation: https://ogp.me/

Open Graph Testing Tool: https://www.opengraph.xyz/

Was ist die Theme-Color?

Die Theme-Color ist eine weitere Meta Daten Angabe über die du eine allgemeine Theme-Farbe definieren kannst. Persönlich bevorzuge ich die Variante, diese Farbe ähnlich zur Navigation zu definieren, um so ein einheitliches Design und einen fließenden Übergang herzustellen.

Allerdings unterstützen noch nicht alle Endgeräte die Theme-Color-Property. Primär Safari Desktop/Mobil und Chrome für Android-Geräte, unterstützen dieses Attribut.

theme-color Meta Tag Verfügbarkeit Weltweit: 61.62%

Meta tag to define a suggested color that browsers should use to customize the display of the page or of the surrounding user interface. The meta tag overrides any theme-color set in the web app manifest.

Internet Explorer nein
Microsoft Edge nein
Firefox nein
Google Chrome 125 +
Safari 15 +
Opera nein
iOS Safari 15.0-15.1 +
Opera Mini nein
Android Webview nein
Android Chrome 122 +
Android Firefox nein
Samsung Internet 6.2-6.4 +
Daten abgerufen von https:/­/­caniuse.com/­meta-theme-color

Bei meiner Webseite FelixSchuermeyer.de wird so ein fließender Übergang zur Browser-Leiste hergestellt.

Bild der Webseite FelixSchuermeyer.de mit passender Theme-Color zur Navigation.
Bild der Webseite FelixSchuermeyer.de mit passender Theme-Color zur Navigation.

Die Strukturierung des HTML ist sehr einfach. Als Name wird "theme-color" eingetragen und als Farbwert geht jeder valide CSS Color Wert.

<meta name="theme-color" content="#303E62">

Body - der Körper für die Inhalte

Im Bereich des Bodys wird der sichtbare Inhalt der Webseite platziert. Dort können die Inhalte angelegt werden.

<body></body>

Im Inhaltsbereich wird bei Webseiten meist ein klassischer Aufbau von Nav, Header, Main, Footer gewählt. Das hat sich grundsätzlich durchgesetzt. Falls Ihr hier einen anderen Aufbau bevorzugt, stellt das aber auch keinen Validierungsfehler dar.

Wie definiere ich meine Navigation?

Die Navigation kann am Anfang des Bodys definiert werden. Dafür solltest du das <nav> Element verwenden. Diese ist ein semantisches HTML5 Element.

Der allgemeine Aufbau in der Navigation kann mittels einer “Unordered List” umgesetzt werden, eine Variante die sich grundsätzlich durchgesetzt hat, denn alle größeren Seiten halten sich an diesen Aufbau.

Was ist semantisches HTML?

Es geht bei semantischen HTML darum, durch eine klare Verwendung von Überschriften, Section, Article, Header, Footer und Absätzen eine bessere Struktur und Lesbarkeit zu ermöglichen. Durch HTML 5 kamen einige der genannten Tags erst hinzu, wodurch der Begriff semantisches HTML erst entstanden ist.

Muss ich immer mit Header, Main und Footer arbeiten?

Nein, aber wenn Ihr eine klassische Webseite erstellt und keine moderne JavaScript-Anwendung erstellt, ergibt es durchaus Sinn sich an dieses Schema zur Strukturierung zu halten. Da so für Webcrawler und Co der Inhalt besser definiert ist. Und auch für euch selbst ergibt es Sinn, da Ihr so leichter erkennen könnt, wo Ihr eure Kerninhalte und eure Kontaktinformationen platzieren solltet.

Zusammenfassung

Es ist wichtig viele Informationen zu deiner Webseite in den Meta-Daten abzubilden. Eine saubere und semantische Struktur eurer Seite ist wichtig für die Lesbarkeit und in der weiteren Bearbeitung der Seite.

Bildquelle - Vielen Dank an die Ersteller:innen für dieses Bild
Kommentare zum Artikel

Es sind noch keine Kommentare vorhanden? Sei der/die Erste und verfasse einen Kommentar zum Artikel "HTML Basis: Erklärung der HTML5 Grundstruktur"!

Kommentar schreiben

Verwante Beiträge
close