HTML-Elemente Referenz

HTML5 & CSS3 Tutorials

HTML-Elemente Referenz

HTML-Element	Beschreibung
<!--...-->	Dieses HTML-Element definiert einen Kommentar.
<!DOCTYPE>	Dieses HTML-Element definiert den Dokumententyp, welcher seit HTML5 immer <!DOCTYPE html> lautet. Dies ist kein HTML-Element sondern ein Hinweis für den Webbrowser in welcher HTML-Version das Dokument verfasst wurde.
<a>	Mit diesem HTML-Element werden Hyperlinks zu anderen Webseiten erzeugt.
<abbr>	Dieses HTML-Element definiert Abkürzungen oder Akronyme zusätzlich kann das title-Attribut verwendet werden um das abgekürzte Wort als Tooltip anzeigen zu lassen wenn der Besucher unserer Website mit der Maus über das Wort fährt.
<address>	Mit diesem HTML-Element sollte man die Kontaktinformationen des Autor/Eigentümer eines Dokuments hinterlegen.
<area>	Dieses HTML-Element definiert einen verweisenden Bereich innerhalb einer verweisenden Grafik. Dieses Element wir immer von einem map-Element umschlossen.
<article>	Dieses HTML-Element definieren wir einen geschlossenen logischen Bereich auf unserer Webseite. Dieser ist daher unabhängig vom Rest der Webseite. Das könnten z.B. Blogartikel, Forums Posts, User-Kommentare, usw. sein.
<aside>	Dieses HTML-Element definiert Bereiche unserer Webseite welche Inhalte bieten, der nur indirekt im Zusammenhang zur restlichen Webseite steht. Diese Informationen sind meist nicht so wichtiger Natur.
<audio>	Dieses HTML-Element erlaubt es uns, Audiodateien ohne spezielle Erweiterungen auf unserer Webseite abspielen zu lassen.
<b>	Dieses HTML-Element hebt den darin enthaltenen Text in fettgedruckter Schrift hervor. Dieses HTML-Element sollten wir nicht für Textformatierung missbrauchen, dafür steht uns CSS zur Verfügung. Wir setzten dieses HTML-Element nur ein wenn kein anderes HTML-Element für diesen Text passend ist. Um Text hervorzuheben stehen uns <em> für betonten Text, <strong> für wichtigen Text und <mark> für markierten Text zur Verfügung.
<base>	Mit diesem HTML-Element können wir die Basis-URL für unser HTML-Dokument definieren. Dies betrifft im Folgenden dann die relativen URL Angaben. Das <base>-Element darf es nur ein einziges Mal in einem HTML- Dokument geben.
<bdi>	Dieses HTML-Element definiert einen Bereich für einen Bidirektionalen Text, welcher in einer anderen Richtung formatiert sein könnte. Hilfreich wenn Text aus einer Benutzereingabe oder einer Datenbank stammt, wo die Schreibrichtung nicht bekannt ist.
<bdo>	Dieses HTML-Element wird dazu verwendet die Textrichtung innerhalb eines Fließtextes zu ändern. Dies ist nützlich wenn wir einen Text anzeigen lassen möchten der von rechts nach links geschrieben wird, wie z.B. Arabisch.
<blockquote>	Mit diesem HTML-Element können wir Text aus anderen Quellen als Zitat in unser HTML-Dokument einfügen.
<body>	Dieses HTML-Element definiert den Dokumentenköper unseres HTML-Dokuments. Dies ist der Bereich den der Webbrowser für den Anwender rendert (aufbereitet).
<br>	Dieses HTML-Element definiert einen Zeilenumbruch welcher vom Webbrowser beim rendern der Webseite berücksichtigt wird.
<button>	Dieses HTML-Element definiert eine anklickbare Schaltfläche. Wir können hier zusätzliche Grafiken und andere HTML-Elemente einbinden.
<canvas>	Dieses HTML-Element definiert eine leere Zeichenoberfläche auf der wir z.B. mit Canvas-2D-API einfache Grafiken, via Script, darstellen können.
<caption>	Dieses HTML-Element definiert die Überschrift einer Tabelle. Dieses HTML-Element muss direkt nach dem öffnenden <table>-Element hinterlegt werden. Standardmäßig wird diese im Webbrowser über der Tabelle dargestellt.
<cite>	Dieses HTML-Element definiert den Titel eines Werkes wie zum Beispiel den Titel eines Buches, Films, Gemälde,... Dieses HTML-Element findet keine Anwendung bei Personen!
<code>	Dieses HTML-Element definiert Computercode in unserem HTML-Dokument. Möchten wir mehrere Zeilen Computercode einfügen, dann sollten wir das HTML-Element <pre> verwenden.
<col>	Dieses HTML-Element definiert eine Spalte innerhalb einer Tabelle. das <col>-Element muss sich innerhalb des <colgroup>-Elements befinden.
<colgroup>	Dieses HTML-Element definiert eine Gruppe von Spalten innerhalb einer Tabelle.
<data>	Dieses HTML-Element verknüpft den angegebenen Inhalt mit einer maschinen-lesbarer Übersetzung (Microformats).
<datalist>	Dieses HTML-Element erstellt eine Liste von vordefinierten Auswahlmöglichkeiten für eine Dateneingabe.
<dd>	Dieses HTML-Element definiert die Beschreibung eines zu beschreibenden Ausdrucks in einer Beschreibungsliste. Dieses HTML-Element befindet sich innerhalb eines <dl>-Elements und folgt auf ein <dt>-Element.
<del>	Dieses HTML-Element definiert einen nicht mehr länger gültigen Textabschnitt. Das kann bei aktualisierten Beiträgen nützlich sein, wenn sich etwas an einer Situation nachträglich geändert hat.
<details>	Dieses HTML-Element blendet Informationen, zu einem Bereich unseres HTML-Dokuments, auf Wunsch des Anwenders, ein oder aus.
<dfn>	Dieses HTML-Element kennzeichnet eine Definition die wir im anschließenden Text noch erläutern <p><dfn>HTML</dfn> ist die Standardsprache um Webseiten zu erstellen</p>
<dialog>	Dieses HTML-Element definiert eine Dialogbox oder ein Fenster.
<div>	Dieses HTML-Element definiert einen Bereich unseres HTML-Dokuments. Früher hat es quasi ein <div>-Flut gegeben. Dieser wird durch die in HTML5 neu hinzugekommenen Elemente versucht Einhalt zu gewähren. Bevor man ein <div>-Element verwendet, sollte man sich die Frage stellen, ob nicht eines der folgenden HTML-Elemente passen würde: <article>, <aside>, <section>, <header>, <footer>,...
<dl>	Dieses HTML-Element definiert eine Beschreibungsliste (früher auch Definitionsliste genannt). Innerhalb dieser Beschreibungsliste werden definieren wir den zu beschreibenden Ausdruck mit dem <dt>-Element, gleich darauf folgt die Erklärung mit dem <dd>-Element.
<dt>	Dieses HTML-Element definiert den zu beschreibenden Ausdruck in einer Beschreibungsliste. Die Beschreibung folgt dem zu beschreibenden Ausdruck innerhalb eines dd-Elements.
<em>	Dieses HTML-Element definiert einen Textbereich oder ein Wort dem wir Sprachlich eine besondere Betonung verleihen möchten. Möchten wir jedoch den Textbereich oder ein Wort nur in den Focus rücken, dann empfiehlt sich das HTML-Element <strong>.
<embed>	Dieses HTML-Element definiert einen Container für externe nicht-HTML-Anwendungen welche nicht nativ vom Webbrowser unterstützt werden können.
<fieldset>	Dieses HTML-Element definiert eine optionale Gruppe von Formularelementen die eine logische Zusammengehörigkeit aufweisen. Manche Webbrowser rahmen diesen Bereich optisch ein. Mit dem <legend>-Element können wir dieser Gruppe noch eine Überschrift verleihen.
<figcaption>	Dieses HTML-Element definiert Beschriftungen für das <figure>-Element. Es kann innerhalb des <figure>-Elements an erster oder letzter Stelle stehen.
<figure>	Dieses HTML-Element haben wir die Möglichkeit, Bilder, Videos, Anmerkungen, Tabellen, Codebeispiele, usw. logisch zu gruppieren und auszuzeichnen.
<footer>	Dieses HTML-Element definiert eine Fußzeile in einem Dokument, <article>-Element oder einem <section>-Element. Hier könnten wir Informationen über den Autor, das Copyright oder Kontaktinformationen hinterlegen.
<form>	Dieses HTML-Element definiert ein Formular innerhalb unseres HTML-Dokuments.
<h1> bis <h6>	Dieses HTML-Element definiert eine Überschrift der ersten Ordnung (<h1>), zweiten Ordnung (<h2>), dritten Ordnung (<h3>), vierten Ordnung (<h4>), fünften Ordnung (<h5>), sechsten Ordnung (<h6>)
<head>	Dieses HTML-Element definiert den nicht darstellbaren Bereich unseres HTML-Dokuments. Dieser Kopfbereich eines jeden HTML-Dokuments beinhaltet wichtige Informationen für den Webbrowser, Suchmaschinen, Screen Reader, usw... Damit unser HTML-Dokument valide bleibt, müssen wir im <head>-Element zwingend das <title>-Element hinterlegen. Regulär können sich auch noch folgende Elemente im <head>-Element befinden: <meta>, <link>, <style>, <base>, <script> und <noscript>
<header>	Dieses HTML-Element definiert eine Kopfzeile in einem Dokument, <article>-Element oder einem <section>-Element. Hier könnten wir eine Überschrift, einleitenden Text und/oder eine Navigation hinterlegen.
<hr>	Dieses HTML-Element definiert einen thematischen Wechsel in unserem HTML-Dokument. Standardmäßig wird dies im Webbrowser als Linie dargestellt.
<html>	Dieses HTML-Element definiert unser HTML-Dokument Das <html>-Element beinhaltet sämtliche weiteren HTML-Elemente.
<i>	Dieses HTML-Element definiert einen Teil des Textes mit einer anderen Stimme oder Stimmung. In HTML5 sollte dieses HTML-Element nur für inhaltliche spezielle Fachausdrücke, wissenschaftliche Namen, fremdsprachige Wörter oder für einen Gedanken verwenden.
<iframe>	Dieses HTML-Element verwenden wir um Dokumente und andere Webseiten in unser HTML-Dokument einzubetten.
<img>	Dieses HTML-Element definiert eine Grafik die wir in unser HTML-Dokument einbinden. Das alt-Attribut ist dabei zwingend erforderlich damit unser HTML valide bleibt. Die Grafik wird über das href-Attribut referenziert und ist kein Teil des HTML-Dokuments.
<input>	Dieses HTML-Element definiert ein Eingabefeld in unserem HTML-Dokument, in welchem der Besucher verschiedene Arten von Daten eintragen kann. Die Art der Daten hängt vom `type`-Attribut ab.
<ins>	Dieses HTML-Element definiert eine Änderungsmarkierung für einen nachträglich hinzugefügten Text. Das kann bei aktualisierten Beiträgen nützlich sein, wenn sich etwas an einer Situation nachträglich geändert hat.
<kbd>	Dieses HTML-Element definiert eine Tastatur Eingabe.
<lable>	Dieses HTML-Element definiert eine Beschriftung für ein <input>-Element.
<legend>	Dieses HTML-Element definiert eine Überschrift für eine <fieldset>-Gruppe.
<li>	Dieses HTML-Element definiert die einzelnen Listenelemente oder auch Listenpunkte genannt. Dies betrifft geordnete Listen (<ol>-Element) genauso wie ungeordnete Listen (<ul>-Element).
<link>	Dieses HTML-Element definiert die Beziehung zwischen unserem HTML-Dokument und einer externen Ressource. Ein Beispiel wäre die Referenzierung einer externen CSS-Datei.
<main>	Dieses HTML-Element definiert den Hauptinhalt unseres HTML-Dokuments.
<map>	Dieses HTML-Element leitet die Definition einer verweis-sensitiven Fläche in einer Grafik ein.
<mark>	Dieses HTML-Element definiert einen markierten Text.
<meta>	Über dieses HTML-Element stellen wir zusätzliche Informationen bereit, die die korrekte Verarbeitung unseres HTML-Dokuments erleichtern sollen. So können wir dem Webbrowser mitteilen, welchen Zeichensatz (engl. charset) dieser verwenden soll um unsere Webseite korrekt zu rendern. Des Weiteren können wir auf diese Art und Weise Informationen über den Autor, Keywords, Beschreibung, usw. hinterlegen. Diese Informationen benutzen auch Suchmaschinen um den Inhalt unserer Webseite besser interpretieren zu können. Das meta-Element muss sich zwingend innerhalb des <head>-Elements befinden.
<meter>	Dieses HTML-Element repräsentiert einen skalaren Wert zur Fortschrittsanzeige einer Aktion. Mit dem value-Attribut kann man den Fortschritt definieren.
<nav>	Dieses HTML-Element definiert ein Segment auf unserer Webseite, welche Navigationsleisten, Menüs, unsortierte Listen mit Verweisen auf andere Seiten, usw... beinhaltet.
<noscript>	Dieses HTML-Element definiert einen Hinweis welcher ausgegeben wird, für den Fall, dass ein Webbrowser eine Scriptsprache nicht unterstützt.
<object>	Dieses HTML-Element definiert einen Container der Elemente beinhaltet, welche nicht nativ vom Webbrowser unterstützt werden. Anders als beim <embed>-Element, haben wir hier die Möglichkeit eine Fallback-Lösung zu hinterlegen.
<ol>	Dieses HTML-Element definiert eine geordnete Aufzählungsliste bei der die Reihenfolge der Listenelemente eine Rolle spielt. Die Listenelemente werden über <li>-Elemente definiert. Standardmäßig werden die Listenelemente im Webbrowser nummeriert dargestellt.
<optgroup>	Dieses HTML-Element gruppiert vordefinierte Auswahlmöglichkeiten innerhalb einer <select>-Auswahlliste z.B. innerhalb einer Drop-Down-Auswahl.
<option>	Mit diesem HTML-Element definieren wir innerhalb einer <select>-Auswahlliste die zur Verfügung stehenden Optionen aus denen ein Anwender wählen kann.
<output>	Dieses HTML-Element definiert einen Ausgabebereich für das Ergebnis einer Berechnung.
<p>	Dieses HTML-Element definiert einen Textabsatz in unserem HTML-Dokument. Standardmäßig wird dies im Webbrowser mit etwas Platz vor und hinter diesem HTML-Element dargestellt.
<param>	Dieses HTML-Element definiert die Parameter für ein <objekt>-Element damit ein Plugin dementsprechend ausgeführt werden kann.
<picture>	Dieses HTML-Element definiert ein Container-Element, welches uns erlaubt mehrere Bildquellen zu referenzieren. Der Webbrowser sucht sich dann aus den verschiedenen Bildversionen das passende Bild aus. Das <picture>-Element zeigt dabei keine Bilder an, es beinhalltet lediglich die unterschiedlichen Bildquellen (<source>-Elemente).
<pre>	Dieses HTML-Element definiert präformatierten Text, das bedeutet, dass alle Whitespace-Zeichen so dargestellt werden wie diese im Text enthalten sind. Standardmäßig wird dieser Text in einer Monospace-Schriftart dargestellt.
<progress>	Dieses HTML-Element visualisiert den Fortschritt einer Aktion. z.B. Fortschrittsanzeige eines Downloads, einer Umfrage, eines Kurses, usw...
<q>	Dieses HTML-Element definiert, im Fließtext, einzelne Wörter oder Textabschnitte als zitierten Text. Es ist standardmäßig nicht notwendig diese Textpassage in Anführungszeichen zu setzen, da dies der Webbrowser selbstständig macht.
<rp>	Dieses HTML-Element definiert was im Webbrowser angezeigt werden soll, für den Fall, dass dieser keine <ruby>-Anmerkungen unterstützt.
<rt>	Dieses HTML-Element definiert eine Erklärung für die Aussprache ostasiatischer Schriftzeichen.
<ruby>	Dieses HTML-Element definiert Anmerkungen zu besonderen Schriftzeichen (ostasiatische Schriftzeichen) mit der Angabe der Aussprache zum Zweck diese Information im HTML-Code zu hinterlegen.
<s>	Dieses HTML-Element definiert Text der nicht mehr gültig ist. Anstelle des <s>-Elements sollten wir jedoch das <del>-Element bevorzugen.
<samp>	Dieses HTML-Element definiert eine beispielhafte Bildschirmausgabe eines Computerprogramms.
<script>	Dieses HTML-Element definiert einen clientseitigen Scriptbereich im HTML-Dokument um z.B. ein Javascript einzubinden. Das <script>-Element kann sowohl innerhalb des <head>-Elements stehen als auch, seit HTML5, innerhalb des <body>-Elements.
<section>	Dieses HTML-Element definiert themenspezifische oder eigenständige Bereiche innerhalb eines Dokuments oder Artikels.
<select>	Dieses HTML-Element definiert eine feste Auswahlliste in einem Formular aus der ein Anwender einen Eintrag wählen kann.
<small>	Dieses HTML-Element definiert Text welcher klein gedruckt dargestellt werden soll und somit als weniger bedeutend deklariert wird. Damit lassen sich z.B. Lizenzinformationen, Copyright-Informationen, juristische Hinweise, usw. darstellen.
<source>	Mit diesem HTML-Element definieren wir unterschiedliche Versionen/Dateiendungen von identischen Audio-, Bild- und Videodaten.
<span>	Dieses HTML-Element fasst einzelne Wörter oder Textpassagen zusammen um diese gesondert über CSS zu stylen. Ohne gesonderte CSS Anweisung unterscheidet sich der Inhalt nicht vom übrigen Text.
<strong>	Dieses HTML-Element definiert besonders Wichtige Wörter oder Textabschnitte in einem Fließtext. Standardmäßig wird dies im Webbrowser fettgedruckt dargestellt.
<style>	Dieses HTML-Element definiert Bereiche in unserem HTML-Dokument, in dem wir unser Styling definieren können. Seit HTML5 kann dies nicht nur im <head>-Element eines Dokuments definiert werden sondern auch im <body>-Element.
<sub>	Dieses HTML-Element definiert Wörter oder Textabschnitte welche im Webbrowser tiefergestellt dargestellt werden. Häufige Anwendung findet dies bei mathematischen oder chemischen Formeln.
<summary>	Dieses HTML-Element definiert eine Überschrift für das <details>-Element. Durch das anklicken der Überschrift klappt der Inhalt des <details>-Element aus bzw. ein.
<sup>	Dieses HTML-Element definiert Wörter oder Textabschnitte welche im Webbrowser höhergestellt dargestellt werden. Häufige Anwendung findet dies bei mathematischen oder chemischen Formeln.
<svg>	Dieses HTML-Element bindet eine skalierbare Vektorgrafik in unsere Webseite ein.
<table>	Dieses HTML-Element definiert eine HTML-Tabelle welche wiederum viele Kind-Elemente beinhalten kann, mit dessen Hilfe wir die Struktur der Tabelle definieren.
<tbody>	Dieses HTML-Element definiert eine Gruppe von Tabellenzellen die den Hauptinhalt der Tabelle beinhalten. Dieses HTML-Element wird auch in Verbindung mit dem <thead>-Element und/oder <tfoot>-Element verwendet. Einige Webbrowser ergänzen ein fehlendes <tbody>-Element, das kann man beobachten, wenn man im DOM-Inspektor eine Tabelle ohne dem <tbody>-Element analysiert. Dieses HTML-Element finden wir häufig in Verbindung mit den HTML-Elementen <thead> und <tbody> um eine HTML-Tabelle in unterschiedliche Abschnitte aufzuteilen.
<td>	Dieses HTML-Element definiert gewöhnliche Tabellenzellen mit Daten, innerhalb einer Tabelle.
<template>	Dieses HTML-Element enthält HTML-Code ohne diesen anzuzeigen. Durch Javascript ist es dann möglich diesen in den Dokumentenbaum einzuhängen.
<textarea>	Dieses HTML-Element definiert ein mehrzeiliges Text-Eingabefeld.
<tfoot>	Dieses HTML-Element definiert den Tabellenfuß einer HTML-Tabelle. Dieses HTML-Element finden wir häufig in Verbindung mit den HTML-Elementen <thead> und <tbody> um eine HTML-Tabelle in unterschiedliche Abschnitte aufzuteilen.
<th>	Dieses HTML-Element definiert die Tabellenkopfzellen einer Tabelle.
<thead>	Dieses HTML-Element definiert den Tabellenkopf Dieses HTML-Element finden wir häufig in Verbindung mit den HTML-Elementen thead und tbody um eine HTML-Tabelle in unterschiedliche Abschnitte aufzuteilen.
<time>	Dieses HTML-Element definiert Datumsangaben und Zeitangaben. Damit wird diese Information auch für z.B. Computer und Suchmaschinen verwertbar.
<title>	Dieses HTML-Element definiert den Titel eines HTML-Dokuments. Das <title>-Element wird innerhalb des <head>-Elements definiert und ist für valides HTML zwingend erforderlich.
<tr>	Dieses HTML-Element definiert eine neue Tebellenzeile innerhalb einer HTML-Tabelle. Zwischen dem öffnenden und schließenden <tr>...</tr> befinden sich die einzelnen Tabellenzellen welche mit <th> und/oder <td> ausgezeichnet sind.
<track>	Dieses HTML-Element bindet Textdateien in Videos und Audioaufnahmen während des Abspielens ein. Dies könnte als Untertitel oder als Beschriftung dienen.
<u>	Dieses HTML-Element definiert Wörter oder Textpassagen welche stilistisch anders dargestellt werden sollen. Ein Beispiel wäre, fehlerhaft geschriebene Wörter oder chinesische Eigennamen.
<ul>	Dieses HTML-Element definiert eine unsortierte Aufzählungslist bei der es auf die Reihenfolge nicht so ankommt. Die Listenelemente werden über li-Elemente definiert. Standardmäßig wird das Aufzählungszeichen im Webbrowser als Bullet dargestellt.
<var>	Dieses HTML-Element definiert in einem Fließtest eine Passage als Variable, Konstante oder eine Größe.
<video>	Dieses HTML-Element erlaubt es uns, Videodateien ohne spezielle Erweiterungen auf unserer Webseite abspielen zu lassen.
<wbr>	Dieses HTML-Element definiert innerhalb eines Wortes einen optionalen Zeilenumbruch. Somit wird das Wort im Falle eines Umbruches an der gewünschten Stelle umgebrochen.

Aufbau und Strukturierung eines HTML Dokuments

HTML5 & CSS3 Tutorials

Aufbau und Strukturierung eines HTML Dokuments

Im letzten Kapitel dieses HTML5 und CSS3 Tutorials haben wir uns bereits einen groben Überblick über den Aufbau eines HTML Dokuments verschafft. Jetzt sehen wir uns ein einfaches HTML Grundgerüst einmal an, auf das wir dann weiter aufbauen können.

Wie wir in dem vorangegangenen Beispiel sehen können unterteilt sich das HTML-Dokument in drei Bereiche:

<!DOCTYPE> - Der HTML-Dokumententyp gibt die verwendete HTML Version an.
<head> - Der Kopfbereich enthält für gewöhnlich die nicht im Webbrowser darstellbaren Informationen zum Dokument
<body> - Der Dokumentkörper enthält den darzustellenden Inhalt für den Webbrowser

<!DOCTYPE> die HTML5 Dokumententyp-Deklaration

Die DOCTYPE-Deklaration ist immer die erste Angabe in einem HTML-Dokument und befindet sich somit noch vor dem öffnenden <html>-Tag. Bei der Dokumententyp-Deklaration handelt es sich nicht um ein HTML-Element, vielmehr ist es als Anweisung für den Webbrowser zusehen, in welcher HTML-Version das HTML-Dokument vorliegt bzw. erstellt wurde.
Bei älteren HTML-Versionen war der DOCTYPE noch wesentlich umfangreicher als bei HTML5, da zusätzlich noch eine Dokumententyp-Definition hinterlegt werden musste. Die <!DOCTYPE> Deklaration wird von den Webbrowsern verarbeitet die diese Zeile benötigen. <!DOCTYPE html> wird von allen Webbrowsern verstanden, auch jenen die HTML5 gar nicht beherrschen. Aus diesem Grund ist diese Zeile nur noch vorhanden um eine Abwärtskompatibilität mit älteren Browsern sicher zu stellen. Die DOCTYPE ist nicht case-sensitiv, das bedeutet, dass es egal ist ob Du diese in Groß- oder Kleinbuchstaben schreibst.

<html> </html> Element – Der Beginn und das Ende unseres HTML5 Dokuments

Das <html></html>-Element nennt man Wurzelelement (eng. root element) auf manchen Websites und Bücher auch Stammelement genannt. Dieses Element umschließt alle anderen HTML-Elemente in unserem HTML Dokument. Direkt nach der DOCTYPE findet man das öffnende <html>-Tag und ganz am Ende des HTML-Dokuments das schließende </html>-Tag. Dazwischen findet man den <head> und den <body> mit dessen Inhalt. Das <html>-Element besitzt immer zwei, und nur zwei, Kindelemente, eben das <body>- und das <head>-Element. In meinem html-Beispiel von oben haben wir auch gleich ein Attribut dem öffnenden <html>-Tag hinzugefügt. Das Attribut „lang“ mit dem Attribut-Wert „de“ informiert zum Beispiel Suchmaschinen und Screen Reader über die Sprache unserer Website damit diese besser eingeschätzt bzw. vorgelesen werden kann.

lang=“de“ – Attribut für die verwendete Sprache in HTML5

Das lang-Attribut in HTML5 ist ein globales Attribut, das bedeutet, dass es in jedem HTML-Element zur Verwendung kommen kann. So könnte eine Website, welche in Deutsch gehalten ist, ein Zitat in einer anderen Sprache beinhalten, und dennoch hätten Suchmaschinen und Screen Reader keine Probleme beim Zuordnen bzw. beim Vorlesen des Inhaltes. Neben dem von uns verwendeten primären Sprachcode kann man noch einen weiteren Subcode mit angeben um die Sprache noch weiter zu definieren.

Beispiele für erweiterte Sprach-Attribute:
de-CH – Schweizerdeutsch
de-AT – österreichisches Deutsch
en-GB – britisches Englisch
en-US – amerikanisches Englisch
en-CA – kanadisches Englisch

<head> der Kopf unseres HTML-Dokuments

Im Kopfbereich unseres HTML-Dokuments werden unterschiedliche Informationen hinterlegt, die bis auf eine Ausnahme, keine Anzeige in einem Webbrowser finden. Die Ausnahme von der ich gesprochen habe ist das <title></title> Element welches den darin hinterlegten Inhalt im Tab unseres Webbrowsers anzeigt. Der Kopfbereich unseres HTML-Dokuments liegt innerhalb des <head></head>-Elements.

Die Meta Charset Angaben im <head> unseres HTML-Dokuments

Über das <meta charset=“utf-8“> definieren wir den zu verwendenden Zeichensatz (utf-8) um unsere Webseite zu rendern. Nicht jeder Zeichensatz verfügt über die in der deutschen Sprache nötigen Zeichen. Unter anderem finden wir zum Beispiel in einem Zeichensatz für die englische Sprache keine Umlaute, und somit würden diese falsch angezeigt wenn wir hier den falschen Zeichensatz definieren würden.

Die <title> Angaben im <head> unseres HTML-Dokuments

Über das <title></title>-Element können wir einen Titel für unsere Webseite definieren der dann im Webbrowser-Tab angezeigt wird. Dieser Titel wird nicht nur verwendet damit der Tab im Webbrowser den Namen der Seite trägt sondern dient auch den Suchmaschinen als anklickbarer Titel in den Suchergebnissen. Des Weiteren dient der Titel als Namensvorschlag wenn ein Besucher die Seite in seinen Bookmarks speichern möchte.

Das <link> Element im <head> unseres HTML-Dokuments

Über das <link>-Element referenzieren wir in diesem Fall eine CSS Datei die die CSS-Anweisungen für unsere Webseite beinhaltet. Sehen wir uns die Attribute von diesem <link> Element einmal genauer an:

rel – Relation, gibt an in welchem Verhältnis die referenzierte Datei zu unserem HTML-Dokument steht. In unserem Fall handelt es sich um ein „stylesheet“
type - damit geben wir den MIME-Typ des zu verlinkenden Dokuments an. In unserem Fall handelt es sich um eine Textdatei und um genauer zu sein um eine CSS-Datei.
href – hier geben wir die URL/Pfad zur verknüpften Ressource an. In unserem Beispiel liegt die referenzierte CSS-Datei im gleichen Ordner wie unser HTML-Dokument.

<body> der Körper unseres HTML-Dokuments

Beim <body></body>-Element sprechen wir vom sichtbaren Bereich unseres HTML-Dokuments. Alles was zwischen dem öffnenden <body> Tag und dem schließenden </body> Tag steht wird im Webbrowser-Fenster dargestellt. Wie wir nun den Body unseres HTML-Dokuments strukturieren und den dann darin enthaltenen Text formatieren können, erfährst Du im nächsten Abschnitt meines HTML5 und CSS3 Tutorials für Einsteiger

Klicke hier um das Video zu laden!

HTML5 Grundlagen

HTML5 & CSS3 Tutorials

HTML5 Grundlagen

Definition: Was ist HTML5?

HTML ist die Basis aller Webseiten und auch die Basis von Apps. HTML bedeutet ausgeschrieben „Hypertext Markup Language“ und ist keine Programmiersprache. Bei HTML handelt es sich um eine Auszeichnungssprache (engl. Markup language), welche durch Tag’s (engl. gesprochen ˈtæg – dt. Marke / Etikett) Textpassagen auszeichnet und somit dem Browser die benötigten Informationen zur Verfügung stellt, die dieser benötigt um den Text korrekt darzustellen. Man nennt diesen Prozess auch rendern.

Kleines Beispiel für HTML-Text:

<h1>Dies ist eine Überschrift</h1>
<p>Dies ist ein Textabsatz oder auch Paragraph genannt</p>

Damit die Browserhersteller wissen wie sie ein HTML-Tag von ihrem Browser interpretieren lassen müssen gibt es das W3C (Wold Wide Web Consortium) welches die Standards dafür definiert. Da jedoch aus Sicht der Browserhersteller das W3C zu zögerlich mit der Entwicklung von HTML voranschreitet, haben die Browserhersteller, allen voran Mozilla, Opera und Apple sich zur WHATWG (Web Hypertext Application Technology Working Group) 2004 zusammengeschlossen. Die WHATWG setzt die Standards des W3C nicht außer Kraft sondern reicht seine Ergebnisse zur Zustimmung beim W3C ein. Während die WHATWG HTML5 als einen living standard ansieht, arbeitet das W3C mit Versionsnummern. Momentan wird an HTML5.3 gearbeitet.

Was sind HTML-Elemente?

HTML-Elemente sind die Bausteine aus denen sich eine Webseite zusammensetzt und auch damit strukturiert wird. Fast jedes HTML-Element besteht aus einem öffnenden und einem schließenden Tag. Die folgende Abbildung wirkt auf den ersten Blick vielleicht etwas verwirrend, nimm Dir Zeit und Du wirst sehen, dass HTML-Elemente gar nicht so schwierig aufgebaut sind.

HTML-Elemente definieren den Inhalt, welcher sich zwischen dem „öffnenden“ und dem „schließenden“ Tag befindet. Wie in dem zuvor gezeigten Bild zu erkennen ist, unterscheidet sich das schließende Tag von dem öffnenden Tag durch einen Schrägstrich (engl. Slash) nach der öffnenden spitzen Klammer.
Der Browser stellt bei der Anzeige der Webseite keine HTML-Tag’s dar sondern verwendet diese nur um den Inhalt korrekt darzustellen. Es ist Dir bestimmt schon aufgefallen, dass eine Überschrift im Browser anders dargestellt wird als ein gewöhnlicher Textabsatz. Dafür benötigt der Browser die Informationen die wir ihm, unter anderem, in Form von HTML-Elementen zur Verfügung stellen.

Selbstschließende Tag’s – engl. selfclosing tags

Wie ich bereits durchblicken ließ, trifft der HTML-Element Aufbau mit einem öffnenden und einem schließenden Tag nicht auf alle HTML-Elemente zu. Die Ausnahme bilden die sog. Selbstschließenden Tag’s oder im englischen auch „self closing tags“ genannt. Dabei handelt es sich um HTML-Elemente die keinen Inhalt transportieren, dies bedeutet jedoch nicht, dass diese Elemente keine Informationen besitzen können.

Beispiele für selbstschließende Tag’s:

- dieses Tag erzwingt einen Zeilenumbruch an der gesetzten Stelle
<hr> - dieses Tag erstellt eine horizontale Linie um thematisch unterschiedliche Themen zu trennen
<img> - dieses Tag fügt ein Bild an der gesetzten Stelle ein

An dieser Stelle werden einige von Euch die Stirn runzeln. Bei den ersten beiden HTML-Tag’s wird es jedem klar sein, dass diese keine Information im eigentlichen Sinn beinhalten. Was ist jedoch mit dem IMG-Tag das hat doch eine Information! Nämlich das Bild welches auf der Website angezeigt werden soll.
Wenn Dir dieser Gedanke beim lesen dieses Textes durch den Kopf gegangen ist – bravo, Du hast eine schnelle Auffassungsgabe!
Das Rätsel „warum das IMG-Tag keinen Inhalt besitzt“ lüfte ich sofort im nächsten Abschnitt dieses HTML-Tutorials

HTML-Attribute sind zusätzliche Eigenschaften für HTML-Elemente

HTML-Elemente können mit Attributen (engl. Attributes) erweitert werden, um so zusätzliche Informationen zu einem HTML-Element bereit zu stellen. Attribute können nur im öffnenden Tag eines HTML-Element und in selbstschließenden Tag’s hinterlegt werden. Die Attribute werden in einer Attribut-Name: Attribut-Wert Form angegeben: _{attributname=“attributwert“}
Im nächsten Bild zeige ich Dir einen schematischen Aufbau eines HTML-Elements mit einem Attribut. Dabei handelt es sich um ein echtes Attribut welches einen Tooltip zu einem HTML-Element hinzufügt.

Ich möchte Dein Augenmerk auf die Schreibweise von dem Attribut und dem dazugehörigen Attribut-Wert (engl. value) lenken. Nach dem Attribut folgt ein Gleichheitszeichen danach wird der Attribut-Wert in Anführungsstrichen notiert.
In HTML gibt es auch globale Attribute die fast bei jedem HTML-Element angewendet werden können. Ein Beispiel hierfür wäre das _lang-Attribut welches die Sprache (engl. language)für den Inhalt eines bestimmten HTML-Elements definiert, im folgenden Beispiel deutsch:

<p lang=“de“>Dieser Textabschnitt/Paragraph ist in deutscher Sprache verfasst</p>

Kleine Notiz am Rande: Der Grund warum man die Sprache für eine Webseite oder gewisse HTML-Elemente definiert ist der, dass Screen Reader die eine Website für sehbehinderte oder blinde Menschen vorlesen, wissen um welche Sprache es sich handelt. Auch Suchmaschinen greifen diese Information ab und verwenden diese um die Webseite besser einordnen zu können.

HTML-Elemente korrekt schachteln

Du weißt nun wie HTML-Elemente aufgebaut sind, wie man diesem zusätzliche Eigenschaften in Form von Attributen hinzufügen kann. Jetzt sehen wir uns die korrekte Schachtelung von HTML-Elementen an. Nehmen wir an, Du hast einen Textabschnitt und in diesem Text soll ein bestimmtes Wort fettgedruckt werden. Um Text fett darzustellen bietet uns HTML5 das Element, das HTML-Element für einen Textabschnitt oder auch Paragraph genannt kennen wir schon. Es ist das Element. Wie würde das dann aussehen?

<p>Diese Schachtelung ist <b>korrekt</b> da das HTML-Element, welches als letztes geöffnet wurde als erstes wieder geschlossen wurde!</p>

Das oben gezeigte Beispiel repräsentiert eine korrekte Schachtelung von HTML-Elementen.
Im Browser würde in diesem Fall folgendes angezeigt werden:

Diese Schachtelung ist korrekt da das HTML-Element, welches als letztes geöffnet wurde als erstes wieder geschlossen wurde!

Um HTML-Elemente richtig zu Schachteln muss man sich nur eines merken:

Das HTML-Element welches als letztes geöffnet wurde, muss als erstes wieder geschlossen werden!

Eine falsche Schachtelung stellt das folgende Beispiel dar:

<p>Diese Schachtelung ist <b>nicht korrekt</p></b>

Schachtelungen können auch mal etwas komplexer ausfallen wie in dem folgenden Beispiel zu sehen ist:

<p>Diese Schachtelung<u> ist unterstrichen und <b>teilweise fett</b> und</u> auch<i>kursiv dargestellt</i></p>

So würde das im Browser aussehen:

Diese Schachtelung ist unterstrichen und teilweise fett und auch kursiv dargestellt

Hier haben wir weitere HTML-Elemente kennen gelernt:
 - Textabschnitt / Paragraph
 - fett gedruckt / bold
 - unterstrichen / underline
 - kursiv / italic

Wie ist der Aufbau eines HTML-Dokuments?

Ein HTML-Dokument ist immer auf die gleiche Art und Weise aufgebaut. Innerhalb des <html> Elements befinden sich zwei weitere Bereiche:

<head> - hier werden Zusätzliche Daten zur Webseite angegeben, diese werden jedoch nicht im Browserfenster angezeigt. Dabei handelt es sich unter anderem um den Titel der Webseite, dieser wird im Tab des Browsers angezeigt und auch Suchmaschinen verwenden diesen bei der Anzeige von Suchergebnissen.
<body> - im Body-Bereich einer Webseite werden die Daten hinterlegt die im Browserfenster dargestellt werden sollen. Dabei kann es sich um Überschriften, Paragraphen, Bilder, Videos, usw. handeln.

Hier noch ein vereinfachtes Schema eines Webseitenaufbaus:

Der weiß dargestellte Bereich ist jener der tatsächlich auch im Browserfenster angezeigt wird.

Welche Werkzeuge benötigst Du um HTML5 zu schreiben?

Damit Du dieses HTML-Tutorial durcharbeiten kannst, benötigst Du einige kleine Helfer. Allen voran empfehle ich Dir einen HTML-Editor oder auch Code-Editor genannt. Obwohl HTML auch mit einem einfachen Texteditor wie Notepad (für Windows) oder TextEdit (für Mac) geschrieben werden kann, bietet ein HTML-Editor wie etwa Atom, Brackets oder Sublime Text hilfreiche Features damit Du einfacher und bequemer an Dein Ziel kommen kannst. Natürlich benötigst Du auch einen Browser um Dein HTML-Dokument in diesem dann auch betrachten zu können.

Welchen Texteditor soll ich verwenden wenn ich HTML schreiben möchte?

In diesem Tutorial und auch in meinen Videos verwende ich den Texteditor von Atom, wenn es bei Dir auf Deinem Rechner genauso aussehen soll wie zum Beispiel in meinen Videos dann installiere Dir diesen. Mir ist bewusst, dass dieser Texteditor auf Englisch ist, jedoch wirst Du feststellen, dass das dafür benötigte Vokabular recht einfach ist und schnell den Weg in Dein Gedächtnis findet. Die HTML-Elementnamen werden ebenfalls aus dem englischen abgeleitet und nach diesem Tutorial werden Dir schon die ersten englischen Vokabel wie selbstverständlich über die Lippen kommen – vertrau mir!

Hier ein paar geläufige Texteditoren:

Im Grunde ist es egal für welchen Texteditor Du Dich entscheidest, Hauptsache Du fühlst Dich bei der Benutzung wohl. Teste einige Texteditoren um ein Gefühl dafür zu bekommen wenn Du Dir nicht sicher bist für welchen Du Dich entscheiden sollst.

Welchen Browser soll ich verwenden um meine HTML-Dokumente zu betrachten?

In diesem HTML-Tutorial sowie in meinen Videos verwende ich den Google Chrome Browser, hier empfehle ich Dir ebenfalls diesen zu nutzen. Nicht weil dieser besser oder schlechter ist als andere Browser, es hat den Grund, dass es kleine Abweichungen beim Anzeigen eines HTML-Dokuments in verschiedenen Browsern geben kann. Damit Du von diesen Abweichungen nicht irritiert bist und einen Fehler suchst den es nicht gibt, empfehle ich Dir ebenfalls den Google Chrome Browser zu installieren. Generell gilt bei der Entwicklung von Websites, dass man diese auf so vielen unterschiedlichen Browsern wie möglich testet!
Hier eine Auflistung der gängigsten Browser:

Google Chrome
Mozilla Firefox
Microsoft Edge
Internet Explorer
Apple Safari
Opera

Wenn Du auf einen der Browser klickst, kommst Du zur Homepage dieses Browsers.

Zusammenfassung und Hinweise zu den Videos

Nachdem Du nun diesen Teil durchgearbeitet hast, solltest Du Dich für einen Texteditor entschieden haben und bereits zumindest den Google Chrome Browser auf Deinen Computer installiert haben. Zur Installation und Einrichtung des Texteditor Atom habe ich Dir hier noch ein Video von meinem YouTube-Kanal eingefügt. Darin zeige ich Dir wie Du für den Anfang Deinen Texteditor Atom konfigurieren solltest, damit Du den größtmöglichen Lernerfolg erzielen kannst.

HTML5 & CSS3 erlernen und sich eine großartige Website, Schritt für Schritt selbst erstellen

HTML5 & CSS3 Tutorials

Egal, ob Du HTML5 und CSS3 neu erlernst oder Du Dein Fachwissen auffrischen möchtest: Diese Tutorials werden durch Videos zu den jeweiligen HTML5 und CSS3 Themen unterstützt, praxisnah und nach modernen Webstandards. Der HTML5 und CSS3 Kurs wurde für absolute Anfänger aber auch für fortgeschrittene User erstellt. Du möchtest eine tolle Website mit HTML5 und CSS3 erstellen oder Du planst Dein CMS (Content Management System) nach Deinen eigenen Wünschen selbst zu stylen? Dann bist Du hier genau richtig!

Noch vor einigen Jahren konnte man es bei einem HTML Kurs mit ein wenig CSS bewenden lassen. Jedoch mit der Zeit und dem neuen HTML5 Standard sind die Ansprüche bei der Erstellung von Websites gestiegen. Dieses Tutorial hat nicht den Anspruch HTML5 und CSS3 Fachbücher zu ersetzen, es soll vielmehr diese unterstützen und Dich beim Einstieg oder gar beim Auffrischen konstruktiv begleiten.

Bedingung für die Programmierung dynamischer Websites mit PHP und MySQL ist jedoch ein sehr guter Kenntnisstand zu HTML5 und CSS3 notwendig, wiederum ein guter Grund für das durcharbeiten dieses Tutorials. HTML5 und CSS3 sind die Grundlagen der modernen Webentwicklung, wer programmieren lernen möchte (PHP, Perl, Java,…) benötigt umfassendes Wissen zu HTML5 und CSS3.

Webseite oder Website?

Da diese beiden Begriffe sehr oft zu Verwirrungen führen möchte ich jetzt noch vor dem Start des HTML5 und CSS3 Tutorial näher darauf eingehen.
Eine Webseite ist eine einzelne Seite eines Webauftrittes wobei eine Website den gesamten Webauftritt bezeichnet. In den meisten Fällen besteht daher eine Website aus mehreren Webseiten.

In eigener Sache

Beim durcharbeiten dieses Tutorials werden Dir auf der rechten Seite einige Buchempfehlungen auffallen, welche Du über den Rheinwerk-Verlag beziehen kannst. Diese Empfehlungen sind von uns handverlesen und nicht irgendwelche, zum Teil besitze ich (BonnyAndClyde2011) diese Bücher selbst und zum anderen Teil einer meiner Freunde. Es wird nichts empfohlen was nicht für gut empfunden wurde!

Für den Fall, dass Du einen dieser Links benutzt, möchte ich Dir nicht vorenthalten, dass ich dafür eine kleine Provision erhalte. Auf diese Art und Weise kannst Du mich unterstützen ohne, dass es Dich auch nur einen Cent kostet. Du möchtest mich unterstützen? Dann verwende bitte einen der Links direkt beim Kauf, da die Links die Gültigkeit verlieren wenn die Session beendet wird.

Jetzt wünsche ich Dir viel Spaß und Erfolg beim Erlernen von HTML5 und CSS3
Schöne Grüße
BonnyAndClyde2011 von Tutorialgarage.com