Welche HTML-Elemente eignen sich am besten, um einen Verkaufstrichter semantisch korrekt abzubilden?

Melden

Für die semantisch korrekte Abbildung eines Verkaufstrichters (Sales Funnel) in HTML gibt es kein einzelnes „Funnel-Element“. Stattdessen nutzt man eine Kombination aus strukturellen Elementen, die den logischen Fluss des Nutzers von der Aufmerksamkeit bis zum Kauf widerspiegeln.

Hier ist die optimale Vorgehensweise, unterteilt in die verschiedenen Phasen:

1. Die Gesamtstruktur (<main> und <section>)

Ein Verkaufstrichter ist in der Regel der Hauptinhalt einer Landingpage oder eine Abfolge von Seiten.

  • <main>: Umschließt den gesamten Trichter-Inhalt. Es darf nur einmal pro Seite vorkommen.
  • <section>: Jede Stufe des Trichters (Awareness, Consideration, Conversion) sollte in einer eigenen <section> stehen. Jede Sektion sollte idealerweise eine Überschrift (<h2>-<h6>) haben.

2. Die einzelnen Phasen semantisch füllen

A. Awareness (Bewusstsein schaffen)

Hier geht es um Information und Aufmerksamkeit.

  • <header>: Innerhalb der ersten Sektion für die Hero-Area (Headline, kurzes Versprechen).
  • <h1>: Die Hauptüberschrift Ihres Angebots.
  • <figure> & <img>: Für visuelle Reize (Produktbilder, erklärende Grafiken).

B. Interest & Consideration (Interesse & Abwägung)

Hier werden Vorteile und Details erklärt.

  • <article>: Wenn Sie Testimonials oder Blog-Beiträge als Social Proof einbinden, ist jedes einzelne Zeugnis ein in sich geschlossener <article>.
  • <ul> / <li>: Für Aufzählungen von Vorteilen (Bullet Points).
  • <dl>, <dt>, <dd>: (Description List) Ideal für FAQs oder technische Spezifikationen.
  • <video>: Für Produkt-Demos oder Erklärvideos.

C. Decision (Die Entscheidung)

Preistabellen und Vergleiche.

  • <table>: Wenn Sie Tarife oder Features direkt gegenüberstellen.
  • <aside>: Für ergänzende Informationen, wie z.B. „Nur noch 3 Plätze frei“ (Scarcity) oder Siegel/Zertifikate.

D. Action (Die Conversion)

Der wichtigste Teil: Hier schließt der Nutzer ab.

  • <form>: Unverzichtbar für die Dateneingabe.
  • <fieldset> & <legend>: Um Formularbereiche (z.B. Rechnungsadresse vs. Zahlungsart) logisch zu gruppieren.
  • <label>: Jedes Eingabefeld braucht ein korrekt verknüpftes Label (Barrierefreiheit!).
  • <button>: Für den finalen Call-to-Action (CTA). Nutzen Sie kein <a>, wenn eine Aktion (Absenden) ausgeführt wird; nutzen Sie <a>, wenn der Nutzer auf eine neue Seite (Checkout) geleitet wird.

3. Besonderheit: Der Prozessfluss (<ol>)

Wenn Sie dem Nutzer optisch zeigen wollen, in welchem Schritt des Prozesses er sich befindet (Step-Indikator), ist eine geordnete Liste semantisch am besten:

<nav aria-label="Bestellprozess">
  <ol>
    <li>Auswahl</li>
    <li>Persönliche Daten</li>
    <li aria-current="step">Zahlung</li>
    <li>Bestätigung</li>
  </ol>
</nav>

4. Zusammenfassendes Beispiel

Hier ein grobes Gerüst für eine Trichter-Landingpage:

<main>
  <!-- Awareness Phase -->
  <section id="hero">
    <h1>Meistern Sie Ihr Zeitmanagement in 7 Tagen</h1>
    <p>Unser Videokurs hilft Ihnen dabei...</p>
    <a href="#pricing" class="cta-button">Jetzt starten</a>
  </section>

  <!-- Consideration Phase -->
  <section id="features">
    <h2>Was Sie lernen werden</h2>
    <ul>
      <li>Priorisierungstechniken</li>
      <li>Fokus-Strategien</li>
    </ul>
  </section>

  <section id="social-proof">
    <h2>Das sagen unsere Kunden</h2>
    <article>
      <p>"Habe mein Leben verändert!"</p>
      <footer>— Max Mustermann</footer>
    </article>
  </section>

  <!-- Decision / Action Phase -->
  <section id="pricing">
    <h2>Wählen Sie Ihren Plan</h2>
    <form action="/checkout" method="POST">
      <fieldset>
        <legend>Paket wählen</legend>
        <input type="radio" id="basic" name="plan" value="basic">
        <label for="basic">Basic - 49€</label>

        <input type="radio" id="pro" name="plan" value="pro">
        <label for="pro">Pro - 99€</label>
      </fieldset>
      <button type="submit">Jetzt zahlungspflichtig bestellen</button>
    </form>
  </section>
</main>

Wichtige Tipps für die Semantik:

  1. ARIA-Labels: Nutzen Sie aria-live für dynamische Fehlermeldungen in Formularen und aria-current="step" für Prozessanzeigen.
  2. Buttons vs. Links: Ein Link (<a>) führt irgendwohin. Ein Button (<button>) löst eine Funktion aus oder schickt Daten ab. Im Funnel ist das oft entscheidend für Screenreader.
  3. Hierarchie: Springen Sie nicht in den Überschriften (nicht von <h1> direkt auf <h3>).

Durch diese Struktur verstehen sowohl Suchmaschinen als auch assistierende Technologien (Screenreader) genau, wie Ihr Verkaufsprozess aufgebaut ist.

0