Glossar

Ein häufiger Irrtum ist, Duplicate Content mit nofollow lösen zu wollen. Dieses Attribut betrifft jedoch nur Links, nicht Seiten.

• nofollow beeinflusst keine Indexierung.
• Suchmaschinen erkennen Duplicate Content trotzdem.
• Keine Steuerung der bevorzugten URL möglich.

Duplicate Content lässt sich auf verschiedene Arten steuern. Welche Lösung sinnvoll ist, hängt vom Zweck der Seite ab.

• canonical = mehrere URLs, ein Hauptinhalt.
• noindex = Seite soll nicht in der Suche erscheinen.
• 301-Redirect = doppelte Seite dauerhaft ersetzen.

rel="canonical" legt fest, welche URL die bevorzugte Version einer Seite ist, wenn identische oder sehr ähnliche Inhalte unter mehreren URLs erreichbar sind.

• Signal an Suchmaschinen, welche Seite indexiert werden soll.
• Verhindert Ranking-Verlust durch Duplicate Content.
• Andere Versionen bleiben weiterhin erreichbar.

Um Duplicate Content zu vermeiden, sollte klar definiert werden, welche Version einer Seite die Hauptversion ist.

• rel="canonical" = bevorzugte URL festlegen.
• noindex = Seite darf nicht im Suchindex erscheinen.
• 301-Weiterleitung = doppelte Seite dauerhaft zusammenführen.

Duplicate Content bezeichnet identische oder sehr ähnliche Inhalte, die unter mehreren URLs erreichbar sind. Suchmaschinen müssen dann entscheiden, welche Version angezeigt wird.

• Kann intern (eigene Website) oder extern (mehrere Websites) auftreten.
• Ist kein direkter „Penalty-Faktor“, kann aber Rankings schwächen.
• Suchmaschinen wählen selbst eine bevorzugte URL aus.

follow/nofollow und index/noindex steuern, wie Suchmaschinen mit Links und Seiten umgehen. Wichtig ist die Unterscheidung: Links werden verfolgt, Seiten werden indexiert.

• follow = Suchmaschinen dürfen einem Link folgen.
• nofollow = Suchmaschinen sollen einem Link nicht folgen.
• index = Seite darf im Suchindex erscheinen.
• noindex = Seite soll nicht im Suchindex erscheinen.

rel="ugc" kennzeichnet Links aus nutzergenerierten Inhalten wie Kommentaren, Foren oder Community-Beiträgen.

• rel = relationship, beschreibt die Beziehung des aktuellen Dokuments zum Linkziel.
• ugc = User Generated Content (Inhalte von Nutzern).

rel="sponsored" kennzeichnet Links, die im Zusammenhang mit Werbung, Sponsoring oder Affiliate-Partnerschaften stehen.

• rel = relationship, beschreibt die Beziehung des aktuellen Dokuments zum Linkziel.
• sponsored = bezahlter oder werblicher Link.

rel="nofollow" weist Suchmaschinen an, einem Link nicht zu folgen und ihn nicht zur Bewertung oder Weitergabe von Ranking-Signalen zu nutzen.

• rel = relationship, beschreibt die Beziehung des aktuellen Dokuments zum Linkziel.
• nofollow = Suchmaschinen sollen dem Link nicht folgen.

rel="external" beschreibt die Beziehung der Seite zu einem externen Link.

• rel = relationship, beschreibt die Beziehung des aktuellen Dokuments zum Linkziel.
• external = Link führt außerhalb der eigenen Seite.

rel="external" hat heute keine technische Pflichtfunktion, Google ignoriert es vollständig. Es dient hauptsächlich als semantischer Marker oder Hook für CSS/JavaScript und wird von Suchmaschinen nicht als SEO-Signal verwendet.

Ein HTML5-Element, das Inhalte ein- oder ausklappbar macht - ganz ohne JavaScript. In Kombination mit <summary> entsteht ein sogenanntes „Disclosure Widget“. Beim Öffnen fügt der Browser automatisch das Attribut open hinzu, auf das sich per CSS reagieren lässt.

Das klickbare Element innerhalb von <details>, das das Ein- und Ausklappen steuert. Der Inhalt von <summary> wird immer sichtbar angezeigt, während alles darunter beim Klick auf- oder zugeklappt wird. Lässt sich vollständig mit CSS gestalten.

Die erste Zeile in Script-Dateien, die dem Betriebssystem sagt, mit welchem Interpreter die Datei ausgeführt werden soll. #!/usr/bin/env node bedeutet: "Verwende Node.js zum Ausführen dieser Datei". Dadurch kann das Script direkt aufgerufen werden (z.B. ./script.js) statt node script.js.

Ein Reflow (auch Layout oder Relayout) tritt auf, wenn der Browser die Position und Größe von Elementen neu berechnen muss. Passiert bei Änderungen von Breite, Höhe, Position oder beim Hinzufügen/Entfernen von Elementen. Reflows sind performance-intensiv, da der gesamte Layout-Baum neu berechnet wird.

Ein Repaint tritt auf, wenn der Browser ein Element neu zeichnen muss, ohne dass sich das Layout ändert. Passiert z.B. bei Änderungen von Farben, Schatten oder Sichtbarkeit. Repaints sind weniger aufwendig als Reflows, sollten aber trotzdem minimiert werden für bessere Performance.

Graphics Processing Unit - Die Grafikkarte bzw. der Grafikprozessor. In der Webentwicklung wichtig für Hardware-Beschleunigung: CSS-Eigenschaften wie transform und opacity nutzen die GPU für flüssige Animationen statt die CPU zu belasten.

CSS-Transitions ermöglichen sanfte Übergänge zwischen verschiedenen Zuständen eines Elements. Du definierst, welche Eigenschaft sich ändern soll, wie lange es dauert und welche Beschleunigungskurve verwendet wird. Perfekt für Hover-Effekte und einfache Animationen.

Block Element Modifier - Eine Naming Convention für CSS-Klassen, die Code übersichtlich und wartbar macht. Block ist die Komponente, Element ein Teil davon, Modifier beschreibt eine Variation. Syntax: block__element--modifier

Ein CSS-Ansatz, bei dem Styling vom Kontext bzw. Parent-Element abhängt. Nutzt Descendant-Selektoren wie .sidebar .button, um Elemente unterschiedlich zu stylen je nachdem, wo sie sich befinden. Im Gegensatz zu Utility-First-Frameworks wie Tailwind.

Eine CSS-Klasse mit genau einem Zweck, z.B. .text-center oder .mb-4. Statt semantische Klassennamen zu verwenden, kombinierst du viele kleine Utility-Klassen direkt im HTML. Popularisiert durch Frameworks wie Tailwind CSS und Bootstrap.

Der Scope (Gültigkeitsbereich) bestimmt, wo auf eine Variable zugegriffen werden kann. Es gibt Global Scope (überall verfügbar), Function Scope (nur innerhalb der Funktion) und Block Scope (nur innerhalb von {} bei let und const).

Ein Attribut für <script>-Tags, das bewirkt, dass das Script parallel zum HTML-Parsing geladen wird, aber erst nach dem vollständigen Laden des DOM ausgeführt wird. Perfekt für Scripts, die auf DOM-Elemente zugreifen müssen. Behält die Reihenfolge der Scripts bei.

Parsen bedeutet, Code oder Daten zu analysieren und in eine strukturierte Form zu überführen, die der Computer verarbeiten kann. Der Browser parst HTML zu einem DOM, JavaScript-Code wird zu einem Abstract Syntax Tree (AST) geparst. Parsing ist der erste Schritt vor der Ausführung.

Änderungen in einem Git-Repository dauerhaft speichern. Ein Commit ist ein Snapshot deines Codes zu einem bestimmten Zeitpunkt mit einer Beschreibung der Änderungen. Du kannst jederzeit zu einem alten Commit zurückkehren oder die History durchsuchen.

Application Programming Interface - Eine Schnittstelle, über die verschiedene Programme miteinander kommunizieren können. APIs definieren, welche Anfragen gestellt werden können und wie die Antworten aussehen.

Das CSS Box Model beschreibt, wie Elemente aus verschiedenen Schichten aufgebaut sind: Content (Inhalt), Padding (Innenabstand), Border (Rahmen) und Margin (Außenabstand). Wichtig für Layout und Spacing.

Ein HTML-Attribut, das verwendet wird, um Elemente zu gruppieren und mit CSS oder JavaScript anzusprechen. Eine Klasse kann mehrfach auf einer Seite verwendet werden. Im CSS wird sie mit einem Punkt (.) selektiert.

Document Object Model - Eine Baumstruktur, die HTML-Dokumente repräsentiert. JavaScript kann das DOM manipulieren, um Inhalte dynamisch zu ändern, Elemente hinzuzufügen oder zu entfernen.

Ein CSS-Layout-Modell, das flexible Container erstellt. Elemente können horizontal oder vertikal ausgerichtet, zentriert und automatisch verteilt werden. Ideal für responsive Designs.

display: flex; justify-content: center;

Ein Versionskontrollsystem, das Änderungen am Code verfolgt. Ermöglicht Zusammenarbeit im Team, Rückkehr zu früheren Versionen und parallele Entwicklung in Branches.

CSS Grid Layout ist ein zweidimensionales Layout-System für komplexe Layouts. Elemente werden in Zeilen und Spalten angeordnet. Sehr mächtig für moderne Webdesigns.

Ein Designansatz, bei dem Websites sich automatisch an verschiedene Bildschirmgrößen anpassen. Nutzt Media Queries, flexible Layouts und relative Einheiten.

HTML-Tags, die die Bedeutung des Inhalts beschreiben, nicht nur das Aussehen. Beispiele: <header>, <nav>, <article>, <footer>. Wichtig für SEO und Accessibility.

Auch Custom Properties genannt. Ermöglichen wiederverwendbare Werte in CSS. Werden mit -- definiert und mit var() verwendet. Perfekt für Farbschemata und Design-Systeme.

Eine JavaScript-Methode, um auf Benutzerinteraktionen zu reagieren (z.B. Klicks, Hover, Tastatureingaben). Bindet eine Funktion an ein Event.

Markup bezeichnet die Auszeichnungssprache, mit der Inhalte, Struktur und Bedeutung einer Webseite beschrieben werden. In HTML5 besteht das Markup aus Elementen, Attributen und Werten, die gemeinsam den Aufbau des Dokuments definieren. Elemente und Attribute werden in HTML5 grundsätzlich kleingeschrieben.

z-index legt die Stapelreihenfolge von positionierten Elementen fest. Elemente mit höheren Werten liegen über Elementen mit niedrigeren Werten. Funktioniert nur bei Elementen, deren position auf relative, absolute, fixed oder sticky gesetzt ist. Normale statische Elemente (position: static) ignorieren den z-index.

Fast jedes HTML-Element kann z-index nutzen, solange du seine Position auf relative, absolute, fixed oder sticky setzt.

relative: Element bleibt im Fluss, kann aber über z-index „übereinander“ verschoben werden.
absolute: Element wird aus dem Fluss genommen, Position relativ zum nächstgelegenen positionierten Vorfahren. z-index bestimmt die Ebene.
fixed: Element bleibt relativ zum Viewport fixiert, z-index steuert die Sichtbarkeit gegenüber anderen Elementen.
sticky: Mischform aus relativ und fixiert, z-index wirkt auch hier.

CSS-Selektoren für spezielle Zustände von Elementen. Beispiele: :hover (Maus drüber), :focus (Element aktiv), :first-child (erstes Kind-Element).

Sie beziehen sich also auf das Verhalten oder die Position eines vorhandenen Elements - nicht auf zusätzliche Inhalte (dafür gibt es Pseudo-Elemente).

Pseudo-Elemente ermöglichen es, bestimmte Teile eines Elements gezielt zu gestalten oder zusätzlichen Inhalt einzufügen - ohne diesen im HTML-Code zu verändern. Sie werden mit zwei Doppelpunkten :: notiert (z. B. ::before oder ::after). Weitere Beispiele sind ::first-line oder ::first-letter.

Im Gegensatz zu Pseudo-Klassen beziehen sich Pseudo-Elemente also nicht auf Zustände, sondern auf bestimmte Bereiche oder zusätzliche Inhalte eines Elements.

p::first-line { font-weight: bold; }

Eine Funktion, die als Argument an eine andere Funktion übergeben wird und später ausgeführt wird. Häufig bei asynchronen Operationen.

HyperText Markup Language - Die grundlegende Auszeichnungssprache für Webseiten. HTML definiert die Struktur und den Inhalt einer Website durch Tags und Elemente. Ohne HTML gibt es keine Webseite.

Cascading Style Sheets - Die Stylesheet-Sprache, die das Aussehen von HTML-Elementen bestimmt. CSS kontrolliert Farben, Schriften, Layouts, Abstände und Animationen. Trennt Design von Struktur.

Ein beliebtes CSS-Framework mit vorgefertigten Komponenten und einem Grid-System. Beschleunigt die Entwicklung responsiver Websites durch ready-to-use Klassen und JavaScript-Komponenten wie Modals, Carousels und Dropdowns.

PHP: Hypertext Preprocessor - Eine serverseitige Programmiersprache, die hauptsächlich für Webentwicklung verwendet wird. PHP generiert dynamische Inhalte, verarbeitet Formulare, kommuniziert mit Datenbanken und steuert Sessions.

JSON: JavaScript Object Notation - Ein leichtgewichtiges Datenformat zum Austausch von strukturierten Daten zwischen Systemen. JSON ist menschenlesbar, einfach zu parsen und wird häufig für APIs, Konfigurationsdateien und Datenspeicherung verwendet. Die Syntax basiert auf JavaScript-Objekten.

Ein Block-Level Container-Element ohne semantische Bedeutung. Das <div>-Element wird verwendet, um Inhalte zu gruppieren und mit CSS zu stylen oder mit JavaScript zu manipulieren. Eines der am häufigsten verwendeten HTML-Elemente.

Ein Inline-Element ohne semantische Bedeutung. Wird verwendet, um Teile von Text oder kleine Inline-Bereiche zu markieren und zu stylen. Im Gegensatz zu <div>; erzeugt <span> keinen Zeilenumbruch.

Ein semantisches HTML5-Element, das einen thematischen Abschnitt eines Dokuments markiert. Jede Section sollte idealerweise eine eigene Überschrift haben. Hilft Suchmaschinen und Screenreadern, den Inhalt zu verstehen.

Der Kopfbereich eines HTML-Dokuments. Enthält Metadaten, die nicht direkt auf der Seite sichtbar sind: Titel, Zeichenkodierung, CSS-Links, Scripts, Favicons und SEO-Informationen. Steht zwischen <html> und <body>.

Ein semantisches Container-Element für einleitende Inhalte oder Navigationselemente. Meist am Anfang einer Seite mit Logo, Navigation und Header-Bild. Nicht zu verwechseln mit <head>! Kann mehrfach vorkommen (z.B. in jedem <article>).

Das Hauptinhaltselement einer Seite. Sollte nur einmal pro Seite vorkommen und den einzigartigen, zentralen Inhalt enthalten. Header, Footer und Sidebars gehören NICHT in <main>. Wichtig für Barrierefreiheit und SEO.

Der Körper des HTML-Dokuments - alles, was der Benutzer sieht. Enthält alle sichtbaren Inhalte: Texte, Bilder, Videos, Navigation, etc. Kommt direkt nach </head> und vor </html>. Pro Dokument gibt es nur ein <body>-Element.

Der Fußbereich einer Seite oder eines Sections. Enthält meist Copyright-Hinweise, Links zu Impressum/Datenschutz, Kontaktinfos oder Social-Media-Links. Kann mehrfach vorkommen (z.B. Footer der Seite + Footer eines Artikels).

Das Maskieren von Sonderzeichen, damit sie als Text angezeigt werden statt als Code interpretiert zu werden. Wichtige HTML-Entities: < für <, > für >, & für &. Essentiell, wenn du Code-Beispiele zeigen willst!

Ein HTML-Auszeichnungs-Element in spitzen Klammern. Tags markieren den Anfang und das Ende von Elementen. Es gibt öffnende Tags <h1>, schließende Tags </h1> und selbstschließende Tags <img ... >. Die Grundbausteine von HTML!

Meta-Tags liefern Metadaten über das HTML-Dokument. Wichtige Typen: charset (Zeichenkodierung), viewport (responsive Design), description (SEO), keywords. Stehen immer im <head>-Bereich und sind nicht sichtbar.

Container-Elemente dienen der logischen Strukturierung einer Webseite. Sie umschließen andere Elemente, um Inhalte zu gruppieren oder zu gestalten. Manche Container wie <div> sind rein strukturell, andere (z. B. <section> oder <article>) besitzen eine semantische Bedeutung. Container bilden oft die Grundlage für CSS-Layouts mit Flexbox oder Grid.

<div class="inhalt">

  <h2>Überschrift</h2>

  <p>Textabschnitt</p>

</div>

HTML-Elemente sind die Bausteine einer Webseite. Sie bestehen meist aus einem Start-Tag < >, einem End-Tag </ >und dem dazwischenliegenden Inhalt. Innerhalb eines Elements kann sich Text oder weiteres Markup befinden. Jedes Element erfüllt eine bestimmte Funktion, z. B. das Darstellen eines Absatzes, einer Überschrift oder einer Liste.

<p>Textinhalt eines Absatzes</p>

<ul>

  <li>Ein Listenpunkt</li>

</ul>

Attribute erweitern HTML-Elemente um zusätzliche Informationen oder Eigenschaften. Sie werden im Start-Tag notiert und haben meist die Form name="wert". Manche Attribute benötigen keinen Wert - sie heißen boolesche Attribute. Es gibt sowohl element-spezifische als auch Universalattribute, die bei allen HTML-Elementen erlaubt sind.

Auch in anderen Sprachen existieren Attribute oder vergleichbare Konzepte, die zusätzliche Informationen über Elemente, Objekte oder Funktionen liefern.

• In CSS werden sie z. B. in Attributselektoren verwendet [type="checkbox"]
• In JavaScript kann man über die DOM-API auf HTML-Attribute zugreifen element.getAttribute("src")
• In PHP, Python oder C# bezeichnet „Attribut“ eine Eigenschaft oder Metainformation eines Objekts oder einer Funktion (z. B. Annotationen in PHP 8 oder Python-Dekoratoren).

Damit sind Attribute ein grundsätzliches Prinzip, um zusätzliche Informationen mitzugeben - im Web wie auch in der Programmierung allgemein.

Werte legen den konkreten Inhalt eines Attributs fest. Je nach Attribut können Werte Zahlen, Texte, URLs oder Schlüsselwörter sein. Manche Attribute akzeptieren nur bestimmte Werttypen, zum Beispiel Maßeinheiten, Farbwerte oder logische Zustände.

Das Anchor-Element erstellt Hyperlinks. Mit dem href-Attribut wird das Ziel angegeben. Kann zu anderen Seiten, Dateien, E-Mails oder Anker auf derselben Seite verlinken. Das A steht für "Anchor" (Anker). Grundlage der Navigation im Web!

<a href="seite.html">Klick mich</a>

<a<a href="mailto:hi@mail.de">Email</a>

<a href="#top">Nach oben</a>

Eine URL (Uniform Resource Locator) ist die eindeutige Adresse, unter der eine Datei, ein Dokument oder ein Verzeichnis im Web erreichbar ist. Sie teilt dem Browser mit, wo sich eine bestimmte Ressource befindet und wie sie abgerufen werden kann.

Eine URL besteht aus mehreren Bestandteilen wie Schema, Host, Pfad und optionalen Parametern. Sie kann absolut oder relativ angegeben werden.

• https:// → Schema: Gibt an, wie die Ressource aufgerufen wird (hier über das sichere HTTPS-Protokoll).
• www.example.com → Host / Domain: Der Servername oder die Internetadresse, auf dem die Ressource liegt.
• /products/ → Pfad: Verzeichnis, in dem sich die Datei befindet.
• index.html → Datei: Die Ressource selbst, z. B. eine HTML-Seite.

Eine URL setzt sich aus mehreren Komponenten zusammen, die gemeinsam bestimmen, wie und wo eine Ressource im Internet gefunden wird.

• Schema: Gibt an, auf welche Weise auf die Ressource zugegriffen wird (z. B. http oder https). Dem Schema folgen immer ://.
• Host / Hostname: Die Adresse des Webservers, auf dem die Ressource gespeichert ist (z. B. www.site.com).
• Pfad: Zeigt den Speicherort der Datei oder des Verzeichnisses auf dem Server an (z. B. tofu/index.html).
• Verzeichnis: Ein Ordner innerhalb der Website-Struktur (z. B. tofu).
• Datei: Das eigentliche Dokument, das geladen wird (z. B. index.html). Wird keine Datei angegeben, ruft der Server automatisch die Standarddatei der Seite auf.

Eine absolute URL enthält alle notwendigen Informationen, um eine Ressource eindeutig im Web zu identifizieren. Dazu gehören das Schema (z. B. https://), der Hostname und der vollständige Pfad zur Datei.

Absolute URLs werden verwendet, wenn auf externe Seiten verlinkt wird oder das Ziel ein anderes Schema nutzt als das Ausgangsdokument.

Eine relative URL gibt den Speicherort einer Ressource im Verhältnis zum aktuellen Dokument an. Sie enthält keine vollständige Webadresse, sondern beschreibt nur den Pfad innerhalb der Ordnerstruktur.

Relative URLs eignen sich für interne Verlinkungen innerhalb einer Website - etwa zu Seiten im gleichen, übergeordneten oder untergeordneten Verzeichnis.

Der Seitentitel wird im HTML-Dokument mit dem Tag <title> im <head>-Bereich definiert. Er beschreibt den Inhalt der Seite und enthält in der Regel auch den Namen der Website.

Der Titel erscheint im Browser-Tab und wird von Suchmaschinen als Überschrift in den Suchergebnissen verwendet. Damit ist er sowohl für Benutzerfreundlichkeit als auch für die Suchmaschinenoptimierung (SEO) wichtig.

<head>

<meta charset="UTF-8">

<title>DevPanic Cheatsheets für HTML und CSS</title>

</head>

• Der Titel sollte den Seiteninhalt kurz und prägnant zusammenfassen.
• Wichtige Keywords sollten enthalten sein.
• Empfohlene Länge: max. 60 Zeichen, um Kürzungen in Suchergebnissen zu vermeiden.

Das title-Attribut ist ein Universalattribut, das auf fast allen HTML-Elementen verwendet werden kann. Es liefert zusätzliche Informationen oder eine kurze Beschreibung, die beim Überfahren mit der Maus als Tooltip angezeigt werden.

Das title-Attribut ist nützlich für Barrierefreiheit und Benutzerführung, ersetzt aber nicht den eigentlichen Inhalt oder Alternativtexte wie alt bei Bildern.

Wichtig: Nicht für wichtige Inhalte nutzen, nur für Zusatzinformationen.

In HTML gibt es sechs Überschriftenebenen, die mit den Elementen <h1> bis <h6> erstellt werden. Sie dienen der inhaltlichen Gliederung einer Webseite und helfen Browsern, Suchmaschinen und Screenreadern, die Seitenstruktur zu verstehen.

Die Überschriften sind hierarchisch aufgebaut: <h1> ist die wichtigste und größte Überschrift, während <h6> die kleinste und am wenigsten bedeutende ist.

<body>

<h1>Willkommen auf meiner Website</h1>

<h2>Über mich</h2>

<h3>Hobbys</h3>

</body>

• Verwende nur eine <h1>-Überschrift pro Seite (z. B. für den Seitentitel oder Hauptinhalt).
• Untergeordnete Themen werden mit <h2> bis <h6> gegliedert.
• Überschriften sollen nicht zur optischen Gestaltung genutzt werden, sondern zur inhaltlichen Strukturierung.

Eine Website ist der gesamte Internetauftritt einer Organisation, Person oder Marke, der unter einer gemeinsamen Domain erreichbar ist. Sie umfasst alle einzelnen Unterseiten, Bilder, Dokumente und Ressourcen, die über diese Domain aufgerufen werden können.

Der Begriff beschreibt also das Gesamtprojekt im Web - vergleichbar mit einem Buch, das aus vielen Kapiteln (Webseiten) besteht.

• Der Begriff „Website“ bezeichnet den gesamten Webauftritt unter einer Domain.
• Im Englischen und Deutschen wird „Website“ für das komplette Projekt verwendet.
• Eine Website besteht aus mehreren einzelnen Webseiten.

Eine Webseite ist eine einzelne Seite innerhalb einer Website - also ein einzelnes HTML-Dokument, das unter einer eigenen URL aufgerufen werden kann.

Während die Website das gesamte Projekt beschreibt, steht die Webseite für eine einzelne Unterseite, wie z. B. die Startseite, eine Produktseite oder das Kontaktformular.

• Eine Website besteht aus mehreren Webseiten.
• Jede Webseite besitzt in der Regel eine eigene URL.
• Webseite ist die deutsche Bezeichnung für eine einzelne HTML-Seite im Web.

Der Viewport bezeichnet den aktuell sichtbaren Bereich eines Browsers oder Geräts, also den Teil einer Webseite, den der Benutzer gerade sehen kann. Besonders wichtig für Responsive Design, da Layouts sich an die Größe des Viewports anpassen müssen.

In HTML wird der Viewport über das <meta name="viewport">-Tag gesteuert. Hierbei legt width=device-width die Breite des Viewports auf die Breite des Geräts fest und initial-scale=1.0 bestimmt den anfänglichen Zoomfaktor.

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

Das meta viewport-Tag legt fest, wie der Browser die Seite auf mobilen Geräten skaliert und wie breit der sichtbare Bereich (Viewport) ist. Es ist ein zentraler Bestandteil des Responsive Design.

Typische Attribute:

• width=device-width: Breite des Viewports = Gerätebreite
• initial-scale=1.0: Start-Zoomfaktor
• maximum-scale=1.0: Maximal erlaubter Zoom
• minimum-scale=1.0: Minimal erlaubter Zoom
• user-scalable=no: Deaktiviert Zoomen durch Benutzer

Das Tag bestimmt den Viewport, während @media-Regeln in CSS auf diese Größe reagieren und das Layout anpassen.

@media ist eine CSS-Regel für Media Queries. Sie erlaubt, CSS gezielt auf bestimmte Bedingungen anzuwenden, z. B. die Größe oder Orientierung des Viewports. Damit lassen sich Layouts für verschiedene Geräte (Desktop, Tablet, Smartphone) flexibel anpassen.

Typische Bedingungen:

• max-width: Regeln gelten, wenn der Viewport kleiner als der Wert ist
• min-width: Regeln gelten, wenn der Viewport größer als der Wert ist
• orientation: Prüft Hoch- oder Querformat
• resolution: Prüft die Pixeldichte / Auflösung des Geräts

Media Queries reagieren auf die Viewport-Größe. Diese kann auf mobilen Geräten durch das <meta name="viewport">-Tag festgelegt werden.

@media (max-width: 768px) {

  body { background-color: lightblue; }

}

Das <img>-Element bindet ein Bild in die Webseite ein. Es ist ein selbstschließendes Element, das keinen End-Tag benötigt. Wichtige Attribute:

• src: Pfad oder URL zur Bilddatei
• alt: Alternativtext, der angezeigt wird, wenn das Bild nicht geladen werden kann und für Barrierefreiheit
• width / height: optional, Bildgröße
• title: optional, zusätzlicher Tooltip
• srcset: Liste alternativer Bildquellen für unterschiedliche Auflösungen oder Viewportgrößen
• sizes: Definiert, welche Bildgröße bei welcher Viewportbreite verwendet werden soll

Immer ein alt-Attribut verwenden, um Barrierefreiheit und SEO zu verbessern. Mit srcset und sizes werden Bilder je nach Viewportgröße oder Auflösung angepasst - das spart Ladezeit und verbessert die Nutzererfahrung auf mobilen Geräten.

Das <figure>-Element ist ein semantischer Container für Medieninhalte wie Bilder, Grafiken oder Diagramme. Es wird oft zusammen mit <figcaption> verwendet, um eine Beschriftung bereitzustellen. Damit wird die Semantik der Webseite verbessert und Bilder können mit Text erklärt werden.

Man setzt <figure> ein, wenn ein Bild, Diagramm oder eine Illustration eine eigenständige, inhaltlich erklärbare Einheit bildet, die optional mit <figcaption> beschriftet werden kann.

Das <figcaption>-Element liefert eine Beschriftung oder Erklärung für den Inhalt eines <figure>-Containers. Es verbessert die Semantik und die Barrierefreiheit der Webseite, da Bildschirmleser den Zusammenhang von Bild und Text erkennen können.

Ein semantischer Container ist ein HTML-Element, das durch seinen Namen die Bedeutung seines Inhalts beschreibt. Beispiele: <header>, <footer>, <article>, <section>. Sie verbessern die Lesbarkeit für Menschen und Maschinen (z. B. Bildschirmleser, Suchmaschinen).

Semantischer Container = beschreibt den Inhalt, für Menschen und Maschinen interpretierbar

Ein generischer Container ist ein HTML-Element ohne eigene semantische Bedeutung, das lediglich zur Gruppierung oder Strukturierung von Inhalten dient. Typisches Beispiel: <div>. Sie werden häufig in Kombination mit CSS zur Gestaltung und Layout-Definition verwendet.

Generischer Container = rein für Struktur/Layout, keine inhaltliche Bedeutung

Mit den Attributen srcset und sizes können in HTML unterschiedliche Bildquellen für verschiedene Bildschirmgrößen oder Auflösungen definiert werden. So lädt der Browser automatisch die am besten passende Version des Bildes - für bessere Performance und Darstellungsqualität.

<img 
  src="bild-small.jpg" 
  srcset="bild-small.jpg 480w, bild-medium.jpg 800w, bild-large.jpg 1200w"
  sizes="(max-width: 600px) 480px, (max-width: 1000px) 800px, 1200px"
  alt="Beispiel für responsive Images">

• srcset: Listet alternative Bildquellen mit ihren Breitenangaben (w = Pixelbreite) auf.
• sizes: Beschreibt, welche Bildgröße (in CSS-Pixeln) unter bestimmten Bedingungen verwendet werden soll.
• Vorteil: Spart Datenvolumen auf mobilen Geräten und sorgt für scharfe Darstellung auf Retina-Displays.

Das <picture>-Element ermöglicht die Bereitstellung mehrerer Bildquellen, aus denen der Browser je nach Bildschirmgröße, Auflösung oder Dateiformat automatisch die passende auswählt. Es wird meist in Kombination mit <source> und einem Fallback-<img> eingesetzt.

<picture>
  <source srcset="bild-large.webp" type="image/webp" media="(min-width: 800px)">
  <source srcset="bild-small.jpg" type="image/jpeg" media="(max-width: 799px)">
  <img src="bild-fallback.jpg" alt="Beispiel für ein responsives Bild">
</picture>

• <picture>: umschließt alle Bildquellen.
• <source>: definiert alternative Versionen mit Attributen wie srcset, media (z. B. Media Queries) oder type (z. B. WebP).
• <img>: Fallback-Bild, das angezeigt wird, wenn keine der Bedingungen erfüllt ist.

Der Einsatz von <picture> ist besonders nützlich, wenn sich Bilder nicht nur in der Auflösung, sondern auch im Seitenverhältnis oder Format unterscheiden sollen - etwa für Hoch- und Querformate oder moderne Bildformate wie webp.

Mit der CSS-Eigenschaft object-fit wird gesteuert, wie ein Bild, Video oder ein anderes eingebettetes Medium in einen Container mit festen Abmessungen eingepasst wird.

Besonders nützlich ist diese Eigenschaft bei responsiven Layouts, um sicherzustellen, dass Medien unabhängig vom Seitenverhältnis korrekt angezeigt werden.

<img src="bild.jpg" alt="Beispiel" class="responsive-image">

.responsive-image {
  width: 300px;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
}

• fill: Dehnt das Objekt, bis es den Container vollständig füllt (verzerrt ggf.).
• contain: Passt das Objekt ein, sodass es komplett sichtbar bleibt (Freiräume möglich).
• cover: Füllt den Container vollständig aus, überschneidet ggf. Ränder.
• none: Behält Originalgröße des Mediums bei.
• scale-down: Wie none oder contain - nimmt die kleinere Variante.

Tipp: In Kombination mit object-position lässt sich der sichtbare Bildausschnitt gezielt steuern (z. B. object-position: center top;).

Die CSS-Eigenschaft object-position legt fest, welcher Ausschnitt eines Bildes oder Videos sichtbar ist, wenn es mit object-fit skaliert wird.

Sie funktioniert ähnlich wie background-position bei Hintergrundbildern und wird nur wirksam, wenn zuvor eine object-fit-Eigenschaft gesetzt wurde.

<img src="portrait.jpg" alt="Porträt" class="bild">

.bild {
  width: 300px;
  height: 200px;
  object-fit: cover;
  object-position: center top;
}

• Akzeptiert Längenangaben (z. B. 20px 40px) oder Prozentwerte.
• Auch Schlüsselwörter sind erlaubt, z. B. left, right, top, bottom oder center.
• Standardwert ist 50% 50% (zentrierte Ausrichtung).

Tipp: Ideal für Thumbnails, Profilbilder oder Produktfotos, bei denen der Fokuspunkt (z. B. Gesicht oder Produktmitte) sichtbar bleiben soll.

Die CSS-Eigenschaft background-position legt fest, an welcher Stelle ein Hintergrundbild innerhalb eines Elements angezeigt wird.

Sie wird in Kombination mit background-image und optional background-size verwendet, um den sichtbaren Bildausschnitt zu steuern.

.hero {
  width: 400px;
  height: 250px;
  background-image: url("landschaft.jpg");
  background-size: cover;
  background-position: center top;
}

• Akzeptiert Prozentwerte (z. B. 50% 50%), Längenangaben oder Schlüsselwörter wie left, right, top, bottom oder center.
• Standardwert: 0% 0% (oben links).
• Mit mehreren Hintergrundbildern können auch mehrere Positionen angegeben werden, durch Kommas getrennt.

Tipp: background-position funktioniert ähnlich wie object-position, betrifft aber Hintergrundbilder statt eingebettete Medien. Ideal, um den Fokuspunkt eines Hintergrundmotivs beizubehalten.

Die CSS-Eigenschaft background-size legt fest, wie ein Hintergrundbild skaliert wird, um in ein Element zu passen.

Sie wird zusammen mit background-image verwendet und bestimmt, ob das Bild vollständig sichtbar ist, zugeschnitten oder in Originalgröße angezeigt wird.

.hero {
  width: 400px;
  height: 250px;
  background-image: url("landschaft.jpg");
  background-size: cover;
  background-position: center;
}

• auto - Standardwert, das Bild behält seine ursprüngliche Größe.
• cover - Das Bild füllt den gesamten Bereich, kann aber zugeschnitten werden.
• contain - Das Bild wird vollständig angezeigt, es können jedoch Ränder entstehen.
• Auch Pixel- oder Prozentwerte sind möglich, z. B. 100% 50%.

Tipp: background-size wird häufig mit background-position kombiniert, um den sichtbaren Bildausschnitt optimal zu steuern - besonders bei responsiven Layouts.

Die CSS-Eigenschaft background-repeat legt fest, ob und wie ein Hintergrundbild wiederholt (gekachelt) wird.

Standardmäßig werden Hintergrundbilder horizontal und vertikal wiederholt, um den gesamten Bereich eines Elements zu füllen. Mit dieser Eigenschaft lässt sich das gezielt steuern.

.pattern {
  background-image: url("muster.png");
  background-repeat: repeat-x;
  background-position: bottom;
}

• repeat - Standardwert, das Bild wird in beide Richtungen wiederholt.
• no-repeat - Das Bild wird nur einmal angezeigt.
• repeat-x - Wiederholung nur horizontal.
• repeat-y - Wiederholung nur vertikal.
• space - Die Bilder werden mit gleichmäßigem Abstand verteilt, ohne Zuschnitt.
• round - Die Bilder werden skaliert, damit sie ohne Lücken genau in den Bereich passen.

Tipp: background-repeat wird oft mit background-size und background-position kombiniert, um Layouts mit Mustern, Texturen oder Icons präzise zu gestalten.

Mit background-attachment wird festgelegt, wie sich ein Hintergrundbild beim Scrollen der Seite verhält.

Diese Eigenschaft beeinflusst, ob das Hintergrundbild mitscrollt oder fest an der Position des Viewports bleibt. Dadurch lassen sich z. B. Parallax-Effekte oder feste Hintergrundbilder erzeugen.

.hero {
  background-image: url("landschaft.jpg");
  background-attachment: fixed;
  background-size: cover;
}

• scroll - Standardwert. Der Hintergrund scrollt mit dem Inhalt der Seite.
• fixed - Der Hintergrund bleibt fixiert und bewegt sich nicht beim Scrollen (z. B. Parallax-Effekt).
• local - Der Hintergrund bewegt sich nur innerhalb des Elements mit, wenn dieses gescrollt wird (z. B. bei scrollbaren Boxen).

Tipp: background-attachment: fixed; funktioniert auf mobilen Geräten nicht immer zuverlässig, da viele Browser die Eigenschaft zur Performance-Optimierung ignorieren.

Die CSS-Eigenschaft background ist eine Kurzschreibweise für mehrere Hintergrund-Eigenschaften eines Elements. Damit lassen sich Farbe, Bild, Position, Wiederholung, Größe und Scrollverhalten in einer einzigen Deklaration kombinieren.

.hero {
  background: url("landschaft.jpg") no-repeat center / cover fixed #333;
}

• background-color - Hintergrundfarbe
• background-image - Hintergrundbild
• background-position - Position des Hintergrundbilds
• background-size - Größe des Hintergrundbilds
• background-repeat - Wiederholung des Hintergrundbilds
• background-attachment - Scrollverhalten des Hintergrunds

Hinweis: Die Reihenfolge der Werte ist flexibel, solange sie vom Browser eindeutig interpretiert werden kann. Das optionale Trennzeichen / wird verwendet, um background-position von background-size zu trennen.

Die CSS-Eigenschaft background-color legt die Hintergrundfarbe eines Elements fest. Sie kann Farbe, Transparenz oder Farbabstufungen enthalten.

.card {
  width: 300px;
  height: 200px;
  background-color: #f5f5f5;
}

• Farbangaben können sein: #hex, rgb(), rgba(), hsl() oder vordefinierte Farbnamen wie red, blue, lightgray.
• Die Standardfarbe ist transparent, d. h. es wird keine Farbe angezeigt.
• Oft in Kombination mit background-image oder background verwendet.

background-color kann für Container, Buttons, Cards oder beliebige Elemente eingesetzt werden, um visuelle Hierarchien und Kontraste zu erzeugen.

Die CSS-Eigenschaft border definiert den Rahmen eines Elements. Sie kann Breite, Stil und Farbe enthalten. Borders können an allen vier Seiten eines Elements einzeln oder zusammen festgelegt werden.

.card {
  width: 200px;
  height: 150px;
  border: 2px solid #333;
  border-radius: 10px;
}

• border-width - Dicke des Rahmens (z. B. 1px, 0.2em).
• border-style - Art des Rahmens, z. B. solid, dashed, dotted, double, none usw.
• border-color - Farbe des Rahmens (Hex, RGB, RGBA, HSL, Farbnamen).
• border-radius - Abrundung der Ecken, z. B. 5px, 50% (für Kreise/Ovale).
• Man kann einzelne Seiten separat definieren: border-top, border-right, border-bottom, border-left.
• Die Kurzschreibweise border: 2px dashed red; kombiniert Breite, Stil und Farbe.

Tipp: Borders eignen sich, um Boxen optisch zu strukturieren, Elemente hervorzuheben oder Kreise und abgerundete Container zu erstellen. Mit border-radius: 50% lässt sich ein perfekter Kreis aus einem quadratischen Element erzeugen.

Die CSS-Eigenschaft border-radius legt die Abrundung der Ecken eines Elements fest. Sie kann für alle vier Ecken gemeinsam oder für jede Ecke einzeln angegeben werden.

.box {
  width: 150px;
  height: 150px;
  background-color: #f5f5f5;
  border: 2px solid #333;
  border-radius: 20px;
}

.circle {
  width: 100px;
  height: 100px;
  background-color: #ff6347;
  border-radius: 50%;
}

• Werte können in px, em, % oder anderen Längeneinheiten angegeben werden.
• border-radius: 50% erzeugt aus quadratischen Elementen einen perfekten Kreis.
• Für individuelle Ecken kann man border-top-left-radius, border-top-right-radius, border-bottom-right-radius und border-bottom-left-radius verwenden.
• Sehr nützlich, um Buttons, Cards, Bilder oder Container optisch weicher und runder zu gestalten.

Tipp: border-radius lässt sich auch zusammen mit overflow: hidden; verwenden, um Inhalte innerhalb abgerundeter Container sauber zuzuschneiden.

Die CSS-Eigenschaft border-color legt die Farbe des Rahmens eines Elements fest. Sie kann für alle vier Seiten gleichzeitig oder für jede Seite einzeln angegeben werden.

.card {
  border: 2px solid;
  border-color: #333;
}

.box {
  border-top-color: red;
  border-right-color: green;
  border-bottom-color: blue;
  border-left-color: yellow;
}

• Farben können in #hex, rgb(), rgba(), hsl() oder Farbnamen angegeben werden.
• Standardfarbe ist currentColor, d. h. die aktuelle Textfarbe des Elements wird übernommen.

px ist eine feste Größeneinheit, die einem einzelnen Bildschirmpixel entspricht. Sie eignet sich, wenn eine absolute Größe benötigt wird.

width: 200px;
height: 100px;
font-size: 16px;

• 1px entspricht einem Bildschirmpixel.
• Gut geeignet für präzise Layouts, aber weniger flexibel bei responsive Designs.

em ist eine relative Einheit, die sich auf die Schriftgröße des Elternelements bezieht. 1em entspricht der aktuellen Font-Size des übergeordneten Elements.

font-size: 2em; /* doppelt so groß wie die Schriftgröße des Elternelements */
margin: 1.5em;

• Wenn das Elternelement 16px hat, entspricht 1em = 16px.
• Ideal für flexible, skalierbare Layouts und Schriftgrößen.

rem ist eine relative Einheit, die sich auf die Schriftgröße des Root-Elements <html> bezieht. Anders als em hängt sie nicht von verschachtelten Elternelementen ab.

html { font-size: 16px; }
p { font-size: 1.25rem; } /* 1.25 × 16px = 20px */

• 1rem = Schriftgröße des Root-Elements, typischerweise 16px.
• Sehr praktisch für konsistente, responsive Layouts.

% ist eine relative Einheit, die sich auf die Größe des Elternelements bezieht. Sie wird häufig für Breiten, Höhen, Abstände oder Schriftgrößen verwendet.

width: 50%; /* 50% der Breite des Elternelements */
padding-top: 10%;

• Prozentwerte passen sich dynamisch der Größe des Containers an.
• Ideal für responsive Layouts, die sich an die Bildschirmbreite anpassen.

vw bezieht sich auf 1 % der Breite des Viewports (sichtbarer Bereich des Browsers).

width: 50vw;   /* 50% der Breite des Viewports */
font-size: 5vw;

• Sehr nützlich für responsive Schriftgrößen und Layouts, die sich proportional zum Viewport anpassen.
• 1vw = 1 % der aktuellen Fensterbreite.

vh bezieht sich auf 1 % der Höhe des Viewports (sichtbarer Bereich des Browsers).

height: 100vh;    /* Höhe des Elements = 100% der Viewport-Höhe */
margin-top: 10vh;

• Ideal für full-screen Sections oder Elemente, die immer die volle Höhe des Bildschirms einnehmen sollen.
• 1vh = 1 % der aktuellen Fensterhöhe.

vmin entspricht 1 % der kleineren Dimension des Viewports (Breite oder Höhe, je nachdem, was kleiner ist).

font-size: 5vmin;   /* passt sich an die kleinere Viewport-Dimension an */
width: 50vmin;

• Hilfreich für responsive Layouts, die proportional zur kleineren Seite des Bildschirms skaliert werden sollen.

vmax entspricht 1 % der größeren Dimension des Viewports (Breite oder Höhe, je nachdem, was größer ist).

font-size: 5vmax;   /* passt sich an die größere Viewport-Dimension an */
width: 50vmax;

• Hilfreich für responsive Layouts, die proportional zur größeren Seite des Bildschirms skaliert werden sollen.

CSS bietet verschiedene Einheiten für Größenangaben. Dazu gehören feste Einheiten wie px und relative Einheiten wie em, rem, % sowie viewport-basierte Einheiten vw und vh. Die Grafik unten zeigt exemplarisch, wie sich die Einheiten zueinander verhalten.