HTML-Tutorial

Leon HoffmannTutorial, WebdesignLeave a Comment

HTML-Tutorial

HTML-Tutorial: 4.000+ Wörter, Erklärvideos, Grafiken & Bilder, Code-Beispiele und ein Praxisprojekt.

1. HTML-Tutorial – Vorwort

In diesem HTML-Tutorial lernst du alles was man über HTML wissen kann und zwar sowohl in Theorie, als auch an konkreten Praxisbeispielen.

Das HTML-Tutorial beinhaltet unzählige Videos und Code-Beispiele. Zum Ende erstellen wir ein Beispielprojekt und damit mit unseren neuerworbenen Fähigkeiten unsere erste Website in HTML.

HTML bildet das Fundament deiner Programmierkenntnisse und ist wirklich leicht zu erlernen. Nachdem du dieses Tutorial durchgearbeitet hast, kannst du HTML vollständig und professionell anwenden.

Das Tutorial behandelt HTML vollumfassend. Solltest du während deiner Arbeit mit HTML später auf neue Themen stoßen, z.B. weil HTML sich weiterentwickelt hat, wirst du in der Lage sein, dir diese Neuerungen problemlos autodidaktisch anzueignen, da du ein grundlegendes Verständnis für die Funktionsweise von und Arbeit mit HTML haben wirst.

In jeder Lektion bitte ich dich, alle Aufgaben ebenfalls an deinem Computer umzusetzen. Den Coden lernt man am besten in der Praxis. Daher empfehle ich dir alle Zeilen Code mit mir gemeinsam zu schreiben, also mitzuschreiben, wie du es vielleicht aus der Schule kennst.

Hinweis
Eine bekannte didaktische Methode ist, den Code handschriftlich mitzuschreiben, um ihn zu verinnerlichen.

Noch eine letzte Bitte bevor es losgeht: Der Zweck dieses Tutorials ist es, möglichst vielen Menschen die Grundlage des Webprogrammierens näher zu bringen. Du und dein Lernfortschritt stehen also im Vordergrund. Daher freue ich mich immer über Anregungen, Fragen oder Vorschläge zur Verbesserung. Nutze dafür einfach die Kommentarfunktion des Blogs unter dem jeweiligen Artikel. Vielen Dank und vor allem viel Spaß und Erfolg mit diesem Tutorial.

Zum Autor
Mein Name ist Leon Hoffmann, ich bin Web-Entwickler und Agentur-Inhaber aus Berlin und mit mir lernst du in den nächsten Stunden HTML.

2. Was ist HTML?

HTML ist die Sprache des Internets und die Basis aller Websites und Apps.
Die Abkürzung HTML steht für Hyper Text Markup Language und ist daher streng genommen keine Programmiersprache, sondern eine Auszeichnungssprache, also Markup Language.

HTML legt die Struktur von Websites fest und definiert so, was eine Überschrift, ein Textabsatz oder ein Link ist. Mit sogenannten HTML-Tags werden die einzelnen Inhalte umrandet und somit definiert (z.B. eine Überschrift zu sein).

Ein Browser stellt nicht die Tags selbst da, sondern nutzt diese als Information dazu, wie die einzelnen Inhalte dargestellt werden sollen, z.B. als Tabelle oder als Link. Diese HTML-Tags bilden so die Grundlage der World Wide Web.

So sieht ein HTML-Element für einen Textabsatz aus:
<p>Das ist ein Textabsatz.</p>

Dabei sind <p></p> die beiden Tags (p steht für Paragraph, also das englische Wort für Absatz), die den Inhalt umranden und ihn so definieren ein Textabsatz zu sein. Alles zusammen ist ein HTML-Element.

Du wirst es kaum glauben, aber wenn du bis hier hin folgen konntest, hast du schon ein grundlegendes Verständnis davon, wie HTML funktioniert.

3. Tools zum HTML programmieren

In diesem Abschnitt richten wir deine Werkzeuge ein, damit du im HTML-Tutorial mitarbeiten und später die richtigen Tools im Alltag nutzen kannst.

Websites werden in Code-Editoren erstellt und mit Browsern dargestellt.

Als Code-Editor kannst du einen einfachen Text-Editor verwenden, wie ihn jeder Computer vorinstalliert hat. Besser geeignet, da hilfreicher, sind Code-Editoren wie Atom, Brackets oder Sublime Text. Welche der zahlreichen Tools ich empfehle und wie du diese einrichtest, erfährst du in dieser Lektion.

Werkzeuge – Brackets und Chrome

Für dieses HTML-Tutorial verwenden wir ausschließlich kostenlose Tools. Auch im Programmieralltag wirst du nicht mehr brauchen, als die Werkzeuge, die ich dir nun zeige.

Code-Editor
Ich empfehle für unseren Zweck den kostenlosen Code-Editor Brackets. Um diesen verwenden zu können, lade die Installationsdatei einfach auf brackets.io herunter und führe die Installation durch.

Besonders hilfreich für dieses HTML-Tutorial ist, dass wir bei Brackets direkt sehen, wie sich die Änderungen im Code auf die Website auswirken, denn Brackets markiert die Zeilen, die wir bearbeiten mit einem blauen Rahmen.

HTML-Tutorial

HTML-Tutorial

Browser
Als Browser empfehle ich Google Chrome, welchen du ebenfalls kostenlos downloaden und installieren kannst.

Besonders gut bei Chrome ist der Inspector (Rechtsklick im Browserfenster, dann „Untersuchen“ auswählen). Hiermit lässt sich der Quellcode auslesen und Änderungen direkt im Frontend testen.

Beispielsweise kannst du im HTML-Code ein Bild austauschen oder Text ändern. Natürlich veränderst du damit die Website nicht wirklich, sondern simulierst Änderungen im Code, um zu sehen, wie diese Änderungen sich auf die Website auswirken. Um dir die Funktionsweise des Chrome Inspectors deutlicher zu machen, habe ich ein Video erstellt, indem wir im HTML-Code das Google Logo gegen unser Logo austauschen und dann die Breite unseres Logos im CSS-Code verändern:

Nun haben wir beide Werkzeuge installiert, deren Vorteile gesehen und können starten.

4. Das HTML-Grundgerüst

Als erstes legen wir das HTML-Grundgerüst an.

Öffne Brackets und wähle im Menü unter „Datei“ die Auswahl „Neu“ um eine leere Datei mit dem Default-Namen „Unbekannt-1“ zu erstellen. Gehe nun erneut auf „Datei“ (oder Rechtsklick auf die Datei in der Seitenleiste) und speichere die Datei unter einen neuen Namen, wie „html-vorwort.html“. Die Endung .html ist dabei entscheidend, um eine HTML-Datei zu erzeugen.

Um nun die HTML-Datei zu vervollständigen, muss nur noch ein HTML-Grundgerüst in die Datei eingefügt werden. Wir sehen uns dieses Grundgerüst nachfolgend detailliert an.

<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Deine ersten Zeilen HTML">
  <title>HTML-Grundgerüst</title>
</head>

<body>

</body>

</html>

  • <!DOCTYPE html> deklariert welche HTML-Version verwendet wird.
  • <html> definiert, dass hier der HTML-Bereich beginnt.
  • <head> bildet den Kopfbereich der Website, welche nicht sichtbar sein wird, sondern allgemeine Information zur Website enthält.
  • <meta> diese HTML-Tags bilden die Meta-Informationen für den Kopfbereich.
  • <title> definiert den Seitentitel im Kopfbereich.
  • <body> bildet den Rumpf der Website, also den Sichtbaren Bereich – die eigentliche Website.

Das Grundgerüst ist also so zu verstehen:

  1. Wir eröffnen die Datei damit, zu definieren, welche HTML-Version wir verwenden. In unserem Fall HTML5.
  2. Dann öffnen wir den HTML-Bereich und definieren im Attribut des HTML-Tags, die Sprache in der die Inhalte später sein werden. In unserem Fall in Deutsch.
  3. Anschließend öffnen wir den Kopfbereich der Website, in welchem wir verschiedene Meta-Angaben machen (verwendeter Zeichensatz sowie eine Beschreibung der Website) und einen Titel für die Website vergeben. In unserem Fall lautet der Titel der Website „HTML-Grundgerüst“.
  4. Nun folgt der Body, also der sichtbare Bereich der Website, welcher in unserem Fall noch leer ist.
  5. Zu guter Letzt schließen wir alle Bereiche in der entsprechenden Reihenfolge.

Wie du hier siehst, zeigt der Browser das HTML-Grundgerüst nicht an, denn es wird vom Browser nur der Teil zwischen den HTML-Tags <body></body> angezeigt, welche bei uns noch leer ist.

Um nun unsere Website zu füllen, fügen wir eine Überschrift <h1>Die wichtigste Überschrift</h1> mit dem HTML-Tag <h1></h1>, welcher eine Überschrift erster Rangordnung definiert. Des Weiteren fügen wir einen Textabschnitt <p></p> mit Fülltext ein.

Wie du siehst werden diese beiden Elemente nach dem Speichern (Tastenkombination Strg/cmd+s) im Body-Bereich nun auch auf der Website dargestellt.

5. HTML-Tags und deren Attribute

HTML beschreibt also die Struktur von Websites. Dies geschieht mit HTML-Elementen und den sogenannten Tags.

HTML fügt Inhalte in die Website ein, z.B. Text als Überschrift oder Absatz sowie Links, Bilder und Videos.
Um dies zu verdeutlichen, haben wir ja bereits die ersten HTML-Elemente in unser Dokument eingefügt.

<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Deine ersten Zeilen HTML">
  <title>HTML-Grundgerüst</title>
</head>

<body>
<h1>Die wichtigste Überschrift</h1>
Das ist ein Textabsatz. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</body>

</html>

HTML-Tags

HTML-Tutorial - Tags

  • HTML besteht aus Tags, meist einem öffnendem und schließendem Tag.
  • In den Klammern steht der Tag-Name, wie h, p oder a.
  • Tag-Namen werden immer klein geschrieben.
  • Tags definieren, verändern den Inhalt der zwischen den beiden Tags steht, z.B. Headline, Paragraph oder Link.
  • Zwischen den Tags steht der Inhalt.
  • Das alles zusammen wir ein HTML-Element genannt.

Der Aufbau von HTML-Elementen ist also: <tagname>Inhalt</tagname>

Alleinstehende Tags

Es gibt auch alleinstehende Tags, wie <br> für „break“, also Zeilenabsatz.
Alleinstehende Tags brauchen keinen zweiten Tag. Diese Tags sind „leer“ also dazwischen steht kein Inhalt.

Eingeschobene Tags

HTML Elemente, können zwischen anderen HMTL Elemente stehen, also in andere HTML-Elemente eingenistet („nested“) werden. Dies haben wir bereits in unseren Code-Beispielen gesehen. Zum Besipiel haben wir das h1-Tag in das body-Tag eingenistet: <body><h1></h1></body>.
Ein Paragraph kann z.B. auch fetten Text enthalten: <p>Das ist Text mit einem <strong>fettgeschriebenen Anteil</strong>.</p> Hier wird er mit dem p-Tag ein Paragraph definiert, welcher dann mit dem strong-Tag einen fettgeschriebenen Anteil erhält.

HTML-Attribute

Öffnende HTML Tags können Attribute enthalten. Attribute geben zusätzlich Informationen.
Attribute sind folgendermaßen aufgebaut: name=„Wert“

Wir kennen Attribute bereits aus unseren Code-Beispielen, nämlich aus dem HTML-Tag, indem die Sprache der Website in einem Attribut bestimmt wird: <html lang="de"> oder aus dem Meta-Tag, indem sogar gleich zwei Attribute stehen: <meta name="description" content="Deine ersten Zeilen HTML">

Beispiel: <a href=„https://www.click-<our-ads.com/“> niemals das schließende Tag vergessen Linktext </a>. Im obigen Beispiel wir ein Link-Tag also <a> verwendet, welches im öffnenden Tag ein Attribut enthält, nämlich das Linkziel, also <a href=„https://www.click-<our-ads.com/“>. Darauf folgt der von den beiden Tags eingeschlossene Text, welcher als Linktext (Anchor-Text) verwendet wird. Natürlich schließen wir das Tag wieder mit </a>.

Der Aufbau von Tags mit Attributen ist also:<tagname attribut-name=„Wert“>Inhalt</tagname>

Um die neuen Tags und ein Tag mit Attribut nun auch in der Praxis zu verwenden, fügen wir sie in unsere aktuelle Website ein und testen sie.

Mit dem alleinstehenden Tags <br> fügen wir einen Zeilenumbruch hinzu.
Mit dem Link-Tag <a> fügen wir einen Link ein und definieren das Linkziel in dem href="" Attribut.

Die häufigsten Attribute

Im folgenden stelle ich dir die Attribute vor, die ich im Arbeitsalltag am meisten verwende (was wohl auf 90% aller Webentwickler zutrifft).
Zur Erinnerung: Attribute fügen Zusatzinformationen zu Tags hinzu, befinden sich im Start-Tag und sind folgendermaßen aufgebaut: name=„Wert“.

  1. href=""

    Dieses Attribute wird mit Links verwendet, also meist mit den Tags <a></a> oder <link>.
    Dabei ist href="" der Attribut-Name und als Wert folgt die URL zu der der Link verweisen soll.
    <a href="https://www.google.de">Anchor-Text bzw. Linktext</a> Zwischen den beiden a-Tags steht der Link-Text, der sogenannte Anchor-Text. Dieser wird vom Browser standardmäßig blau markiert und unterstrichen, um zu verdeutlichen, dass es sich um einen Link handelt (wie im letzten Video dieses HTML-Tutorial zu sehen ist).

  2. src=""

    Bilder werden mit dem <img> Tag in HTML eingefügt. Das entsprechende Attribute, welches auf das Bilder verweist, um es darzustellen, ist das src="" Attribut.
    Im Ganzen sieht ein Bild in HTML also so aus: <img src="https://www.google.de/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"> An dieser Stelle auf dem Google-Server, liegt das Google-Logo und wird somit an entsprechender Stelle angezeigt, an der dieses img-Tag mit dem src-Attribut platziert ist.

  3. alt=""

    Dieses Attribut gehört ebenfalls zum <img> Tag. Der Wert dieses Attributs ist ein Alternativtext, der angezeigt wird, sollte das Bild nicht angezeigt werden können oder dient blinden Personen, die die Website mit einem Screenreader konsumieren, den Inhalt der Bilder zu verstehen. Auch Google nutzt die alt-Tags um einzuordnen, wie relevant die Bilder einer Website für den Inhalt sind (da Google aktuell nur Text und keine Medien „lesen“ kann). Daher haben alt-Tags auch eine Bedeutung im SEO (Suchmaschinenoptimierung).
    So sieht ein alt-Tag in unserem vorangegangenen Beispiel aus: <img src="https://www.google.de/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Das Logo von Google">

  4. width="" und height=""

    Mit diesen Attributen lässt sich die Breite (in Englisch: width) und die Höhe (in Englisch: height) von Elementen, wie beispielsweise Bildern, Videos und Formularfeldern.
    Hier wird die Breite und Höhe des Bildes in Pixel festgelegt: <img src="https://www.google.de/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Das Logo von Google" width="272px" height="92px">

  5. Hinweis
    Noch vor einigen Jahren wurde in HTML nicht nur die Struktur von Websites, sondern auch das Styling umgesetzt. Heutzutage geschieht dies durch CSS.
  6. style=""

    Auch wenn heutzutage das Styling einer Website komplett in CSS umgesetzt wird, gibt es die Möglichkeit das Aussehen von HTML-Elementen direkt im HTML-Code zu verändern. Dies geschieht mit dem style-Attribut.
    Hier verändern wir die Textfarbe der Schrift in rot: <p style="color:red;">Das ist roter Text</p>

  7. Neben der Schriftfarbe lässt sich hier beispielsweise die Schriftart font-family: und mit font-size: die Schriftgröße anpassen. Im nachfolgenden Beispiel definieren wir für die Überschrift, die Schriftart „Arial“ und vergrößern die Schriftgröße um 200%. Zu guter Letzt richten wir die Überschrift zentriert aus mit dem Attribut-Wert text-align:center (natürlich ginge auch left oder right).

    <h1 style="font-family:arial; font-size:200%; text-align:center;">Eine Überschrift</h1>
    

Im nachfolgenden Video werden alle gerade genannten Tags und Attribute verwendet.

Die wichtigsten 10 HTML-Tags

Herzlichen Glückwunsch! Du hat schon einen großen Teil von HTML verstanden. Nun geht es vor allem noch darum, sich die HTML-Tags einzuprägen, um diese auch verwenden zu können.

Nun gibt es leider zu viele Tags, um sich alle direkt merken zu können aber keine Sorge, denn in der täglichen Arbeit eines Entwicklers ist Nachschlagen typische Praxis. Du kannst also immer wieder auf die nachfolgenden Listen zurückgreifen, um die alle HTML-Tags in Erinnerung zu rufen.

Allerdings wirst du in deiner täglichen Coding-Praxis garnicht alle HTML-Tags benötigen. Viele wirst du eventuell nie gebrauchen. Dafür wirst du aber einige wenige Tags immer wieder verwenden, wodurch du sie schnell auswendig kannst. Die nachfolgende Liste zeigt die 10 Tags, die ich am häufigsten in der täglichen Arbeit verwende.

  1. <h1></h1> bis <h6></h6> h steht für Headline (Englisch für Überschrift). Es gibt 6 verschiedenen Überschriften.
    Sie sind hierarchisch geordnet, wobei h1 die wichtigste Überschrift darstellt. Die Überschriften sollten in einer logischen Reihenfolge verwendet werden. h1 sollte pro Seite nur einmal verwendet werden. Alle anderen Überschriften (also h2-h6) können beliebig oft verwendet werden. Es gibt Website-Developer die dazu raten nur h1-h3 zu verwenden.
  2. <h1>Überschrift 1</h1>
    <h2>Überschrift 2</h2>
    <h3>Überschrift 3</h3>
    <h4>Überschrift 4</h4>
    <h5>Überschrift 5</h5>
    <h6>Überschrift 6</h6>
    

    Die Attribute die für diesen Tag verwendet werden können sind align="" mit den Werten: left, center, right, justify.
    Das bedeutet der Text (in dem Fall die Überschrift) ist entweder linksbündig, rechtsbündig, mittig oder als Blocksatz angeordnet.
    Achtung: Das align="" Attribut wird in HTML5 nicht mehr unterstützt. Dennoch wirst du es häufig in Websites finden und daher muss es auch an dieser Stelle erwähnt werden.

  3. <p></p> p steht für Paragraph (Englisch für Absatz) und wurde in diesem HTML-Tutorial schon viele Male verwendet. Durch dieses Tag wird ein Textabsatz gekennzeichnet.
  4. Dieses Tag hat ebenfalls das align="" Attribut mit den selben werten wie die Überschriften (h1-h6).

    <p>Dies ist ein Textabsatz</p>
    <p align="right">Dies ist ein Textabsatz der im Browser rechtsbündig dargestellt wird.</p>
    

  5. <a></a> a steht für einen Hyperlink (oder einfach Link) und verlinkt Websites untereinander. Ein Link muss immer mit dem href="" Attribut auftreten, damit definiert wird, wohin verlinkt wird.

    <a href="http://www.click-your-ads.com/">Linktext</a>
    

    Mögliche Werte des Attributes sind:

    • Eine vollständige URL, um auf andere Websites zu verlinken (Beispiel: <a href="http://www.google.de/">Website</a>)
    • Eine relative URL, um auf eine Unterseite oder Datei der eigenen Website zu verweisen (Beispiel: <a href="click-your-ads.com/blog/">Eigenen Website</a>)
    • Eine OnPage-Navigation (also eine Navigation die zu einem anderen Punkt auf der selben Seite springt (wie unsere Inhaltsverzeichnis dieses HTML-Tutorial) (Beispiel: <a href="#Teil1">OnPage-Link</a>). Dabei muss der Teil, zu dem der Link führen soll, mit einem id-Attribut gekennzeichnet sein, also z.B. <p id="Teil1">Hier fängt der Teil 1 an</p>
    • Andere Protokolle, wie https:// (Website mit SSL-Zertifikat), ftp:// (Webserver), mailto: (E-Mail-Adresse) (Beispiel: <a href="mailto:hallo@click-your-ads.com">E-Mail-Adresse</a>)
    • Skripte, wie ein JavaScript-Befehl (Beispiel: href="javascript:alert('Hello');")

    Es gibt viele weitere Attribute für dieses Tag, wobei vor allem taget="" noch zu nennen ist. Durch taget="_self" wird der Link im selben Brwoser-Fenster geöffnet, wobei durch taget="_blank" der Link in einem neuen Browser-Fenster geöffnet wird.

  6. <img> img steht für Image (Englisch für Bild) und fügt Bilder ein. Ein Bild muss immer mit dem src="" Attribut auftreten, damit definiert wird, welches Bild auf welchem Server dargestellt werden soll.
    Ebenfalls muss ein Bild immer ein alt="" Attribut haben, welches eine Bildbeschreibung für blinde Website-User oder den Google-Crawler ist.

    <img src="https://www.click-your-ads.com/wp-content/uploads/2017/10/CYA-01-Logo-blank-Kopie.png" alt="Website Logo">Linktext</a>
    

    Hier wird also ein Bild-Tag mit der Quelle unseres Agentur-Servers (https://www.click-your-ads.com/) sowie des entsprechenden Ordners (/wp-content/uploads/2017/10) auf dem Server und dem Bildnamen (CYA-01-Logo-blank-Kopie.png) eingefügt. Als alt-Tag geben wir „Website Logo“ an.

    Weitere typische Bild-Attribute, die du bereits aus dem HTML-Tutorial kennst, sind: align="", width="" und height="".

  7. HTML-Listen
    Es gibt in HTML zwei verschiedene Arten von Listen.
    1. <ol></ol> eine geordnete Liste (In Englisch: Ordered List), also eine Liste mit Nummerierung.
    2. <ul></ul> eine ungeordnete Liste (In Englisch: Unordered List), also eine Liste mit Bullet Points.

    In beiden Listen werden die einzelnen Listenelemente mit <li></li> eingefügt.

    <ol>Dies ist eine geordnete Liste
    <li>Dies ist das erste Listenelement der geordneten Liste</li>
    <li>Dies ist das zweite Listenelement der geordneten Liste</li>
    <li>Dies ist das dritte Listenelement der geordneten Liste</li>
    </ol>
    
    <ul>Dies ist eine ungeordnete Liste
    <li>Dies ist das erste Listenelement der ungeordneten Liste</li>
    <li>Dies ist das zweite Listenelement der ungeordneten Liste</li>
    <li>Dies ist das dritte Listenelement der ungeordneten Liste</li>
    </ul>
    

    So sehen die beiden Listen im Browser aus:

    HTML-Tutorial - Listen

    HTML-Tutorial – Listen

    Häufig werden Navigations-Menüs auch als Listen eingefügt und dann mit CSS so verändert, dass keine Aufzählungszeichen verwendet werden und die Liste sich horizontal anordnet mit einem Abstand zwischen den Wörtern.

    Beispiel für ein Navigations-Menü als Liste:

    HTML-Tutorial

    HTML-Tutorial – Beispiel Navigations-Menü als Liste

    Es gibt noch eine weitere Art von Listen, welche ich selten verwende aber dennoch erwähnen möchte. Die Description List (Englisch für Beschreibungsliste).
    Diese hat folgende Tags:

    <dl>
      <dt>HTML</dt>
      <dd>- Beschreibt die Struktur von Websites</dd>
      <dt>CSS</dt>
      <dd>- Verändert das Aussehen von HTML-Elementen</dd>
    </dl>
    

    So sieht diese Liste im Browser aus:

    HTML-Tutorial - Description List

    HTML-Tutorial – Description List

  8. <strong></strong> strong steht für Strong (Englisch für stark/wichtig) und markiert einen Textabsatz als besonders wichtig, also hebt ihn in Fettschrift hervor.

    <p>Ein Textabsatz mit <strong>einem Teil in Fettschrift</strong>.</p>
    

  9. <i></i> i steht für Italic (Englisch für kurisv) und definiert einen Textabsatz in kursiver Schrift.

    <p>Ein Textabsatz mit <i>einem Teil in kursiver Schrift</i>.</p>
    

  10. <br> br steht für Break (Englisch für Bruch/Umbruch) und definiert einen Umbruch in einem Textabsatz.

    <p>Ein Textabsatz mit einem Umbruch im Text und zwar hier. <br> Ab hier geht der Text dann in einer neuen Zeile weiter.</p>
    

  11. <hr> hr steht für horizontal line (Englisch für horizontale Linie) und fügt entsprechend eine horizontale Linie ein.

    <p>Ein Textabsatz mit einer horizontalen Linie und zwar hier.</p></p><hr>
    

    So sieht dieses Element im Browser aus:

    HTML-Tutorial - Horizontal Line

    HTML-Tutorial – Horizontal Line

  12. <div></div> und <span></span> div steht für so genanntes Block-Element. Ein Block-Element startet immer zu Beginn einer neuen Zeile im Code-Editor und nimmt die gesamte verfügbare Breite im Browser.

    Es gibt folgende weitere Block-Level-Elemente in HTML.
    <address> <article> <aside> <blockquote> <canvas> <dd> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <output> <p> <pre> <section> <table> <tfoot> <ul> <video>

    Das <div> Element wird als Container oder unsichtbarer Rahmen verwendet, um allen Elementen in diesem Rahmen/Container bestimmte Eigenschaften (Schriftfarbe, Größe, etc.) zuzuordnen.

    Die häufigsten Attribute sind style="" (welches wir aus dem vorangegangenen Teil des HTML-Tutorial schon kennen) und class="".
    Das class="" Attribut dient zur Identifizierung eines HTML-Elements und kann frei vergeben werden.

    Ähnlich wie das class="" Attribut ist das id="". Der einzige Unterschied ist, dass eine ID nur einmal pro Website-Projekt vergeben werden kann. Es ist also ein einmaliges Element, welches nur einmal oder nur auf diese eine Art dargestellt wird, wie z.B. wie ein Logo.

    Hautsächlich werden Klassen und IDs dafür verwendet, HTML-Elemente mit CSS zu stylen.
    Daher ist ein Verständnis von Klassen und IDs in diesem HTML-Tutorial nicht entscheidend, da dir diese Themen im Detail bei dem Studium von CSS wieder begegnen werden.

    Hier eine beispielhafte Anwendung eines div-Containers mit einer Klasse, einer ID und einem style-Attribut (mit dem Wert „Schriftfarbe = grün“).

    <div class="testklasse" id="testid" style="color:green;">HTML-Element mit einer Klasse und einer ID und einem anderen Style.</div>
    

    Ähnlich wie <div></div> Tags sind die <span></span> Tags.

    span steht für so genanntes Inline-Element. Ein Inline-Element befindet sich immer innerhalb eines Textabschnitts (<p></p>).
    Ein Inline-Element startet nicht in einer neuen Zeile des Code-Editors und nimmt die geringste benötigte Breite im Browser ein.

    Die häufigsten Attribute sind auch hier style="" und class="".

    Hier eine beispielhafte Anwendung eines span-Attributs mit einer Klasse, einer ID und einem style-Attribut (mit dem Wert „Schriftfarbe = grün“).

    <p><p>Dies ist einer Text und darin befindet sich ein <span class="testklasse" id="testid" style="color:green;">Ein Textteil mit einer Klasse und einer ID und einem anderen Style.</span> Danach geht der Text normal weiter.</p>
    

    Im Browser sehen Block- und Inline-Elemente folgendermaßen aus:

    HTML-Tutorial - Block- und Inline-Elemente

    HTML-Tutorial – Block- und Inline-Elemente

Weitere wichtige HTML Tags

Buttons

Der <button> Tag steht für einen klickbaren Button auf einer Website.
<button type="button">Click Me!</button>

Dies sind die wichtigsten Attribute, die mit Buttons verwendet werden:

Attribut Wert Erklärung
name name Der Button-Text
type button
reset
submit
Die Art des Buttons (Link, Reset oder Formular-Button)

Tabellen

Im Abschnitt über diesem siehst du eine HTML-Tabelle mit drei Spalten und 3 Zeilen.
Tabellen werden vom Tag <table></table> umschlossen.
Eine Zeile wird durch <tr></tr> eingefügt.
Die Kopfzeile wird durch <th></th> eingefügt.
Eine Spalte wird durch <td></td> erstellt.

Die Tabelle aus dem oberen Abschnitt sieht in Code-Editor folgendermaßen aus:

<table>
  <tr>
    <th style="width:25%">Attribut</th>
    <th style="width:25%">Wert</th>
    <th>Erklärung</th>
  </tr>
  <tr>
    <td>name</td>
    <td>name</td>
    <td>Der Button-Text</td>
  </tr>
  <tr>
    <td>type</td>
    <td>button<br>
      reset<br>
      submit</td>
    <td>Die Art des Buttons (Link, Reset oder Formular-Button)</td>
  </tr>
</table>

Wie dir sicher aufgefallen ist, haben wir den ersten beiden Spalten mit dem style-Attribut eine Breite von 25% gegeben, da die Aufteilung der Spalten so übersichtlicher ist. Den Zeilenumbruch in der zweiten Spalte der dritten Zeile erledigen wir mit dem <br> Tag.

Zitate

Kurze Zitate werden mit dem <q></q> (q steht für das englische Wort für Zitate: Quote) eingefügt.
Längere Abschnitte als Zitate werden mit dem Tag <blockquote></blockquote> umgesetzt.

<p>Im HTML-Tutorial stand:<q>So werden kurze Zitate umgesetzt</q>.</p>
    <p>Im HTML-Tutorial stand in einem längeren Absatz:</p><blockquote>So werden lange Zitate umgesetzt, denn längere Abschnitte als Zitate werden mit diesem Tag umgesetzt und erhalten daruch eine andere Darstellung. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</blockquote></p>

Im Browser stellt sich dies folgendermaßen dar:

HTML-Tutorial - Zitate

HTML-Tutorial – Zitate

Kommentare in HTML

In HTML unterscheidet man einzeilige Kommentare und mehrzeilige Kommentare. Allerdings haben beide die selbe Zeichenfolge. Beide beginnen mit <!-- und enden mit -->

<!DOCTYPE html><h1>Ein Überschrift</h1>
  <!-- einzeiliger Kommentar -->
<!DOCTYPE html><h2>Eine weitere Überschrift</h2>
<!-- Dies ist ein 
mehrzeiliger Kommentar -->

Conditional Comments

Kommentare können auch helfen, deinen Code besser darzustellen.

Während du für das Web programmierst, wirst du immer wieder auf das Problem der Browser-Kompatibilität stoßen. Denn alle Browser interpretieren Code unterschiedlich. Besonders aus der Reihe tanzt der Internet Explorer. Zur Abhilfe hat Microsoft die Conditional Comments veröffentlicht. Dies sind spezielle und bedingte HTML-Kommentare, die nur vom Internet Explorer ab Version 5 ausgelesen und beachtet werden. Alle anderen Browser ignorieren diese Kommentare.

Dies sind die Kommentare der entsprechenden Versionen:
[if IE] alle Versionen (ab 5.0 – 9)
[if IE 6] alle Versionen 6
[if lt IE 8] alle Version vor 8
[if lte IE 8] alle Version bis 8
[if gte IE 5.5] alle Versionen ab 5.5

So sieht dann ein Conditional Comment im Code aus:

<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="UTF-8">
  <title>Kommentare in HTML</title>
  <meta name="description" content="Hier fügen wir einzeilige und mehrzeilige Kommentare in HTML ein">
  <link rel="stylesheet" href="style.css">
  <!--[if IE]>
  <style>@import url(ie.css);</style>
  <![endif]-->
</head>

<body>
  
</body>

</html>

Kommentare im Frontend

Da Kommentare nur Informationen für Entwickler und teilweise für Browser sind, werde diese im Frontend für den User nicht dargestellt, wie im folgenden Beispiel zu sehen ist. Das Beispiel zeigt alle in diesem Teil des PHP-Tutorials verwendeten Code-Blocks mit ihren Kommentaren.

Kommentare in PHP

Kommentare in PHP

iframes

Ein iframe wird verwendet, um einen Teil einer Website, in einer anderen Website darzustellen, z.B. ein Video von YouTube in diesem HTML-Tutorial.
So sieht ein iframe beispielsweise aus: <iframe src="http://www.google.de"></iframe> <br> Wichtige Attribute sind: <code>src="", width="", height="", style ="".

Das HTML-Praxisprojekt

Im folgenden Video binden wir alle bisher im gesamten HTML-Tutorial genannten Tags und Attribute in unsere HTML-Datei ein, um dir zu verdeutlichen, wie diese funktionieren und wie sie verwendet werden. So entsteht nun Schritt für Schritt unsere Projekt-Website. Wenn du (wie von mir empfohlen) den Code mitgeschrieben hast, kannst du hier gerne eine eigenen Version der Projekt-Website erstellen und in den Kommentaren dieses Artikels verlinken, wenn du meinst, dass deine Version besonders gut gelungen ist.

HTML für Fortgeschrittene

Klasse! Du hast den Grundlagen-Teil des HTML-Tutorial hinter dir und beherrscht nun HTML in den meisten Anwendungsfällen. Im zweiten Teil des HTML-Tutorial lernst du nun die fortgeschrittenen Themen und bist so auf dem Weg ein echter HTML-Profi zu sein. Weiter geht’s!

Formulare

Formulare werden verwendet, um User-Daten zu sammeln und in HTML mit dem Tag <form></form> eingefügt.
Zwischen die beiden Formular-Tags kommen das Form-Element: <input></input> mit den Attributen <input type="text"></input>, <input type="radio"></input> und <input type="submit"></input> (also: ein Textfeld, ein Auswahl-Feld und ein Senden-Button).

So sieht also ein beispielhaftes Formular im Code-Editor aus:

<form>
   Name:<input type="text"><br><br>
   Erfahrungen:<br>
   <input type="radio" checked> Tellerwäscher<br> 
   <input type="radio"> Koch<br>
   <input type="radio"> Chefkoch<br><br>
   <input type="submit" value="Senden">
   </form>

Im Browser sieht das Formular folgendermaßen aus:

HTML-Tutorial - Formular

HTML-Tutorial – Formular

Damit die Formulare Daten in einer Datenbank speichern können oder E-Mails versenden, ist üblicherweise eine serverseitige Programmiersprache, wie PHP notwendig. Um PHP zu lernen, lese unser PHP Tutorial.

Video und Audio in HTML

Mit HTML5 werden die Multimedia-Formate MP3 (Audio) und MP4 (Video und Audio) unterstützt. Daher müssen keine (wie noch bei vorherigen HTML-Versionen) Plugins verwendet werden, die den Browser um den Funktionsumfang für Video und Audio erweitern.
Es gibt viele weitere Formate für Video und Audio (wobei MP3 und MP4 zu empfehlen sind, da sie von HTML5 direkt unterstützt und von Google/YouTube empfohlen und supported werden). Häufige weitere Video-Formate sind: .mpg, .avi, .wmv, .mov, .ogg, .webm, .swf, .flv

Häufige weitere Audio-Formate sind: .midi, .ram, .wma, .aac, .wav, .ogg

Audio

Vor HTML5 könnten Audio-Dateien nur mit Hilde von Plugins (z.B. Flash) eingebunden und abgespielt werden. HTML5 allerdings bietet den Tag <audio></audio>.
Dieses kann .MP3, .wav, .ogg Formate einbinden.
ES können die Attribute controls und <source src="" type=""> verwendet werden, wobei ersteres Audio-Kontrollelemente wie Play, Pause und Lautstärke einbinden und letzteres eine alternative Audio-Quelle einbindet, sollte der verwendete Browser die Haupt-Audiodatei nicht abspielen können.
Zwischen die beiden <audio></audio> Tags kann auch Text eingebunden werden, welcher dargestellt wird, falls der Browser das <audio></audio> nicht unterstützt.

Weitere wichtige Attribute sind <autoplay (startet Audio-Datei mit öffnen der Website sowie volume="" wobei 0.0 stumm und 1.0 die volle Lautstärke ist.

Eine vollständige Liste aller Attribute findet sich, wie immer, in der Tabelle zum Ende des HTML-Tutorial.

Dieses Beispiel zeigt das <audio></audio> Tag mit einigen Attributen und Optionen.

<body>
<audio src=dateiname.mp3 controls>
   <source src="dateiname.wav" type="audio/wav">
   <source src="dateiname.ogg" type="audio/ogg">
Dein Browser kann scheint veraltet zu sein und kann das <audio> Tag nicht verwenden zu können.
</audio>
</body>

Video

Auch das <video></video> Tag gab es vor HTML5 noch nicht, sodass Videos nicht ohne Plugins in Websites eingebunden werden.
Dieses Tag kann .MP4, .webm, .ogg Formate einbinden.
Neben den vom <audio></audio> Tag bekannten Attributen, ist beim Video die Höhe und Breite (festgelegt über die dir bereits bekannten width="" height="" Attribute wichtig.

Dieses Beispiel zeigt das <video></video> Tag mit einigen Attributen und Optionen.

<body>
<video src=dateiname.mp3 width="320" height="240" autoplay>
   <source src="dateiname.webm" type="video/webm">
   <source src="dateiname.ogg" type="video/ogg">
Dein Browser kann scheint veraltet zu sein und kann das <video> Tag nicht verwenden zu können.
</video>
</body>

Plugins

Hilfsprogramme (Plugins) erweitern die Funktionalität von Browsern. Für die Einbindung von Plugins in HTML werden die Tags <object></object> und <embed></embed> verwendet.
Typische Szenarien für Plugins sind Virus-Scans, Karten/Maps und Verifizierung von Bankdaten.

Wichtige Attribute sind width="" height="" und src="".

Code in HTML

Wie du in diesem HTML Tutorial gesehen hast, werden Code-Beipsiele auf zwei verschiedenen Arten eingebunden. Es gibt kurze Code-Blöcke, wie diese hier und längere Code-Blöcke, wie

in diesem Beispiel.

Kurze Code-Blöcke werden mit dem Tag <code> und dem entsprechenden schließendem Tag eingefügt.
Längere Code-Blöcke mit den Tags <pre><code> und den entsprechenden schließenden Tags eingefügt.

Es gibt weitere, ähnliche Tags.
<kbd> fügt Keyboard-Shortcuts ein, wie Ctrl+b.
<samp> fügt die Ausgabe von Nachrichten eines Programms ein, wie Error!

Sonderzeichen in HTML

In HTML sind einige Sonderzeichen, wie < reserviert. Diese und andere Sonderzeichen werden in HTML mit den sogenannten Entities (oder Zeichenreferenzen) ersetzt.
Um ein Kleiner-Als-Zeichen (<) in HTML darzustellen, musst du &lt; oder &#60; schreiben. So besteht nicht die Gefahr, dass das Sonderzeichen als Code interpretiert wird und so einen Fehler produziert.

Diese Tabelle zeigt alle wichtigen Zeichenreferenzen:

Ergebnis Erklärung Zeichenreferenz Name Zeichenreferenz Nr.
geschütztes Leerzeichen &nbsp; &#160;
< Kleiner-Als &lt; &#60;
> Größer-Als &gt; &#62;
& Und-Zeichen &amp; &#38;
" Doppelte Anführungszeichen &quot; &#34;
' Einfache anführungszeichen &apos; &#39;
Euro &euro; &#8364;
© Copyright &copy; &#169;

Das geschützte Leerzeichen

Das &nbsp; wird sehr häufig verwendet. Du kannst damit ein Leerzeichen einfügen, welches nicht in eine neue Zeile springt.

Dateipfade in HTML

Es gibt zwei unterschiedliche Arten von Dateipfaden in HTML: Absolute und relative Pfade. Es wird empfohlen immer wenn möglich relative Pfade zu verwenden, denn so verlieren die Pfade ihr Gültigkeit nicht, z.B. nachdem du von einem lokalen Setup (localhost) auf einen öffentlichen Server umziehst.

Allerdings können relative Pfade nur für Dateien und Seiten verwendet werden, die auf dem selben Server liegen. Links oder Dateien auf anderen Servern müssen immer einen absoluten Link haben.

Relative Links

Relativer Link (zeigt auf ein Bild, welches im Bilderordner liegt, der im Hauptverzeichnis der Website zu finden ist): /bilder/bild.jpg

Relativer Link (zeigt auf ein Bild, welches im selben Ordner liegt, wie die HTML-Datei in der der Link eingefügt wurde): bilder/bild.jpg

Relativer Link (zeigt auf ein Bild, welches im Bilderordner liegt, der eine Ebene höher zu finden ist, als die HTML-Datei in die der Link eingefügt wurde): ../bilder/bild.jpg

Absolute Links

Absoluter Link: https://www.click-your-ads.com/bilder/bild.jpg

Head-Bereich im Detail

Der Head-Bereich einer Website ist der nicht sichtbare Bereich und enthält Meta-Informationen über
das HTML-Dokument.

Typischerweise enthält der Head-Bereich:

Title

<title>: Titel der Website, wird auch im Tab des Browsers angezeigt.
Der ist eine erforderliche Meta-Angabe und sollte somit in keinem HTML-Dokument fehlen.
Der Title wird in den Google-Suchergebnissen, als blauer Titeltext angezeigt.

<!DOCTYPE html>
<html>

<head>
  <title>Der Titel der Website</title>
</head>

<body>
<p>Der Inhalt</p>
</body>

</html>

Style

<style>: Wird verwendet um CSS-Befehle für das Styling der Website direkt in der HTML-Datei unterzubringen. Dies ist allerdings nur für Single-Page-Websites ratsam, denn üblicherweise gehören CSS-Styles in ein ausgelagertes Stylesheet.

<!DOCTYPE html>
<html>
   <style>
     body {background-color: lightgrey;}
     h1 {color: tomato;}
   </style>
<head>
  <title>Der Titel der Website</title>
</head>

<body>
<p>Der Inhalt</p>
</body>

</html>

Link

<style>: Verlinkungen z.B. zu einem Stylesheet.

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
</head>

</html>

Meta

<meta>: Meta-Informationen, wie beispielsweise das Chartset oder eine Inhaltsbeschreibung oder Keyword-Definitionen für Suchmaschienen.

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Wir lernen den Head kennen und lieben.">
  <meta name="keywords" content="HTML-Tutorial, Head-Bereich">
  <meta name="author" content="Leon Hoffmann">
</head>

</html>
<link>:

Script

<script>: Wird verwendet um JavaScript in das HTML-Dokument einzufügen.

Base

<base>: Wird verwendet um die Basis-URL festzulegen, welche als Grundlage für alle relativen URLs verwendet wird.

<!DOCTYPE html>
<html>

<head>
  <base href="https://www.click-your-ads.com/" target="_blank">
</head>

</html>

HTML Layout

Seit HTML5 gibt es neue semantische Elemente, die dabei helfen, eine Website in ihre wichtigsten Bereich zu unterteilen. Lass uns einmal gemeinsam überlegen, welche Bereiche zu einer typischen Website gehören: Kopfbereich, Navigation, Hauptbereich, Textbereiche, Seitenleiste und Fußbereich. Für diese Bereiche gibt es jetzt die entsprechenden HTML-Tags:

HTML-Tutorial - Layout

HTML-Tutorial – Layout

  • <header> – Definiert den Kopfbereich der Website (Header, nicht zu verwechseln mit dem HTML-Head, dem nicht sichtbaren Bereich einer Website)
  • <nav> – Definiert Navigations-Links (Menü)
  • <section> – Definiert einen Website-Hauptbereich
  • <article> – Definiert einen wichtigen Text-/Inhaltsteil
  • <aside> – Definiert einen Seiten Bereich (Sidebar)
  • <footer> – Definiert einen Fußbereich (Footer)
  • <details> – Ein zusätzlicher Bereich mit Detailinformationen
  • <summary> – Eine Überschrift für die Detail-Section

Alle HTML5-Tags

Die Aufstellung habe ich übernommen von der Open-Source-Developer-Website von Mozilla.

Das Wurzelelement
Tag Beschreibung
<html> Steht für den Wurzelknoten eines HTML- oder XHTML-Dokuments. Alle weiteren Elemente müssen Nachkommen dieses Elements sein.
Metadaten des Dokuments
Tag Beschreibung
<head> Bezeichnet eine Sammlung von Metadaten des Dokuments. Hierzu gehören auch Links zu oder Definitionen von Skripts und Stylesheets.
<title> Definiert den Titel eines Dokuments, der in der Titelzeile des Browsers im Tab der betreffenden Seite angezeigt wird. Darf ausschließlich Text enthalten. Eventuell enthaltene Tags werden nicht interpretiert.
<base> Definiert den Basis-URL für in der Seite verwendete relative URLs.
<link> Wird verwendet, um externe JavaScript- und CSS-Dateien in das aktuelle HTML-Dokument einzubinden.
<meta> Wird für die Definition von Metadaten verwenden, die mit keinem anderen HTML-Element definiert werden können.
<style> Tag für die Definition eines internen CSS-Stylesheets.
Skripting
Tag Beschreibung
<script> Definiert entweder ein internes Skript oder einen Link auf ein externes Skript. Als Programmiersprache wird JavaScript verwendet.
<noscript> Definiert alternative Inhalte, die angezeigt werden sollen, wenn der Browser kein Skripting unterstützt.
Abschnitte (Sections)
Tag Beschreibung
<body>
Steht für den Hauptinhalt eines HTML-Dokuments. Jedes Dokument kann nur ein <body>-Element enthalten.
<section> Beschreibt einen Abschnitt eines Dokuments.
<nav> Beschreibt einen Abschnitt der ausschließlich Navigationslinks enthält.
<article> Beschreibt eigenständigen Inhalt, der unabhängig von den übrigen Inhalten sein kann.
<aside> Steht für eine Randbemerkung. Der übrige Inhalt sollte auch verständlich sein, wenn dieses Element entfernt wird.
<h1>-<h6> Hiermit werden Überschriften definiert. Es gibt sechs verschiedene Hierarchieebenen, wobei für die Hauptüberschrift steht und <h6> für eine Überschrift der untersten Ebene. Eine Überschrift beschreibt knapp das Thema des Abschnitts, dem sie voransteht.
<header> Definiert den Kopfteil („header“) einer Seite oder eines Abschnitts. Er enthält oft ein Logo, den Titel der Website und die Seitennavigation.
<footer> Definiert den Fußteil („footer“) einer Seite oder eines Abschnitts. Er enthält oft Copyright-Hinweise, einen Link auf das Impressum oder Kontaktadressen.
<address> Definiert einen Abschnitt mit Kontaktinformationen.
<main> Definiert den Hauptinhalt der Seite. Es ist nur ein
Element pro Seite zulässig.
Inhalte gruppieren
Tag Beschreibung
<p> Der Inhalt dieses Elements soll als Absatz dargestellt werden.
<hr> Bezeichnet einen thematischen Bruch zwischen Absätzen eines Abschnitts, Artikels oder anderem längeren Inhalt.
<pre> Zeigt an, das der Inhalt dieses Elements vorformatiert ist und das dieses Format erhalten bleiben soll.
<blockquote> Kennzeichnet ein Zitat.
<ol> Definiert eine geordnete Liste, bei der die Einträge eine bestimmte Reihenfolge haben müssen.
<ul> Definiert eine Liste ungeordneter Einträge.
<li> Kennzeichnet einen Listeneintrag. Diesem wird oftmals ein Aufzählungszeichen („bullet“) vorangestellt.
<dl> Kennzeichnet eine Definitionsliste aus Begriffen und den dazugehörigen Definitionen.
<dt> Kennzeichnet einen Begriff der im folgenden <dd>-Element beschrieben wird.
<dd> Markiert die Definition des oder der Begriffe, die in den direkt vorangehenden <dt>-Element angegeben wurden.
<figure> Kennzeichnet eine Abbildung, die einen Teil des Dokuments illustriert.
<figcaption> Bezeichnet die Beschriftung einer Abbildung.
<div> Bezeichnet ein allgemeines Container-Element ohne spezielle semantische Bedeutung. Wird oft zusammen mit class- oder id-Attributen verwendet, um es in Skripts oder Stylesheets auswählen zu können.
Semantische Text-Elemente
Tag Beschreibung
<a> Bezeichnet einen Hyperlink, der auf eine andere Ressource verweist (angegeben durch das href-Attribut).
<em> Steht für hervorgehobenenText.
<strong> Markiert besonders wichtigen (stark hervorgehobenen) Text.
<small> Steht für das „Kleingedruckte“ eines Dokuments, wie Ausschlussklauseln, Copyright-Hinweise oder andere Dinge, die für das Verständnis des Dokuments nicht unbedingt nötig sind.
<s> Wird für Inhalte verwendet, die nicht länger relevant oder akkurat sind. Wird meist durchgestrichen dargestellt.
<cite> Steht für den Titel eines Werks.
<q> Bezeichnet ein Kurzzitat. Für längere Zitate sollte <blockquote> verwendet werden.
<dfn> Steht für einen Begriff, dessen Definition im nächstgelegenen Nachkommen-Element enthalten ist.
<abbr> Bezeichnet eine Abkürzung oder ein Akronym.
<data> Verbindet seinen Inhalt mit einem maschinenlesbaren Equivalent, angegeben im value-Attribut. (Dieses Element wird nur in der WHATWG-Version des HTML-Standards definiert, nicht aber in der W3C-Version von HTML5).
<time> Steht für einen Wert, der Datum und Uhrzeit angibt.
<code> Wird verwendet, um Programmiercode zu markieren.
<var> Steht für eine Variable. Dies kann ein tatsächlicher mathematischer Ausdruck oder Programmierungskontext sein, ein Identifier für eine Konstante, ein Symbol für eine physikalische Größe, ein Funktionsparameter oder einfach ein Platzhalter.
<samp> Markiert die Ausgabe eines Programms oder eines Computers.
<kbd> Steht für eine Benutzereingabe, oftmals, aber nicht unbedingt, auf der Tastatur. Kann auch für andere Eingaben, beispielsweise transkribierte Sprachbefehle stehen.
<sub><sup> Markiert tiefgestellten, bzw. hochgestellten Text.
<i> Steht für einen Textabschnitt, der vom übrigen Inhalt abgesetzt und üblicherweise kursiv dargestellt wird, ohne für eine spezielle Betonung oder Wichtigkeit zu stehen. Dies kann beispielsweise eine taxonomische Bezeichnung, ein technischer Begriff, ein idiomatischer Ausdruck, ein Gedanke oder der Name eines Schiffes sein.
<b> Steht für einen Textabschnitt, der vom übrigen Inhalt abgesetzt und üblicherweise fettgedruckt dargestellt wird, ohne für eine spezielle Betonung oder Wichtigkeit zu stehen. Dies kann beispielsweise ein Schlüsselwort oder ein Produktname in einer Produktbewertung sein.
<u> Steht für einen Textabschnitt, der vom übrigen Inhalt abgesetzt und üblicherweise unterstrichen dargestellt wird, ohne für eine spezielle Betonung oder Wichtigkeit zu stehen. Dies könnte beispielsweise ein Eigenname auf in chinesischer Sprache sein oder ein Textabschnitt, der häufig falsch buchstabiert wird.
<mark> Steht für Text, der aus Referenzgründen hervorgehoben wird, d.h. der in anderem Kontext von Bedeutung ist.
<ruby> Bezeichnet einen Textteil mit Ruby-Annotationen. Dies sind kurze Aussprachetipps und andere Hinweise, die hauptsächlich für ostasiatische Tyopgrafie verwendet werden.
<rt> Bezeichnet den Text einer Ruby-Annotation.
<rp> Wird zusammen mit dem Element verwendet, um Ruby-Text mit Klammern zu umgeben, die angezeigt werden, wenn das Benutzerprogramm (Browser) keine Ruby-Annotationen unterstützt.
<bdi> Markiert Text, der vom umgebenden Inhalt zum Zweck der bidirektionalen Formatierung (z.B. arabischer Text innerhalb von deutschsprachigen Inhalten) isoliert werden soll. Hiermit kann ein Textabschnitt mit einer unterschiedlichen oder unbekannten Textrichtung gekennzeichnet werden.
<bdo> Kann verwendet werden, um die Textrichtung der enthaltenen Kindelemente zu steuern. Hiermit kann der Unicode BiDi-Algorithmus explizit überschrieben werden.
<span> Markiert einen allgemeinen Textabschnitt. Das -Element erhält seine Bedeutung meistens durch ein class- oder ein id-Attribut, wodurch es außerdem für Skripte zugänglich ist und von Stylesheets ausgewählt werden kann.
<br> Bezeichnet einen Zeilenumbruch.
<wbr> Hiermit kann die Gelegenheit für einen Zeilenumbruch gekennzeichnet werden, mit dem die Lesbarkeit verbessert werden kann, wenn der Text auf mehrere Zeilen verteilt wird.
Änderungen am Dokument
Tag Beschreibung
<ins> Markiert einen zum Dokument hinzugefügten Teil.
<del> Markiert einen aus dem Dokument entfernten Teil.
Eingebettete Inhalte (Ersetzte Elemente)
Tag Beschreibung
<img> Steht für ein Bild.
<iframe> Definiert einen so genannten Iframe, mit dem ein HTML-Dokument in seinem eigenen Kontext in das aktuelle Dokument eingebettet werden kann.
<embed> Steht für einen Einbindungspunkt für externe Ressourcen. Dies sind typischerweise keine HTML-Inhalte, sondern beispielsweise eine Applikation oder interaktiver Inhalt, der mit Hilfe eines Plugins (anstatt nativ durch das Benutzerprogramms) dargestellt wird.
<object> Steht für allgemeinen externen Inhalt, der je nach Kontext als Bild, „verschachtelter Browsing-Kontext“ (s. iframe), oder externer Inhalt (der mit Hilfe eines Plugins darsgestellt wird) betrachtet wird.
<param> Definiert Parameter für ein Plugin, das für die Darstellung eines mit <object> eingebundenen Elements verwendet werden.
<video> Steht für eine Videodatei und die dazugehörigen Audiodateien, sowie die für das Abspielen nötigen Kontrollelemente.
<audio> Markiert eine Tondatei oder einen Audiostream.
<source> Ermöglicht es Autoren, alternative Medienressourcen (z.B. verschiedene Audio- oder Videoformate) für Medienelemente wie <video> oder <audio> anzugeben.
<track> Hiermit können zusätzliche Medienspuren (z.B. Untertitel) für Elemente wie <video> oder <audio> angegeben werden.
<canvas> Steht für einen Bitmap-Bereich, der von Skripts verwendet werden kann, um beispielsweise Diagramme, Spielegraphiken oder andere visuellen Effekte dynamisch darzustellen.
<map> Definiert in Verbindung mit dem <area>-Element eine Image Map.
<area> Definiert in Verbindung mit dem <map>-Element eine Image Map.
<svg> Definiert eine eingebettete Vektorgrafik.
<math> Markiert eine mathematische Formel.
Tabellarische Daten
Tag Beschreibung
<table> Markiert eine Tabelle, d.h. Daten mit mehr als einer Dimension.
<caption> Kennzeichnet die Beschriftung (Titel) einer Tabelle.
<colgroup> Steht für eine Gruppe aus einer oder mehreren Tabellenspalten.
<col> Steht für eine Tabellenspalte.
<tbody> Steht für die Spalten, die die eigentlichen Daten einer Tabelle enthalten.
<thead> Markiert die Gruppe der Tabellenzeilen, die die Beschriftungen der Tabellenspalten enthalten.
<tfoot> Markiert die Gruppe der Tabellenzeilen, die die Zusammenfassungen der Tabellenspalten enthalten.
<tr> Steht für eine Zeile mit Tabellenzellen.
<td> Kennzeichnet eine einzelne Tabellenzelle.
<th> Kennzeichnet eine Tabellenzelle mit einer Beschriftung.
Formulare
Tag Beschreibung
<form> Markiert ein Formular. Formulare bestehen typischerweise aus einer Reihe von Kontrollelementen, deren Werte zur weiteren Verarbeitung an einen Server übertragen werden.
<fieldset> Steht für eine Gruppe von Kontrollelementen.
<legend> Kennzeichnet eine Beschriftung für ein <fieldset>-Element.
<label> Kennzeichnet die Beschriftung für ein Formular-Kontrollelement (z.B. Texteingabefelder).
<input> Steht für ein Feld für Benutzereingaben eines bestimmten Typs. Der Typ (Radiobutton, Ankreuzfeld, Texteingabe, etc.) wird anhand des type-Attributs angegeben.
<button> Markiert einen Button.
<select> Kennzeichnet ein Kontrollelement, mit dem aus einer Reihe von Optionen ausgewählt werden kann.
<datalist> Steht für eine Sammlung vordefinierter Optionen für andere Kontrollelemente.
<optgroup> Steht für eine Reihe logisch gruppierter Auswahloptionen.
<option> Steht für eine Auswahloption innerhalb eines <select>-Elements, oder einen Vorschlag innerhalb eines <datalist>-Elements.
<textarea> Markiert ein Element für mehrzeilige Texteingaben.
<keygen> Steht für ein Kontrollelement zur Erzeugung eines Paares aus öffentlichem und privaten Schlüssel und zum Versenden des öffentlichen Schlüssels.
<output> Markiert das Ergebnis einer Berechnung.
<progress> Ein Element zur Fortschrittsanzeige einer bestimmten Aufgabe.
<meter> Steht für eine Messskala (oder deren Teilwerte) innerhalb eines bekannten Bereichs.
Interaktive Elemente
Tag Beschreibung
<details> Markiert ein Kontrollelement, mit dem der Benutzer zusätzliche Informationen oder Kontrolle erhalten kann.
<summary> Kennzeichnet eine Zusammenfassung oder eine Legende für ein bestimmte <details>-Element.
<command> Kennzeichnet einen Befehl, der vom Benutzer aufgerufen werden kann.
<menu> Markiert eine Liste mit Befehlen

Alle HTML5-Attribute

Die Aufstellung habe ich übernommen von der Open-Source-Developer-Website von Mozilla.

Attributliste

Attributname Elemente Beschreibung
accept <form>; <input> Liste der Typen, die der Server akzeptiert, in der Regel ein Dateityp.
accept-charset <form> Liste der unterstützten Zeichensätze.
accesskey Definiert eine Tastenkombination zum Aktivieren oder Hinzufügen von Fokus auf das Element.
action <form> Die URI eines Programms, das die über das Formular übermittelten Informationen verarbeitet.
align <applet>, <caption>, <col>, <colgroup><hr>, <iframe>, <img>, <table>, <tbody><td><tfoot> , <th>, <thead>, <tr> Gibt die horizontale Ausrichtung des Elements an.
alt <applet>, <area>, <img>, <input> Alternativer Text, falls ein Bild nicht angezeigt werden kann.
async <script> Gibt an, dass das Skript asynchron ausgeführt werden soll.
autocomplete <form>, <input> Gibt an, ob die Kontrollen in diesem Formular standardmäßig ihre Werte automatisch durch den Browser vervollständigen können.
autofocus <button>, <input>, <keygen>, <select>, <textarea> Das Element sollte nach der geladenen Seite automatisch fokussiert werden.
autoplay <audio>, <video> Das Audio oder Video sollte so schnell wie möglich spielen.
autosave <input> Bisherige Werte sollten Dropdowns von auswählbaren Werten über Seitenlasten bestehen bleiben.
bgcolor <body>, <col>, <colgroup>, <marquee>, <table>, <tbody>, <tfoot>, <td>, <th>, <tr> Hintergrundfarbe des Elements.

Hinweis: Das ist ein veraltetestes Attribut. Bitte benutze stattdessen die CSS background-color Eigenschachaft.
border <img>, <object>, <table> Die Randbreite.

Hinweis: Das ist ein veraltetestes Attribut. Bitte benutze stattdessen die CSS border Eigenschaft.
buffered <audio>, <video> Enthält den Zeitbereich von bereits gepufferten Medien.
challenge <keygen> Eine Herausforderung, die zusammen mit dem öffentlichen Schlüssel eingereicht wird.
charset <meta>, <script> Deklariert die Zeichencodierung der Seite oder des Skripts.
checked <command>, <input> Gibt an, ob das Element auf Seitenladung überprüft werden soll.
cite <blockquote>, <del>, <ins>, <q> Enthält einen URI, der auf die Quelle des Angebots oder der Änderung verweist.
class Globale Attribut

Oft mit CSS verwendet, um Elemente mit gemeinsamen Eigenschaften zu gestalten.
code <applet> Gibt die URL der zu ladenden und ausgeführten Klassendatei des Applets an.
codebase <applet> Dieses Attribut gibt die absolute oder relative URL des Verzeichnisses an, in dem Applets ‚.class-Dateien, die durch das Codeattribut referenziert werden, gespeichert sind.
color <basefont>, <font>, <hr>

Dieses Attribut setzt die Textfarbe entweder mit einer benannten Farbe oder einer Farbe, die im hexadezimalen #RRGGBB-Format angegeben ist.

Hinweis: Das ist ein veraltetestes Attribut. Bitte benutze stattdessen die CSS color Eigenschaft.
cols <textarea> Definiert die Anzahl der Spalten in einem Textbereich.
colspan <td>, <th> Das colspan-Attribut definiert die Anzahl der Spalten, die eine Zelle überspannen soll.
content <meta> Ein Wert, der mit http-equiv oder dem Namen verbunden ist, abhängig vom Kontext.
contenteditable Globales Attribut

Gibt an, ob der Inhalt des Elements bearbeitet werden kann.
contextmenu

Globales Attribut

Definiert die ID eines {{ HTMLElement- }} – Elements, das als Kontextmenü des Elements dient.
controls <audio>, <video> Gibt an, ob der Browser dem Benutzer die Wiedergabesteuerung anzeigen soll.
coords <area> Ein Satz von Werten, die die Koordinaten des Hot-Spot-Bereichs angeben.
<p>crossorigin</p> <audio>, <img>, <link>, <script>, <video> Wie das Element grenzüberschreitende Anfragen behandelt
data <object> Gibt die URL der Ressource an.
data-*

Globales Attribut

Ermöglicht es Ihnen, benutzerdefinierte Attribute an ein HTML-Element anzuhängen.
datetime <del>, <ins>, <time> Gibt das Datum und die Uhrzeit an, die dem Element zugeordnet sind.
default <track> Zeigt an, dass die Spur aktiviert werden soll, es sei denn, die Einstellungen des Benutzers zeigen etwas anderes an.
defer <script> Gibt an, dass das Skript nach dem Analysieren der Seite ausgeführt werden soll.
dir

Globales Attribut

Definiert die Textrichtung. Zulässige Werte sind (links-nach-rechts oder rechts-nach-links)
dirname <input>, <textarea>  
disabled <button>, <command>, <fieldset>, <input>, <keygen>, <optgroup>, <option>, <select>, <textarea> Gibt an, ob der Benutzer mit dem Element interagieren kann.
download <a>, <area> Zeigt an, dass der Hyperlink zum Herunterladen einer Ressource verwendet werden soll.
draggable

Globales Attribut

Legt fest, ob das Element gezogen werden kann.
dropzone

Globales Attribut

Gibt an, dass das Element das Fallenlassen von Inhalt auf ihm akzeptiert.
enctype <form> Definiert den Inhaltstyp des Formulars, wenn die Methode POST ist.
for <label>, <output> Beschreibt Elemente, die zu diesem gehören.
form <button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea> Gibt das Formular an, das der Besitzer des Elements ist.
formaction <input>, <button> Gibt die Aktion des Elements an und überschreibt die im <formular> definierte Aktion.
headers <td>, <th> IDs der <th> -Elemente, die für dieses Element gelten.
height <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>

Gibt die Höhe der hier aufgeführten Elemente an. Für alle anderen Elemente verwenden Sie die Eigenschaft CSS height.

Hinweis: In einigen Fällen wie <div> ist dies ein Legacy-Attribut, in welchem Fall die CSS height Eigenschaft stattdessen verwendet werden soll.
hidden Globales Attribut

Verhindert das Rendering des gegebenen Elements, während Kinderelemente, z.B. Script-Elemente, aktiv.
high <meter> Zeigt die untere Schranke des oberen Bereichs an.
href <a>, <area>, <base>, <link> Die URL einer verknüpften Ressource.
hreflang <a>, <area>, <link> Gibt die Sprache der verknüpften Ressource an.
http-equiv <meta>  
icon <command> Gibt ein Bild an, das den Befehl darstellt.
id

Globales Attribut

Oft mit CSS verwendet, um ein bestimmtes Element zu stylen. Der Wert dieses Attributs muss eindeutig sein.
integrity <link>, <script> 

Sicherheits-Feature, das Browsern ermöglicht zu verifizieren, was sie abrufen.

ismap <img> Gibt an, dass das Bild Teil einer Server-seitigen Image-Map ist.
itemprop Global attribute

 
keytype <keygen> Spezifiziert den Typ des generierten Schlüssels.
kind <track> Spezifiziert die Art der Textspur.
label <track> Definiert einen für den Nutzer lesbaren Titel der Textspur.
lang

Global attribute

Definiert die im Element genutzte Sprache.
language <script> Definiert die im Element genutzte Skriptsprache.
list <input> Identifiziert eine dem Nutzer vorzuschlagende Liste vordefinierter Optionen.
loop <audio>, <bgsound>, <marquee>, <video> Gibt an, ob das Medium ab dem Start beginnen soll, wenn es fertig ist.
low <meter> Zeigt die obere Schranke des unteren Bereiches an.
manifest <html> Gibt die URL des Cache-Manifests des Dokuments an.
max <input>, <meter>, <progress> Gibt den maximal zulässigen Wert an.
maxlength <input>, <textarea> Definiert die maximal zulässige Anzahl von Zeichen im Element.
media <a>, <area>, <link>, <source>, <style> Gibt einen Hinweis auf das Medium an, für das die verknüpfte Ressource entworfen wurde.
method <form> Legt fest, welche HTTP-Methode bei der Übermittlung des Formulars verwendet werden soll. Kann GET (Standard) oder POST sein.
min <input>, <meter> Gibt den zulässigen Mindestwert an.
multiple <input>, <select> Gibt an, ob mehrere Werte in einer Eingabe des Typs E-Mail oder Datei eingegeben werden können.
muted <video> Zeigt an, ob der Ton anfänglich auf Seitenladung ausgeschaltet wird.
name <button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param> Name des Elements. Zum Beispiel von dem Server verwendet, um die Felder in Form zu übermitteln.
novalidate <form> Dieses Attribut gibt an, dass das Formular bei der Übermittlung nicht validiert werden darf.
open <details> Gibt an, ob die Details auf Seite geladen werden sollen.
optimum <meter> Zeigt den optimalen numerischen Wert an.
pattern <input> Definiert einen regulären Ausdruck, den der Wert des Elements validiert.
ping <a>, <area>  
placeholder <input>, <textarea> Bietet dem Benutzer einen Hinweis darauf, was im Feld eingegeben werden kann.
poster <video> Eine URL, die einen Posterrahmen anzeigt, bis der Benutzer spielt oder sucht.
preload <audio>, <video> Indicates whether the whole resource, parts of it or nothing should be preloaded.
radiogroup <command>  
readonly <input>, <textarea> Indicates whether the element can be edited.
rel <a>, <area>, <link> Specifies the relationship of the target object to the link object.
required <input>, <select>, <textarea> Indicates whether this element is required to fill out or not.
reversed <ol> Indicates whether the list should be displayed in a descending order instead of a ascending.
rows ´<textarea> Defines the number of rows in a text area.
rowspan <td>, <th> Defines the number of rows a table cell should span over.
sandbox <iframe>  
scope <th>  
scoped <style>  
seamless <iframe>  
selected <option> Defines a value which will be selected on page load.
shape <a>, <area>  
size <input>, <select> Defines the width of the element (in pixels). If the element’s type attribute is text or password then it’s the number of characters.
sizes <link>, <img>, <source>  
slot

Global attribute

Assigns a slot in a shadow DOM shadow tree to an element.
span <col>, <colgroup>  
spellcheck

Global attribute

Indicates whether spell checking is allowed for the element.
src <audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video> The URL of the embeddable content.
srcdoc <iframe>  
srclang <track>  
srcset <img>  
start <ol> Defines the first number if other than 1.
step <input>  
style

Global attribute

Defines CSS styles which will override styles previously set.
summary <table>  
tabindex

Global attribute

Overrides the browser’s default tab order and follows the one specified instead.
target <a>, <area>, <base>, <form>  
title

Global attribute

Text to be displayed in a tooltip when hovering over the element.
type <button>, <input>, <command>, <embed>, <object>, <script>, <source>, <style>, <menu> Defines the type of the element.
usemap <img><input>, <object>  
value <button>, <option>, <input>, <li>, <meter>, <progress>, <param> Defines a default value which will be displayed in the element on page load.
width <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>

For the elements listed here, this establishes the element’s width.

Note: For all other instances, such as <div>, this is a legacy attribute, in which case the CSS width property should be used instead.
wrap <textarea> Indicates whether the text should be wrapped.