Eine HTML-Basisseite im HTML5
Code einer einfachen HTML5-Webseite
Schauen wir uns eine ganz einfache HTML5-Seite als Basis für das an, was in diesem Kapitel und im Verlaufe noch kommt. Das soll Ihnen erst einen kleinen Vorgeschmack auf HTML5 liefern. Sie haben noch das ganze restliche Kapitel Zeit, mehr darüber zu lernen.
Eine typische Standarddarstellung der Seite. Zwar wird diese Seite hier in Safari dargestellt, aber sie sieht in anderen Browsern ziemlich ähnlich aus.
Sie können womöglich schon ein wenig von dem erraten, was im Code steht, vor allem im Abschnitt body. Schauen wir uns zuerst den Teil vor body an.
Dies ist der Code einer einfachen HTML-Seite. Ich habe die HTML-Teile hervorgehoben, damit Sie sie vom Textinhalt der Seite unterscheiden können. Wie in der Grafik demonstriert, erscheint das den Text umgebende HTML nicht, wenn Sie die Seite in einem Browser aufrufen. Doch wie Sie bald erfahren, ist dieses Markup ganz wesentlich, weil sie die Bedeutung des Inhalts beschreibt. Beachten Sie auch, dass jede Zeile mit Betätigen der Eingabetaste beendet wird. Das ist nicht unbedingt erforderlich und wirkt sich nicht auf die Darstellung der Seite aus.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<article>
<h1>
HTML5 Lernen - Grundlagen und Tutorials
</h1>
<img src="turn_right_128.png" width="128" height="128" alt="HTML5 Lernen - Grundlagen und Tutorials" />
<p>
HTML5 bietet neue <em>Elemente</em> für die Definition der Struktur einer Website und die Einbettung von Inhalten.
<a href="https://www.html-lernen.info/html5-lernen/html5-info.html" rel="external" title="HTML5 Lernen - Grundlagen und Tutorials">HTML5</a> ist eine Spezifikation, die einige neue Tags und neues Markup beschreibt. Wir beginnen mit einem kurzen Überblick über HTML5.
</p>
</article>
</body>
</html>
Das Textelement
title ist der einzige Teil aus dem oberen Bereich eines HTML-Dokuments, den der Anwender sieht. Der Rest sind Informationen für Browser und Suchmaschinen über diese Seite.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
</head>
Der Inhalt einer Seite existiert zwischen den Start- und Ende-Tags des
body-Elements. Das Dokument endet mit</html>.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<article>
<h1>
HTML5 Lernen - Grundlagen und Tutorials
</h1>
<img src="turn_right_128.png" width="128" height="128" alt="HTML5 Lernen - Grundlagen und Tutorials" />
<p>
HTML5 bietet neue <em>Elemente</em> für die Definition der Struktur einer Website und die Einbettung von Inhalten.
<a href="https://www.html-lernen.info/html5-lernen/html5-info.html" rel="external" title="HTML5 Lernen - Grundlagen und Tutorials">HTML5</a> ist eine Spezifikation, die einige neue Tags und neues Markup beschreibt. Wir beginnen mit einem kurzen Überblick über HTML5.
</p>
</article>
</body>
</html>
Alles oberhalb des Start-Tags <body> sind die bereits erwähnten Hinweise für Browser und Suchmaschinen. Jede Seite beginnt mit der DOCTYPE-Deklaration, der der Browser entnimmt, welche HTML-Version er bei dieser Seite verwenden soll.
Sie sollten stets den DOCTYPE von HTML5 nehmen: Er lautet <!DOCTYPE html>. Dabei ist es egal, ob die Buchstaben groß oder klein geschrieben werden, aber es ist üblicher, DOCTYPE in Großbuchstaben zu schreiben. Ungeachtet dessen sollten Sie immer den DOCTYPE in Ihre Seiten aufnehmen.
Was nach <!DOCTYPE html> kommt und bis </head> reicht, ist für die Anwender unsichtbar - mit einer Ausnahme: Der Text zwischen <title> und </title> – HTML5 Lernen - Grundlagen und Tutorials – erscheint als Titel ganz oben im Browser-Fenster und auf dem Browser-Tab (auch Reiter genannt).
Der Inhalt der Seite, also das, was für Ihre Besucher sichtbar ist, kommt dann zwischen
<body> und </body>. Schließlich zeigt das End-Tag </html> das Ende der Seite an.
Die Einrückungen im Code haben absolut keine Auswirkungen darauf, ob der Code valides HTML ist. Auch wirken sie sich nicht auf die Darstellung der Inhalte im Browser aus (die einzige Ausnahme ist das Element pre). Allerdings ist es üblich, Code einzurücken, der in einem übergeordneten Element verschachtelt ist, damit man auf einen Blick die Hierarchie der Elemente erkennen kann, wenn man den Code liest.
Zuerst wollen wir nun aber erläutern, was es bedeutet, semantisches HTML zu schreiben, und warum das eine Grundlage für eine effektive Website darstellt.
Der Inhalt unserer Grundseite plus ein zweiter Absatz, der am Ende eingefügt wird. Die HTML-Elemente diktieren nicht, wie der Inhalt erscheinen soll, nur was er bedeutet. Stattdessen regelt das in jedem Browser enthaltene Stylesheet, wie der Inhalt standardmäßig dargestellt werden soll.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<article>
<h1>
HTML5 Lernen - Grundlagen und Tutorials
</h1>
<img src="turn_right_128.png" width="128" height="128" alt="HTML5 Lernen - Grundlagen und Tutorials" />
<p>
HTML5 bietet neue <em>Elemente</em> für die Definition der Struktur einer Website und die Einbettung von Inhalten.
<a href="https://www.html-lernen.info/html5-lernen/html5-info.html" rel="external" title="HTML5 Lernen - Grundlagen und Tutorials">HTML5</a> ist eine Spezifikation, die einige neue Tags und neues Markup beschreibt. Wir beginnen mit einem kurzen Überblick über HTML5.
</p>
<p>
<small>© HTML5 Lernen - Grundlagen und Tutorials</small>
</p>
</article>
</body>
</html>
