html elementor – Sleepzee

Manual de Tags HTML para Elementor

Referência rápida com exemplos literalizados (mostrados como texto), ideal para usar em widgets de texto e títulos.

Formatação de Texto

<b>

Negrito (visual)

<b>Texto em negrito</b>

Resultado esperado: texto em negrito.

Negrito com ênfase semântica (melhor para SEO)

<strong>Importante</strong>

Resultado esperado: “Importante” em negrito e com peso semântico.

<i>

Itálico (ênfase leve)

<i>Texto em itálico</i>

Resultado esperado: texto em itálico.

<em>

Itálico com ênfase semântica

<em>Palavra importante</em>

Resultado esperado: palavra em itálico com relevância semântica.

<u>

Sublinhado

<u>Texto sublinhado</u>

Resultado esperado: texto com linha embaixo.

<small>

Texto menor

<small>Texto menor</small>

Resultado esperado: texto visualmente menor.

<mark>

Destaque tipo marca‑texto

<mark>Texto destacado</mark>

Resultado esperado: fundo amarelo (ou estilo de “marca‑texto”).

<del>

Texto riscado

<del>Texto removido</del>

Resultado esperado: texto com traço no meio (ex.: preço antigo).

<ins>

Texto inserido (similar a sublinhado)

<ins>Novo texto</ins>

Resultado esperado: indica texto “adicionado” (pode aparecer sublinhado).

Estrutura & Parágrafos

<p>

Parágrafo

<p>Este é um parágrafo</p>

Resultado esperado: bloco de texto com quebra antes e depois.

<br>

Quebra de linha (sem novo parágrafo)

Primeira linha<br>Segunda linha

Resultado esperado: quebra de linha simples dentro do mesmo parágrafo.

<hr>

Linha horizontal divisória

<hr>

Resultado esperado: linha cinza de separação de seções.

<div>

Agrupar blocos/seções (semântica neutra)

<div>Conteúdo agrupado</div>

Resultado esperado: container para aplicar estilos/estrutura.

<span>

Formatar trecho específico inline

<span style="color:red;">Texto vermelho</span>

Resultado esperado: estilizar apenas parte de um texto.

Cabeçalhos (Títulos)

<h1>

Cabeçalho nível 1 (título principal)

<h1>Título nível 1</h1>

Um por página é o ideal para SEO.

<h2>

Cabeçalho nível 2 (subtítulo principal)

<h2>Título nível 2</h2>

Usado para seções principais dentro da página.

<h3>

Cabeçalho nível 3

<h3>Título nível 3</h3>

Subseções dentro de um <h2>.

<h4>

Cabeçalho nível 4

<h4>Título nível 4</h4>

Títulos menores/mais específicos.

<h5>

Cabeçalho nível 5

<h5>Título nível 5</h5>

Quase nunca necessário, mas disponível.

<h6>

Cabeçalho nível 6 (mais baixo)

<h6>Título nível 6</h6>

Último nível de hierarquia de título.

Índices & Fórmulas

<sup>

Sobrescrito (expoentes, notas)

x<sup>2</sup>

Resultado esperado: x².

<sub>

Subscrito (fórmulas químicas)

H<sub>2</sub>O

Resultado esperado: H₂O.

Links & Citações

Uso básico de links clicáveis e blocos de citação.

<a>

Hiperlink para outra página ou seção

<a href="https://site.com" target="_blank">Clique aqui</a>

Resultado esperado: link que abre em nova aba (por causa do target="_blank").

Citação com recuo visual

<blockquote>Citação de alguém</blockquote>

Resultado esperado: bloco destacado com recuo à esquerda.

Código & Texto Preformatado

Úteis para mostrar códigos HTML, JSON, scripts ou textos “como digitados”.

<code>

Mostrar código (sem renderizar tags)

<code><b>negrito</b></code>

Resultado esperado: exibe <b>negrito</b> como texto, não em negrito.

<pre>

Preserva espaços e quebras de linha

<pre>linha 1
linha 2</pre>
        

Resultado esperado: texto monoespaçado com quebras exatamente como digitado.

Dicas Práticas no Elementor

Use <span> para colorir ou destacar palavras específicas dentro de títulos.
Em títulos (<h1>…<h6>), o <br> força uma quebra de linha manual.
Visualmente <b> e <strong> são iguais; para SEO, prefira <strong>.
O Elementor aceita HTML em widgets de texto e, em muitos temas, também diretamente nos títulos.
Quando quiser mostrar código (e não executar), use <code> e escape as tags com < e >.
Evite tags estruturais completas (<html>, <head>, <body>) dentro do widget; use apenas o miolo que você precisa.