HTML und CSS Cheat Sheet: durchsuchbar, druckbar, mit Demos | We.Inc
Durchsuche alle gängigen HTML-Tags und CSS-Eigenschaften auf einem Blatt: semantisches Layout, Text, Formulare, Medien, Selektoren, Einheiten, Layout und Gestaltung, mit kleinen Live-Demos und einer druckfreundlichen Ansicht.
HTML und CSS Cheat Sheet
Dieses Blatt listet die HTML-Tags und CSS-Eigenschaften auf, die auf fast jeder Website vorkommen, gruppiert nach Aufgabe: Dokument-Grundgerüst, semantisches Layout, Text, Listen, Medien, Formulare, Selektoren, Einheiten, Layout und visuelle Gestaltung. Tippe in den Filter, um einen Eintrag zu finden, öffne eine Mini-Demo, um ihn in Aktion zu sehen, oder klicke auf Drucken für eine saubere Papierversion.
Was auf dem Blatt steht
Teil
Einträge
HTML
CSS
Mit Live-Demo
Filtere nach Stichwort oder wechsle zwischen HTML und CSS, und die Liste wird beim Tippen kürzer. Einträge mit Demo öffnen eine kleine Vorschau in einer Sandbox. Die Druckansicht blendet die Bedienelemente aus und hält die Tabelle jeder Gruppe auf der Seite zusammen.
Gib ein Tag, eine Eigenschaft oder eine Aufgabe in das Filterfeld ein, zum Beispiel table, sticky oder email.
Grenze mit den Buttons auf HTML oder CSS ein oder lass beides aktiv.
Klicke bei einem Eintrag auf Demo zeigen, um ihn gerendert zu sehen, und auf Kopieren, um die Syntax zu übernehmen.
Klicke auf Drucken, um eine Papier- oder PDF-Version ohne die Seitenelemente zu erhalten.
Greif zu einem semantischen Element, bevor du ein div nimmst. header, nav, main und footer liefern Screenreadern Orientierungspunkte gratis.
Jedes Formularelement braucht ein Label. Platzhaltertext verschwindet beim Tippen und ist kein Ersatz.
Beginne jedes Stylesheet mit box-sizing: border-box für alle Elemente. Breiten bedeuten dann das, was du erwartest.
Nutze rem für Schriftgrößen und Abstände, die der Texteinstellung des Lesers folgen sollen, und px für haarfeine Rahmen.
Häufige Fragen
Wie viele HTML-Tags gibt es?
Der HTML Living Standard definiert weit über hundert Elemente, aber alltägliche Seiten nutzen ein paar Dutzend. Dieses Blatt deckt die ab, denen du auf fast jeder Website begegnest; MDN führt die vollständige Elementreferenz.
Was ist der Unterschied zwischen einem Tag und einem Element?
Ein Tag ist das Markup, das du tippst, etwa <p> oder </p>. Ein Element ist das Ganze, das der Browser daraus baut: das Start-Tag, sein Inhalt und das End-Tag. Leere Elemente wie <img> und <br> haben überhaupt kein End-Tag.
Kann ich dieses Cheat Sheet ausdrucken?
Ja. Der Button Drucken öffnet den Druckdialog deines Browsers mit einem Layout, das Filter, Buttons und Demos weglässt und die Syntaxtabellen behält. Wähle Als PDF speichern, um eine digitale Kopie zu behalten.
Sollte ich zuerst CSS oder ein Framework wie Tailwind lernen?
Lerne zuerst die CSS-Eigenschaften. Utility-Frameworks sind Kurzschreibweisen dafür. Wenn du weißt, dass p-4 padding: 1rem bedeutet, fällt dir das Framework leichter, und beim Debuggen zeigen die Entwicklertools immer das zugrunde liegende CSS.
Wie sich HTML und CSS die Arbeit teilen
HTML sagt, was jedes Inhaltsstück ist: eine Überschrift, eine Liste, ein Formularfeld, ein Navigationsblock. CSS sagt, wie es aussieht und wo es hingehört. Hält man beides getrennt, kann ein Stylesheet Hunderte Seiten neu gestalten, und das Markup bleibt für Suchmaschinen und assistive Technologien lesbar.
Wenn du unsicher bist, welches Element du nehmen sollst, frag dich, wie der Inhalt in einem gedruckten Dokument heißen würde. Eine Liste von Schritten ist ein ol, eine Sammlung von Fakten ist ein dl oder eine table, eine Randnotiz ist ein aside.
CSS-Regeln lesen
Eine Regel besteht aus einem Selektor und geschweiften Klammern mit Paaren aus Eigenschaft und Wert, getrennt durch Semikolons. Zielen zwei Regeln auf dasselbe Element, gewinnt der spezifischere Selektor; bei Gleichstand gewinnt die Regel, die weiter unten im Stylesheet steht.
Alles zusammen auf einer kleinen Seite
Semantisches Markup plus ein paar Zeilen CSS
Ein Header, Hauptinhalt mit einem Formular und ein Footer, gestaltet mit einer Handvoll Eigenschaften aus dem Blatt.
Erste Zeile jeder Seite; aktiviert den Standardmodus
Wurzelelement; lang legt die Sprache der Seite fest
Metadaten, Titel, Verweise auf CSS und Skripte
Zeichensatz, Viewport, Beschreibung und Social-Tags
Bindet Stylesheets, Icons und Preloads ein
Lädt JavaScript; defer führt es nach dem Parsen aus
Einleitung oder obere Leiste einer Seite oder eines Abschnitts
Ein Block mit wichtigen Navigationslinks
Der eindeutige Hauptinhalt; einer pro Seite
Eine thematische Gruppe von Inhalten, meist mit Überschrift
In sich geschlossener Inhalt wie ein Beitrag oder eine Produktkarte
Verwandter, aber nebensächlicher Inhalt, etwa eine Seitenleiste
Abschließende Infos: Kontakt, Rechtliches, Links
Natives Aufklapp-Widget, ganz ohne Skript
Ein modales oder nicht modales Dialogfenster
Überschriften in Reihenfolge; ein h1 pro Seite ist üblich
Ein Absatz
Starke Wichtigkeit und Betonung, standardmäßig fett und kursiv
Hervorgehobener Text
Inline-Code und vorformatierte Blöcke
Ein längeres Zitat
Abkürzung mit ihrer Langform
Ein maschinenlesbares Datum oder eine Uhrzeit
Zeilenumbruch im Text; thematischer Umbruch zwischen Blöcken
Ungeordnete und geordnete Listen
Beschreibungsliste aus Paaren von Name und Wert
Tabellendaten mit Beschriftung, Kopf und Körper
Kopfzelle; scope verknüpft sie mit ihrer Spalte oder Zeile
Ein Link; ergänze target und rel für neue Tabs
Ein Bild; alt, width und height werden erwartet
Art Direction und Format-Fallbacks
In sich geschlossenes Medium mit Bildunterschrift
Eingebettetes Video
Bettet eine andere Seite ein
Inline-Vektorgrafik
Umschließt Eingabefelder und sendet sie ab
Benennt ein Bedienelement; ein Klick darauf fokussiert es
Text, E-Mail, Zahl, Datum, Checkbox, Radio und mehr
Dropdown-Liste
Mehrzeiliges Texteingabefeld
Ein Button; setze type, um versehentliches Absenden zu vermeiden
Gruppiert zusammengehörige Bedienelemente unter einer Beschriftung
Eingebaute Prüfungen vor dem Absenden
Selektoren für Elementname, Klasse und ID
Beliebige Tiefe gegenüber nur direkten Kindern
Nächstes Geschwister oder jedes spätere Geschwister
Trifft nach Vorhandensein oder Wert eines Attributs
Zustände für Mauszeiger darüber und Tastaturfokus
Wählt Elemente nach Position aus
Auswahl über das Elternelement und Gruppierung von Selektoren
Erzeugter Inhalt vor oder nach einem Element
Absoluter CSS-Pixel
Relativ zur Schriftgröße der Wurzel / zur Schriftgröße des Elements
Relativ zum Elternelement (welche Dimension, hängt von der Eigenschaft ab)
Viewport-Einheiten; dvh berücksichtigt mobile Werkzeugleisten
Breite des Zeichens 0, praktisch für die Zeilenlänge
Anteil am freien Platz in einem Grid
Fließender Wert zwischen einem Minimum und einem Maximum
Breite schließt Padding und Rahmen ein
Abstand außerhalb und innerhalb des Rahmens
Wie die Box am Layout teilnimmt
Eindimensionale Zeilen oder Spalten
Zweidimensionale Zeilen und Spalten
Nimmt eine Box aus dem normalen Fluss oder fixiert sie darin
Stapelreihenfolge positionierter Elemente
Was mit Inhalt passiert, der nicht hineinpasst
Styles für eine Bildschirmgröße oder Einstellung
Textfarbe und Hintergrund
Stärke, Größe, Zeilenhöhe und Schriftfamilie in einer Zeile
Umriss und abgerundete Ecken
Schlagschatten um die Box
Transparenz des gesamten Elements
Verschieben, drehen, skalieren oder neigen, ohne das Layout zu beeinflussen