HTML & CSS Grundlagen – Die Bausteine des Webs

Inhaltsverzeichnis

Schnellübersicht

Auf dieser Seite lernen Sie die Grundlagen der Webentwicklung:

Definition: Was sind HTML und CSS?
HTML-Grundstruktur: DOCTYPE, head, body
Wichtige HTML-Tags: Headings, Paragraphs, Links, Images, Lists
CSS-Selektoren: Element, Class, ID, Attribute
Box-Model: Margin, Border, Padding, Content
CSS-Layout: Flexbox vs. Grid
Live-Preview: Interaktiver Code-Editor
Best Practices: Semantik, Accessibility, Performance
FAQ: Häufige Fragen & Antworten

1. Was sind HTML und CSS?

HTML und CSS sind die beiden fundamentalen Technologien, auf denen jede Webseite im Internet basiert. Zusammen bilden sie das Rückgrat des modernen Webs.

HTML

HTML (HyperText Markup Language) ist die Auszeichnungssprache, die die Struktur und den Inhalt einer Webseite definiert. Sie beschreibt, WAS auf der Seite steht – Überschriften, Absätze, Bilder, Links, Listen und mehr.

HTML verwendet Tags (wie <p>, <h1>, <a>), um Elemente zu kennzeichnen. Der Browser interpretiert diese Tags und zeigt den Inhalt entsprechend an.

Aktuelle Version: HTML5 (seit 2014)

CSS

CSS (Cascading Style Sheets) ist die Stylesheet-Sprache, die das Aussehen und Layout einer Webseite definiert. Sie beschreibt, WIE die HTML-Elemente dargestellt werden – Farben, Schriftarten, Abstände, Positionierung.

CSS verwendet Selektoren (wie p, .class, #id) und Properties (wie color, font-size, margin), um Styling-Regeln zu definieren.

Aktuelle Version: CSS3 (seit 2011, laufend erweitert)

Die Analogie: Hausbau

Stellen Sie sich eine Webseite wie ein Haus vor:

HTML = Rohbau: Wände, Türen, Fenster, Räume – die Struktur
CSS = Innenausstattung: Farben, Tapeten, Möbel, Beleuchtung – das Design
JavaScript = Elektrik/Heizung: Interaktivität, Animationen, Funktionen

Ohne HTML gibt es kein Haus. Ohne CSS ist es funktional, aber hässlich. Ohne JavaScript ist es statisch, aber funktionsfähig.

2. HTML-Grundstruktur

Jede HTML-Seite folgt einem festen Aufbau. Hier ist das minimale Gerüst einer HTML5-Seite:

            HTML
<!-- Dokumenttyp-Deklaration: Sagt dem Browser, dass es HTML5 ist -->
<!DOCTYPE html>

<!-- Wurzelelement: Umschließt den gesamten HTML-Code -->
<html lang="de">

<head>
    <!-- Metadaten: Zeichensatz (UTF-8 unterstützt Umlaute) -->
    <meta charset="UTF-8">
    
    <!-- Viewport: Wichtig für Responsive Design auf Mobilgeräten -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- Titel: Erscheint im Browser-Tab und bei Google -->
    <title>Meine erste Webseite</title>
    
    <!-- CSS einbinden -->
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <!-- Sichtbarer Inhalt der Seite -->
    <h1>Willkommen!</h1>
    <p>Dies ist meine erste Webseite.</p>
</body>

</html>
        

             Wichtige Bereiche
            <!DOCTYPE html>: Muss immer als erste Zeile stehen
<html>: Wurzelelement, lang="de" für Deutsch
<head>: Metadaten (nicht sichtbar, aber wichtig für Browser & SEO)
<body>: Sichtbarer Inhalt der Webseite
<meta charset="UTF-8">: Unterstützt Umlaute (ä, ö, ü, ß)

        

3. Die wichtigsten HTML-Tags

HTML bietet über 100 verschiedene Tags. Hier sind die wichtigsten, die Sie kennen sollten:

h1

<h1> - <h6>

Überschriften

Definieren Überschriften in 6 Größen. <h1> ist die größte (Hauptüberschrift), <h6> die kleinste.

<h1>Hauptüberschrift</h1> <h2>Unterüberschrift</h2>

p

<p>

Paragraph

Definiert einen Textabsatz. Browser fügen automatisch Abstand zwischen Absätzen ein.

<p>Dies ist ein Absatz.</p> <p>Und noch einer.</p>

a

<a>

Link (Anchor)

Erstellt einen klickbaren Link. href definiert das Ziel, target="_blank" öffnet in neuem Tab.

<a href="https://google.com"> Google </a>

img

<img>

Bild

Bettet ein Bild ein. src = Pfad, alt = Alternativtext (wichtig für Accessibility!).

ul

<ul>, <ol>, <li>

Listen

<ul> = ungeordnete Liste (Aufzählungszeichen), <ol> = geordnete Liste (Nummerierung), <li> = Listenelement.

<ul> <li>Punkt 1</li> <li>Punkt 2</li> </ul>

div

<div>

Container (Block)

Generischer Block-Container. Wird verwendet, um Elemente zu gruppieren und mit CSS zu stylen.

<div class="box"> Inhalt hier </div>

span

<span>

Container (Inline)

Generischer Inline-Container. Für kleine Textabschnitte innerhalb eines Absatzes oder anderer Elemente.

<p>Text mit <span class="highlight"> Hervorhebung </span> </p>

form

<form>, <input>

Formulare

Erstellt interaktive Formulare. <input> für Eingabefelder, <button> für Buttons.

<form> <input type="email"> <button>Senden</button> </form>

table

<table>, <tr>, <td>

Tabellen

Erstellt Tabellen. <tr> = Zeile, <th> = Header-Zelle, <td> = Daten-Zelle.

Semantische HTML5-Tags

HTML5 führt semantische Tags ein, die die Bedeutung des Inhalts beschreiben:

<header> – Kopfbereich der Seite
<nav> – Navigation
<main> – Hauptinhalt
<article> – Eigenständiger Artikel
<section> – Abschnitt
<aside> – Seitenleiste / Zusatzinfo
<footer> – Fußbereich

Vorteil: Bessere SEO, Accessibility und Code-Lesbarkeit.

4. CSS-Grundlagen

CSS besteht aus Selektoren (WAS gestylt wird) und Deklarationen (WIE es gestylt wird). Jede Deklaration enthält eine Property und einen Value.

            CSS
/* Selektor { Property: Value; } */

/* Element-Selektor: Alle <p>-Elemente */
p {
    color: #333;
    font-size: 16px;
    line-height: 1.6;
}

/* Class-Selektor: Alle Elemente mit class="highlight" */
.highlight {
    background-color: yellow;
    font-weight: bold;
}

/* ID-Selektor: Das Element mit id="header" */
#header {
    background: linear-gradient(135deg, #667eea, #764ba2);
    padding: 20px;
}

/* Kombinierter Selektor */
article h2 {
    color: #2c5282;
    border-bottom: 2px solid #e2e8f0;
}
        

CSS-Selektoren im Detail

Selektoren bestimmen, welche HTML-Elemente gestylt werden. Hier die wichtigsten Typen:

*

Element

Tag-Selektor

Wählt alle Elemente eines bestimmten Tags aus. Einfach, aber weitreichend.

p { color: red; } h1 { font-size: 2rem; }

.

.class

Class-Selektor

Wählt Elemente mit einer bestimmten Klasse aus. Kann mehrfach verwendet werden.

.button { padding: 10px; } .active { color: green; }

#

#id

ID-Selektor

Wählt ein einzelnes Element mit einer bestimmten ID aus. Sollte nur einmal pro Seite vorkommen.

#header { height: 70px; } #main { padding: 20px; }

[ ]

[attr]

Attribut-Selektor

Wählt Elemente basierend auf Attributen oder Attributwerten aus.

input[type="email"] { } a[target="_blank"] { }

:

:pseudo

Pseudo-Klasse

Definiert spezielle Zustände von Elementen (Hover, Focus, First-Child, etc.).

a:hover { color: blue; } li:first-child { }

::

::pseudo

Pseudo-Element

Stylt bestimmte Teile eines Elements (First-Line, Before, After, etc.).

p::first-line { } .icon::before { }

5. Das CSS Box-Model

Jedes HTML-Element wird vom Browser als rechteckige Box behandelt. Das Box-Model definiert, wie diese Box aufgebaut ist – aus vier Schichten:

Die 4 Schichten des Box-Models

Content
(z.B. Text)

Content – Der eigentliche Inhalt (Text, Bild)

Padding – Abstand zwischen Content und Border

Border – Rahmen um die Box

Margin – Abstand zu anderen Elementen

            CSS
.box {
    /* Content-Größe */
    width: 300px;
    height: 200px;
    
    /* Padding (innen) */
    padding: 20px;              /* Alle Seiten */
    padding: 10px 20px;          /* Top/Bottom, Left/Right */
    padding: 10px 20px 30px 40px; /* Top, Right, Bottom, Left */
    
    /* Border (Rahmen) */
    border: 2px solid #333;
    border-radius: 8px;       /* Abgerundete Ecken */
    
    /* Margin (außen) */
    margin: 20px auto;        /* Zentriert horizontal */
}

/* WICHTIG: box-sizing:border-box */
* {
    box-sizing: border-box;   /* Padding & Border in width einrechnen */
}
        

Häufiger Fehler: box-sizing

Standardmäßig (box-sizing: content-box) wird Padding und Border zur Breite addiert:

width: 300px + padding: 20px + border: 2px = 344px Gesamt

Mit box-sizing: border-box (empfohlen!) bleibt die Breite bei 300px, Padding und Border werden abgezogen.

6. CSS-Layout: Flexbox vs. Grid

Moderne CSS-Layouts basieren auf zwei mächtigen Systemen: Flexbox (1-dimensional) und CSS Grid (2-dimensional).

Flexbox

1-Dimensionales Layout

Perfekt für Layouts in einer Richtung (horizontal ODER vertikal). Ideal für Navigation, Kartenreihen, Toolbars.

1

2

3

Einfache Ausrichtung (center, space-between)
Flexible Größen (flex-grow, flex-shrink)
Automatische Umbrüche (flex-wrap)
Perfekt für Komponenten

CSS Grid

2-Dimensionales Layout

Perfekt für Layouts in beiden Richtungen (Zeilen UND Spalten). Ideal für Seitenlayouts, Galerien, komplexe Strukturen.

1

2

3

4

5

6

Exakte Kontrolle über Zeilen & Spalten
Grid Areas für komplexe Layouts
Automatische Platzierung
Perfekt für Seitenlayouts

            CSS
/* FLEXBOX Beispiel: Navigation */
.nav {
    display: flex;
    justify-content: space-between;  /* Horizontal verteilen */
    align-items: center;           /* Vertikal zentrieren */
    gap: 20px;                      /* Abstand zwischen Items */
}

/* GRID Beispiel: Kartenlayout */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

/* GRID Beispiel: Seitenlayout */
.page {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 70px 1fr 50px;
    grid-template-areas: 
        "header header"
        "sidebar main"
        "footer footer";
}
        

             Wann was verwenden?
            Flexbox: Navigation, Button-Gruppen, Card-Reihen, vertikale Zentrierung
Grid: Seitenlayouts, Bildergalerien, Dashboard-Strukturen, Magazine
Beide kombinieren: Grid für das große Layout, Flexbox für Komponenten darin

        

7. Live-Preview – Interaktiver Code-Editor

Testen Sie HTML & CSS direkt im Browser! Ändern Sie den Code links und sehen Sie das Ergebnis sofort rechts.

HTML & CSS Playground

HTML & CSS Code

Live-Vorschau

             Tipps zum Experimentieren
            Farben ändern: Probieren Sie verschiedene background-Werte aus
Padding/Margin: Verändern Sie Abstände und sehen Sie den Effekt
Border-Radius: Machen Sie Ecken rund (0px = eckig, 50% = Kreis)
Beispiele laden: Nutzen Sie die Flexbox- und Grid-Buttons für Demos

        

8. Best Practices

Professionelle Webentwicklung folgt bestimmten Prinzipien. Hier die wichtigsten Best Practices:

Semantisches HTML

Verwenden Sie <header>, <nav>, <main>, <footer> statt <div>
Nur eine <h1> pro Seite
Überschriften hierarchisch (h1 → h2 → h3)
Lists für Aufzählungen, nicht für Layout
<button> für Aktionen, <a> für Navigation

Accessibility (a11y)

Immer alt-Texte für Bilder
Formulare mit <label> verknüpfen
Ausreichender Farbkontrast (4.5:1)
Tastaturnavigation ermöglichen
ARIA-Labels für komplexe Widgets

Responsive Design

Mobile-First-Ansatz
Viewport-Meta-Tag immer setzen
Relative Einheiten (%, em, rem, vw, vh)
Media Queries für Breakpoints
Flexbox/Grid für flexible Layouts

Performance

CSS minimieren (Minification)
Bilder komprimieren (WebP, AVIF)
CSS oben im <head> laden
JavaScript unten oder defer
Caching-Header setzen

            CSS
/* Responsive Design Beispiel: Mobile-First */

/* Basis-Stile für Mobile */
.container {
    padding: 15px;
    max-width: 100%;
}

.grid {
    display: grid;
    grid-template-columns: 1fr;  /* 1 Spalte auf Mobile */
    gap: 15px;
}

/* Tablet (≥ 768px) */
@media (min-width: 768px) {
    .container { padding: 30px; }
    .grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop (≥ 1024px) */
@media (min-width: 1024px) {
    .container { max-width: 1200px; margin: 0 auto; }
    .grid { grid-template-columns: repeat(3, 1fr); }
}
        

9. FAQ – Häufige Fragen & Antworten

Häufige Fragen zu HTML & CSS

Was ist der Unterschied zwischen HTML und HTML5?

HTML5 ist die aktuelle Version von HTML (seit 2014). Es brachte viele Neuerungen:

Semantische Tags: <header>, <nav>, <article>, <footer>
Multimedia: Native <video> und <audio> ohne Flash
Formular-Features: Neue Input-Typen (email, date, range)
Canvas & SVG: Grafiken direkt im Browser
APIs: Geolocation, LocalStorage, Web Workers

Heute verwendet man immer HTML5 – "HTML" ohne Version bezieht sich implizit auf HTML5.

Wann verwende ich Class und wann ID?

Class (.name):

Kann mehrfach auf einer Seite verwendet werden
Für wiederkehrende Stile (z.B. alle Buttons)
In JavaScript: document.querySelectorAll('.name')

ID (#name):

Muss einzigartig auf der Seite sein
Für spezifische Elemente (z.B. Header, Main)
Für Anker-Links: <a href="#section">
In JavaScript: document.getElementById('name')

Regel: Verwenden Sie Classes für Styling, IDs nur wenn wirklich nötig.

Was sind die wichtigsten CSS-Einheiten?

Absolute Einheiten:

px – Pixel (fest, nicht skalierbar)

Relative Einheiten (empfohlen!):

% – Prozent (relativ zum Eltern-Element)
em – Relativ zur Schriftgröße des Elements
rem – Relativ zur Schriftgröße des Root-Elements (html)
vw – Viewport Width (1vw = 1% der Browser-Breite)
vh – Viewport Height (1vh = 1% der Browser-Höhe)

Tipp: Verwenden Sie rem für Schriftgrößen und %/vw für Layouts.

Was ist der Unterschied zwischen display:none und visibility:hidden?

display: none:

Element wird vollständig entfernt
Nimmt keinen Platz im Layout ein
Nicht im Accessibility-Tree sichtbar

visibility: hidden:

Element ist unsichtbar, aber noch da
Nimmt weiterhin Platz ein
Im Accessibility-Tree noch vorhanden

Regel: display: none zum kompletten Ausblenden, visibility: hidden für Animationen oder Platzhalter.

Wie zentriere ich ein Element horizontal und vertikal?

Methode 1: Flexbox (empfohlen)

.parent {
    display: flex;
    justify-content: center;  /* horizontal */
    align-items: center;       /* vertikal */
    height: 100vh;
}
                    

Methode 2: Grid

.parent {
    display: grid;
    place-items: center;
    height: 100vh;
}
                    

Methode 3: Absolute Positionierung

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
                    

Was sind CSS-Präprozessoren (SASS, LESS)?

Präprozessoren erweitern CSS um Programmier-Features:

Variablen: $primary: #3498db;
Nesting: Verschachtelte Selektoren
Mixins: Wiederverwendbare Code-Blöcke
Functions: Berechnungen und Farbmanipulation
Imports: Modularisierung

Popularität: SASS/SCSS ist am weitesten verbreitet, LESS wird auch verwendet.

Hinweis: Modernes CSS hat viele dieser Features nativ (Custom Properties, Nesting ab 2024).

Wie lerne ich HTML & CSS am besten?

Empfohlener Lernweg:

Grundlagen verstehen: HTML-Struktur, CSS-Selektoren, Box-Model
Experimentieren: Nutzen Sie den Live-Preview-Editor oben!
Kleine Projekte: Bauen Sie eine persönliche Webseite, ein Portfolio
Layouts meistern: Flexbox und Grid intensiv üben
Responsive Design: Mobile-First-Ansatz lernen
Best Practices: Semantik, Accessibility, Performance

Ressourcen: MDN Web Docs, freeCodeCamp, Codecademy, Frontend Mentor (für Challenges).

Wichtig: Üben Sie täglich, auch nur 30 Minuten. Konsistenz schlägt Intensität!

Was ist der Unterschied zwischen margin und padding?

Padding:

Abstand innerhalb des Elements
Zwischen Content und Border
Wird vom Hintergrund des Elements gefüllt
Beispiel: Text hat Luft zum Rand der Box

Margin:

Abstand außerhalb des Elements
Zwischen diesem und anderen Elementen
Transparent (zeigt Hintergrund des Eltern-Elements)
Beispiel: Abstand zwischen zwei Cards

Merkregel: Padding = innen (wie Polsterung), Margin = außen (wie persönlicher Raum).

Zusammenfassung

             Die wichtigsten Punkte
            HTML definiert die Struktur (Was?), CSS das Aussehen (Wie?)
HTML-Grundgerüst: DOCTYPE, html, head, body
Wichtige Tags: h1-h6, p, a, img, ul/ol/li, div, span, form
Semantische Tags: header, nav, main, article, section, aside, footer
CSS-Selektoren: Element, .class, #id, [attr], :pseudo, ::pseudo
Box-Model: Content → Padding → Border → Margin
box-sizing: border-box immer verwenden!
Flexbox: 1-dimensionale Layouts (Navigation, Kartenreihen)
Grid: 2-dimensionale Layouts (Seitenlayouts, Galerien)
Responsive Design: Mobile-First, relative Einheiten, Media Queries
Best Practices: Semantik, Accessibility, Performance

        

Nächste Schritte

Nach diesen Grundlagen können Sie tiefer einsteigen:

JavaScript lernen: Für Interaktivität und Dynamik
Frameworks: React, Vue, Angular für komplexe Apps
CSS-Frameworks: Bootstrap, Tailwind für schnelles Styling
Backend: Node.js, PHP, Python für Server-seitige Logik

Weiterführende Themen

Responsive Design

Websites für alle Geräte optimieren – Mobile, Tablet, Desktop.

Zu Responsive Design

Frontend-Frameworks

React, Vue, Angular – moderne JavaScript-Frameworks für komplexe Apps.

Zu Frontend-Frameworks

Backend-Frameworks

Node.js, Express, Django – Server-seitige Webentwicklung.

Zu Backend-Frameworks

SEO-Grundlagen

Suchmaschinenoptimierung für bessere Rankings bei Google & Co.

Zu SEO-Grundlagen