Tags Que Eu Duvido Que Você Conheça!!

Parte 1 | HTML para apresentações no estilo Canva

Se você usa o Canva para criar apresentações visuais, barras de progresso, etapas, interações e conteúdo dinâmico…

então saiba: o HTML já tem tags prontas para isso.

E o pior (ou melhor): quase ninguém usa.

🧠 1. <progress> — A barra de progresso do seu slide

No Canva, barras de progresso são comuns para:

• etapas
• carregamento
• evolução de algo

No HTML, isso existe nativamente.

<progress value="60" max="100"></progress>

📌 Representa:

• progresso de um curso
• carregamento de conteúdo
• avanço de uma apresentação

📌 Sem JS

📌 Sem gambiarra

📌 Sem div fingindo ser barra

É literalmente o “slide de progresso” em HTML.

🧠 2. <meter> — Indicadores visuais (nível, status, intensidade)

Enquanto <progress> mostra avanço,

<meter> mostra estado.

Exatamente como aqueles indicadores visuais do Canva.

<meter value="8" min="0" max="10"></meter>

📌 Ideal para:

• nível de habilidade
• qualidade
• intensidade
• status (baixo, médio, alto)

📌 Pense em:

“Nível de domínio em design”

“Qualidade do projeto”

Isso é design semântico, não só visual.

🧠 3. <details> + <summary> — Interação sem JavaScript

Sabe quando no Canva você cria:

• conteúdo oculto
• slides interativos
• informações extras?

No HTML:

<details>
<summary>Ver mais detalhes</summary>
Conteúdo adicional da apresentação.
</details>

📌 Funciona como:

• FAQ
• explicações extras
• camadas de informação

📌 Acessível

📌 Interativo

📌 Zero JavaScript

Quem não usa isso geralmente complica o que é simples.

🧠 4. <output> — Resultado visível (feedback em tempo real)

Canva sempre mostra resultado imediato quando você altera algo.

No HTML, isso é <output>.

<input type="range" id="nivel" oninput="saida.value = nivel.value">
<output id="saida"></output>

📌 Perfeito para:

• simulações
• controles
• feedback visual
• apresentações interativas

📌 O usuário muda algo

📌 O resultado aparece

📌 Igualzinho experiência Canva

💡 Por que essas tags combinam com Canva?

Porque Canva é sobre:

• visual
• feedback
• clareza
• interação

Essas tags fazem exatamente isso no HTML, mas:

• sem JS desnecessário
• com acessibilidade
• com semântica real

🚀 Conclusão

Se você cria apresentações no Canva e:

• usa só <div>
• cria tudo no CSS
• resolve tudo com JavaScript

Então você está ignorando ferramentas prontas do HTML.

Canva resolve design visual.

HTML resolve estrutura e interação.

Quando os dois se encontram, o nível sobe.

Links do linkedin e canva:

Canva: https://www.canva.com/design/DAG_shZgDjs/cRUlpy5IR4_FL5QORmgMyA/view

Linkedin: https://www.linkedin.com/feed/update/urn:li:activity:7422258821596708865/