HTML: Das Fundament jeder Webseite
HTML (Hypertext Markup Language) ist die Grundsprache des Webs. Jede Website, die du im Browser siehst, basiert auf HTML-Code. Es strukturiert Inhalte, definiert Hierarchien und gibt Suchmaschinen sowie assistiven Technologien die notwendigen Informationen, um deine Inhalte zu verstehen und korrekt darzustellen.
Eine Analogie zum besseren Verständnis:
Stell dir eine Webseite wie einen menschlichen Körper vor: HTML ist das Skelett – es gibt die grundlegende Struktur und Form vor. CSS ist das äußere Erscheinungsbild wie Haut, Haare und Nägel – es macht alles schön und ansprechend. JavaScript sind die Muskeln und Bänder – sie sorgen für Bewegung und Interaktivität.
Ohne HTML wäre das moderne Web nicht möglich. Es ist das Fundament, auf dem CSS (für Design) und JavaScript (für Interaktivität) aufbauen. Für SEO und Accessibility ist sauberes, semantisches HTML unerlässlich.
In Webflow ist HTML ein fixer Bestandteil
Webflow generiert automatisch HTML-Code im Hintergrund, während du visuell designst. Jedes Element, das du auf die Canvas ziehst – sei es eine Heading, ein Paragraph oder ein Section Element – wird in sauberen HTML-Code übersetzt.
Der grosse Vorteil: Du musst nicht manuell HTML schreiben, sondern arbeitest visuell. Webflow kümmert sich um die technische Umsetzung und sorgt dafür, dass der generierte Code den modernen Webstandards entspricht. Gleichzeitig hast du volle Kontrolle über die semantische Struktur deiner Seite.
So bearbeitest du das HTML in Webflow
In Webflow bearbeitest du HTML nicht direkt im Code-Editor, sondern über die visuellen Element-Einstellungen. Jedes Element hat spezifische Eigenschaften, die du im rechten Panel anpassen kannst.
Für fortgeschrittene Anpassungen stehen dir mehrere Möglichkeiten zur Verfügung:
- Element-Einstellungen: Ändere HTML-Tags und IDs direkt im Element-Settings-Panel
- Custom HTML Element: Integriere komplexes HTML direkt in deine Seite mit dem Embed-Element
- Site-Settings Custom Code: Füge im Site-Settings oder auf Seiten-Ebene Custom Code im Head oder Footer hinzu
Korrekte HTML <body> Struktur in Webflow
Eine saubere HTML-Struktur ist das Gerüst jeder professionellen Website. Sie besteht aus semantischen Landmarks, die den Aufbau deiner Seite logisch strukturieren und sowohl für Suchmaschinen als auch für Screen Reader verständlich machen.
Die wichtigsten strukturellen Elemente:
- <header>: Kopfbereich mit Logo, Navigation und wichtigen Informationen
- <nav>: Haupt-Navigationsmenü der Website
- <main>: Der Hauptinhalt der Seite – hier gehören deine Sections hinein
- <section>: Thematisch zusammengehörende Inhaltsbereiche innerhalb von <main>
- <article>: In sich geschlossene Inhalte wie Blog-Beiträge oder Produkte
- <aside>: Sekundäre Inhalte wie Sidebars oder verwandte Informationen
- <footer>: Fussbereich mit Copyright, Links und Kontaktinformationen
Typischer Seitenaufbau in Webflow:
Eine korrekt strukturierte Webflow-Seite folgt diesem Schema: Der <header> enthält die Navigation (<nav>). Darunter kommt das <main>-Element, das alle <section>-Bereiche umschliesst. Optional kann eine <aside> für sekundäre Inhalte verwendet werden. Am Ende steht der <footer>.
Diese Struktur hilft Suchmaschinen, den Aufbau deiner Seite zu verstehen, und ermöglicht Screen Reader-Nutzern eine effiziente Navigation durch Landmarks.
Mehr zur HTML-Struktur: Eine detaillierte Erklärung zu HTML-Layouts und semantischen Elementen findest du auf W3Schools HTML Layout.
Die ideale Struktur von Headings in Webflow
Headings (H1-H6) strukturieren deine Inhalte hierarchisch. Eine saubere Heading-Struktur ist essentiell für SEO, Accessibility und moderne Answer Engine Optimization (AEO).
Best Practices für Headings:
- Eine H1 pro Seite: Die H1 beschreibt das Hauptthema der Seite
- Logische Hierarchie: H2 folgt auf H1, H3 auf H2 – überspringe keine Ebenen
- Aussagekräftige Formulierungen: Headings sollten den Inhalt präzise beschreiben
- Keywords integrieren: Nutze relevante Suchbegriffe natürlich in Headings
- Nicht nur für Design: Wähle Heading-Level nach Struktur, nicht nach visueller Grösse
In Webflow kannst du die visuelle Darstellung (Grösse, Farbe) über CSS-Klassen steuern, während du die semantische Ebene (H1-H6) korrekt hältst.
Versteckte Headings für bessere Accessibility
Versteckte Headings sind ein mächtiges Werkzeug, um die Accessibility deiner Website zu verbessern, ohne das visuelle Design zu beeinträchtigen. Sie ermöglichen Screen Reader-Nutzern eine bessere Navigation, während sehende Besucher keine zusätzlichen Überschriften sehen.
Wann sind versteckte Headings sinnvoll?
- Strukturierung von Bereichen: Footer, Sidebar oder Widget-Bereiche erhalten semantische Überschriften
- Navigation für Screen Reader: Nutzer können schnell zu wichtigen Bereichen springen
- Design-Limitationen: Wenn das visuelle Design keine sichtbare Heading vorsieht, aber die semantische Struktur wichtig ist
Richtige Umsetzung in Webflow
Verwende CSS-Klassen mit position: absolute; clip: rect(0,0,0,0); position: absolute; statt display: none oder visibility: hidden, da letztere von Screen Readern ignoriert werden.
Praxis-Beispiel aus meiner Arbeit:
Ich nutze versteckte Headings regelmässig im Footer meiner Webflow-Projekte. Dort setze ich ein H2-Element mit dem Text "Footer" ein, das ausschliesslich für Screen Reader sichtbar ist. Die Umsetzung:
- Erstelle ein H2-Element mit dem Text "Footer" im Footer-Bereich
- Füge eine CSS-Klasse hinzu (z.B. "sr-only" für Screen Reader Only)
- Definiere die Klasse mit position: absolute; left: -10000px; im Custom Code
Diese Methode verbessert die Navigation für Screen Reader-Nutzer erheblich, ohne das visuelle Design zu stören. Screen Reader kündigen den Footer-Bereich klar an, und Nutzer können gezielt dorthin springen.
Wichtige Warnung
Google betrachtet versteckte Headings kritisch, wenn sie ausschliesslich zur Keyword-Manipulation dienen. Versteckte Headings sollten niemals für Keyword-Stuffing, irrelevanten Content oder Täuschungsabsicht verwendet werden. Nutze sie ausschliesslich für echte Accessibility-Zwecke.
Die semantischen Tags in Webflow
Semantische HTML5-Tags geben dem Code Bedeutung. Statt nur <div>-Elemente zu verwenden, nutzt du aussagekräftige Tags wie <header>, <nav>, <article> oder <footer>.
Webflow unterstützt eine Vielzahl semantischer Tags:
- Section: Verwendet
<section>für thematische Bereiche - Header/Footer: Für Kopf- und Fussbereiche
- Nav: Für Navigationselemente
- Article: Für in sich geschlossene Inhalte wie Blog-Artikel
- Aside: Für sekundäre Inhalte wie Sidebars
- Main: Für den Hauptinhalt der Seite
Diese Tags helfen Suchmaschinen und Screen Readern, deine Inhalte besser zu verstehen und zu indexieren.
Vollständige Liste von allen Webflow HTML5 Tags.
Das Custom HTML Element
Das Embed-Element (Custom HTML) in Webflow ermöglicht es dir, benutzerdefinierten HTML-Code direkt in deine Seite einzufügen. Dies ist nützlich für:
- Einbinden von Drittanbieter-Widgets (Kalender, Formulare, etc.)
- Komplexe Strukturen, die nicht visuell umsetzbar sind
- Schema.org Markup für strukturierte Daten
- Custom JavaScript-Funktionalitäten
- SVG-Code für individuelle Grafiken
- Echte HTML-Buttons statt Links
Wichtig: Custom HTML wird erst nach dem Publish sichtbar. Im Designer siehst du nur einen Platzhalter. Achte darauf, dass dein Code valide ist und keine Sicherheitslücken enthält.
Für dynamische Inhalte kannst du auch CMS-Felder im Custom HTML nutzen, um personalisierten Code pro Collection-Item zu generieren.
Der Unterschied zwischen Links und Buttons
Ein häufiges Missverständnis: Das Webflow "Button"-Element ist kein <button> im HTML-Sinne, sondern ein Link (<a>-Tag) mit Button-Styling.
Semantischer Unterschied:
- Links (
<a>): Führen zu einer anderen Seite oder einem anderen Bereich. Sie haben einhref-Attribut und dienen der Navigation. - Buttons (
<button>): Lösen Aktionen aus, wie das Öffnen eines Modals, das Absenden eines Formulars oder das Starten einer JavaScript-Funktion. Sie navigieren nicht weg von der Seite.
Warum ist das wichtig?
- Accessibility: Screen Reader kündigen Links und Buttons unterschiedlich an. Ein Link sagt "Link zu...", ein Button sagt "Button, [Aktion]"
- Semantik: Suchmaschinen und Browser verstehen die Funktion des Elements korrekt
- Tastatur-Navigation: Links werden mit
Enteraktiviert, Buttons mitEnterundSpace
Praxis-Beispiel: Echte Buttons mit Custom HTML
Ich nutze das Custom HTML Element regelmässig, um echte <button>-Elemente zu erstellen, wenn keine Navigation stattfinden soll. Typische Anwendungsfälle:
- Öffnen/Schliessen von Modals oder Overlays
- Umschalten von Tabs oder Accordion-Bereichen
- Auslösen von Animationen oder Filterungen
- Absenden von Formularen via JavaScript
Code-Beispiel:
<button type="button" class="custom-button" aria-label="Modal öffnen">Open Modal</button>
Dieser Ansatz gewährleistet semantisch korrektes HTML und verbessert die Accessibility deiner Website erheblich.
Häufigsten HTML-Fehler die ich beobachte
In meiner Arbeit als Webflow-Entwickler sehe ich immer wieder dieselben Strukturfehler, die die Accessibility und SEO-Performance negativ beeinflussen. Hier sind die vier häufigsten Fehler:
1. Footer hat ein <section> Tag, statt <footer> Tag
Viele Webflow-Projekte verwenden ein <section>-Element für den Fussbereich. Das ist semantisch falsch. Der Footer sollte immer das <footer>-Tag verwenden, damit Screen Reader und Suchmaschinen den Bereich korrekt als Fussbereich identifizieren können.
Falsch: <section class="footer">...</section>
Richtig: <footer>...</footer>
2. Sections haben kein <section> Tag, sondern nur <div> Tags
Der häufigste Fehler überhaupt: Inhaltsbereiche werden als einfache <div>-Blöcke statt als <section>-Elemente strukturiert. Dadurch verliert die Seite ihre semantische Gliederung, und Screen Reader können die Struktur nicht erkennen.
Falsch: <div class="hero">...</div>
Richtig: <section class="hero">...</section>
3. Die Sections sind nicht im <main> Tag
Ein kritischer Strukturfehler: Die Inhaltsbereiche (<section>) liegen direkt im <body>, ohne vom <main>-Element umschlossen zu werden. Das <main>-Tag ist essentiell, um den Hauptinhalt der Seite zu kennzeichnen und ihn von Header und Footer abzugrenzen.
Falsch:
<body>
<header>...</header>
<section>...</section>
<footer>...</footer>
</body>
Richtig:
<body>
<header>...</header>
<main>
<section>...</section>
</main>
<footer>...</footer>
</body>
4. Der Footer ist im <main> Tag anstelle ausserhalb
Manchmal wird der <footer> fälschlicherweise innerhalb des <main>-Elements platziert. Der Footer gehört jedoch auf die gleiche Ebene wie <header> und <main> – nämlich als direktes Kind des <body>-Elements.
Falsch:
<main>
<section>...</section>
<footer>...</footer>
</main>
Richtig:
<main>
<section>...</section>
</main>
<footer>...</footer>
Fazit: Diese vier Fehler sind einfach zu vermeiden, wenn du in Webflow bewusst die richtigen HTML-Tags auswählst. Nutze die Element-Einstellungen, um Div-Blöcke in semantische Tags wie <section>, <main> und <footer> umzuwandeln. Deine Website wird dadurch nicht nur technisch korrekter, sondern auch besser zugänglich und SEO-optimiert.