Füge HTML ein oder gib eine Seiten-URL an, um die semantische Überschriftenstruktur statt der visuellen Leserichtung zu prüfen. Der Bericht zeigt Ebenensprünge, mehrere h1, vermutlich nur dekorative Heading-Nutzung, leere Überschriften und Abweichungen zwischen dem Haupt-h1,
und og:title.</p>
<p>So verwendest du das Tool:</p>
<ul>
<li>HTML-Eingabe: Markup für eine stabile Analyse einfügen</li>
<li>Seiten-URL: veröffentlichte Struktur prüfen</li>
<li>Mit Metadaten-Titeln vergleichen: gleicht die Hauptüberschrift mit <code><title></code> und <code>og:title</code> ab</li>
<li>Korrekturhinweise anzeigen: ergänzt eine empfohlene Ebene oder Ersetzung pro Knoten</li>
</ul>
<p>Der Bericht zeigt:</p>
<ul>
<li>Einen visuellen h1-h6-Baum</li>
<li>Eine Heatmap-artige Schwereverteilung</li>
<li>Die empfohlene Ebene für jede Überschrift</li>
<li>Mehrere h1 und Ebenensprünge</li>
<li>Als Heading verkleidete UI-Labels</li>
<li>Abweichungen zwischen h1 und Meta-Titeln</li>
</ul></div></section><section class="mt-10"><div class="max-w-2xl"><p class="text-xs font-semibold uppercase tracking-[0.24em] text-ember">Ausführung</p><h2 class="mt-3 font-display text-4xl leading-tight text-ink">Dieses Tool ausführen</h2><p class="mt-3 text-sm leading-7 text-black/60">Fülle das Formular aus, starte das Tool und prüfe das Ergebnis an einem Ort.</p></div><div class="mt-8"><!--$?--><template id="B:1c"></template><div class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(280px,420px)]"><div class="rounded-[1.8rem] border border-black/8 bg-white/92 p-6 shadow-panel"><div class="grid gap-4"><div class="grid gap-2"><div class="skeleton rounded-2xl h-3 w-1/4 rounded"></div><div class="skeleton rounded-2xl h-10 w-full"></div></div><div class="grid gap-2"><div class="skeleton rounded-2xl h-3 w-1/4 rounded"></div><div class="skeleton rounded-2xl h-10 w-full"></div></div><div class="grid gap-2"><div class="skeleton rounded-2xl h-3 w-1/4 rounded"></div><div class="skeleton rounded-2xl h-10 w-full"></div></div></div><div class="skeleton rounded-2xl mt-6 h-11 w-32 rounded-full"></div></div><div class="rounded-[1.8rem] border border-black/8 bg-ink p-6 shadow-panel"><div class="h-7 w-16 rounded bg-white/15"></div><div class="skeleton rounded-2xl mt-4 h-20 w-full rounded bg-white/10"></div></div></div><!--/$--></div></section><template id="P:1d"></template><section class="mt-12 grid gap-8 xl:grid-cols-2"><div><div class="max-w-2xl"><p class="text-xs font-semibold uppercase tracking-[0.24em] text-ember">Beispiele</p><h2 class="mt-3 font-display text-4xl leading-tight text-ink">Beispiele zu diesem Tool</h2></div><div class="mt-8 grid gap-5"><template id="P:1e"></template><template id="P:1f"></template><template id="P:20"></template><template id="P:21"></template></div></div><div><div class="max-w-2xl"><p class="text-xs font-semibold uppercase tracking-[0.24em] text-ember">Verwandt</p><h2 class="mt-3 font-display text-4xl leading-tight text-ink">Mit verwandten Tools und Themen fortfahren</h2></div><div class="mt-8 grid gap-5"><template id="P:22"></template><template id="P:23"></template><template id="P:24"></template><template id="P:25"></template><template id="P:26"></template><template id="P:27"></template><template id="P:28"></template><template id="P:29"></template></div></div></section><template id="P:2a"></template></div><div class="fixed bottom-5 right-4 z-40 flex max-w-[calc(100vw-2rem)] flex-col items-end gap-3 sm:bottom-6 sm:right-6"><button type="button" class="group inline-flex h-14 items-center gap-3 rounded-full bg-ink px-4 text-paper shadow-[0_18px_45px_rgba(20,18,16,0.24)] transition hover:-translate-y-0.5 hover:bg-black" aria-expanded="false" aria-label="Elysia fragen"><span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-paper text-ink transition group-hover:rotate-6"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bot h-4 w-4" aria-hidden="true"><path d="M12 8V4H8"></path><rect width="16" height="12" x="4" y="8" rx="2"></rect><path d="M2 14h2"></path><path d="M20 14h2"></path><path d="M15 13v2"></path><path d="M9 13v2"></path></svg></span><span class="hidden text-sm font-semibold sm:inline">Elysia fragen</span></button></div></main></div></div></div><script>$RS("S:2","P:2")</script><div hidden id="S:1c"><div class="relative grid min-w-0 gap-6 xl:grid-cols-[minmax(0,0.95fr)_minmax(360px,1.05fr)]"><form class="overflow-hidden rounded-xl border border-black/8 bg-white/92 shadow-panel"><div class="border-b border-black/8 bg-amber-50/70 p-5"><div class="flex flex-wrap items-center justify-between gap-3"><div><h3 class="text-sm font-semibold text-ink">Vorbereitete Beispielausführungen</h3><p class="mt-1 text-xs leading-5 text-black/50">Klicken Sie auf ein Beispiel, um das Formular automatisch auszufüllen. Dateien müssen weiterhin hochgeladen werden.</p></div><span class="rounded-full bg-white px-3 py-1 text-xs font-semibold text-amber-700">1 Beispiele</span></div><div class="mt-4 grid min-w-0 gap-3 lg:grid-cols-2"><div role="button" tabindex="0" class="min-w-0 cursor-pointer rounded-xl border border-amber-200 bg-white/88 p-4 text-left shadow-[0_10px_34px_rgba(245,158,11,0.08)] transition hover:border-amber-300 hover:shadow-[0_14px_40px_rgba(245,158,11,0.12)] focus:outline-none focus:ring-2 focus:ring-amber-300/70"><div class="block w-full min-w-0 text-left"><span class="inline-flex max-w-full items-center gap-2 text-sm font-semibold text-ink"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-cloud-upload h-4 w-4 shrink-0 text-amber-600" aria-hidden="true"><path d="M12 13v8"></path><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"></path><path d="m8 17 4-4 4 4"></path></svg><span class="truncate">Landingpage mit Sprüngen und doppelten h1 prüfen</span></span></div><span class="mt-2 block text-xs leading-5 text-black/55">Zeigt den Überschriftenbaum, erkennt doppelte h1 und empfiehlt, welche Knoten zu h2 oder zu Nicht-Heading-Text werden sollten.</span><p class="mt-3 line-clamp-2 break-words text-xs leading-5 text-black/52"><div>Heading hierarchy tree</div></p><button type="button" class="mt-3 inline-flex items-center gap-2 rounded-full border border-amber-200 bg-amber-50 px-3 py-1.5 text-[11px] font-semibold text-amber-800 transition hover:border-amber-400 hover:bg-amber-100"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link h-3.5 w-3.5" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg>Vollständige Ausgabe anzeigen</button></div></div></div><div class="border-b border-black/8 bg-[linear-gradient(135deg,rgba(255,255,255,0.96),rgba(248,250,252,0.78))] p-5"><div class="flex items-start justify-between gap-4"><div><h3 class="text-lg font-semibold text-ink">Eingaben</h3><p class="mt-1 text-sm leading-6 text-black/54">Fülle die erforderlichen Felder aus und starte das Tool.</p></div><span class="shrink-0 rounded-full bg-canvas px-3 py-1 text-xs font-semibold text-black/54">4 Optionen</span></div></div><div class="scroll-mt-24 p-5 lg:scroll-mt-6"><div class="grid gap-4"><details open="" class="group overflow-hidden rounded-[1.35rem] border border-black/8 bg-canvas/58"><summary class="flex cursor-pointer list-none items-center justify-between gap-4 px-4 py-3 marker:content-none"><span><span class="block text-sm font-semibold text-ink">Inhalt</span><span class="mt-0.5 block text-xs leading-5 text-black/48">Haupteingaben einfügen oder eingeben.</span></span><span class="flex items-center gap-2"><span class="rounded-full bg-white px-2.5 py-1 text-xs font-semibold text-black/48">2</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 text-black/42 transition group-open:rotate-180" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></span></summary><div class="grid min-w-0 grid-cols-[repeat(auto-fit,minmax(min(100%,18rem),1fr))] gap-3 border-t border-black/8 bg-white/48 p-3"><label class="grid min-w-0 gap-2 overflow-hidden rounded-[1.15rem] border border-black/7 bg-white/74 p-4 [grid-column:1/-1]"><span class="grid min-w-0 gap-2 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-start"><span class="min-w-0 break-words text-sm font-semibold leading-5 text-ink">HTML-Eingabe</span><span class="flex min-w-0 flex-wrap items-center gap-1.5 sm:justify-end"><span class="max-w-full truncate rounded-full bg-canvas px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.12em] text-black/42">textarea</span><span class="rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.12em] bg-black/5 text-black/42">Optionales Feld</span></span></span><textarea name="htmlInput" placeholder="<main><h1>Pricing</h1><h3>Plans</h3><h2>FAQ</h2></main>" aria-required="false" class="block w-full min-w-0 max-w-full rounded-lg border border-black/10 bg-canvas px-4 py-3 text-sm text-ink outline-none transition focus:border-cobalt focus:bg-white min-h-32 resize-y"></textarea></label><label class="grid min-w-0 gap-2 overflow-hidden rounded-[1.15rem] border border-black/7 bg-white/74 p-4 "><span class="grid min-w-0 gap-2 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-start"><span class="min-w-0 break-words text-sm font-semibold leading-5 text-ink">Seiten-URL</span><span class="flex min-w-0 flex-wrap items-center gap-1.5 sm:justify-end"><span class="max-w-full truncate rounded-full bg-canvas px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.12em] text-black/42">text</span><span class="rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.12em] bg-black/5 text-black/42">Optionales Feld</span></span></span><input type="text" placeholder="https://example.com" aria-required="false" class="block w-full min-w-0 max-w-full rounded-lg border border-black/10 bg-canvas px-4 py-3 text-sm text-ink outline-none transition focus:border-cobalt focus:bg-white" name="pageUrl" value=""/></label></div></details><details open="" class="group overflow-hidden rounded-[1.35rem] border border-black/8 bg-canvas/58"><summary class="flex cursor-pointer list-none items-center justify-between gap-4 px-4 py-3 marker:content-none"><span><span class="block text-sm font-semibold text-ink">Schalter</span><span class="mt-0.5 block text-xs leading-5 text-black/48">Optionales Verhalten aktivieren oder deaktivieren.</span></span><span class="flex items-center gap-2"><span class="rounded-full bg-white px-2.5 py-1 text-xs font-semibold text-black/48">2</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down h-4 w-4 text-black/42 transition group-open:rotate-180" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></span></summary><div class="grid min-w-0 grid-cols-[repeat(auto-fit,minmax(min(100%,18rem),1fr))] gap-3 border-t border-black/8 bg-white/48 p-3"><label class="grid min-w-0 gap-2 overflow-hidden rounded-[1.15rem] border border-black/7 bg-white/74 p-4 "><span class="grid min-w-0 gap-2 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-start"><span class="min-w-0 break-words text-sm font-semibold leading-5 text-ink">Mit Metadaten-Titeln vergleichen</span><span class="flex min-w-0 flex-wrap items-center gap-1.5 sm:justify-end"><span class="max-w-full truncate rounded-full bg-canvas px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.12em] text-black/42">checkbox</span><span class="rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.12em] bg-black/5 text-black/42">Optionales Feld</span></span></span><span class="flex min-w-0 items-center gap-3 rounded-lg bg-canvas px-4 py-3"><input type="checkbox" aria-required="false" class="h-5 w-5 rounded border-black/15 accent-ink" name="compareWithMetadataTitles" checked=""/><span class="min-w-0 text-sm text-black/58">Aktiviert, wenn ausgewählt</span></span></label><label class="grid min-w-0 gap-2 overflow-hidden rounded-[1.15rem] border border-black/7 bg-white/74 p-4 "><span class="grid min-w-0 gap-2 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-start"><span class="min-w-0 break-words text-sm font-semibold leading-5 text-ink">Korrekturhinweise anzeigen</span><span class="flex min-w-0 flex-wrap items-center gap-1.5 sm:justify-end"><span class="max-w-full truncate rounded-full bg-canvas px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.12em] text-black/42">checkbox</span><span class="rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.12em] bg-black/5 text-black/42">Optionales Feld</span></span></span><span class="flex min-w-0 items-center gap-3 rounded-lg bg-canvas px-4 py-3"><input type="checkbox" aria-required="false" class="h-5 w-5 rounded border-black/15 accent-ink" name="showFixSuggestions" checked=""/><span class="min-w-0 text-sm text-black/58">Aktiviert, wenn ausgewählt</span></span></label></div></details></div></div><div class="sticky bottom-0 border-t border-black/8 bg-white/94 p-5 backdrop-blur"><button type="submit" class="inline-flex w-full items-center justify-center gap-2 rounded-lg bg-ink px-5 py-3 text-xs font-semibold text-paper transition hover:bg-black disabled:opacity-60"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play h-4 w-4" aria-hidden="true"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg>Tool ausführen</button></div></form><div class="scroll-mt-24 lg:scroll-mt-6"><div class="min-w-0 overflow-hidden rounded-xl border border-black/8 bg-ink text-paper shadow-panel"><div class="flex flex-wrap items-center justify-between gap-3 border-b border-white/10 px-5 py-4"><div class="flex items-center gap-3"><span class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-white/10 text-paper"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text h-4 w-4" aria-hidden="true"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path><path d="M14 2v5a1 1 0 0 0 1 1h5"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg></span><div><h3 class="text-base font-semibold">Ergebnis</h3><p class="mt-1 text-xs text-paper/58">Bereit zum Start</p></div></div><div class="flex items-center gap-2"><button type="button" title="Feedback / Anfrage" aria-label="Feedback / Anfrage" class="inline-flex h-9 min-w-9 items-center justify-center rounded-lg border border-red-400/40 bg-red-500/15 px-3 text-xs font-semibold text-red-200 transition hover:bg-red-500/25"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square-warning h-4 w-4" aria-hidden="true"><path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"></path><path d="M12 15h.01"></path><path d="M12 7v4"></path></svg></button><button type="button" disabled="" title="Ergebnis kopieren" class="inline-flex h-9 min-w-9 items-center justify-center rounded-lg border border-white/12 bg-white/8 px-3 text-xs font-semibold text-paper transition hover:bg-white/14 disabled:cursor-not-allowed disabled:opacity-45"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clipboard h-4 w-4" aria-hidden="true"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"></rect><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path></svg></button><button type="button" disabled="" title="Ergebnis herunterladen" class="inline-flex h-9 min-w-9 items-center justify-center rounded-lg border border-white/12 bg-white/8 px-3 text-xs font-semibold text-paper transition hover:bg-white/14 disabled:cursor-not-allowed disabled:opacity-45"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download h-4 w-4" aria-hidden="true"><path d="M12 15V3"></path><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><path d="m7 10 5 5 5-5"></path></svg></button></div></div><div class="min-w-0 p-3 sm:p-5"><div class="flex min-h-64 items-center justify-center rounded-lg border border-dashed border-white/16 bg-white/5 p-8 text-center text-sm leading-6 text-paper/58">Nach dem Ausführen erscheinen hier Dateien, Text, strukturierte Daten oder Stream-Ausgaben.</div></div></div></div></div></div><script>$RC("B:1c","S:1c")</script><div hidden id="S:17"><a title="Nutzen Sie 131 Online-Werkzeuge zur gleichzeitigen Verarbeitung mehrerer Dateien oder Daten. Keine Installation nötig. Sichere Löschung nach 6 Stunden." class="group inline-flex items-center gap-2 rounded-lg border border-black/10 bg-canvas px-3 py-2 text-xs font-medium text-ink transition hover:border-cobalt/30 hover:bg-white" href="/de/tags/multiple"><span>Multiple</span><span class="rounded-md bg-white px-2 py-0.5 text-[10px] text-black/48 group-hover:bg-ink group-hover:text-paper">131</span></a></div><script>$RS("S:17","P:17")</script><div hidden id="S:18"><a title="Nutzen Sie 77 Online-Tools für HTML, CSS und das DOM. Konvertieren, formatieren und validieren Sie Code direkt im Browser – sicher verarbeitet auf unseren Servern." class="group inline-flex items-center gap-2 rounded-lg border border-black/10 bg-canvas px-3 py-2 text-xs font-medium text-ink transition hover:border-cobalt/30 hover:bg-white" href="/de/tags/html"><span>HTML/CSS</span><span class="rounded-md bg-white px-2 py-0.5 text-[10px] text-black/48 group-hover:bg-ink group-hover:text-paper">77</span></a></div><script>$RS("S:18","P:18")</script><div hidden id="S:19"><a title="Nutzen Sie 62 Online-Werkzeuge zur Analyse, Bearbeitung und Bereinigung von Metadaten. Sichere Verarbeitung auf unseren Servern ohne Software-Installation." class="group inline-flex items-center gap-2 rounded-lg border border-black/10 bg-canvas px-3 py-2 text-xs font-medium text-ink transition hover:border-cobalt/30 hover:bg-white" href="/de/tags/metadata"><span>Metadaten</span><span class="rounded-md bg-white px-2 py-0.5 text-[10px] text-black/48 group-hover:bg-ink group-hover:text-paper">62</span></a></div><script>$RS("S:19","P:19")</script><div hidden id="S:1a"><a title="Nutzen Sie 31 Online-Tools zur Verarbeitung von URLs. Kodieren, dekodieren, parsen und validieren Sie Web-Adressen direkt im Browser mit serverseitiger Verarbeitung." class="group inline-flex items-center gap-2 rounded-lg border border-black/10 bg-canvas px-3 py-2 text-xs font-medium text-ink transition hover:border-cobalt/30 hover:bg-white" href="/de/tags/url"><span>URL</span><span class="rounded-md bg-white px-2 py-0.5 text-[10px] text-black/48 group-hover:bg-ink group-hover:text-paper">31</span></a></div><script>$RS("S:1a","P:1a")</script><div hidden id="S:1b"><a title="Nutzen Sie 14 Online-SEO-Tools zur Analyse und Optimierung Ihrer Webinhalte. Sichere Verarbeitung auf unseren Servern, automatische Dateilöschung nach 6 Stunden." class="group inline-flex items-center gap-2 rounded-lg border border-black/10 bg-canvas px-3 py-2 text-xs font-medium text-ink transition hover:border-cobalt/30 hover:bg-white" href="/de/tags/seo"><span>SEO</span><span class="rounded-md bg-white px-2 py-0.5 text-[10px] text-black/48 group-hover:bg-ink group-hover:text-paper">14</span></a></div><script>$RS("S:1b","P:1b")</script><div hidden id="S:1d"><section aria-label="Helpful context and information" class="mt-12 overflow-hidden rounded-[2rem] border border-black/8 bg-white/86 shadow-panel"><div class="border-b border-black/8 bg-[linear-gradient(135deg,rgba(248,250,252,0.95),rgba(255,255,255,0.72))] p-8"><div class="max-w-2xl"><p class="text-xs font-semibold uppercase tracking-[0.24em] text-ember">Leitfaden zur Tool-Nutzung</p><h2 class="mt-3 font-display text-4xl leading-tight text-ink">Erfahren Sie, wann dieses Tool passt, was es unterstützt und wie Nutzer es anwenden.</h2></div></div><div class="p-8"><section aria-labelledby="tool-facts-title" class="rounded-[1.5rem] border border-black/8 bg-canvas/75 p-5"><h3 id="tool-facts-title" class="text-base font-semibold text-ink">Wichtige Fakten</h3><dl class="mt-5 grid gap-4 sm:grid-cols-2 xl:grid-cols-5"><div class="rounded-2xl border border-black/6 bg-white/78 p-4"><dt class="text-[11px] font-semibold uppercase tracking-[0.18em] text-black/42">Kategorie</dt><dd class="mt-2 text-sm font-semibold leading-6 text-ink">Validation</dd></div><div class="rounded-2xl border border-black/6 bg-white/78 p-4"><dt class="text-[11px] font-semibold uppercase tracking-[0.18em] text-black/42">Eingabetypen</dt><dd class="mt-2 text-sm font-semibold leading-6 text-ink">textarea, text, checkbox</dd></div><div class="rounded-2xl border border-black/6 bg-white/78 p-4"><dt class="text-[11px] font-semibold uppercase tracking-[0.18em] text-black/42">Ausgabetyp</dt><dd class="mt-2 text-sm font-semibold leading-6 text-ink">html</dd></div><div class="rounded-2xl border border-black/6 bg-white/78 p-4"><dt class="text-[11px] font-semibold uppercase tracking-[0.18em] text-black/42">Sample-Abdeckung</dt><dd class="mt-2 text-sm font-semibold leading-6 text-ink">4</dd></div><div class="rounded-2xl border border-black/6 bg-white/78 p-4"><dt class="text-[11px] font-semibold uppercase tracking-[0.18em] text-black/42">API bereit</dt><dd class="mt-2 text-sm font-semibold leading-6 text-ink">Ja</dd></div></dl></section><section id="tool-overview" class="mt-8"><h3 class="text-lg font-semibold text-ink">Überblick</h3><p class="mt-3 max-w-4xl text-base leading-8 text-black/66">Der Auditor für Überschriftenhierarchie analysiert die semantische Struktur Ihrer Webseite anhand von eingefügtem HTML-Code oder einer Live-URL, um Fehler wie übersprungene Überschriftenebenen, mehrfache h1-Tags und Abweichungen zu Meta-Titeln aufzudecken.</p></section><div class="mt-8 grid gap-6 xl:grid-cols-2"><section class="rounded-[1.5rem] border border-black/8 bg-canvas/70 p-5"><h3 class="text-lg font-semibold text-ink">Wann verwenden</h3><ul class="mt-4 space-y-3 text-sm leading-6 text-black/62"><li class="flex gap-3"><span class="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-cobalt"></span><span>Vor dem Live-Gang einer neuen Webseite, um die Barrierefreiheit und SEO-Konformität der Überschriftenstruktur zu validieren.</span></li><li class="flex gap-3"><span class="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-cobalt"></span><span>Bei der Optimierung bestehender Seiten, wenn Diskrepanzen zwischen dem Haupt-h1-Tag und den Meta-Titeln vermutet werden.</span></li><li class="flex gap-3"><span class="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-cobalt"></span><span>Zur Bereinigung von HTML-Templates, in denen CSS-Klassen fälschlicherweise als Überschriften-Tags missbraucht wurden.</span></li></ul></section><section class="rounded-[1.5rem] border border-black/8 bg-canvas/70 p-5"><h3 class="text-lg font-semibold text-ink">So funktioniert es</h3><ol class="mt-4 space-y-3 text-sm leading-6 text-black/62"><li class="flex gap-3"><span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-ink text-[11px] font-semibold text-paper">1</span><span>Fügen Sie den rohen HTML-Code in das Eingabefeld ein oder geben Sie die URL einer veröffentlichten Webseite an.</span></li><li class="flex gap-3"><span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-ink text-[11px] font-semibold text-paper">2</span><span>Aktivieren Sie optional den Abgleich mit Metadaten-Titeln und die Anzeige von konkreten Korrekturhinweisen.</span></li><li class="flex gap-3"><span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-ink text-[11px] font-semibold text-paper">3</span><span>Das Tool analysiert die semantische Hierarchie der h1-h6-Knoten und vergleicht sie mit den Dokument-Titeln.</span></li><li class="flex gap-3"><span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-ink text-[11px] font-semibold text-paper">4</span><span>Sie erhalten einen visuellen Überschriftenbaum inklusive einer Heatmap zur Fehlerpriorisierung und konkreten Empfehlungen für jeden Knoten.</span></li></ol></section></div><section id="tool-use-cases" class="mt-8"><h3 class="text-lg font-semibold text-ink">Anwendungsfälle</h3><ul class="mt-4 grid gap-3 md:grid-cols-3 text-sm leading-6 text-black/62"><li class="rounded-[1.25rem] border border-black/8 bg-canvas/70 p-4">Überprüfung von Blog-Artikeln auf logische Strukturierung vor der Veröffentlichung.</li><li class="rounded-[1.25rem] border border-black/8 bg-canvas/70 p-4">SEO-Audit von Kunden-Websites zur Identifikation von fehlerhaften Überschriften-Hierarchien und doppelten h1-Tags.</li><li class="rounded-[1.25rem] border border-black/8 bg-canvas/70 p-4">Bereinigung von UI-Templates, um sicherzustellen, dass Design-Elemente keine semantischen Überschriften-Tags missbrauchen.</li></ul></section><section id="tool-examples" class="mt-8"><h3 class="text-lg font-semibold text-ink">Beispiele</h3><div class="mt-4 grid gap-5 xl:grid-cols-2"><article class="min-w-0 overflow-hidden rounded-[1.5rem] border border-black/8 bg-canvas/70 p-5"><div class="flex items-start justify-between gap-4"><h4 class="text-lg font-semibold text-ink">1<!-- -->. <!-- -->Audit einer unstrukturierten Landingpage</h4><span class="shrink-0 rounded-full bg-cobalt/10 px-3 py-1 text-xs font-semibold text-cobalt">SEO-Spezialist</span></div><div class="mt-4"><p class="text-xs font-semibold uppercase tracking-[0.18em] text-black/42">Hintergrund</p><p class="mt-2 text-sm leading-6 text-black/62">Eine neu gestaltete Landingpage rankt schlecht. Der Verdacht liegt nahe, dass die Überschriftenstruktur fehlerhaft ist.</p></div><div class="mt-4"><p class="text-xs font-semibold uppercase tracking-[0.18em] text-black/42">Aufgabe</p><p class="mt-2 text-sm leading-6 text-black/62">Die Seite enthält mehrere h1-Tags, springt direkt von h1 auf h4, und UI-Elemente sind fälschlicherweise als h3 deklariert.</p></div><div class="mt-4"><p class="text-xs font-semibold uppercase tracking-[0.18em] text-black/42">Verwendung</p><p class="mt-2 text-sm leading-6 text-black/62">Fügen Sie den HTML-Code der Landingpage in das Feld 'HTML-Eingabe' ein, aktivieren Sie 'Mit Metadaten-Titeln vergleichen' sowie 'Korrekturhinweise anzeigen' und starten Sie die Analyse.</p></div><pre class="mt-4 max-w-full overflow-x-auto whitespace-pre-wrap break-words rounded-2xl bg-ink p-4 text-xs leading-6 text-paper"><code>htmlInput: "<html><body><h1>Startseite</h1><h1>Produktübersicht</h1><h4>Features</h4><h3>In den Warenkorb (h3)</h3></body></html>", compareWithMetadataTitles: true, showFixSuggestions: true</code></pre><div class="mt-4"><p class="text-xs font-semibold uppercase tracking-[0.18em] text-black/42">Ergebnis</p><p class="mt-2 text-sm leading-6 text-black/62">Das Tool liefert einen visuellen Baum, der die doppelten h1-Tags rot markiert, den Sprung auf h4 bemängelt und empfiehlt, das UI-Element in ein Standard-div umzuwandeln.</p></div></article><article class="min-w-0 overflow-hidden rounded-[1.5rem] border border-black/8 bg-canvas/70 p-5"><div class="flex items-start justify-between gap-4"><h4 class="text-lg font-semibold text-ink">2<!-- -->. <!-- -->Überprüfung einer Live-Produktseite</h4><span class="shrink-0 rounded-full bg-cobalt/10 px-3 py-1 text-xs font-semibold text-cobalt">Webentwickler</span></div><div class="mt-4"><p class="text-xs font-semibold uppercase tracking-[0.18em] text-black/42">Hintergrund</p><p class="mt-2 text-sm leading-6 text-black/62">Vor dem Relaunch soll die Live-Produktseite auf Barrierefreiheit und korrekte semantische Struktur geprüft werden.</p></div><div class="mt-4"><p class="text-xs font-semibold uppercase tracking-[0.18em] text-black/42">Aufgabe</p><p class="mt-2 text-sm leading-6 text-black/62">Es ist unklar, ob die Überschriftenhierarchie logisch aufgebaut ist und ob der h1-Tag mit dem Meta-Titel übereinstimmt.</p></div><template id="P:2b"></template><template id="P:2c"></template><template id="P:2d"></template></article></div></section><section id="tool-faq" class="mt-8" itemScope="" itemType="https://schema.org/FAQPage"><h3 class="text-lg font-semibold text-ink">FAQ</h3><div class="mt-4 grid gap-4"><details class="rounded-[1.25rem] border border-black/8 bg-canvas/70 p-5" itemScope="" itemProp="mainEntity" itemType="https://schema.org/Question"><summary class="cursor-pointer text-base font-semibold text-ink" itemProp="name">Warum warnt das Tool vor mehreren h1-Überschriften?</summary><div itemProp="acceptedAnswer" itemScope="" itemType="https://schema.org/Answer"><p class="mt-3 text-sm leading-6 text-black/62" itemProp="text">Ein einziges h1-Tag definiert das Hauptthema einer Seite. Mehrere h1-Tags können Suchmaschinen verwirren und die semantische Struktur schwächen.</p></div></details><details class="rounded-[1.25rem] border border-black/8 bg-canvas/70 p-5" itemScope="" itemProp="mainEntity" itemType="https://schema.org/Question"><summary class="cursor-pointer text-base font-semibold text-ink" itemProp="name">Was bedeutet ein Ebenensprung in der Hierarchie?</summary><div itemProp="acceptedAnswer" itemScope="" itemType="https://schema.org/Answer"><p class="mt-3 text-sm leading-6 text-black/62" itemProp="text">Ein Ebenensprung liegt vor, wenn beispielsweise direkt auf ein h1-Tag ein h3-Tag folgt, ohne dass dazwischen ein h2-Tag zur Strukturierung genutzt wird.</p></div></details><details class="rounded-[1.25rem] border border-black/8 bg-canvas/70 p-5" itemScope="" itemProp="mainEntity" itemType="https://schema.org/Question"><summary class="cursor-pointer text-base font-semibold text-ink" itemProp="name">Kann ich auch passwortgeschützte Seiten über die URL prüfen?</summary><div itemProp="acceptedAnswer" itemScope="" itemType="https://schema.org/Answer"><p class="mt-3 text-sm leading-6 text-black/62" itemProp="text">Nein. Für passwortgeschützte Seiten kopieren Sie bitte den gerenderten HTML-Quelltext und fügen ihn direkt in das HTML-Eingabefeld ein.</p></div></details><details class="rounded-[1.25rem] border border-black/8 bg-canvas/70 p-5" itemScope="" itemProp="mainEntity" itemType="https://schema.org/Question"><summary class="cursor-pointer text-base font-semibold text-ink" itemProp="name">Wie hilft der Vergleich mit Meta-Titeln?</summary><div itemProp="acceptedAnswer" itemScope="" itemType="https://schema.org/Answer"><p class="mt-3 text-sm leading-6 text-black/62" itemProp="text">Er stellt sicher, dass die Hauptüberschrift (h1) thematisch mit dem Title-Tag und dem og:title übereinstimmt, was für SEO und Social Sharing wichtig ist.</p></div></details><details class="rounded-[1.25rem] border border-black/8 bg-canvas/70 p-5" itemScope="" itemProp="mainEntity" itemType="https://schema.org/Question"><summary class="cursor-pointer text-base font-semibold text-ink" itemProp="name">Was sind dekorative Headings?</summary><div itemProp="acceptedAnswer" itemScope="" itemType="https://schema.org/Answer"><p class="mt-3 text-sm leading-6 text-black/62" itemProp="text">Das sind Textabschnitte wie Button-Beschriftungen oder UI-Labels, die fälschlicherweise als h-Tags formatiert wurden, um ein bestimmtes Design zu erzielen.</p></div></details></div></section></div></section></div><script>$RS("S:1d","P:1d")</script><div hidden id="S:5"><a class="flex items-center justify-between rounded-2xl border border-transparent px-4 py-3 text-sm font-medium text-ink transition hover:border-black/10 hover:bg-white" href="/de"><span class="flex items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-compass h-4 w-4 text-ember" aria-hidden="true"><path d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"></path><circle cx="12" cy="12" r="10"></circle></svg>Start</span></a></div><script>$RS("S:5","P:5")</script><div hidden id="S:6"><a class="flex items-center justify-between rounded-2xl border border-transparent px-4 py-3 text-sm font-medium text-ink transition hover:border-black/10 hover:bg-white" href="/de/tools"><span class="flex items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles h-4 w-4 text-ember" aria-hidden="true"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg>Werkzeuge</span><span class="rounded-full bg-ink px-2.5 py-1 text-[10px] uppercase tracking-[0.18em] text-paper">2389</span></a></div><script>$RS("S:6","P:6")</script><div hidden id="S:7"><a class="flex items-center justify-between rounded-2xl border border-transparent px-4 py-3 text-sm font-medium text-ink transition hover:border-black/10 hover:bg-white" href="/de/samples"><span class="flex items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-library h-4 w-4 text-ember" aria-hidden="true"><path d="m16 6 4 14"></path><path d="M12 6v14"></path><path d="M8 8v12"></path><path d="M4 4v16"></path></svg>Beispiele</span><span class="rounded-full bg-ink px-2.5 py-1 text-[10px] uppercase tracking-[0.18em] text-paper">532</span></a></div><script>$RS("S:7","P:7")</script><div hidden id="S:8"><a class="flex items-center justify-between rounded-2xl border border-transparent px-4 py-3 text-sm font-medium text-ink transition hover:border-black/10 hover:bg-white" href="/de/visualizations"><span class="flex items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layers h-4 w-4 text-ember" aria-hidden="true"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"></path></svg>Visualisierungen</span><span class="rounded-full bg-ink px-2.5 py-1 text-[10px] uppercase tracking-[0.18em] text-paper">368</span></a></div><script>$RS("S:8","P:8")</script><div hidden id="S:9"><a class="flex items-center justify-between rounded-2xl border border-transparent px-4 py-3 text-sm font-medium text-ink transition hover:border-black/10 hover:bg-white" href="/de/viewers"><span class="flex items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-compass h-4 w-4 text-ember" aria-hidden="true"><path d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"></path><circle cx="12" cy="12" r="10"></circle></svg>Dateibetrachter</span><span class="rounded-full bg-ink px-2.5 py-1 text-[10px] uppercase tracking-[0.18em] text-paper">45</span></a></div><script>$RS("S:9","P:9")</script><div hidden id="S:a"><a class="flex items-center justify-between rounded-2xl border border-transparent px-4 py-3 text-sm font-medium text-ink transition hover:border-black/10 hover:bg-white" href="/de/hubs"><span class="flex items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layers h-4 w-4 text-ember" aria-hidden="true"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"></path></svg>Themen</span><span class="rounded-full bg-ink px-2.5 py-1 text-[10px] uppercase tracking-[0.18em] text-paper">115</span></a></div><script>$RS("S:a","P:a")</script><div hidden id="S:b"><a class="flex items-center justify-between rounded-2xl border border-transparent px-4 py-3 text-sm font-medium text-ink transition hover:border-black/10 hover:bg-white" href="/de/tags"><span class="flex items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-tag h-4 w-4 text-ember" aria-hidden="true"><path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"></path><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"></circle></svg>Schlagwörter</span><span class="rounded-full bg-ink px-2.5 py-1 text-[10px] uppercase tracking-[0.18em] text-paper">312</span></a></div><script>$RS("S:b","P:b")</script><div hidden id="S:c"><a class="block rounded-2xl border border-black/8 bg-white/85 px-4 py-3 transition hover:border-cobalt/30 hover:bg-white" href="/de/tools?category=Images%2C%20Audio%20%26%20Video"><div class="flex items-center justify-between gap-4"><span class="text-sm font-medium text-ink">Bilder, Audio & Video</span><span class="text-xs text-black/45">507</span></div><p class="mt-1 text-xs leading-5 text-black/55">Werkzeuge für Bild-, Audio- und Videobearbeitung, Konvertierung und Optimierung</p></a></div><script>$RS("S:c","P:c")</script><div hidden id="S:d"><a class="block rounded-2xl border border-black/8 bg-white/85 px-4 py-3 transition hover:border-cobalt/30 hover:bg-white" href="/de/tools?category=Math%2C%20Date%20%26%20Finance"><div class="flex items-center justify-between gap-4"><span class="text-sm font-medium text-ink">Mathe, Datum & Finanzen</span><span class="text-xs text-black/45">448</span></div><p class="mt-1 text-xs leading-5 text-black/55">Rechner, Zahlenwerkzeuge, Datumslogik, Statistik und Finanztools</p></a></div><script>$RS("S:d","P:d")</script><div hidden id="S:e"><a class="block rounded-2xl border border-black/8 bg-white/85 px-4 py-3 transition hover:border-cobalt/30 hover:bg-white" href="/de/tools?category=Design%20%26%20Color"><div class="flex items-center justify-between gap-4"><span class="text-sm font-medium text-ink">Design & Farbe</span><span class="text-xs text-black/45">281</span></div><p class="mt-1 text-xs leading-5 text-black/55">Werkzeuge für Farben, Layouts, Grafiken, visuelle Gestaltung und Designhilfen</p></a></div><script>$RS("S:e","P:e")</script><div hidden id="S:f"><a class="block rounded-2xl border border-black/8 bg-white/85 px-4 py-3 transition hover:border-cobalt/30 hover:bg-white" href="/de/tools?category=Text%20%26%20Writing"><div class="flex items-center justify-between gap-4"><span class="text-sm font-medium text-ink">Text & Schreiben</span><span class="text-xs text-black/45">183</span></div><p class="mt-1 text-xs leading-5 text-black/55">Werkzeuge für Schreiben, Bereinigung, Formatierung, Extraktion und Textanalyse</p></a></div><script>$RS("S:f","P:f")</script><div hidden id="S:10"><a class="block rounded-2xl border border-black/8 bg-white/85 px-4 py-3 transition hover:border-cobalt/30 hover:bg-white" href="/de/tools?category=Conversion%20%26%20Encoding"><div class="flex items-center justify-between gap-4"><span class="text-sm font-medium text-ink">Konvertierung & Kodierung</span><span class="text-xs text-black/45">160</span></div><p class="mt-1 text-xs leading-5 text-black/55">Werkzeuge für Format-, Datei-, Archiv-, Einheiten- und Kodierungskonvertierung</p></a></div><script>$RS("S:10","P:10")</script><div hidden id="S:11"><a class="block rounded-2xl border border-black/8 bg-white/85 px-4 py-3 transition hover:border-cobalt/30 hover:bg-white" href="/de/tools?category=Developer%20%26%20Web"><div class="flex items-center justify-between gap-4"><span class="text-sm font-medium text-ink">Entwicklung & Web</span><span class="text-xs text-black/45">150</span></div><p class="mt-1 text-xs leading-5 text-black/55">Entwicklerwerkzeuge, Netzwerk-Utilities, Web-Debugging und Automatisierungshelfer</p></a></div><script>$RS("S:11","P:11")</script><div hidden id="S:12"><a class="block rounded-2xl border border-black/8 bg-white/75 px-4 py-3 text-sm leading-5 text-ink transition hover:border-ember/35 hover:bg-white" href="/de/hubs/audio-convert">Tools fur Audio-Encoding und Formatkonvertierung</a></div><script>$RS("S:12","P:12")</script><div hidden id="S:13"><a class="block rounded-2xl border border-black/8 bg-white/75 px-4 py-3 text-sm leading-5 text-ink transition hover:border-ember/35 hover:bg-white" href="/de/hubs/image-convert">Tools fur Bildformat-Konvertierung und animierten Export</a></div><script>$RS("S:13","P:13")</script><div hidden id="S:14"><a class="block rounded-2xl border border-black/8 bg-white/75 px-4 py-3 text-sm leading-5 text-ink transition hover:border-ember/35 hover:bg-white" href="/de/hubs/json-convert">Tools fur JSON-Austausch und Format-Ubersetzung</a></div><script>$RS("S:14","P:14")</script><div hidden id="S:15"><a class="block rounded-2xl border border-black/8 bg-white/75 px-4 py-3 text-sm leading-5 text-ink transition hover:border-ember/35 hover:bg-white" href="/de/hubs/design-convert">Farbraum-Konvertierung fur Web und Druck</a></div><script>$RS("S:15","P:15")</script><div hidden id="S:16"><a class="block rounded-2xl border border-black/8 bg-white/75 px-4 py-3 text-sm leading-5 text-ink transition hover:border-ember/35 hover:bg-white" href="/de/hubs/text-convert">Textfall-, Encoding- und Normalisierungs-Konvertierungs-Tools</a></div><script>$RS("S:16","P:16")</script><div hidden id="S:2a"><footer class="mt-12 border-t border-black/8 bg-canvas/70"><div class="mx-auto flex max-w-[88rem] flex-col items-center justify-between gap-3 px-4 py-6 text-xs text-black/48 sm:flex-row sm:px-6 lg:px-10"><p>© <!-- -->2026<!-- --> Elysia Tools. <!-- -->Alle Rechte vorbehalten.</p><nav class="flex flex-wrap items-center justify-center gap-x-5 gap-y-2"><a class="transition hover:text-ink" href="/de/docs">Dokumentation</a><a class="transition hover:text-ink" href="/de/terms">Nutzungsbedingungen</a><a class="transition hover:text-ink" href="/de/privacy">Datenschutzerklärung</a><a class="transition hover:text-ink" href="/de/contact">Kontakt</a></nav></div></footer></div><script>$RS("S:2a","P:2a")</script><div hidden id="S:1e"><a class="rounded-[1.5rem] border border-black/8 bg-white/80 p-5 transition hover:border-cobalt/30 hover:bg-white" href="/de/samples/contentful-samples"><div class="flex items-center gap-3 text-xs uppercase tracking-[0.22em] text-cobalt"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layers h-4 w-4" aria-hidden="true"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"></path></svg>CMS</div><h3 class="mt-4 text-lg font-semibold text-ink">Contentful Cloud-basierte CMS Beispiele</h3><p class="mt-3 text-sm leading-6 text-black/60">Umfassende Contentful Beispiele mit Content Modeling, API Integration, Webhooks und Frontend Integration Patterns</p></a></div><script>$RS("S:1e","P:1e")</script><div hidden id="S:1f"><a class="rounded-[1.5rem] border border-black/8 bg-white/80 p-5 transition hover:border-cobalt/30 hover:bg-white" href="/de/samples/html-with-images"><div class="flex items-center gap-3 text-xs uppercase tracking-[0.22em] text-cobalt"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layers h-4 w-4" aria-hidden="true"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"></path></svg>Text Processing</div><h3 class="mt-4 text-lg font-semibold text-ink">HTML mit Bildern Proben</h3><p class="mt-3 text-sm leading-6 text-black/60">HTML-Quellcodeproben mit Bildern zum Testen der Extraktion</p></a></div><script>$RS("S:1f","P:1f")</script><div hidden id="S:20"><a class="rounded-[1.5rem] border border-black/8 bg-white/80 p-5 transition hover:border-cobalt/30 hover:bg-white" href="/de/samples/jwt-samples"><div class="flex items-center gap-3 text-xs uppercase tracking-[0.22em] text-cobalt"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layers h-4 w-4" aria-hidden="true"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"></path></svg>Security</div><h3 class="mt-4 text-lg font-semibold text-ink">JWT-Beispiele</h3><p class="mt-3 text-sm leading-6 text-black/60">Umfassende JWT-Beispiele von der grundlegenden Token-Struktur bis zu fortgeschrittenen Sicherheitsimplementierungen</p></a></div><script>$RS("S:20","P:20")</script><div hidden id="S:21"><a class="rounded-[1.5rem] border border-black/8 bg-white/80 p-5 transition hover:border-cobalt/30 hover:bg-white" href="/de/samples/sanity-samples"><div class="flex items-center gap-3 text-xs uppercase tracking-[0.22em] text-cobalt"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layers h-4 w-4" aria-hidden="true"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"></path></svg>CMS</div><h3 class="mt-4 text-lg font-semibold text-ink">Sanity Echtzeit-CMS Beispiele</h3><p class="mt-3 text-sm leading-6 text-black/60">Umfassende Sanity Beispiele für Echtzeit-Inhaltsverwaltung, API-Integration und Bereitstellungsmuster</p></a></div><script>$RS("S:21","P:21")</script><div hidden id="S:22"><a class="group rounded-[1.75rem] border border-black/8 bg-white/90 p-5 shadow-panel transition hover:-translate-y-1 hover:border-ember/40" href="/de/tools/screen-reader-simulation-tester"><div class="flex items-start justify-between gap-4"><div><p class="text-[11px] font-semibold uppercase tracking-[0.24em] text-black/45">Validation</p><h3 class="mt-3 text-xl font-semibold text-ink">Screen-Reader-Simulation-Tester</h3></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right h-5 w-5 text-ember transition group-hover:translate-x-1 group-hover:-translate-y-1" aria-hidden="true"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></div><p class="mt-4 line-clamp-3 text-sm leading-6 text-black/62">Simuliert die Vorlesereihenfolge und gesprochene Semantik eines Screenreaders aus URL oder HTML</p></a></div><script>$RS("S:22","P:22")</script><div hidden id="S:23"><a class="group rounded-[1.75rem] border border-black/8 bg-white/90 p-5 shadow-panel transition hover:-translate-y-1 hover:border-ember/40" href="/de/tools/html-attribute-extractor"><div class="flex items-start justify-between gap-4"><div><p class="text-[11px] font-semibold uppercase tracking-[0.24em] text-black/45">Development</p><h3 class="mt-3 text-xl font-semibold text-ink">HTML-Attribut-Extraktor</h3></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right h-5 w-5 text-ember transition group-hover:translate-x-1 group-hover:-translate-y-1" aria-hidden="true"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></div><p class="mt-4 line-clamp-3 text-sm leading-6 text-black/62">Extrahiert angegebene Attribute (href, src, data-*, etc.) aus HTML-Inhalten mit Unterstützung für Tag-Name-Filterung</p></a></div><script>$RS("S:23","P:23")</script><div hidden id="S:24"><a class="group rounded-[1.75rem] border border-black/8 bg-white/90 p-5 shadow-panel transition hover:-translate-y-1 hover:border-ember/40" href="/de/tools/image-source-extractor"><div class="flex items-start justify-between gap-4"><div><p class="text-[11px] font-semibold uppercase tracking-[0.24em] text-black/45">Text Processing</p><h3 class="mt-3 text-xl font-semibold text-ink">Bildquellen-Extraktor</h3></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right h-5 w-5 text-ember transition group-hover:translate-x-1 group-hover:-translate-y-1" aria-hidden="true"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></div><p class="mt-4 line-clamp-3 text-sm leading-6 text-black/62">Extrahieren Sie Bild-URLs (src-Attribute) aus HTML-Quellcode. Unterstützt lazy-loading Bilder und srcset-Attribute.</p></a></div><script>$RS("S:24","P:24")</script><div hidden id="S:25"><a class="group rounded-[1.75rem] border border-black/8 bg-white/90 p-5 shadow-panel transition hover:-translate-y-1 hover:border-ember/40" href="/de/tools/meta-tag-extractor"><div class="flex items-start justify-between gap-4"><div><p class="text-[11px] font-semibold uppercase tracking-[0.24em] text-black/45">Development</p><h3 class="mt-3 text-xl font-semibold text-ink">Meta-Tag-Extraktor</h3></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right h-5 w-5 text-ember transition group-hover:translate-x-1 group-hover:-translate-y-1" aria-hidden="true"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></div><p class="mt-4 line-clamp-3 text-sm leading-6 text-black/62">Extrahiert und analysiert Meta-Tags, Open Graph, Twitter Cards und strukturierte Daten von Webseiten</p></a></div><script>$RS("S:25","P:25")</script><div hidden id="S:26"><a class="rounded-[1.6rem] border border-black/8 bg-[linear-gradient(155deg,#141414_0%,#25314d_52%,#355e95_100%)] p-5 text-paper shadow-panel transition hover:-translate-y-1 hover:shadow-[0_24px_60px_rgba(23,35,56,0.22)]" href="/de/hubs/html-convert"><div class="flex items-center gap-3 text-xs uppercase tracking-[0.22em] text-paper/60"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wrench h-4 w-4" aria-hidden="true"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"></path></svg>Thema</div><h3 class="mt-4 font-display text-2xl leading-tight">HTML-Extraktions-, Bereinigungs- und Markdown/PDF-Export-Tools</h3><p class="mt-3 text-sm leading-6 text-paper/78">Vergleichen Sie HTML-Bereinigung, Attribut- und Bildquellen-Extraktion, HTML-zu-Markdown und HTML-zu-PDF in einem Hub für Web-Content-Konvertierungs-Workflows.</p></a></div><script>$RS("S:26","P:26")</script><div hidden id="S:27"><a class="rounded-[1.6rem] border border-black/8 bg-[linear-gradient(155deg,#141414_0%,#25314d_52%,#355e95_100%)] p-5 text-paper shadow-panel transition hover:-translate-y-1 hover:shadow-[0_24px_60px_rgba(23,35,56,0.22)]" href="/de/hubs/web-accessibility-audits"><div class="flex items-center gap-3 text-xs uppercase tracking-[0.22em] text-paper/60"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wrench h-4 w-4" aria-hidden="true"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"></path></svg>Thema</div><h3 class="mt-4 font-display text-2xl leading-tight">Tools fuer Web-Accessibility-Audits und lesbare Farbpruefung</h3><p class="mt-3 text-sm leading-6 text-paper/78">Pruefen Sie WCAG-Probleme, Screenreader-Reihenfolge, Kontrastfehler, Risiken bei Farbsehschwaechen und zugaengliche Farbwahl in einem Hub fuer Web-Accessibility-Workflows.</p></a></div><script>$RS("S:27","P:27")</script><div hidden id="S:28"><a class="rounded-[1.6rem] border border-black/8 bg-[linear-gradient(155deg,#141414_0%,#25314d_52%,#355e95_100%)] p-5 text-paper shadow-panel transition hover:-translate-y-1 hover:shadow-[0_24px_60px_rgba(23,35,56,0.22)]" href="/de/hubs/audio-convert"><div class="flex items-center gap-3 text-xs uppercase tracking-[0.22em] text-paper/60"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wrench h-4 w-4" aria-hidden="true"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"></path></svg>Thema</div><h3 class="mt-4 font-display text-2xl leading-tight">Tools fur Audio-Encoding und Formatkonvertierung</h3><p class="mt-3 text-sm leading-6 text-paper/78">Vergleiche Audioformat-Konvertierung, Bitratenanderungen, Abtastraten-Konvertierung, Codec-Wechsel und Export-Tools in einem Hub.</p></a></div><script>$RS("S:28","P:28")</script><div hidden id="S:29"><a class="rounded-[1.6rem] border border-black/8 bg-[linear-gradient(155deg,#141414_0%,#25314d_52%,#355e95_100%)] p-5 text-paper shadow-panel transition hover:-translate-y-1 hover:shadow-[0_24px_60px_rgba(23,35,56,0.22)]" href="/de/hubs/image-convert"><div class="flex items-center gap-3 text-xs uppercase tracking-[0.22em] text-paper/60"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wrench h-4 w-4" aria-hidden="true"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"></path></svg>Thema</div><h3 class="mt-4 font-display text-2xl leading-tight">Tools fur Bildformat-Konvertierung und animierten Export</h3><p class="mt-3 text-sm leading-6 text-paper/78">Vergleiche Bildkonverter fur JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 und animationsgeeignete Exporte in einem Hub.</p></a></div><script>$RS("S:29","P:29")</script><div hidden id="S:2b"><div class="mt-4"><p class="text-xs font-semibold uppercase tracking-[0.18em] text-black/42">Verwendung</p><p class="mt-2 text-sm leading-6 text-black/62">Geben Sie die URL der Produktseite im Feld 'Seiten-URL' ein und aktivieren Sie den Metadaten-Vergleich.</p></div></div><script>$RS("S:2b","P:2b")</script><div hidden id="S:2c"><pre class="mt-4 max-w-full overflow-x-auto whitespace-pre-wrap break-words rounded-2xl bg-ink p-4 text-xs leading-6 text-paper"><code>pageUrl: "https://example.com/produkt", compareWithMetadataTitles: true, showFixSuggestions: true</code></pre></div><script>$RS("S:2c","P:2c")</script><div hidden id="S:2d"><div class="mt-4"><p class="text-xs font-semibold uppercase tracking-[0.18em] text-black/42">Ergebnis</p><p class="mt-2 text-sm leading-6 text-black/62">Der Bericht zeigt eine saubere Hierarchie, warnt jedoch vor einer Abweichung zwischen dem h1-Tag ('Jetzt kaufen') und dem Meta-Titel ('Premium Analytics Software kaufen').</p></div></div><script>$RS("S:2d","P:2d")</script><script>$RC("B:1","S:1")</script></body></html>