10 grundlegende HTML-Codes für Websites

Wichtige Erkenntnisse

Auch wenn Website-Baukästen wie WordPress benutzerfreundlich sind, hilft HTML-Verständnis enorm beim Anpassen und Verbessern deiner Website. Mit nur 10 grundlegenden HTML-Tags (wie <h1>, <p>, <img>, <a>) kannst du Struktur, Texte, Bilder und Links professionell gestalten – ohne teure Entwickler beauftragen zu müssen.
Die richtige Hintergrundfarbe beeinflusst Emotionen und Konversionsraten massiv. Mit CSS-Techniken wie RGBA-Transparenz, Farbverläufen (Gradients) und der 60-30-10-Regel schaffst du professionelle, barrierefreie Designs. Farben wie Blau (Vertrauen) oder Rot (Dringlichkeit) gezielt einzusetzen, kann deine Geschäftsergebnisse signifikant verbessern.
Je nach Anforderung kannst du zwischen Inline-CSS (schnell für Einzelelemente), internem CSS (für spezifische Seiten) und externer CSS-Datei (professioneller Standard) wählen. Die externe Methode bietet maximale Wartbarkeit, Wiederverwendbarkeit und Performance durch Browser-Caching – ideal für wachsende Websites.
Selbst das beste Design braucht zuverlässiges Hosting. Mit GoDaddy Webhosting erhältst du 99,9% Uptime, bis zu 2x schnellere Ladezeiten, automatische Backups und kostenlose SSL-Zertifikate – damit deine sorgfältig gestalteten Hintergrundfarben, Gradients und HTML-Strukturen blitzschnell laden und immer verfügbar sind. Perfekte Kombination aus technischem Know-how und professioneller Infrastruktur.

Hast du kürzlich eine Website erstellt? Dann bist du vermutlich schon auf Begriffe wie HTML-Editor, HTML-Code oder HTML-Tags gestoßen. Obwohl die meisten Plattformen zur Website-Erstellung, wie WordPress, recht benutzerfreundlich sind und keine großen technischen Kenntnisse erfordern, hilft dir ein besseres Verständnis von HTML, grundlegende Programmierkonzepte zu verstehen, das Erscheinungsbild deiner Website anzupassen oder zu verbessern. Deshalb stellen wir dir Grundlagen zu HTML sowie die zehn wichtigsten HTML-Codes vor, die du kennen solltest, begleitet von Beispielen, um dir den Einstieg zu erleichtern.

Was ist HTML?

HTML steht für „Hyper Text Markup Language", auf Deutsch: Hypertext-Auszeichnungssprache. HTML-Codes sind die universelle Sprache, die verwendet wird, um Websites zu erstellen und zu formatieren. Sie funktionieren auf jedem Betriebssystem (Windows, Mac, Linux usw.) und in jedem Browser (Chrome, Explorer, Mozilla usw.).

Zwar ist HTML keine besonders anspruchsvolle Programmiersprache, aber es erlaubt dir, andere leistungsstärkere Codes wie zum Beispiel Javascript einzufügen. Beginnen wir mit dem Grundelement von HTML: den Tags.

HTML-Tags

HTML besteht aus einem System von seriellen Tags, die Anweisungen enthalten, die von Browsern in unterschiedliche Elemente wie:

Bilder
Text
Hyperlinks
Listen
Tabellen usw.

Damit ein solcher Tag gelesen werden kann, muss er zwei Teile haben: einen Starttag <Tag> und einen Endtag </Tag>, die in spitzen Klammern gesetzt werden (< >).

Zum Beispiel definieren die Tags <strong> und </strong> einen Text in Fettschrift. Wenn du in deinem HTML-Dokument den folgenden Code schreibst:

<strong>Dieser Text ist fett gedruckt.</strong>

Das Ergebnis wird so aussehen:

Dieser Text ist fett gedruckt.

Beispiel von HTML-Tags in Aktion

Versuche es doch selbst! Füge den oben genannten Code in einen HTML-Editor ein. Wie du siehst, dient der Starttag dazu, das Verhalten des Inhalts zu definieren (zum Beispiel, ob ein Text fett gedruckt wird oder eine bestimmte Größe haben soll), und der Endtag zeigt dem Browser an, wo dieses Verhalten enden soll. Um einen Endtag zu erstellen, füge einfach einen Schrägstrich ( / ) am Anfang des Tags hinzu.

Ein wichtiger Hinweis: Nicht alle Tags benötigen ein „Ende". Zum Beispiel ist der Code <br> für Zeilenumbrüche ein „leeres Element“ und kann ohne Endtag verwendet werden.

Grundstruktur einer HTML-Seite

Bevor wir uns den wichtigsten HTML-Codes zuwenden, musst du wissen, dass die erste Zeile deines HTML-Dokuments immer den Tag <!DOCTYPE html> enthalten sollte. Dadurch wird sichergestellt, dass der Code in allen Browsern korrekt gelesen wird.

Ein gut strukturiertes HTML-Dokument enthält vier wesentliche Tags, damit der Inhalt richtig verteilt wird:

HTML-Tag

Der Tag <html> steht am Anfang eines HTML-Dokuments und teilt den Browsern mit, dass die Seite HTML-Code enthält. Der Endtag </html> ist das letzte Element im Dokument.

Header

Der Tag <head> wird für den Kopfbereich der Seite verwendet. Er enthält wichtige Informationen für die Funktionsweise der Seite, die aber für die Besucher der Website unsichtbar bleiben.

Seitentitel

Der Tag <title> gibt deiner Seite einen Namen, der für die Benutzer sichtbar ist, z.B. in den Tabs des Browsers.

Body

Der Tag <body> enthält alle sichtbaren Inhalte der Website, wie Texte, Bilder, Videos und andere Elemente.

Beispiel für die Grundstruktur einer HTML-Seite:

<html>
  <head>
    <title>Meine Beispielseite</title>
  </head>
  <body>
    Hier kommt der Inhalt hin
  </body>
</html>

Wenn du diesen Code in einer .html-Datei speicherst und in deinem Browser öffnest, siehst du etwas Ähnliches:

Diese vier Tags bilden das „Gerüst“ deiner Website. Der nächste Schritt ist das Einfügen von Text (zwischen <body> und </body>) und das Anwenden weiterer HTML-Tags. Schauen wir uns die wichtigsten davon an:

5. Titel und Untertitel

Die Tags <h1>, <h2>, bis <h6> dienen dazu, Titel und Untertitel zu erstellen, was hilft, den Inhalt zu strukturieren. Zur Optimierung deiner Seite für SEO solltest du <h1> nur einmal pro Seite verwenden.

<h1>Das ist ein H1-Titel, nutze ihn für den Haupttitel</h1>
<h2>Das ist ein H2-Titel, ideal für Abschnittsüberschriften</h2>
<h3>Das ist ein H3-Titel, für Unterabschnitte</h3>

Das Ergebnis wird wie folgt aussehen:

6. Absätze

Mit den Tags <p> und <br> kannst du Text in Absätze und Zeilenumbrüche gliedern.

<p>Das ist der erste Absatz.</p>
<p>Das ist der zweite Absatz.</p>
<p>Ein Satz.<br> Ein weiterer Satz in der gleichen Zeile.</p>

Das Ergebnis:

7. Bilder

Mit dem Tag <img> kannst du Bilder auf deiner Website einfügen. Der Attribut src gibt den Speicherort des Bildes an, und alt beschreibt das Bild, was Suchmaschinen wie Google hilft.

<img src="https://images.unsplash.com/photo-1535378917042-10a22c95931a" alt="Beispielbild">

Das Ergebnis:

8. Hyperlinks

Mit dem Tag <a> kannst du Hyperlinks in deine Seite einfügen, zum Beispiel zu deinen sozialen Netzwerken oder anderen Websites.

<a href="https://www.godaddy.com/resources/de">Besuche den Blog von GoDaddy</a>

Ergebnis:

Besuche den Blog von GoDaddy

9. Listen und Aufzählungen

Mit <ol> erstellst du nummerierte Listen, mit <ul> Aufzählungen.

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

Das Ergebnis:

Punkt 1
Punkt 2
Punkt 3

10. Stile

Mit dem Attribut <style> kannst du Farben, Schriftarten und mehr für deinen Inhalt definieren.

<p style="color:red; font-size:100px">Hallo Welt</p>

Das Ergebnis:

Zusätzlicher Tipp: HTML-Codes von anderen Websites untersuchen

Du kannst den HTML-Code anderer Websites untersuchen, indem du mit der rechten Maustaste auf eine freie Stelle klickst und „Seitenquelltext anzeigen" wählst. Dies hilft dir, mehr über Webdesign zu lernen.

HTML Background Color ändern: Die wichtigsten CSS-Tipps

Die Farben deiner Website wecken Emotionen und beeinflussen das Verhalten deiner Besucher maßgeblich. Sie sind ein zentrales Element der User Experience (UX) und des User Interface (UI). Viele Website-Betreiber fragen sich: Welche Hintergrundfarbe passt am besten und erhöht die Konversionsrate? In diesem umfassenden Guide zeigen wir dir, wie du die CSS Background Color professionell änderst, geben praktische Tipps zur Farbauswahl und erklären, wie du häufige Fehler vermeidest.

Die Grundlagen: HTML Background Color mit CSS ändern

HTML (Hypertext Markup Language) strukturiert Texte, Bilder und Links auf deiner Website, bietet aber keine direkte Methode zur Änderung der Hintergrundfarbe. Das Design und die Farben definierst du mit der Gestaltungssprache CSS (Cascading Style Sheets). Das CSS-Attribut für die background color ist simpel: background-color.

Farbwerte verstehen

Bevor du mit der Background Color arbeitest, solltest du die verschiedenen Farbwert-Formate kennen:

Farbnamen: lightblue, red, green (147 vordefinierte Namen)
Hexadezimal: #89cff0 (6-stelliger Code)
RGB: rgb(137, 207, 240) (Rot-Grün-Blau-Werte)
RGBA: rgba(137, 207, 240, 0.5) (mit Transparenz)
HSL: hsl(200, 71%, 74%) (Farbton-Sättigung-Helligkeit)

Drei Methoden zur CSS-Einbindung

Du kannst CSS auf drei verschiedene Arten in deine HTML Background Color integrieren. Jede Methode hat ihre Vor- und Nachteile.

1. Inline CSS – Schnell aber unflexibel

Die einfachste Methode ist die direkte Einbindung im HTML-Element:

html

Die Vorteile:

Schnelle Implementierung
Hohe Priorität (überschreibt andere Styles)

Die Nachteile:

Unübersichtlich bei vielen Elementen
Schwer wartbar
Keine Wiederverwendbarkeit

2. Internes CSS – Besser organisiert

Für eine bessere Übersicht kannst du das Design im <head> des HTML-Dokuments definieren:

Diese Methode eignet sich für einzelne Seiten mit spezifischem Design.

3. Externe CSS-Datei – Die professionelle Lösung

Empfohlen: Lege alle Farben und Designelemente in einer separaten CSS-Datei fest. Diese Methode bietet maximale Flexibilität und ist der Standard für professionelle Websites.

style.css:

body { background-color: lightblue; } .container { background-color: #ffffff; } .hero-section { background-color: rgb(137, 207, 240); }

HTML-Einbindung:

Die Vorteile:

Zentrale Verwaltung aller Styles
Einfache Wartung und Updates
Wiederverwendbarkeit über mehrere Seiten
Bessere Performance durch Browser-Caching

Transparente Hintergründe mit CSS

Transparente Hintergrundfarben sind ein beliebtes Designelement. CSS bietet mehrere Methoden, um background color transparent zu gestalten.

RGBA-Werte – Die präzise Methode

Mit RGBA-Werten kontrollierst du die Transparenz exakt:

css

.element { /* 50% transparentes Blau */ background-color: rgba(0, 0, 255, 0.5); } .overlay { /* 80% transparentes Schwarz */ background-color: rgba(0, 0, 0, 0.8); }

Der letzte Wert (Alpha-Kanal) bestimmt die Deckkraft: 0 = vollständig transparent, 1 = vollständig deckend.

Hexadezimal mit Alpha-Kanal

Moderne Browser unterstützen auch 8-stellige Hex-Werte:

css

.element { /* 50% transparentes Blau */ background-color: #0000ff80; }

Opacity vs. RGBA – Der wichtige Unterschied

css

/* RGBA: Nur Hintergrund transparent */ .box-rgba { background-color: rgba(255, 0, 0, 0.5); color: black; /* Text bleibt deckend */ } /* Opacity: Alles transparent */ .box-opacity { background-color: red; opacity: 0.5; /* Auch Text wird transparent! */ }

Wichtig: Verwende RGBA für transparent background color in CSS, wenn nur der Hintergrund transparent sein soll.

Farbverläufe (Gradients) erstellen

Moderne Websites setzen auf CSS background color gradient für dynamische, ansprechende Designs.

Linear Gradients – Geradlinige Verläufe

css

/* Von links nach rechts */ body { background: linear-gradient(to right, #ff7e5f, #feb47b); } /* Diagonal (beliebter Effekt) */ .hero { background: linear-gradient(135deg, #667eea, #764ba2); } /* Mehrfarbiger Verlauf */ .section { background: linear-gradient( to bottom, #ff0000 0%, #00ff00 50%, #0000ff 100% ); }

Radial Gradients – Kreisförmige Verläufe

css

/* Zentral nach außen */ body { background: radial-gradient(circle, #e66465, #9198e5); } /* Elliptisch positioniert */ .card { background: radial-gradient(ellipse at top left, #fff, #000); }

Conic Gradients – Konische Verläufe

css

.pie-chart { background: conic-gradient( from 0deg, red 0deg 120deg, yellow 120deg 240deg, green 240deg 360deg ); }

Praxis-Tipp: Nutze Online-Tools wie CSS Gradient Generator oder Coolors für schnelle, professionelle Farbverläufe.

Hintergrundfarben in Frameworks

Tailwind CSS Background Color

Tailwind nutzt Utility-Classes für schnelles Styling:

Content

50% transparent

Farbverlauf

Responsive Background

Tailwind Background Colors sind anpassbar und bieten vordefinierte Farbpaletten.

Bootstrap Background Color

Bootstrap bietet praktische Utility-Klassen:

Primary Background

Success Background

75% Deckkraft

Gradient Effect

Bootstrap Background Color ist ideal für schnelle Prototypen und konsistente Designs.

Die richtige Farbe wählen: Psychologie & Best Practices

Die Auswahl der Background Color beeinflusst maßgeblich die User Experience und Konversionsrate.

Farbpsychologie

Rot: Energie, Leidenschaft, Dringlichkeit – ideal für Call-to-Actions
Blau: Vertrauen, Professionalität, Ruhe – perfekt für Business-Websites
Grün: Natur, Nachhaltigkeit, Wachstum – geeignet für Öko-Marken
Gelb: Freude, Optimismus, Aufmerksamkeit – weckt positive Emotionen
Orange: Fröhlichkeit, Kreativität, Energie – für dynamische Marken
Weiß: Minimalismus, Klarheit, Modernität – Standard für Content-Seiten
Schwarz: Eleganz, Luxus, Kraft – für Premium-Produkte

Die 60-30-10 Regel

Professionelles Farbdesign folgt dieser Regel:

60% Hauptfarbe: Primärer Hintergrund (z.B. Weiß oder Hellgrau)
30% Sekundärfarbe: Akzentbereiche (z.B. farbige Sections)
10% Akzentfarbe: Call-to-Actions und wichtige Elemente

Barrierefreiheit beachten

Das Kontrastverhältnis zwischen Background Color und Text muss ausreichend sein:

Normaler Text: Mindestens 4.5:1
Großer Text: Mindestens 3:1
UI-Elemente: Mindestens 3:1

Tool-Tipp: Nutze den WebAIM Contrast Checker zur Überprüfung.

Spezielle Anwendungsfälle

Background Color für Divs

/* Einzelnes Div */ .content-box { background-color: #f0f0f0; padding: 20px; border-radius: 8px; } /* Hover-Effekt */ .card:hover { background-color: #e8f4f8; transition: background-color 0.3s ease; }

Text Background Color

/* Markierter Text */ .highlight { background-color: yellow; padding: 2px 4px; } /* Inline-Hervorhebung */ mark { background-color: #ffeb3b; color: black; }

Tabellen Background Color

/* Alternierende Zeilen */ table tr:nth-child(even) { background-color: #f2f2f2; } table tr:hover { background-color: #ddd; } /* Header */ table th { background-color: #4CAF50; color: white; }

Häufige Fehler vermeiden

Fehler 1: Schlechter Kontrast

Graue Schrift auf hellgrauem Hintergrund ist schwer lesbar und schadet der Barrierefreiheit.

Lösung: Teste Kontraste und halte WCAG-Standards ein.

Fehler 2: Zu viele Farben

Ein buntes Durcheinander wirkt unprofessionell und überwältigend.

Lösung: Beschränke dich auf 2-3 Hauptfarben plus Akzentfarbe.

Fehler 3: Performance ignorieren

Große Hintergrundbilder oder komplexe Gradients verlangsamen die Ladezeit.

Lösung: Optimiere Bilder und teste die Performance mit PageSpeed Insights.

Fehler 4: Mobile ignorieren

Was am Desktop gut aussieht, kann auf mobilen Geräten problematisch sein.

Lösung: Teste alle Background Colors responsive.

Dynamische Background Color mit JavaScript

Für interaktive Websites kannst du die background color change mit JavaScript steuern:

javascript

// Einfache Änderung document.body.style.backgroundColor = "#ff0000"; // Bei Button-Klick document.getElementById("changeColor").addEventListener("click", function() { document.body.style.backgroundColor = "#" + Math.floor(Math.random()*16777215).toString(16); }); // Dark Mode Toggle function toggleDarkMode() { document.body.classList.toggle("dark-mode"); }

css

/* CSS dazu */ body { background-color: #ffffff; transition: background-color 0.3s ease; } body.dark-mode { background-color: #1a1a1a; color: #ffffff; }

Performance-Optimierung für deine Website

Die perfekte CSS Background Color braucht auch die richtige Hosting-Infrastruktur. GoDaddy Web Hosting bietet dir die ideale Grundlage für schnelle, zuverlässige Websites:

99.9% Uptime-Garantie stellt sicher, dass deine sorgfältig gestalteten Hintergrundfarben immer sichtbar sind – keine verlorenen Besucher durch Ausfallzeiten.
Bis zu 2x schnellere Performance sorgt dafür, dass auch komplexe Gradients und Hintergrundbilder blitzschnell laden. Mit globalen Rechenzentren in Nordamerika und Europa profitierst du von optimalen Ladezeiten für deine Zielgruppe.
Automatische tägliche Backups schützen deine CSS-Dateien und Design-Anpassungen. Falls etwas schiefgeht, kannst du deine Website komplett wiederherstellen.
Kostenlose SSL-Zertifikate sind inklusive – wichtig für Vertrauen und SEO-Rankings, besonders bei E-Commerce-Seiten mit auffälligen Call-to-Action-Buttons.
Flexible Skalierung ermöglicht es dir, von einfachen Websites mit Standard-Performance (ab €6,54/Monat) bis zu hochperformanten Multi-Page-Sites mit starkem Traffic zu wachsen – mit 30 Tage Geld-zurück-Garantie für risikofreies Testen.

Zusammenfassung & Checkliste

Die HTML Background Color änderst du professionell mit CSS – idealerweise über eine externe CSS-Datei für maximale Flexibilität und Wartbarkeit.

Deine Checkliste:

Externe CSS-Datei verwenden
Farbkontraste mit Tools testen
60-30-10 Regel für Farbschema anwenden
RGBA für Transparenz nutzen
Gradients für moderne Optik einsetzen
Mobile Ansicht prüfen
Performance mit optimiertem Hosting sichern
A/B-Tests für Farbwirkung durchführen

Experimentiere mit verschiedenen Background Colors, Gradients und Transparenzen. Die richtige Farbwahl kann deine Konversionsrate signifikant erhöhen. Mit den hier gezeigten Techniken und einem zuverlässigen Hosting-Partner wie GoDaddy hast du alle Tools für eine erfolgreiche Website.

HTML-Grundlagen und CSS Background Color meistern - Fazit

Mit den zehn wichtigsten HTML-Tags und den CSS-Techniken für professionelle Background Colors bist du bestens gerüstet, deine Website individuell zu gestalten. Von der Grundstruktur mit <html>, <head> und <body> über Formatierungen bis hin zu transparenten Hintergründen und Farbverläufen – du hast nun das Handwerkszeug für beeindruckende Webdesigns. Kombiniere HTML-Struktur mit durchdachter Farbpsychologie, teste verschiedene Designs und setze auf zuverlässiges Hosting für optimale Performance.

Experimentiere mit den Code-Beispielen und entdecke, wie kleine Änderungen große Wirkung erzielen.

_{Titelmotiv: Bild von Gerd Altmann auf Pixabay}