HTML-Tutorial: Einführung, Grundlagen, Aufbau und Struktur
Zum Programmieren in HTML bietet sich das kostenfreie Programm Notepad++ an. In diesem Tutorial zu HTML werden wir Grundlagen erklären, insbesondere was HTML-Elemente sind und wie der grundlegende Aufbau und die Struktur einer HTML-Seite aussieht.
HTML-Elemente im Allgemeinen
Eine HTML-Seite besteht aus verschiedenen Elementen, die in der Regel geöffnet und geschlossen werden müssen. Der Name eines Elements wird zu Beginn meist von < und > umschlossen, dann kommt der Inhalt und anschließend wird das Element geschlossen, indem der Elementname von </ und > umschlossen wird. Beispiel:
<div>Inhalt</div>
Andere Elemente hingegen werden mit < und dem Elementnamen geöffnet, beinhalten dann Attribute und werden sodann mit /> geschlossen. Der Attributname wird genannt, anschließend ein = geschrieben und in Anführungsstrichen der Attributinhalt übergeben. Beispiel:
<meta charset="utf-8" />
Ein Attribut kann jedoch auch in Elementen vorkommen, die wie das div-Element geöffnet und geschlossen werden. Beispiel:
<div style="color: red;">Inhalt</div>
Aufbau des Dokuments und Metadaten
Doctype und html-Element
Zunächst müssen wir den Doctype des HTML-Dokuments festlegen. Für HTML5 nehmen wir dafür:
<!doctype html>
Anschließend fügen wir das html-Element mit dem Attribut lang der zugehörigen auf der Website genutzten Sprache hinzu; in unserem Falle Deutsch.
<!doctype html>
<html lang="de">
</hml>
head- und body-Element
Innerhalb des html-Elements befinden sich das head-Element und das body-Element. Das head-Element beinhaltet die, vor allem für eine gute Suchmaschinenoptimierung (SEO) wichtigen Metadaten einer Seite. Das body-Element hingegen nimmt den Inhalt der Seite in sich auf.
<!doctype html>
<html lang="de">
<head>Metadaten</head>
<body>Seiteninhalt</body>
</hml>
Semantische Elemente (header, main, footer) und Metadaten
Nun fügen wir dem body-Element noch die durch HTML5 eingeführten wichtigen semantischen Elemente header, main und footer hinzu, die einer Suchmaschine den Aufbau der Seite verständlich machen. Darüber hinaus kommen die wichtigsten Elemente innerhalb des head-Elements (Metadaten) hinzu. Zu diesen gehören das title-Element und verschiedene meta-Elemente.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" /> // Kompatibilität für mobile Browser und Geräte
<title>Titel</title>
<meta name="description" content="Beschreibung" />
<meta name="keywords" content="Schlagwort 1, Schlagwort 2, ..." />
<meta name="author" content="Name des Autors" />
<meta name="date" content="2017-09-14T10:00:00+02:00" /> // Datum (Beispiel für europäische Zeitzone mit Sommerzeit) im Format W3C/Atom
</head>
<body>
<header>Kopfzeile</header>
<main>Seiteninhalt</main>
<footer>Fußzeile</footer>
</body>
</hml>
SEO-Tipp: Das title-Element sowie description und keywords der meta-Elemente sollten hinsichtlich wesentlicher Schlagwörter zusammenpassen.
Inhalt der Seite: Elemente im body-Element
Nachdem nun der grundlegende Aufbau klar ist, werden wir einzelne Elemente innerhalb des body-Elements näher betrachten.
Block-Elemente
Block-Elemente werden standardmäßig untereinander (Zeilenumbruch) dargestellt. Sie nehmen die gesamte Breite ein und lassen keine anderen Elemente neben sich zu. Auch header, main und footer sind Block-Elemente in HTML5.
Einfaches Block-Element (div)
Ein einfaches Block-Element ohne semantische Funktion oder besondere standardmäßige Eigenschaften in CSS ist das div-Element. Es kann alles Mögliche beinhalten, insbesondere auch Text. Darüber hinaus eignet es sich auch zum Gruppieren verschiedener Elemente als gemeinsamer übergeordneter Block.
<div>Inhalt des Blocks</div>
Navigation (nav)
Das header-Element, das innerhalb des body-Element ist, sollte die Navigation für die gesamte Seite beinhalten. Seit HTML5 gibt es dafür das nav-Element. Es ist wie das header-Element eines mit semantischer Funktion für Suchmaschinen.
<header>
<nav>Navigation</nav>
</header>
Titel (h1) und Textabsatz (p)
Innerhalb des main-Elements brauchen wir in jedem Fall die Überschrift der aktuell angezeigten Seite. Dafür nehmen wir das h1-Element, das nur einmal pro Seite existieren darf. Text wird am besten in dem für Textabsätze vorgesehenen p-Element untergebracht. Sowohl das h1- als auch das p-Element erzeugen standardmäßig vor und nach sich einen Abstand, was jedoch in CSS angepasst werden kann. Der Text im h1-Element ist standardmäßig 1,5 mal so groß wie die Ausgangsschriftgröße.
<main>
<h1>Titel</h1>
<p>Textabsatz</p>
</main>
SEO-Tipp: Diese h1-Überschrift ist von großer Bedeutung und sollte hinsichtlich wesentlicher Schlagwörter passend zum title-Element im head-Element und zum Textinhalt der angezeigten Seite sein.
Inline-Elemente
Inline-Elemente werden standardmäßig nebeneinander dargestellt. Sie nehmen sich nur so viel Breite, wie für ihre Anzeige nötig ist und verdrängen keine anderen Elemente neben sich.
Einfaches Inline-Element (span)
Um beispielsweise Textabschnitte anzupassen, dem Text also ein anderes Design zu geben als dem übrigen Text im übergeordneten Element, eignet sich das span-Element. Es kann auch andere Inline-Elemente als übergeordnetes Element gruppieren.
<span>Inline-Elemente / Textabschnitt</span>
Link (a)
Um auf einer Seite zu navigieren, benötigen wir Links. Dafür nehmen wir die a-Elemente. Sie bestehen aus dem Attribut href und dem angezeigten Text:
<a href="URL">Text</a>
Die URL innerhalb des href-Attributs kann beispielsweise zu einem anderen HTML-Dokument der Website verweisen. Es können relative oder absolute URLs genutzt werden. Beispiele:
<a href="https://philipp-guttmann.de/Blog/">Text</a> // absolute URL
<a href="/Blog/">Text</a> // relative URL (zur aktuellen Domain), geht von der Domain aus
<a href="Blog/">Text</a> // relative URL (zur aktuellen Seite), wird an die bisherige URL herangesetzt
Noch Fragen?
Sollten noch Fragen offen sein, können Sie mir gerne eine E-Mail an ed.nnamttug-ppilihp@liam schreiben und ich versuche mein Bestes, um zu helfen! :)