HTML5 & CSS3 Spickzettel: Tags, Eigenschaften und wie man HTML-Seiten mit einem Online-HTML-Viewer in der Vorschau anzeigt
Schwierigkeiten, sich an ein bestimmtes HTML-Tag oder eine CSS-Eigenschaft zu erinnern? Dieser Leitfaden ist für Sie. Dieses ultimative HTML-Cheat Sheet deckt die wichtigsten HTML5-Tags und CSS3-Eigenschaften ab, komplett mit praktischen Code-Snippets. Fragen Sie sich, wie man eine HTML-Seite in der Vorschau anzeigt, ohne einen lokalen Server? Entdecken Sie, wie Sie jedes Beispiel sofort testen und visualisieren können, indem Sie unseren integrierten Online-HTML-Viewer für einen schnelleren, effizienteren Workflow nutzen.
Die ultimative HTML5-Tag-Liste: Strukturieren Sie Ihre Webinhalte
HTML (HyperText Markup Language) ist das Rückgrat jeder Webseite. HTML5 führte semantische Elemente ein, die Ihren Inhalten eine klarere Bedeutung geben und sowohl die Zugänglichkeit als auch die SEO verbessern. Hier ist eine Aufschlüsselung der Tags, die Sie am häufigsten verwenden werden.
Kern-Dokumentstruktur & Metadaten
Diese Tags bilden das Skelett jedes HTML-Dokuments und liefern wesentliche Informationen für den Browser und Suchmaschinen.
| Tag | Beschreibung |
|---|---|
<!DOCTYPE html> | Deklariert den Dokumenttyp als HTML5. |
<html> | Das Wurzelelement einer HTML-Seite. |
<head> | Enthält Metainformationen über das Dokument. |
<title> | Legt den Titel für den Browser-Tab und die Suchergebnisse fest. |
<meta> | Bietet Metadaten wie Zeichensatz, Viewport-Einstellungen und Beschreibung. |
<link> | Verknüpft externe Ressourcen, am häufigsten CSS-Stylesheets. |
<script> | Bettet ausführbaren JavaScript-Code ein oder verknüpft ihn damit. |
<body> | Enthält den sichtbaren Seiteninhalt. |
Semantische Sektionierungs- & Gruppierungselemente
Verwenden Sie diese Tags, um Ihre Inhalte logisch zu strukturieren und verschiedenen Teilen des Seitenlayouts Bedeutung zu verleihen.
| Tag | Beschreibung |
|---|---|
<header> | Repräsentiert einführende Inhalte für einen Abschnitt oder die gesamte Seite. |
<nav> | Enthält Navigations-Links. |
<main> | Gibt den Hauptinhalt des Dokuments an. |
<article> | Definiert eine in sich geschlossene Komposition (z. B. einen Blog-Post, Forenbeitrag). |
<section> | Repräsentiert einen eigenständigen Abschnitt eines Dokuments. |
<aside> | Definiert Inhalte, die neben dem Hauptinhalt stehen (z. B. eine Seitenleiste). |
<footer> | Repräsentiert die Fußzeile für einen Abschnitt oder die gesamte Seite. |
<div> | Ein generischer Container für Fließtext ohne semantische Bedeutung. |
Text-Level-Semantik & Hyperlinks
Diese Tags werden verwendet, um Text zu formatieren und ihm Bedeutung zu verleihen, von Überschriften und Absätzen bis hin zu Links.
| Tag | Beschreibung |
|---|---|
<h1> bis <h6> | Überschriftenebenen, wobei <h1> am wichtigsten ist. |
<p> | Definiert einen Absatz. |
<a> | Erstellt einen Hyperlink. Das href-Attribut gibt die URL an. |
<strong> | Zeigt Text mit starker Betonung an (typischerweise fett). |
<em> | Zeigt hervorgehobenen Text an (typischerweise kursiv). |
<span> | Ein generischer Inline-Container für Phraseninhalte. |
<br> | Fügt einen einzelnen Zeilenumbruch ein. |
<blockquote> | Definiert einen Abschnitt, der aus einer anderen Quelle zitiert wird. |
Formulare, Eingaben & interaktive Elemente
Formulare sind entscheidend für die Benutzerinteraktion. Diese Tags ermöglichen es Ihnen, Benutzereingaben zu sammeln.
| Tag | Beschreibung |
|---|---|
<form> | Ein Container zum Erstellen eines HTML-Formulars für Benutzereingaben. |
<input> | Das vielseitigste Formularelement; der Typ wird durch das type-Attribut definiert (z. B. text, password, checkbox, submit). |
<textarea> | Definiert ein mehrzeiliges Texteingabefeld. |
<label> | Definiert eine Beschriftung für ein <input>-Element. |
<button> | Definiert eine klickbare Schaltfläche. |
<select> | Erstellt eine Dropdown-Liste. |
<option> | Definiert eine Option innerhalb einer <select>-Liste. |
Medien, Einbettungen & externe Inhalte
Erwecken Sie Ihre Seiten mit Bildern, Videos und anderen eingebetteten Inhalten zum Leben.
| Tag | Beschreibung |
|---|---|
<img> | Bettet ein Bild ein. Benötigt src (Source) und alt (Alternativtext)-Attribute. |
<video> | Bettet einen Videoplayer ein. |
<audio> | Bettet einen Audioplayer ein. |
<iframe> | Gibt einen Inline-Frame an, um ein anderes Dokument innerhalb des aktuellen HTML-Dokuments einzubetten. |
Listen & Tabellen: Daten strukturiert organisieren
Strukturieren Sie zusammengehörige Elemente oder tabellarische Daten übersichtlich mit Listen und Tabellen.
| Tag | Beschreibung |
|---|---|
<ul> | Definiert eine unsortierte (Aufzählungs-)Liste. |
<ol> | Definiert eine sortierte (nummerierte) Liste. |
<li> | Definiert ein Listenelement innerhalb einer <ul> oder <ol>. |
<table> | Definiert eine Tabelle. |
<tr> | Definiert eine Zeile in einer Tabelle. |
<th> | Definiert eine Kopfzelle in einer Tabelle. |
<td> | Definiert eine Standard-Datenzelle in einer Tabelle. |
<caption> | Definiert eine Tabellenüberschrift. |
Essentielle CSS3-Eigenschaftenliste: Gestalten Sie Ihre Webseiten wie ein Profi
CSS (Cascading Style Sheets) erweckt Ihr HTML zum Leben und steuert Layout, Farben, Schriftarten und das gesamte visuelle Erscheinungsbild. Dieses CSS-Cheat Sheet deckt die Eigenschaften ab, die Sie benötigen, um jedes Design zu beherrschen.
CSS-Selektoren & Spezifität
Selektoren zielen auf die HTML-Elemente ab, die Sie gestalten möchten. Das Verständnis dieser ist der erste Schritt zur effektiven Nutzung von CSS.
| Selektor | Beispiel | Beschreibung |
|---|---|---|
| Typ | p | Wählt alle <p>-Elemente aus. |
| Klasse | .my-class | Wählt alle Elemente mit class="my-class" aus. |
| ID | #my-id | Wählt das einzelne Element mit id="my-id" aus. |
| Attribut | [href] | Wählt alle Elemente mit einem href-Attribut aus. |
| Nachfahrenselektor | article p | Wählt alle <p>-Elemente innerhalb eines <article> aus. |
| Pseudo-Klasse | a:hover | Wählt einen Link aus, wenn der Benutzer mit der Maus darüber fährt. |
Das Box-Modell & Größenanpassung
Jedes Element auf einer Seite ist eine rechteckige Box. Das Box-Modell definiert, wie seine Größe, sein Padding, sein Rahmen und sein Abstand zusammenwirken.
| Eigenschaft | Beispielwerte | Beschreibung |
|---|---|---|
width | 100px, 50%, auto | Legt die Breite eines Elements fest. |
height | 100px, 50vh, auto | Legt die Höhe eines Elements fest. |
padding | 10px, 5px 10px | Legt den Abstand zwischen dem Inhalt und dem Rand fest. |
border | 1px solid black | Eine Kurzschreibweise, um Breite, Stil und Farbe des Rahmens festzulegen. |
margin | 10px, 5px 10px | Legt den Abstand außerhalb des Rahmens zwischen Elementen fest. |
box-sizing | border-box | Ändert, wie width und height berechnet werden, einschließlich Padding und Border. |
Typografie & Textgestaltung
Steuern Sie das Aussehen von Texten, um lesbare und ästhetisch ansprechende Inhalte zu erstellen.
| Eigenschaft | Beispielwerte | Beschreibung |
|---|---|---|
font-family | "Arial", sans-serif | Legt die Schriftart für ein Element fest. |
font-size | 16px, 1.2em, 1rem | Legt die Textgröße fest. |
font-weight | normal, bold, 700 | Legt die Dicke der Schriftart fest. |
color | black, #333, rgb(0,0,0) | Legt die Textfarbe fest. |
text-align | left, center, right | Richtet den Text innerhalb eines Elements aus. |
line-height | 1.5 | Legt den Abstand zwischen Textzeilen fest. |
Flexible Layouts mit Flexbox
Flexbox ist ein eindimensionales Layoutmodell zur Anordnung von Elementen in Zeilen oder Spalten. Es macht die Erstellung responsiver Layouts intuitiv.
| Eigenschaft (Container) | Beispielwerte | Beschreibung |
|---|---|---|
display | flex | Aktiviert das Flexbox-Layoutmodell. |
flex-direction | row, column | Definiert die Richtung der Hauptachse. |
justify-content | center, space-between | Richtet Elemente entlang der Hauptachse aus. |
align-items | center, stretch | Richtet Elemente entlang der Querachse aus. |
flex-wrap | nowrap, wrap | Ermöglicht das Umbrechen von Elementen in mehrere Zeilen. |
Gitterbasierte Layouts mit CSS Grid
CSS Grid ist ein leistungsstarkes zweidimensionales Layoutsystem, das es Ihnen ermöglicht, sowohl Spalten als auch Zeilen gleichzeitig zu steuern.
| Eigenschaft (Container) | Beispielwerte | Beschreibung |
|---|---|---|
display | grid | Aktiviert das Grid-Layoutmodell. |
grid-template-columns | 1fr 1fr 100px, repeat(3, 1fr) | Definiert die Spalten des Gitters. |
grid-template-rows | auto 100px | Definiert die Zeilen des Gitters. |
gap | 10px | Legt die Größe des Abstands zwischen den Gitterzellen fest. |
Hintergründe, Ränder & Schatten
Verleihen Sie Ihren Elementen Tiefe und Stil mit diesen dekorativen Eigenschaften.
| Eigenschaft | Beispielwerte | Beschreibung |
|---|---|---|
background-color | lightblue, #f0f0f0 | Legt die Hintergrundfarbe eines Elements fest. |
background-image | url('image.jpg') | Legt ein Hintergrundbild fest. |
border-radius | 5px, 50% | Rundet die Ecken des Rahmens eines Elements. |
box-shadow | 10px 5px 5px black | Fügt einen Schatteneffekt um den Rahmen eines Elements hinzu. |
Übergänge, Transformationen & Animationen
Erstellen Sie dynamische und interaktive Benutzeroberflächen mit flüssigen visuellen Effekten.
| Eigenschaft | Beispielwerte | Beschreibung |
|---|---|---|
transition | all 0.3s ease-in-out | Ermöglicht sanfte Eigenschaftsänderungen über eine bestimmte Dauer. |
transform | rotate(45deg), scale(1.2) | Wendet eine 2D- oder 3D-Transformation auf ein Element an. |
animation | slide-in 1s forwards | Eine Kurzschreibweise zum Anwenden einer benannten Animation. |
Warum Html Viewer Ihr bevorzugter Online-HTML-Editor & -Viewer ist
Ein großartiger Spickzettel ist eine Sache, aber die Fähigkeit, sofort Ergebnisse anzuwenden und zu sehen, beschleunigt das Lernen und die Entwicklung wirklich. Hier wird ein Online-HTML-Editor wie Html Viewer Ihr mächtigster Verbündeter.
Sofortige Live-Vorschau für schnelles Experimentieren
Kopieren Sie jeden Code-Schnipsel aus diesem Leitfaden, fügen Sie ihn in unseren Editor ein und sehen Sie ihn in Echtzeit gerendert. Sie müssen keine Dateien speichern, Fenster wechseln oder Ihren Browser aktualisieren. Diese sofortige Rückkopplungsschleife eignet sich perfekt zum Perfektionieren von CSS-Eigenschaften oder zum Verstehen, wie ein neues HTML-Tag Ihre Inhalte strukturiert. Sie können diese Snippets jetzt testen und die Magie selbst erleben.
Code mühelos bearbeiten, schön formatieren und minifizieren
Unser Tool ist mehr als nur ein Viewer. Es ist eine komplette Workflow-Lösung. Wenn Sie Code aus verschiedenen Quellen gesammelt haben, formatiert ein einziger Klick auf unsere „Beautify“-Funktion ihn in eine saubere, lesbare Struktur. Wenn Sie bereit zur Bereitstellung sind, komprimiert die „Minify“-Funktion Ihren Code und optimiert ihn für schnellere Seitenaufrufe. Diese All-in-One-Funktionalität optimiert Ihren gesamten Codierungsprozess.
Zugriff überall und jederzeit: Keine Einrichtung erforderlich
Vergessen Sie die Installation von schwerfälligen IDEs oder die Konfiguration komplexer lokaler Umgebungen. Dieser Online-HTML-Editor läuft vollständig in Ihrem Browser. Ob Sie auf einem Laptop in einem Café oder an einem gemeinsamen Computer in einem Labor sitzen, Ihre leistungsstarke HTML- und CSS-Testumgebung (Sandbox) ist immer nur eine URL entfernt und bereit, wenn die Inspiration zuschlägt.
Meistern Sie die Webentwicklung schneller: Ihr unverzichtbarer HTML- & CSS-Spickzettel
Speichern Sie diese Seite als Ihren definitiven Leitfaden zu den Grundlagen von HTML5 und CSS3. Nutzen Sie ihn, um schnell das richtige Tag oder die richtige Eigenschaft zu finden, deren Syntax zu verstehen und Ihre Projekte mit Zuversicht zu erstellen. Wichtiger noch: Kombinieren Sie dieses Wissen mit der praktischen Leistung unseres Tools. Jeder Snippet hier ist eine Gelegenheit zum Experimentieren und Lernen. Gehen Sie zum HtmlViewer.cc Editor, um diesen Spickzettel zum Leben zu erwecken und Ihren Codierungs-Workflow noch heute zu transformieren.
Häufig gestellte Fragen zu HTML- & CSS-Spickzetteln
Wie kann ich schnell HTML-Code von einer Website oder einer lokalen Datei anzeigen?
Der einfachste Weg ist die Verwendung eines Online-HTML-Viewers. Mit unserem Tool können Sie Code direkt einfügen, eine HTML-Datei hochladen oder sogar eine URL eingeben, um HTML-Quellcode von einer Live-Website abzurufen und anzuzeigen. Nach dem Laden können Sie den Code und seine visuelle Vorschau nebeneinander betrachten, was es perfekt zum Lernen und Debuggen macht.
Was ist ein HTML- & CSS-Spickzettel und warum ist er nützlich?
Ein HTML- & CSS-Spickzettel ist ein prägnanter Referenzleitfaden, der häufig verwendete Tags, Eigenschaften, Syntax und Konzepte auflistet. Er ist für Entwickler aller Niveaus unglaublich nützlich, da er Zeit spart, die Notwendigkeit des Auswendiglernens jedes Details eliminiert und als schnelle, zuverlässige Ressource für die Fehlerbehebung und den effizienten Aufbau von Webseiten dient.
Kann ich diese HTML5- & CSS3-Code-Snippets sofort online testen?
Absolut! Genau dafür ist unsere Plattform konzipiert. Sie können jedes Beispiel aus diesem Leitfaden kopieren, in den Editor auf unserer Homepage einfügen und das Ergebnis sofort im Live-Vorschaufenster sehen. Experimentieren Sie frei und verstehen Sie wirklich, wie verschiedene Codekombinationen zum Leben erweckt werden.
Wie stelle ich sicher, dass mein HTML und CSS zugänglich und gut strukturiert sind?
Beginnen Sie mit der korrekten Verwendung semantischer HTML5-Tags (<main>, <nav>, <article>), da diese eine inhärente Bedeutung haben. Stellen Sie bei CSS ausreichenden Farbkontrast sicher und verwenden Sie responsive Einheiten wie rem (root em) für Schriftgrößen. Eine gute Praxis ist es, Ihren Code in unseren Editor einzufügen und die „Beautify“-Funktion zu verwenden. Dies formatiert Ihren Code mit ordnungsgemäßer Einrückung, was die Überprüfung der Struktur und das Erkennen potenzieller Probleme erheblich erleichtert.