HTML-Grundlagen – Basiswissen
HTML (HyperText Markup Language) ist die Auszeichnungssprache, die das Fundament von Websites bildet. In diesem Material lernst du die Grundkonzepte von HTML, seine Struktur und die wichtigsten Elemente kennen, die es dir ermöglichen, eigene Webseiten zu erstellen. Diese Seite behandelt den Aufbau von HTML-Dokumenten, grundlegende Elemente und einige einfache Codebeispiele, die als Grundlage für das weitere Lernen dienen.
HTML-Grundlagen
HTML-Dokumente sind einfache Textdateien mit der Endung .html oder .htm. Jede HTML-Seite beginnt mit einer Deklaration, die dem Browser mitteilt, dass HTML5 verwendet wird.
Zum Beispiel sieht eine sehr einfache HTML-Seite so aus:
Die wichtigsten Bestandteile
Schauen wir uns die wichtigsten Elemente eines HTML-Dokuments an:
- <!DOCTYPE html>: Die erste Zeile jeder HTML-Seite, die angibt, dass HTML5 verwendet wird.
- <html>: Das Wurzelelement des Dokuments, das die gesamte Seite umfasst.
- <head>: Der Bereich, in dem Hintergrundinformationen wie Zeichencodierung, Seitentitel und Links zu externen Stylesheets angegeben werden.
- <title>: Der Titel der Seite, der im Browser-Tab angezeigt wird.
- <body>: Der Bereich, der den eigentlichen Inhalt enthält: Texte, Bilder, Links, Listen und andere Elemente.
Überschriften, Absätze und Links
Überschriften auf der Seite werden normalerweise mit den Tags <h1> bis <h6> definiert, die eine Hierarchie darstellen. <p>-Tags definieren Absätze, und das <a>-Tag steht für Hyperlinks.
Zum Beispiel der Haupttitel:
Und ein Absatz:
Ein einfacher Hyperlink:
Bilder und Listen
Bilder werden mit dem <img>-Tag eingefügt. Die Quelle wird über das Attribut src angegeben, während die Bildbeschreibung im alt-Attribut steht. Mit Listen können Daten geordnet oder ungeordnet dargestellt werden.
Hier ein Beispiel für eine ungeordnete Liste:
Code-Details
<!-- Unordered list --> <ul> <li>First element</li> <li>Second element</li> <li>Third element</li> </ul>
Vorschau
- First element
- Second element
- Third element
Und eine geordnete Liste:
Code-Details
<!-- Ordered list --> <ol> <li>Step one</li> <li>Step two</li> <li>Step three</li> </ol>
Vorschau
- Step one
- Step two
- Step three
Horizontale Linie und Zeilenumbruch
Das <hr>-Tag erstellt eine horizontale Linie, die oft verwendet wird, um Inhalte zu trennen. Das <br>-Tag erzeugt einen Zeilenumbruch.
Selbstschließende Elemente und Kommentare
Einige HTML-Elemente benötigen kein eigenes Schließ-Tag – diese nennt man selbstschließende Elemente, wie <img>, <br> oder <hr>. Außerdem kannst du Kommentare in deinen Code einfügen, die vom Browser ignoriert werden.
Sprache wählen
Thema wählen
© 2025 ReadyTools. Alle Rechte vorbehalten.