Cole HTML ou forneça uma URL para inspecionar a semântica dos títulos em vez da ordem visual. O relatório mostra saltos de nível, múltiplos h1, headings usados só para estilo, headings vazios e se o h1 principal se afasta do
e do og:title.</p>
<p>Como usar:</p>
<ul>
<li>Entrada HTML: cole a marcação para uma análise estável</li>
<li>URL da página: inspeciona a estrutura publicada</li>
<li>Comparar com títulos meta: confronta o heading principal com <code><title></code> e <code>og:title</code></li>
<li>Mostrar sugestões: adiciona um nível recomendado ou substituição por nó</li>
</ul>
<p>O que o relatório destaca:</p>
<ul>
<li>Árvore visual de h1-h6</li>
<li>Distribuição de severidade em estilo heatmap</li>
<li>Nível sugerido para cada heading</li>
<li>Múltiplos h1 e saltos de nível</li>
<li>Rótulos de UI disfarçados de heading</li>
<li>Desalinhamento entre h1 e títulos meta</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">Execução</p><h2 class="mt-3 font-display text-4xl leading-tight text-ink">Executar esta ferramenta</h2><p class="mt-3 text-sm leading-7 text-black/60">Preencha o formulário, execute a ferramenta e veja o resultado no mesmo lugar.</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">Exemplos</p><h2 class="mt-3 font-display text-4xl leading-tight text-ink">Exemplos compatíveis com esta ferramenta</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">Relacionado</p><h2 class="mt-3 font-display text-4xl leading-tight text-ink">Continue com ferramentas e temas relacionados</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="Perguntar à Elysia"><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">Perguntar à Elysia</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">Execuções de exemplo preparadas</h3><p class="mt-1 text-xs leading-5 text-black/50">Clique em um exemplo para preencher o formulário automaticamente. Arquivos ainda precisam ser enviados.</p></div><span class="rounded-full bg-white px-3 py-1 text-xs font-semibold text-amber-700">1 exemplos</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">Auditar uma landing com saltos de nível e h1 duplicados</span></span></div><span class="mt-2 block text-xs leading-5 text-black/55">Mostra a árvore de títulos, detecta h1 duplicados e indica quais nós deveriam virar h2 ou texto não estrutural.</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>Ver saída completa</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">Entradas</h3><p class="mt-1 text-sm leading-6 text-black/54">Preencha os campos necessários e execute a ferramenta.</p></div><span class="shrink-0 rounded-full bg-canvas px-3 py-1 text-xs font-semibold text-black/54">4 opções</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">Conteúdo</span><span class="mt-0.5 block text-xs leading-5 text-black/48">Cole ou digite os valores principais.</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">Entrada HTML</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">Opcional</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">URL da pagina</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">Opcional</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">Alternâncias</span><span class="mt-0.5 block text-xs leading-5 text-black/48">Ative ou desative comportamentos opcionais.</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">Comparar com títulos meta</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">Opcional</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">Ativo quando marcado</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">Mostrar correcoes</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">Opcional</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">Ativo quando marcado</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>Executar ferramenta</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">Resultado</h3><p class="mt-1 text-xs text-paper/58">Pronto para executar</p></div></div><div class="flex items-center gap-2"><button type="button" title="Comentário / Pedido" aria-label="Comentário / Pedido" 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="Copiar resultado" 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="Baixar resultado" 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">Depois de executar, arquivos, texto, dados estruturados ou saída em streaming aparecerão aqui.</div></div></div></div></div></div><script>$RC("B:1c","S:1c")</script><div hidden id="S:17"><a title="Processe múltiplos arquivos e dados simultaneamente com 131 ferramentas online. Processamento seguro nos servidores da Elysia Tools, sem salvar textos e com exclusão de arquivos em 6 horas." 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="/pt/tags/multiple"><span>Múltiplos</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="Otimize seu fluxo de trabalho com 77 ferramentas online para HTML, CSS e DOM. Processe códigos diretamente no navegador com execução segura em nossos servidores." 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="/pt/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="Visualize, edite e limpe metadados de arquivos online. Processamento seguro nos servidores da Elysia Tools, com exclusão automática de arquivos após 6 horas." 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="/pt/tags/metadata"><span>Metadados</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="Codifique, decodifique e analise links com 31 ferramentas de URL online. Processamento seguro em nossos servidores sem armazenamento de textos." 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="/pt/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="Otimize seu site com 14 ferramentas de SEO online. Processe dados no navegador com execução em nossos servidores. Arquivos são excluídos após 6 horas." 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="/pt/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">Guia de uso da ferramenta</p><h2 class="mt-3 font-display text-4xl leading-tight text-ink">Veja quando usar esta ferramenta, o que ela suporta e como os usuários a aplicam.</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">Fatos principais</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">Categoria</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">Tipos de entrada</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">Tipo de saída</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">Cobertura de exemplos</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 pronta</dt><dd class="mt-2 text-sm font-semibold leading-6 text-ink">Sim</dd></div></dl></section><section id="tool-overview" class="mt-8"><h3 class="text-lg font-semibold text-ink">Visão geral</h3><p class="mt-3 max-w-4xl text-base leading-8 text-black/66">O Auditor de Hierarquia de Títulos analisa a estrutura semântica de tags H1-H6 de uma página web a partir de um código HTML colado ou de uma URL ativa, identificando erros de SEO e acessibilidade como saltos de nível, múltiplos H1 e desalinhamento com metadados.</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">Quando usar</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>Durante a auditoria de SEO técnico de um site para garantir que a estrutura de cabeçalhos seja lógica e legível para rastreadores.</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>Ao validar a acessibilidade de novos templates de página antes de publicá-los em produção.</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>Para verificar se os títulos principais (H1) estão alinhados com as tags de título e Open Graph da página.</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">Como funciona</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>Insira o código HTML bruto no campo de texto ou informe a URL da página que deseja analisar.</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>Ative as opções para comparar o H1 com os títulos meta (title e og:title) e para exibir sugestões de correção.</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>Execute a auditoria para gerar uma árvore visual interativa com a distribuição de severidade dos erros encontrados.</span></li></ol></section></div><section id="tool-use-cases" class="mt-8"><h3 class="text-lg font-semibold text-ink">Casos de uso</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">Identificação de saltos de nível e tags H1 duplicadas em landing pages.</li><li class="rounded-[1.25rem] border border-black/8 bg-canvas/70 p-4">Auditoria rápida de páginas publicadas inserindo diretamente a URL do site.</li><li class="rounded-[1.25rem] border border-black/8 bg-canvas/70 p-4">Correção de elementos de interface (UI) que foram marcados incorretamente como títulos.</li></ul></section><section id="tool-examples" class="mt-8"><h3 class="text-lg font-semibold text-ink">Exemplos</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<!-- -->. <!-- -->Correção de Landing Page com Múltiplos H1</h4><span class="shrink-0 rounded-full bg-cobalt/10 px-3 py-1 text-xs font-semibold text-cobalt">Analista de SEO</span></div><div class="mt-4"><p class="text-xs font-semibold uppercase tracking-[0.18em] text-black/42">Contexto</p><p class="mt-2 text-sm leading-6 text-black/62">Uma landing page de produto recém-lançada apresenta baixo desempenho de indexação e suspeita-se de problemas na estrutura de títulos.</p></div><div class="mt-4"><p class="text-xs font-semibold uppercase tracking-[0.18em] text-black/42">Problema</p><p class="mt-2 text-sm leading-6 text-black/62">A página possui dois H1s e pula do H1 diretamente para o H3 em seções de depoimentos.</p></div><div class="mt-4"><p class="text-xs font-semibold uppercase tracking-[0.18em] text-black/42">Como usar</p><p class="mt-2 text-sm leading-6 text-black/62">Cole o HTML da landing page no campo 'htmlInput' e marque a opção 'showFixSuggestions'.</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>Produto A</h1><h3>Depoimentos</h3><h1>Compre Agora</h1></body></html>', showFixSuggestions: true</code></pre><div class="mt-4"><p class="text-xs font-semibold uppercase tracking-[0.18em] text-black/42">Resultado</p><p class="mt-2 text-sm leading-6 text-black/62">O relatório aponta o segundo H1 como duplicado e sugere alterar o H3 para H2, normalizando a hierarquia.</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<!-- -->. <!-- -->Alinhamento de Metadados em Blog Post</h4><span class="shrink-0 rounded-full bg-cobalt/10 px-3 py-1 text-xs font-semibold text-cobalt">Redator de Conteúdo</span></div><div class="mt-4"><p class="text-xs font-semibold uppercase tracking-[0.18em] text-black/42">Contexto</p><p class="mt-2 text-sm leading-6 text-black/62">Um artigo de blog foi publicado, mas o título visível na página parece diferente do título que aparece nos compartilhamentos sociais.</p></div><div class="mt-4"><p class="text-xs font-semibold uppercase tracking-[0.18em] text-black/42">Problema</p><p class="mt-2 text-sm leading-6 text-black/62">Verificar se o H1 principal diverge do <title> e do og:title configurados no CMS.</p></div><div class="mt-4"><p class="text-xs font-semibold uppercase tracking-[0.18em] text-black/42">Como usar</p><p class="mt-2 text-sm leading-6 text-black/62">Insira a URL do artigo no campo 'pageUrl' e ative 'compareWithMetadataTitles'.</p></div><template id="P:2b"></template><template id="P:2c"></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">Perguntas frequentes</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">O que é um salto de nível na hierarquia de títulos?</summary><div itemProp="acceptedAnswer" itemScope="" itemType="https://schema.org/Answer"><p class="mt-3 text-sm leading-6 text-black/62" itemProp="text">Ocorre quando a estrutura pula um nível lógico, como passar de um H1 diretamente para um H3 sem um H2 intermediário.</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">Por que ter múltiplos H1 pode ser um problema?</summary><div itemProp="acceptedAnswer" itemScope="" itemType="https://schema.org/Answer"><p class="mt-3 text-sm leading-6 text-black/62" itemProp="text">Embora o HTML5 permita, múltiplos H1 podem diluir o foco semântico da página e confundir leitores de tela ou motores de busca.</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">Como a ferramenta compara o H1 com os títulos meta?</summary><div itemProp="acceptedAnswer" itemScope="" itemType="https://schema.org/Answer"><p class="mt-3 text-sm leading-6 text-black/62" itemProp="text">Ela confronta o texto do primeiro H1 com o conteúdo das tags <title> e og:title para identificar divergências de conteúdo.</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">O que são headings usados apenas para estilo?</summary><div itemProp="acceptedAnswer" itemScope="" itemType="https://schema.org/Answer"><p class="mt-3 text-sm leading-6 text-black/62" itemProp="text">São elementos de texto curtos ou botões que usam tags H1-H6 apenas para herdar formatação visual, prejudicando a semântica.</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">Posso auditar páginas que ainda não estão publicadas?</summary><div itemProp="acceptedAnswer" itemScope="" itemType="https://schema.org/Answer"><p class="mt-3 text-sm leading-6 text-black/62" itemProp="text">Sim, basta copiar o código HTML gerado no seu ambiente local e colá-lo diretamente no campo de entrada de HTML.</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="/pt"><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>Início</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="/pt/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>Ferramentas</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="/pt/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>Exemplos</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="/pt/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>Visualizações</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="/pt/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>Visualizadores de arquivos</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="/pt/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>Temas</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="/pt/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>Etiquetas</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="/pt/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">Imagens, áudio e vídeo</span><span class="text-xs text-black/45">507</span></div><p class="mt-1 text-xs leading-5 text-black/55">Ferramentas de processamento, conversão e otimização de imagens, áudio e vídeo</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="/pt/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">Matemática, datas e finanças</span><span class="text-xs text-black/45">448</span></div><p class="mt-1 text-xs leading-5 text-black/55">Calculadoras, ferramentas numéricas, lógica de datas, estatística e finanças</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="/pt/tools?category=Design%20%26%20Color"><div class="flex items-center justify-between gap-4"><span class="text-sm font-medium text-ink">Design e cor</span><span class="text-xs text-black/45">281</span></div><p class="mt-1 text-xs leading-5 text-black/55">Ferramentas de cor, layout, gráficos, estilo visual e apoio ao design</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="/pt/tools?category=Text%20%26%20Writing"><div class="flex items-center justify-between gap-4"><span class="text-sm font-medium text-ink">Texto e escrita</span><span class="text-xs text-black/45">183</span></div><p class="mt-1 text-xs leading-5 text-black/55">Ferramentas de escrita, limpeza, formatação, extração e análise de texto</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="/pt/tools?category=Conversion%20%26%20Encoding"><div class="flex items-center justify-between gap-4"><span class="text-sm font-medium text-ink">Conversão e codificação</span><span class="text-xs text-black/45">160</span></div><p class="mt-1 text-xs leading-5 text-black/55">Ferramentas de conversão de formatos, arquivos, unidades, arquivos compactados e codificação</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="/pt/tools?category=Developer%20%26%20Web"><div class="flex items-center justify-between gap-4"><span class="text-sm font-medium text-ink">Desenvolvimento e Web</span><span class="text-xs text-black/45">150</span></div><p class="mt-1 text-xs leading-5 text-black/55">Utilitários para desenvolvedores, rede, depuração web e automação</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="/pt/hubs/audio-convert">Ferramentas de codificacao e conversao de audio</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="/pt/hubs/image-convert">Ferramentas de conversao de formatos de imagem e exportacao animada</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="/pt/hubs/json-convert">Ferramentas de intercambio JSON e traducao de formatos</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="/pt/hubs/design-convert">Ferramentas de conversao de espacos de cor para web e impressao</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="/pt/hubs/text-convert">Ferramentas de conversão de caixa, codificação e normalização de texto</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. <!-- -->Todos os direitos reservados.</p><nav class="flex flex-wrap items-center justify-center gap-x-5 gap-y-2"><a class="transition hover:text-ink" href="/pt/docs">Documentação</a><a class="transition hover:text-ink" href="/pt/terms">Termos de serviço</a><a class="transition hover:text-ink" href="/pt/privacy">Política de privacidade</a><a class="transition hover:text-ink" href="/pt/contact">Contato</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="/pt/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">Exemplos Contentful CMS Baseado na Nuvem</h3><p class="mt-3 text-sm leading-6 text-black/60">Exemplos abrangentes do Contentful cobrindo modelagem de conteúdo, integração de API, webhooks e padrões de integração frontend</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="/pt/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">Amostras de HTML com Imagens</h3><p class="mt-3 text-sm leading-6 text-black/60">Amostras de código fonte HTML com imagens para testar extração</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="/pt/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">Exemplos JWT</h3><p class="mt-3 text-sm leading-6 text-black/60">Exemplos completos de JWT da estrutura básica de tokens às implementações de segurança avançadas</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="/pt/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">Exemplos Sanity CMS em Tempo Real</h3><p class="mt-3 text-sm leading-6 text-black/60">Exemplos abrangentes do Sanity cobrindo modelagem de conteúdo, integração de API e padrões de implantação</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="/pt/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">Simulador de leitor de tela</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">Simula a ordem de leitura e a semantica falada de um leitor de tela a partir de URL ou 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="/pt/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">Extrator de Atributos HTML</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">Extrai atributos especificados (href, src, data-*, etc.) do conteúdo HTML com suporte para filtragem de nomes de tags</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="/pt/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">Extrator de Fonte de Imagem</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">Extraia URLs de imagem (atributos src) do código fonte HTML. Suporta imagens de carregamento lento e atributos srcset.</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="/pt/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">Extrator Meta Tags</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">Extrai e analisa meta tags, Open Graph, Twitter Cards e dados estruturados de páginas web</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="/pt/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>Tema</div><h3 class="mt-4 font-display text-2xl leading-tight">Ferramentas de extração, limpeza e exportação de HTML para Markdown/PDF</h3><p class="mt-3 text-sm leading-6 text-paper/78">Compare ferramentas de limpeza de HTML, extração de atributos, extração de imagens, HTML para Markdown e HTML para PDF em um único hub para fluxos de conversão de conteúdo web.</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="/pt/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>Tema</div><h3 class="mt-4 font-display text-2xl leading-tight">Ferramentas de auditoria de acessibilidade web e cores acessiveis</h3><p class="mt-3 text-sm leading-6 text-paper/78">Revise problemas WCAG, ordem de leitor de tela, falhas de contraste, risco para deficiencia de visao de cores e escolhas de cor acessivel em um unico hub para fluxos de acessibilidade web.</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="/pt/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>Tema</div><h3 class="mt-4 font-display text-2xl leading-tight">Ferramentas de codificacao e conversao de audio</h3><p class="mt-3 text-sm leading-6 text-paper/78">Compare conversao de formatos de audio, ajustes de bitrate, conversao de taxa de amostragem, troca de codec e exportacao em um unico 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="/pt/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>Tema</div><h3 class="mt-4 font-display text-2xl leading-tight">Ferramentas de conversao de formatos de imagem e exportacao animada</h3><p class="mt-3 text-sm leading-6 text-paper/78">Compare conversores de imagem para JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 e saidas voltadas para animacao em um unico hub.</p></a></div><script>$RS("S:29","P:29")</script><div hidden id="S:2b"><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://meublog.com/artigo-seo', compareWithMetadataTitles: true</code></pre></div><script>$RS("S:2b","P:2b")</script><div hidden id="S:2c"><div class="mt-4"><p class="text-xs font-semibold uppercase tracking-[0.18em] text-black/42">Resultado</p><p class="mt-2 text-sm leading-6 text-black/62">A ferramenta exibe um alerta mostrando que o H1 ('Guia de SEO') difere do og:title ('Guia Completo de SEO para Iniciantes'), permitindo o ajuste.</p></div></div><script>$RS("S:2c","P:2c")</script><script>$RC("B:1","S:1")</script></body></html>