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:
Beispiel: |
<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: |
<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: |
<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:
Beispiel: |
<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: |
<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:
Beispiel: |
<button></button> | Erzeugt eine Schaltfläche, mit Standard-Styling.
Beispiel: |
<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:
Beispiel: |
<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:
Beispiel: |