HTML - Grundlegende Tags
Häufige grundlegende Tags
Überschriften
HTML hat sechs Ebenen von Überschriften, von <h1> bis <h6>, um den Inhalt einer Webseite zu strukturieren. Der <h1>-Tag ist die Hauptüberschrift, während <h6> die kleinste Unterüberschrift ist. Jede Überschriftenebene hat einen anderen Stil und eine andere Bedeutung. Die Verwendung von Überschriften hilft, eine klare Struktur für Ihren Inhalt zu schaffen und macht es den Lesern einfacher, die Organisation Ihrer Webseite zu verstehen.
Absätze
Der <p>-Tag definiert Textabsätze in HTML. Es ist ein Block-Level-Element, was bedeutet, dass Browser vor und nach jedem <p>-Element etwas vertikalen Abstand hinzufügen. Absätze organisieren und trennen Textblöcke und machen Ihren Inhalt lesbarer. Verwenden Sie den <p>-Tag, um verwandte Sätze oder Ideen zusammenzufassen und einen logischen Informationsfluss zu schaffen.
Beispiel: HTML-Code für einen Absatz mit zusätzlichen Leerzeichen
<p>Dies ist ein Absatz mit zusätzlichen Leerzeichen.</p>Wenn ein Browser diesen Code rendert, wird der Text wie folgt angezeigt:
Beispiel: Gerendeter Text für einen Absatz mit zusätzlichen Leerzeichen
Dies ist ein Absatz mit zusätzlichen Leerzeichen.
Links
Der <a>-Tag, kurz für "Anker", erstellt Hyperlinks zu anderen Webseiten oder Ressourcen. Das href-Attribut innerhalb des <a>-Tags gibt die Ziel-URL oder den Pfad zur verlinkten Ressource an. Links können auf Text, Bilder oder andere HTML-Elemente angewendet werden und ermöglichen es Benutzern, zwischen verschiedenen Seiten zu navigieren oder auf zusätzliche Informationen zuzugreifen. Verwenden Sie beim Erstellen von Links klaren und beschreibenden Text, um den Zweck oder das Ziel des Links anzuzeigen.
Bilder
Der <img>-Tag bettet Bilder in Webseiten ein. Es ist ein selbstschließender Tag, was bedeutet, dass er keinen separaten Schließtag benötigt. Das src-Attribut gibt den Pfad oder die URL der Bilddatei an, während das alt-Attribut alternativen Text für Barrierefreiheit und Suchmaschinenoptimierung bereitstellt. Der alternative Text beschreibt den Inhalt des Bildes und wird angezeigt, wenn das Bild nicht geladen werden kann oder wenn ein Benutzer assistive Technologien wie Screenreader verwendet.
Listen
HTML hat zwei Arten von Listen:
| Listentyp | Tag | Beschreibung |
|---|---|---|
| Ungeordnet | <ul> |
Wird verwendet, wenn die Reihenfolge der Elemente nicht wichtig ist, typischerweise mit Aufzählungszeichen dargestellt |
| Geordnet | <ol> |
Wird verwendet, wenn die Reihenfolge der Elemente wichtig ist, mit nummerierten Markierungen dargestellt |
Jedes Element innerhalb einer Liste wird durch den <li>-Tag (Listenelement) dargestellt. Listen sind nützlich, um eine Reihe verwandter Elemente oder Schritte auf strukturierte Weise zu präsentieren.
Betonung und starke Betonung
Um Wörter oder Phrasen in Ihrem Text zu betonen, können Sie die <em>- und <strong>-Tags verwenden. Der <em>-Tag zeigt Betonung an und wird von Browsern typischerweise als kursiver Text dargestellt. Er vermittelt eine Änderung in der Bedeutung oder dem Ton des betonten Inhalts. Der <strong>-Tag zeigt starke Betonung an und wird typischerweise als fetter Text dargestellt. Er impliziert eine größere Wichtigkeit im Vergleich zum umgebenden Text. Verwenden Sie diese Tags sparsam, um Kernpunkte hervorzuheben oder die Aufmerksamkeit auf bestimmte Teile Ihres Inhalts zu lenken.
Beispiel: HTML-Code mit nicht übereinstimmenden Tags
<p>Dies ist ein Absatz.</div>In diesem Fall wird der öffnende <p>-Tag mit einem </div>-Tag geschlossen, was falsch ist. Die richtige Art, den Absatz zu schließen, ist:
Beispiel: Korrigierter HTML-Code für einen Absatz
<p>Dies ist ein Absatz.</p>