HTML-CheatSheet

Ein Spickzettel mit den wichtigsten HTML-Tags

Grundlegende Tags (1. Semester MKD)

Tag Funktion/Attribute/Beispiel
<a></a> Per anchor-Tag können Texte oder Bilder verlinkt werden

Attribute:

  • href: Linkziel als komplette URL oder Name einer HTML-Datei
  • target: Link in neuem Tab öffnen per Eigenschaft "_blank"
  • title: zusätzliche Beschreibung des Links

Beispiel:
<a href="http://www.google.de" target="_blank" title="zur Google-Suche">Google öffnen</a>

<article></article> Container-Element, das einen artikelartigen Inhalt auszeichnen sollte, z.B. eine News-Meldung oder einen Blog-Beitrag.
<b></b>  Veralteter Tag für "bold"/fetten Text, moderne Variante siehe <strong>
<body></body> Der <body>-Tag umschließt den sichtbaren Bereich einer Website und ist somit ein zentraler Knoten in der HTML-Struktur
<br> Erzeugt einen (manuellen) Zeilenumbruch im Text (ohne einen neuen Absatz zu beginnen). Sollte nur nach ganzen Sätzen verwendet werden und nicht innerhalb eines Satzes, da die genaue Laufweite des Textes im Layout auf unterschiedlichen Bildschirmgrößen und Browsern variieren kann.
<div></div> Allgemeines Container-Element: strukturiert Inhalte und hilft bei der Umsetzung des Layouts per CSS. Wenn sich die Inhalte inhaltlich einem der neueren "semantischen" HTML5-Tags, wie <header>, <article>, <footer> zuordnen lassen, sollte man stattdessen diese Tags verwenden!
<em></em> Tag, um Text hervorzuheben/zu betonen ("emphasize"). Der dadurch ausgezeichnete Text wird standardmäßig kursiv dargestellt.

Beispiel:
Dieses Wort ist <em>hervorgehoben</em>.

<footer></footer> Container-Element, um einen Fußbereich oder eine Fußzeile einer Website auszeichnen. Enthält oft Elemente wie Copyright, Social-Media-Links, nochmals wiederholte Navigationsmenüs ...
<h1></h1> bis <h6></h6> Auszeichnung von Überschriften (header) von der wichtigsten Überschrift (<h1>) bis zur sechsten Ebene (<h6>).

Beispiel:
<h1>Die Hauptüberschrift<h1>
<h2>Eine Überschrift der zweiten Ebene</h2>

<head></head> Umschließt den Kopfbereich der Website, der Meta-Informationen wie den Title der Site, den Zeichensatz, Stylesheets, Skripte oder Angaben für Suchmaschinen enthält
<header></header> Container-Element, um einen Kopfbereich oder eine Kopfzeile einer Website auszeichnen. Enthält Elemente wie das Logo, die Hauptnavigation oder Suchfelder ...
<html></html> Der oberste Knoten der HTML-Struktur, in dem die Knoten <head> und <body> enthalten sind.
<i></i>  Veralteter Tag für "italic"/kursiven Text, moderne Variante siehe <em>
<img> Mit Hilfe dieses Tags lassen sich (externe) Bilder (Formate: jpg, png, gif, svg) in die Seite laden.

Attribute:

  • src: Bildquelle als absolute URL oder als relativer Pfad zur Bilddatei
  • alt: Text wird angezeigt, falls das Bild nicht geladen werden konnte
  • title: Metainformationen/Beschreibung des Bildes (wichtig für Zugänglichkeit)

Beispiel:
<img src="see.jpg" alt="Bild von einem See" title="Bild von einem See">

<li></li> Auszeichnung eines Listenelements bzw. Aufzählungspunktes. Muss immer innerhalb einer geordneten Liste (<ol>) oder ungeordneten Liste (<ul>) liegen.
<meta> Meta-Tags werden innerhalb des <head>-Bereichs platziert und enthalten weitere Attribute, die die Information transportieren.

Beispiel:
<meta charset="UTF-8">

<ol></ol> Geordnete Liste ("ordered list"): Aufzählung mit vorgegebener Reihenfolge (1., 2., 3., ...). Die Aufzählungspunkte werden innerhalb der <ol> als <li> ausgezeichnet.
<p></p> Umschließt einen Absatz ("paragraph") und strukturiert den Fließtext. Neben den Überschriften (<h1> bis <h6>) ist dies einer der zentralen und am häufigsten verwendeten Tags in HTML.
<strong></strong> Tag, um Text hervorzuheben/zu betonen (ähnlich <em>). Der dadurch ausgezeichnete Text wird standardmäßig fett dargestellt.
<style></style> Innerhalb dieses Tags kann ein Inline-Stylesheet in CSS erstellt werden. Normalerweise wird dieses innerhalb des <head>-Tags platziert.
<title></title> Umschließt den Titel der Website, der z.B. auf dem Browsertab oder in Bookmarks angezeigt wird.
<ul><ul> Ungeordnete Liste ("unordered list"): Aufzählung ohne hierarchische Reihenfolge (Bullet Points). Die Aufzählungspunkte werden innerhalb der <ul> als <li> ausgezeichnet.

Weitere Tags (3. Semester MKD)

Tag Funktion/Attribute/Beispiel
<audio></audio> Mit diesem Tag kann Sound/Musik innerhalb der Website wiedergegeben werden. Als Dateiformat/Codec sollte momentan mp3 verwendet werden, das auf unterschiedlichen Plattformen und Browsern unterstützt wird.

Attribute:

  • src: Quelle als absolute URL oder als relativer Pfad zur Audiodatei
  • autoplay: Führt dazu, dass der Sound oder die Musik sofort beim Laden der Seite gestartet wird
  • controls: Wird dieses Attribut gesetzt, so erhält man Steuerelemente, wie Play, Pause, Lautstärke
  • loop:  Führt dazu, dass der Sound oder die Musik unendlich oft wiederholt wird

Beispiel:
<audio src="song.mp3" autoplay controls loop>Dieser Browser unterstützt keinen Audio-Tag</audio>

<button></button> Erzeugt eine Schaltfläche, mit Standard-Styling.

Beispiel:
<button class="clickbtn">Ein Button</button>

<iframe> Mit diesem Tag kann man den Inhalt einer anderen Website in die eigene Website laden. Dies wird z.B. eingesetzt, um ohne großen Aufwand ein Youtube-Video oder Social-Media-Inhalte auf der eigenen Website anzuzeigen.

Attribute:

  • src: Quelle als absolute URL der Website
  • width: Breite in Pixeln
  • height: Höhe in Pixeln

Beispiel:
<iframe src="https://www.google.com" width="600" height="400">

<section></section> Container-Element, das einen Abschnitt der Seite auszeichnen sollte. Auf modernen Websites ist dies ein wichtiges Strukturierungs- und Layoutelement.
<span></span> Ist ein flexibel einzusetzendes Element mit der CSS-Voreinstellung "display: inline". Es erzeugt also keine neue Zeile im Layout und ist ähnlich wie <strong> und <em> zu verwenden, hat aber keine vorgegebene (semantische) Funktion.
<video></video> Mit diesem Tag kann ein Video innerhalb der Website wiedergegeben werden. Als Dateiformat/Codec sollte momentan mp4/h.264 verwendet werden, das auf unterschiedlichen Plattformen und Browsern unterstützt wird.

Attribute:

  • src: Quelle als absolute URL oder als relativer Pfad zur Videodatei
  • autoplay: Führt dazu, dass das Video sofort beim Laden der Seite gestartet wird
  • controls: Wird dieses Attribut gesetzt, so erhält man Steuerelemente, wie Play, Pause, Lautstärke, Vollbild
  • loop:  Führt dazu, dass das Video unendlich oft wiederholt wird
  • poster: Vorschaubild für das Video verlinken (URL oder Pfad zu einer Bilddatei)
  • width: Breite des Videos in Pixeln einstellen
  • height: Höhe des Videos in Pixeln einstellen

Beispiel:
<video src="film.mp4" width="1280" height="720" poster="thumbnail.jpg" controls>Dieser Browser unterstützt den video-Tag nicht</video>