HTML und CSS bilden zusammen die Grundlage vieler Websites. HTML verwendest du, um den Inhalt aufzubauen, wie Überschriften, Texte, Links und Listen. CSS nutzt du, um diesen Inhalt zu gestalten, etwa Farben, Abstände, Schriftgrößen und Ausrichtung. In dieser Anleitung lernst du Schritt für Schritt die Grundlagen kennen, ohne komplizierte Fachsprache.

Versuche die Übungen auf dieser Seite

Was ist HTML?

HTML steht für HyperText Markup Language. Es ist die Struktur einer Webseite. Du kannst es dir wie das Skelett eines Hauses vorstellen. Mit HTML gibst du an, was etwas ist: ein Titel, ein Absatz, ein Link, eine Liste oder ein Bild.

HTML arbeitet mit Elementen. Ein Element erkennst du meist an einem öffnenden Tag und einem schließenden Tag.

Dies ist ein Absatz

In diesem Beispiel ist <p> der öffnende Tag und </p> der schließende Tag. Alles dazwischen ist der Inhalt.

Was ist CSS?

CSS steht für Cascading Style Sheets. CSS bestimmt, wie HTML aussieht. Denke an Farbe, Schriftart, Ränder, Hintergrundfarbe und die Größe von Elementen.

Stell dir HTML als den Inhalt eines Raumes vor und CSS als dessen Einrichtung und Styling.

p {
  color: blue;
  font-size: 18px;
}

In diesem Beispiel erhalten alle Absätze eine blaue Farbe und eine Schriftgröße von 18 Pixeln.

Wie sieht HTML aus?

Eine einfache HTML-Struktur kann so aussehen:

Willkommen auf meiner Seite
Dies ist mein erster Textabschnitt.
Hier klicken

Hier siehst du drei verschiedene Elemente:

• <h1> für eine Hauptüberschrift
• <p> für einen Absatz
• <a> für einen Link

Die wichtigsten HTML-Elemente

Überschriften: h1 bis h6

Überschriften verwendest du, um Struktur in deine Seite zu bringen. Das <h1> ist die wichtigste Überschrift auf der Seite. Danach folgen <h2>, <h3> und so weiter.

Meine Website
Über mich
Meine Hobbys

Benutze Überschriften nicht nur, weil sie groß sind, sondern vor allem, weil sie dem Inhalt Struktur geben.

Absätze: p

Einen Absatz verwendest du für normale Textblöcke.

Ich lerne Schritt für Schritt, wie HTML funktioniert.

Fast der gesamte Fließtext auf einer Seite steht in einem <p>-Element.

Links: a

Mit dem <a>-Element erstellst du einen Link. Die Adresse setzt du in das Attribut href.

Gehe zu Google

Was zwischen den Tags steht, ist der klickbare Text.

Du kannst einen Link auch in einem neuen Tab öffnen:

Google in neuem Tab öffnen

Hinweis: Verwende Links am besten für echte Verweise auf andere Seiten, nicht nur um Text zu formatieren.

Listen: ul, ol und li

Es gibt zwei häufig verwendete Arten von Listen:

• ul: eine unnummerierte Liste mit Aufzählungspunkten
• ol: eine nummerierte Liste

Die Einträge in der Liste setzt du immer in <li>-Elemente.

Beispiel für eine Liste mit Aufzählungspunkten:

  
Äpfel
  
Bananen
  
Birnen

Beispiel für eine nummerierte Liste:

  
Öffne deinen Editor
  
Schreibe HTML
  
Sieh dir das Ergebnis an

Blöcke und Inline-Elemente: div und span

Dies ist ein wichtiger Unterschied in HTML.

Ein <div> ist ein Block-Element. Es wird oft verwendet, um größere Teile einer Seite zu gruppieren, wie eine Karte, einen Abschnitt oder eine Spalte.

  
Nachricht
  
Dies ist eine kurze Nachricht.

Ein <span> ist ein Inline-Element. Das bedeutet, dass es innerhalb einer Zeile bleibt. Du verwendest es oft, um ein kleines Stück Text separat zu stylen.

Dieser Text enthält ein wichtiges Wort.

Kurz gesagt:

• Verwende <div> für größere Blöcke oder Gruppen
• Verwende <span> für kleine Textstücke innerhalb einer Zeile

Bilder: img

Mit <img> fügst du ein Bild hinzu. Dieses Element hat keinen schließenden Tag.

Dabei bedeutet:

• src: der Pfad zum Bild
• alt: eine Beschreibung des Bildes

Der alt-Text ist wichtig für die Barrierefreiheit und wird auch angezeigt, wenn das Bild nicht geladen werden kann.

Wichtiger Text: strong und em

Wenn du einem Wort oder Satz besonderen Nachdruck verleihen willst, verwendest du oft:

• <strong> für wichtigen Text
• <em> für Hervorhebung

Dies ist sehr wichtig.
Lies dir das gut durch.

Attribute in HTML

Manche HTML-Elemente benötigen zusätzliche Informationen. Diese setzt du in Attribute.

Besuche die Website

In diesem Beispiel ist href ein Attribut.

Andere häufig verwendete Attribute sind zum Beispiel:

• class für CSS-Styling
• id für ein eindeutiges Element
• src für Bilder
• alt für Alternativtext

Was ist eine Class?

Eine class verwendest du, um einem Element einen Namen zu geben, den du in CSS nutzen kannst.

Dies ist ein Einleitungstext.

In CSS kannst du diese Class dann so stylen:

.intro {
  font-size: 20px;
  color: darkblue;
}

Der Punkt vor .intro in CSS bedeutet, dass du eine Class ansprichst.

CSS mit HTML verknüpfen

CSS kannst du auf mehrere Arten hinzufügen, aber für die Grundlagen ist es hilfreich zu verstehen, wie HTML und CSS zusammenhängen.

Angenommen, du hast dieses HTML:

Dieser Text fällt auf.

Dann kannst du mit CSS sagen, wie dieses Element aussehen soll:

.highlight {
  background-color: yellow;
  padding: 10px;
}

So gibst du diesem Absatz einen gelben Hintergrund und etwas Innenabstand.

Häufig verwendete CSS-Eigenschaften

Ein einfaches Praxisbeispiel

Hier unten siehst du ein kleines Stück HTML:

  
Willkommen
  
Schön, dass du hier bist.
  Mehr lesen

Und dies ist das zugehörige CSS:

.kaart {
  background-color: #f5f5f5;
  padding: 20px;
  border: 1px solid #dddddd;
}

.kaart h2 {
  color: #333333;
}

.kaart a {
  color: #0055cc;
}

Was passiert hier?

• Das div erhält einen hellgrauen Hintergrund
• Es entsteht Platz innerhalb des Blocks
• Es entsteht ein Rand drumherum
• Die Überschrift und der Link erhalten ihre eigene Farbe

Der Unterschied zwischen Margin und Padding

Anfänger verwechseln diese beiden oft, das ist ganz normal.

• padding ist Platz innerhalb des Elements
• margin ist Platz außerhalb des Elements

Stell es dir wie einen Karton vor:

• Padding ist der Platz zwischen dem Inhalt und dem Rand des Kartons
• Margin ist der Platz zwischen diesem Karton und anderen Kartons drumherum

.box {
  padding: 20px;
  margin: 30px;
  border: 1px solid black;
}

Kleine Übung 1

Erstelle selbst eine einfache Einleitung mit:

• einer Hauptüberschrift
• einem Absatz
• einem Link

Versuche es erst selbst. Schau dir erst danach das Beispiel unten an.

Willkommen auf meiner Seite
Ich lerne gerade, wie HTML funktioniert.
Mehr ansehen

Kleine Übung 2

Erstelle eine Einkaufsliste mit mindestens drei Einträgen. Verwende dafür eine unnummerierte Liste.

  
Brot
  
Milch
  
Käse

Kleine Übung 3

Erstelle einen Block mit einem Titel und Text und gib diesem Block via CSS eine Hintergrundfarbe und Padding.

  
Über diesen Kurs
  
Hier lernst du die Grundlagen von HTML und CSS.

.info-blok {
  background-color: #eeeeee;
  padding: 20px;
}

Häufige Fehler bei Anfängern

• Einen schließenden Tag vergessen, wie zum Beispiel </p>
• Elemente falsch verschachteln, zum Beispiel ein <li> außerhalb einer Liste
• Eine class in HTML verwenden, aber diesen Namen in CSS nicht korrekt übernehmen
• Zu viele <br>-Tags für Abstände verwenden, obwohl du eigentlich CSS-Margin oder Padding brauchst
• Ein div verwenden, wo ein besseres semantisches Element logischer wäre

Was bedeutet semantisches HTML?

Semantisches HTML bedeutet, dass du Elemente basierend auf ihrer Bedeutung verwendest. Also nicht einfach alles in ein <div> setzen, sondern darüber nachdenken, was etwas wirklich ist.

Zum Beispiel:

• Ein Titel ist eine Überschrift, also verwende <h1> oder <h2>
• Ein Textabschnitt ist ein Absatz, also verwende <p>
• Eine Liste ist ein <ul> oder <ol>

Dies macht deinen Code klarer, sauberer und besser für Suchmaschinen sowie Barrierefreiheit.

Wie wendest du das in der Praxis an?

Wenn du ein Stück Inhalt bauen willst, denke immer in dieser Reihenfolge:

• Was möchte ich zeigen?
• Welches HTML-Element passt dazu?
• Möchte ich es danach noch mit CSS stylen?
• Benötigt das Element eine Class?

Zum Beispiel: Du möchtest eine Karte mit einem Titel, Text und Button erstellen. Dann beginnst du mit HTML für die Struktur und fügst erst danach CSS für die Gestaltung hinzu.

Mini-Beispiel: ein einfacher Inhaltsblock

  
HTML und CSS lernen
  
Mit ein paar Grundregeln kannst du schon schnell viel erreichen.
  Direkt starten

.content-blok {
  background-color: #f8f8f8;
  padding: 24px;
  border-radius: 8px;
}

.content-blok a {
  color: #0066cc;
  font-weight: bold;
}

Zusammenfassung

Du hast nun die Grundlagen von HTML und CSS kennengelernt. HTML verwendest du, um den Inhalt und die Struktur einer Seite aufzubauen. CSS nutzt du, um diesen Inhalt zu gestalten. Die wichtigsten HTML-Elemente für Anfänger sind Überschriften, Absätze, Links, Listen, Divs und Spans. Sobald du verstehst, was jedes Element macht, wird es viel einfacher, Seiten logisch aufzubauen.

Der beste Weg, dies zu lernen, ist, viele kleine Stücke selbst zu erstellen, auszuprobieren und zu schauen, was passiert.

Übungsaufgabe für dich selbst

Versuche selbst einen kleinen Profilblock zu erstellen mit:

• einem Titel mit deinem Namen
• einem kurzen Absatz über dich selbst
• einer Liste mit drei Hobbys
• einem Link zu einer Website

Gib dem Block danach in CSS eine Hintergrundfarbe, Padding und einen Rand. Wenn das klappt, hast du die wichtigsten Grundlagen schon gut verstanden.

Probiere es auf dieser Seite selbst aus