HTML Semantic Visualizer

Visualize de forma gráfica e acessível a estrutura semântica dos seus arquivos HTML diretamente no VS Code.

Olá! Eu sou a Ana Clara... uma pessoa extremamente visual. Sempre que abria um arquivo HTML cheio de letras, tags e identações, sentia que estava me perdendo em um mar de elementos. Parecia tudo a mesma coisa.

Foi por isso que criei esta extensão para o VS Code.
Ela transforma a estrutura semântica do HTML em blocos visuais organizados, destacando tags como <header>, <main>, <section>, <article>, <footer>, entre outras.

✨ O que essa extensão faz:

• Lê o HTML aberto no editor.
• Detecta automaticamente as tags semânticas mais importantes.
• Gera uma visualização gráfica e hierárquica das seções do seu site.
• Mostra com clareza a organização do layout, como se fosse um mapa visual.

💡 Por que usar?

Se você, assim como eu, se sente mais confortável entendendo o código de forma visual, essa extensão pode te ajudar muito a enxergar estrutura, hierarquia e organização com muito mais facilidade.

✅ Como usar:

1. Abra um arquivo .html
2. Pressione Ctrl+Shift+P e procure: Visualizar Semântica
3. Uma janela será aberta com a representação gráfica do HTML

Desenvolvido com muito carinho por Ana Clara Ribeiro 💜
Instagram: @an.cra ou @estudioaurea.co