Webdesign · Grundlagen
HTML und CSS: Was Auftraggeber wissen sollten
Jede Website besteht am Ende aus HTML und CSS, egal mit welchem System sie gebaut wurde. Ein Grundverständnis hilft, Angebote einzuschätzen und die richtigen Fragen zu stellen.
Kurz beantwortet
HTML beschreibt den Inhalt und die Struktur einer Website: Überschriften, Absätze, Listen, Links, Bilder. CSS bestimmt das Aussehen: Farben, Schriften, Abstände und die Anordnung auf verschiedenen Bildschirmen. Sauberes HTML hilft Suchmaschinen, KI-Systemen und Menschen mit Hilfsmitteln, eine Seite zu verstehen. Sauberes CSS macht eine Website schnell und leicht zu pflegen.
Was HTML ist
HTML steht für Hypertext Markup Language. Es ist keine Programmiersprache, sondern eine Auszeichnungssprache: Sie sagt, was ein Stück Inhalt ist. Dies ist eine Hauptüberschrift, dies ein Absatz, dies eine Liste, dies ein Link. Der Browser liest diese Auszeichnung und stellt den Inhalt dar.
Entscheidend ist, dass Inhalte richtig ausgezeichnet sind. Eine Überschrift, die nur groß und fett aussieht, aber im Code ein normaler Absatz ist, erkennen Suchmaschinen und Screenreader nicht als Überschrift. Man spricht von semantischem HTML, wenn jedes Element nach seiner Bedeutung ausgezeichnet ist.
Was CSS ist
CSS steht für Cascading Style Sheets. Es legt fest, wie die ausgezeichneten Inhalte aussehen: Schrift, Farben, Abstände, Raster. Mit CSS wird auch bestimmt, wie sich eine Seite auf dem Handy anders anordnet als auf dem Monitor. Mehr dazu im Artikel Responsive Webdesign.
Gutes CSS arbeitet mit festen Bausteinen: Farben, Schriftgrößen und Abstände werden einmal zentral festgelegt und überall wiederverwendet. Ändert sich eine Farbe, wird sie an einer Stelle geändert, nicht an hundert.
Warum sauberer Code für Sie zählt
| Bereich | Sauberer Code | Unsauberer Code |
|---|---|---|
| Suchmaschinen | erkennen Struktur und Wichtigkeit der Inhalte | müssen raten, was Überschrift und was Nebensache ist |
| KI-Systeme | können Abschnitte sauber zitieren | finden keine klaren Abschnitte |
| Barrierefreiheit | Screenreader können navigieren | Inhalte sind für Menschen mit Einschränkungen schwer nutzbar |
| Ladezeit | schlanker Code lädt schnell | überflüssiger Code bremst |
| Pflege | Änderungen sind schnell und sicher | jede Änderung kann an anderer Stelle etwas zerstören |
Woran Sie sauberen Code erkennen
Ohne Programmierkenntnisse lässt sich einiges prüfen:
- Eine Hauptüberschrift pro Seite: Browsererweiterungen für Barrierefreiheit oder SEO zeigen die Überschriftenstruktur an.
- Tastaturbedienung: Lässt sich die Seite nur mit der Tabulatortaste durchgehen, und sieht man dabei, wo man gerade ist?
- Bilder mit Beschreibung: Haben Bilder einen Alternativtext, der den Inhalt beschreibt?
- Schnelle Ladezeit: PageSpeed Insights von Google zeigt auch Hinweise auf überflüssigen Code.
- Lesbar ohne Gestaltung: Die Seite bleibt auch ohne CSS in sinnvoller Reihenfolge verständlich.
Barrierefreiheit wird zur Pflicht
Seit dem 28. Juni 2025 gilt in Deutschland das Barrierefreiheitsstärkungsgesetz. Es verpflichtet Unternehmen, bestimmte Produkte und Dienstleistungen barrierefrei anzubieten, darunter Angebote im elektronischen Geschäftsverkehr, etwa Onlineshops und Buchungen. Kleinstunternehmen, die Dienstleistungen anbieten, also weniger als zehn Beschäftigte und höchstens zwei Millionen Euro Jahresumsatz oder Bilanzsumme, sind davon ausgenommen. Ob und wie das Gesetz für eine bestimmte Website gilt, sollte im Einzelfall geprüft werden.
Unabhängig von der Pflicht: Semantisches HTML, ausreichende Kontraste, sichtbare Fokuszustände und Bedienbarkeit per Tastatur machen eine Website für alle besser nutzbar.
Fragen, die Sie Ihrem Anbieter stellen können
Wie ist die Überschriftenstruktur aufgebaut?
Eine klare Antwort zeigt, dass darüber nachgedacht wurde.
Ist die Website per Tastatur bedienbar?
Und sind Kontraste nach den Richtlinien für barrierefreie Inhalte geprüft?
Werden Inhalte im HTML ausgeliefert?
Oder erst per JavaScript nachgeladen? Das ist wichtig für Suchmaschinen und KI-Crawler.
Wie wird das CSS organisiert?
Gibt es zentral festgelegte Farben, Schriften und Abstände?
Wie KKM-Design Code schreibt
Häufige Fragen
Muss ich HTML lernen, um meine Website zu pflegen?
Nein. Mit einem Content-Management-System pflegen Sie Inhalte über eine Oberfläche. Ein Grundverständnis hilft aber, Angebote einzuschätzen und Fehler zu erkennen.
Erzeugen Seitenbaukästen sauberen Code?
Oft mehr Code als nötig. Gute Ergebnisse sind möglich, verlangen aber eine bewusste Einrichtung und wenige Zusatzmodule.
Was ist JavaScript?
Die dritte Sprache im Browser, zuständig für Verhalten: Menüs, Formulare, Animationen. Inhalte sollten nicht allein von JavaScript abhängen, damit sie für alle Crawler sichtbar bleiben.
Kay Strack · Webdesigner und Cloud Engineer · KKM-Design