Quantas tags HTML é que realmente usa? A maioria dos programadores tem um arsenal de cerca de uma dúzia: div, p, a, img, span, cabeçalhos e listas. As restantes mais de 100 tags da especificação ficam paradas, simplesmente porque as pessoas se esqueceram delas ou nunca as conheceram.

Isso é um erro. Os navegadores aprenderam a compreender a semântica mais profundamente do que possa pensar. Os leitores de ecrã dependem disso. Os motores de busca analisam a estrutura. A tag certa no sítio certo proporciona acessibilidade, SEO e código legível sem uma única linha de JS.

Selecionámos 18 tags HTML que vale a pena adicionar à sua marcação diária. Não são novas no sentido de «acabadas de sair do rascunho», mas são novas para muitos programadores porque foram injustamente ignoradas. Algumas vêm do HTML5, outras sempre existiram na especificação. Cada uma inclui um exemplo funcional e uma explicação de onde realmente ajuda.

💡 Visão geral rápida:

• Que tags resolvem problemas de acessibilidade e semântica sem JavaScript
• Onde sub/sup, dfn, var e time são úteis para marcação de texto
• Como <q>, <blockquote> e <cite> formatam citações corretamente
• Por que <video>, <picture> e <figure> organizam conteúdo multimédia
• O que del/ins, meter, dialog e menu trazem para as interfaces

1. Marcação semântica de texto: sub, sup, dfn, var, time, kbd

Cinco tags que transformam texto simples numa estrutura compreensível tanto para máquinas como para humanos. Sem JS, apenas HTML nativo.

<sub>** e **<sup>: subscrito e sobrescrito. Fórmulas químicas, expoentes matemáticos, notas de rodapé. O CSS pode baixar ou elevar visualmente o texto com vertical-align, mas não transmitirá a semântica. E isso importa: um leitor de ecrã anunciará «H dois O» em vez de ler «H dois O» como texto normal. Não as use para fins puramente decorativos; os estilos existem para isso.

1
H<sub>2</sub>O
2
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>

<dfn>: um termo a ser definido. Quando introduz um novo conceito e fornece a sua definição, envolva o termo nesta tag. O navegador não faz nada visual com ela, mas os motores de busca e as extensões de dicionário usam <dfn> para construir um glossário da página. O atributo id permite-lhe criar referências cruzadas quando mencionar o termo novamente.

1
<p>
2
  <dfn id="semantic">Семантическая разметка</dfn> — HTML, который
3
  передаёт смысл содержимого, а не только его внешний вид.
4
</p>

<var>: uma variável. Em documentação técnica, tutoriais, descrições de fórmulas. Os navegadores renderizam-na em itálico por defeito. Para expressões matemáticas completas, o MathML é melhor, mas <var> é conveniente quando a variável faz parte de uma frase.

1
По теореме Пифагора, квадраты сторон
2
<var>a</var> и <var>b</var> дают квадрат гипотенузы <var>c</var>.

<time>: uma data ou hora. As máquinas têm dificuldade em interpretar «2 de abril» no meio de um parágrafo. A tag <time> isola a data e fornece um formato legível por máquina através do atributo datetime. Calendários, motores de busca, analisadores de eventos: todos lhe agradecerão.

1
GenerateJS пройдёт
2
<time datetime="2026-04-02">2 апреля 2026</time>.

<kbd>: entrada de teclado. Instruções, atalhos de teclado, comandos. Visualmente exibido num tipo de letra monoespaçado, separando semanticamente os nomes das teclas do texto circundante. Pode aninhá-las para combinações.

1
Закройте окно клавишей <kbd>Esc</kbd>.
2
Сохраните проект: <kbd><kbd>Ctrl</kbd> + <kbd>S</kbd></kbd>.

2. Citações e referências a fontes: q, blockquote, cite

Três tags que cobrem todos os cenários de citação, desde uma frase em linha até um excerto extenso de um livro.

<q>: uma citação inline dentro de um parágrafo. O navegador envolve automaticamente o conteúdo com aspas adequadas ao idioma da página. O atributo opcional cite especifica o URL de origem. O utilizador não o vê, mas as máquinas sim.

1
Как сказал Джереми Кит,
2
<q cite="https://adactio.com">HTML — объединяющий язык
3
Всемирной паутины</q>.

<blockquote>: uma citação em bloco. Para excertos extensos: um parágrafo de um artigo, uma crítica, uma passagem de uma especificação. Também suporta cite. O navegador adiciona uma indentação por defeito e pode estilizá-lo como preferir.

1
<blockquote cite="https://html.spec.whatwg.org/multipage/">
2
  <p>HTML — это язык разметки, используемый для создания
3
  структурированных документов для Всемирной паутины.</p>
4
</blockquote>

<cite>: o título da obra citada. Apenas o título: um livro, artigo, filme, jogo. Não o nome do autor, nem a data, apenas o título. Os navegadores exibem-no em itálico por defeito. É frequentemente confundido com o atributo cite em <q>/<blockquote>, mas são coisas diferentes: o atributo armazena um URL, enquanto a tag <cite> exibe o título ao utilizador.

1
<p>Почитать подробнее можно в
2
<cite>HTML Living Standard</cite>.</p>

3. Estrutura do documento: address e dl/dt/dd

<address>: informações de contacto. Não o endereço postal de uma empresa (os microdados Schema tratam disso), mas os detalhes de contacto do autor da página ou do artigo. Quando colocado dentro de <article>, refere-se ao autor do artigo; quando em <body>, ao proprietário do site. Os motores de busca usam este bloco para construir o Knowledge Graph.

1
<address>
2
  <a href="mailto:[email protected]">[email protected]</a>
3
</address>

<dl>**, <dt>, **<dd>: uma lista de descrição. Não apenas um «glossário de termos», mas qualquer estrutura de «chave/valor»: especificações de produto, metadados, FAQ. Um termo (<dt>) pode ter várias descrições (<dd>) e vice-versa. A ordem é importante: o termo vem primeiro, depois a sua descrição.

1
<dl>
2
  <dt>Элемент</dt>
3
  <dd>Конструкция из открывающего тега, содержимого и закрывающего тега.</dd>
4
  <dt>Атрибут</dt>
5
  <dd>Пара внутри открывающего тега, задающая свойства элемента.</dd>
6
</dl>

4. Conteúdo multimédia: video, picture e figure/figcaption

Três ferramentas poderosas para trabalhar com conteúdo visual e multimédia. Cada uma cobre o seu próprio conjunto de tarefas.

<video>: vídeo incorporado sem players de terceiros. Pode especificar um único src ou vários elementos <source>; o navegador escolhe o primeiro formato suportado. Um detalhe útil: o atributo autopictureinpicture reduz automaticamente o vídeo para uma janela flutuante ao mudar de separador, enquanto disablepictureinpicture impede esse comportamento. De forma semelhante, disableremoteplayback controla a transmissão para Chromecast e Apple TV.

1
<video controls autopictureinpicture>
2
  <source src="video.webm" type="video/webm">
3
  <source src="video.mp4" type="video/mp4">
4
</video>

<picture>: imagens responsivas com controlo total. Ao contrário de srcset em <img>, onde o navegador escolhe a origem, <picture> permite especificar media queries rigorosas. Formatos diferentes (WebP para Chromium, JPEG para outros), cortes diferentes para mobile, uma versão escura para o modo escuro, tudo sem uma única linha de JS.

1
<picture>
2
  <source srcset="hero-dark.webp" media="(prefers-color-scheme: dark)">
3
  <source srcset="hero.webp" type="image/webp">
4
  <img src="hero.jpg" alt="Главный баннер с заголовком статьи">
5
</picture>

<figure>** e **<figcaption>: conteúdo autónomo com legenda. Uma ilustração, diagrama, listagem de código, tabela, qualquer coisa que possa ser removida do fluxo principal sem perda de significado. O <figcaption> associa semanticamente a legenda ao conteúdo: um leitor de ecrã lê-os em conjunto, e não como elementos separados. Se o conteúdo tiver apenas uma relação tangencial com o texto (por exemplo, uma citação numa barra lateral), utilize <aside>.

1
<figure>
2
  <img src="framework-usage.png" alt="Рост React-проектов с 2022 по 2026">
3
  <figcaption>Динамика использования JavaScript-фреймворков, 2022–2026</figcaption>
4
</figure>

5. Mapas de navegação: map e area

Antigos, mas não obsoletos. Os mapas de imagem tornam regiões individuais de uma imagem em links clicáveis. Onde o texto é insuficiente (um mapa interativo do metro, uma planta de um edifício, um diagrama anatómico), <map> com <area> funciona sem JavaScript.

1
<map name="london">
2
  <area shape="circle" coords="200,75,50" href="westminster.html" alt="Вестминстер">
3
  <area shape="rect" coords="300,120,380,180" href="city.html" alt="Сити">
4
</map>
5
<img usemap="#london" src="london-map.jpg" alt="Карта центра Лондона">

O atributo shape aceita circle, rect, poly e default. As coordenadas são em píxeis a partir do canto superior esquerdo. Para contornos complexos, utilize poly com uma lista de pontos. Apesar da sua idade (a tag tem bem mais de vinte anos), goza de suporte estável em todos os navegadores.

6. Edição de texto: del e ins

Quando mostra edições, alterações em documentos, atualizações de artigos ou diferenças legislativas, <del> e <ins> fornecem uma representação semanticamente correta. <del> marca conteúdo removido (os navegadores riscam-no), <ins> marca conteúdo adicionado (os navegadores sublinham-no).

Ambos suportam cite (por que razão mudou) e datetime (quando mudou). Os motores de busca veem o histórico de revisões da página, em vez de apenas texto substituído.

1
<p>
2
  Несмотря на негатив в прессе,
3
  <del datetime="2026-01-15">covfefe</del>
4
  <ins cite="#editorial-note">coverage</ins>.
5
</p>

Não utilize <del> e <ins> para rasurado meramente decorativo; text-decoration: line-through existe para isso. Estas tags dizem especificamente respeito ao versionamento de conteúdo.

7. Campos de entrada de nova geração

O elemento <input> evoluiu muito para além de simples cadeias de texto. Os navegadores modernos suportam dezenas de tipos, cada um trazendo validação integrada, um teclado específico para dispositivos móveis e widgets nativos, sem uma única linha de JavaScript.

Tipos-chave que muitos projetos ainda ignoram:

• type="color": uma paleta de cores. Um seletor nativo, sem necessidade de arrastar uma biblioteca de espetro.
• type="range": um controlo deslizante entre min e max. Volume, preço, classificação, tudo sem programar um slider.
• type="date": um calendário localizado. O navegador mostra um seletor de data com a formatação ajustada à região do utilizador.
• type="datetime-local": data e hora sem fuso horário. Para reservas, prazos, agendamentos.

O atributo pattern aceita uma expressão regular: o valor não passará na validação enquanto não corresponder ao padrão.

1
<input type="color" value="#FF0657">
2
<input type="range" min="0" max="100" value="75">
3
<input type="date" value="2026-06-13">
4
<input name="username" pattern="[a-z]{5,10}"
5
       title="От 5 до 10 строчных латинских букв">

8. Indicadores numéricos

Não confunda com <progress>: o <meter> destina-se a um valor estático dentro de um intervalo conhecido (utilização do disco, pontuação, classificação), enquanto o <progress> é para o progresso de conclusão de uma tarefa (download, processo passo a passo).

O navegador colore automaticamente o <meter> com base na posição do valor em relação a low, high e optimum. Zona verde: valor próximo do ideal; amarelo: tolerável; vermelho: fora do intervalo normal. A lógica de cores pode ser personalizada via CSS, mas a semântica básica funciona de imediato.

1
<meter value="6.4" min="0" max="10" low="4" high="9" optimum="7.5">
2
  6.4 из 10
3
</meter>

9. Elementos interativos: dialog e menu

Duas etiquetas para interações que anteriormente exigiam bibliotecas JS ou construção de raiz.

<dialog>: uma janela modal nativa. O elemento fica oculto por si só. Adicione o atributo open e o navegador exibe-o acima da página, na top layer. O método JavaScript showModal() também fornece o pseudo-elemento ::backdrop para escurecer o fundo. Popup, confirmação de ação, alerta, tudo sem uma única linha de posicionamento CSS.

Suporte: Chrome, Edge, Firefox, Safari (desde 2022). Para navegadores mais antigos, o diálogo é simplesmente renderizado como um contentor de bloco normal; existem polyfills disponíveis.

1
<dialog id="confirm">
2
  <p>Удалить этот элемент?</p>
3
  <button onclick="this.closest('dialog').close()">Отмена</button>
4
  <button onclick="this.closest('dialog').close('confirmed')">Удалить</button>
5
</dialog>

<menu>: uma lista de ações interativas. Não é para navegação (use <nav> para isso), mas especificamente uma barra de ferramentas: pincéis num editor gráfico, botões de formatação, ações sobre objetos. O equivalente semântico de <ul>, mas para botões e comandos. Não tem estilo padrão, apenas significado.

O atributo type="toolbar" (o único que permanece na especificação) define explicitamente o papel de barra de ferramentas. O tipo de contexto foi removido da norma, pelo que o <menu> hoje se destina exclusivamente a conjuntos visíveis de ações no ecrã.

1
<menu type="toolbar">
2
  <li><button>Круглая</button></li>
3
  <li><button>Плоская</button></li>
4
  <li><button>Веерная</button></li>
5
</menu>

Se o HTML markup é novidade para si, aqui fica uma excelente introdução do Traversy; o Traversy Media é um dos melhores canais de frontend no YouTube:

⁉️🤔 Perguntas frequentes

Porquê usar tags semânticas quando se pode construir tudo com <div> e <span>?

Os leitores de ecrã dependem das tags para construir a estrutura da página para utilizadores cegos; o div é invisível para eles. Os motores de busca extraem semântica para rich snippets: classificações de <meter>, FAQ de <dl>, contactos de <address>. Além disso, o código documenta-se a si próprio: <article> diz imediatamente «isto é um artigo», enquanto <div class="article"> não o faz.

Que tags da lista já são seguras para usar em produção?

Todas as dezoito. O <dialog> ganhou suporte cross-browser com o Safari 15.4 (2022), o <menu> funciona de facto como um wrapper semântico em todo o lado. <picture> e <video> com <source> estão maduros desde 2016. <meter>, <time>, <kbd>, <dfn> vêm do legado profundo do HTML com suporte universal. A única ressalva: <input type="date"> e type="color" podem ser renderizados de forma diferente entre sistemas operativos, mas isso não quebra a funcionalidade.

O <b> e o <i> estão mortos?

Não, mas o seu papel mudou. O <b> serve agora para chamar a atenção sem transmitir importância (palavras-chave num currículo), o <i> é para expressões idiomáticas, termos noutra língua, nomes de navios. Para enfatizar importância, use <strong>; para ênfase de destaque, <em>. Negrito/itálico estilístico é apenas CSS.

Posso usar o <meter> para uma barra de progresso de carregamento?

Não. O <meter> é para um valor estático dentro de um intervalo conhecido (uso de disco, pontuação, classificação). Para progresso ao longo do tempo, use exclusivamente <progress>. Os navegadores animam o <progress> quando o value muda, enquanto o <meter> permanece estático. São constantemente confundidos, mas a semântica difere e os leitores de ecrã anunciam-nos de forma diferente.

O que devo fazer se um navegador não suportar <dialog>?

O elemento é simplesmente renderizado como um contentor de bloco e não se parte. Adicione um polyfill: o dialog-polyfill da equipa do Google Chrome (400 linhas, sem dependências) cobre showModal(), close() e ::backdrop para navegadores mais antigos.

Que tag deve adotar primeiro?

O {iframe} e o <picture> são duas tags que proporcionam o máximo benefício com o mínimo esforço. O {iframe} substituirá qualquer leitor de vídeo de terceiros por uma janela nativa com picture-in-picture. O <picture> elimina a troca manual de formatos WebP/AVIF; o navegador escolhe o que entender.

A partir daí, escale: <input> com tipos modernos (color, date, range) eliminará kilobytes de widgets JavaScript. O <dialog> remove a dependência de bibliotecas de modais. <del>/<ins> traz ordem ao versionamento de conteúdo.

Não tem de implementar todas as 18 num único sprint. Comece com uma tag por semana. Dentro de seis meses, o seu markup será semanticamente rico e o seu código autodocumentado, sem uma única linha de JavaScript onde ela não é necessária.

Se não sabe por onde começar, abra o seu projeto atual, encontre o <div class="..."> mais próximo sem semântica clara e substitua-o por uma tag adequada da lista. A diferença na legibilidade do código será imediatamente percetível.