Aufbau eines HTML 5 - Dokuments

Ein HTML 5 - Dokument besteht grundsätzlich aus folgenden drei Teilen:

  1. Angabe zur verwendeten HTML-Version (Dokumenttyp-Deklaration).
  2. Kopfdaten (Header) zum Beispiel Angaben zu Titel und ähnlichem.
  3. Körper (Body) Text mit Überschriften, Verweisen, Grafikreferenzen usw.
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Titel der Seite</title>
 </head>
<body>

<h1>Überschrift</h1>

<p>Viel Text ...</p>

</body>
</html>

As erstes folgt der <DOCTYPE html>-Tag (Dokumententyp) dann der <html>-Tag.
In der nächsten Zeile wird der <head>-Tag geöffnet (head = Kopf).

Der <meta>-Tag definiert die » Zeichenkodierung mit welcher die Seite dargestellt werden soll.
Eine Zeile darunter der <title>-Tag. Der Titel der Datei wird im Browser in der Titelzeile des Anzeigefensters angezeigt. Danach wird der </head>-Tag wieder geschlossen.

Nach dem <body>-Tag (body = Körper) wird dann der im Browser sichtbare Teil eingetragen.
Der <h1>-Tag definiert eine Überschrift und der <p>-Tag einen Textabsatz.

Mit den schließenden Tags </body> und </html> wird das HTML-Dokument beendet.

Zusätzliche HTML 5 - Elemente

HTML 5 - Elemente wie: <header>, <nav>, <article> und <footer> können Sie für die semantische Gliederung und Formatierung der Seite (über CSS) verwenden. 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Titel der Seite</title>
 </head>
<body>

<header>
 <img src="logo.png"> Meine Webseite
</header>

<nav>
 <a href="#">Link 1</a>
 <a href="#">Link 2</a>
 <a href="#">Link 3</a>
</nav>

<article>
 <h1>Überschrift</h1>
 
 <p>Viel Text ...</p>
</article>

<footer>
 © 2024 meineseite.xy
</footer>

</body>
</html>

Tipps

Strukturierter Aufbau einer Webseite

Seiten dynamisch mit PHP erstellen
Vielleicht kennen Sie dieses Problem: Sie möchten gerne eine Seite ohne Frames erstellen, wollen aber auch nicht bei jeder Änderung an der Navigation alle Seiten ändern. Nur mit HTML gibt es hier keine Lösung und nicht jeder Benutzer hat JavaScript im Browser aktiviert, stattdessen sollten Sie auf PHP zurückgreifen.