htmladvanced154 snippets

HTML5: Tags Semânticas & SEO

O Google odeia <div>. Use a estrutura semântica correta para colocar seu site no topo das buscas sem gastar com anúncios.

Seções29

🏗️ Estrutura Básica do Documento

6 snippets

Fundamentos para a criação de qualquer página HTML, incluindo a declaração do documento, metadados essenciais e os elementos base do corpo.

Declaração DOCTYPE

Declara o tipo de documento e a versão do HTML que o navegador deve usar para renderizar a página. Essencial para garantir o modo de renderização padrão do HTML5 e evitar o modo "quirks", que pode causar inconsistências visuais.

Quando usar: Ao iniciar qualquer documento HTML para definir a versão do HTML.

html

<!DOCTYPE html>

Elemento Raiz HTML

O elemento raiz de toda a página HTML. O atributo `lang` define o idioma principal do conteúdo do documento (neste caso, Português do Brasil), o que é crucial para acessibilidade (leitores de tela) e para motores de busca (SEO).

Quando usar: Sempre como o primeiro elemento dentro do DOCTYPE.

html

<html lang="pt-BR">

Metadados do Documento (Head)

Contém metadados sobre o documento, como título, links para folhas de estilo, scripts, informações de SEO e outras configurações que não são exibidas diretamente na página, mas são importantes para o navegador e motores de busca.

Quando usar: Para incluir todas as informações não visíveis da página.

html

<head>

Conteúdo Visível (Body)

Contém todo o conteúdo visível da página web, incluindo texto, imagens, links, vídeos e outros elementos interativos. Tudo o que o usuário vê e interage está dentro desta tag.

Quando usar: Para envolver todo o conteúdo que será exibido no navegador.

html

<body>

Codificação de Caracteres

Define a codificação de caracteres do documento como UTF-8, que suporta a maioria dos caracteres em todos os idiomas, incluindo acentos e caracteres especiais. Garante que o texto seja exibido corretamente em diferentes sistemas operacionais e navegadores.

Quando usar: Sempre no início do <head> para evitar problemas de codificação.

html

<meta charset="UTF-8">

Configuração de Viewport

Configura a viewport para dispositivos móveis, controlando a largura da área visível (`width=device-width`) e o nível de zoom inicial (`initial-scale=1.0`). Essencial para garantir que o design da página seja responsivo e se adapte a diferentes tamanhos de tela.

Quando usar: Em todas as páginas para garantir responsividade em dispositivos móveis.

html

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Títulos, Parágrafos e Quebras

4 snippets

Elementos essenciais para estruturar o texto, definir hierarquia de títulos e controlar o fluxo de conteúdo.

Títulos de Seção (H1-H6)

Define títulos de diferentes níveis de importância. `<h1>` é o título mais importante (geralmente o título principal da página), e `<h6>` é o menos importante. Usados para estruturar o conteúdo semanticamente e são relevantes para SEO.

Quando usar: Para definir a hierarquia e estrutura de cabeçalhos em seu conteúdo.

html

<h1> a <h6>

Parágrafo de Texto

Representa um parágrafo de texto. É o elemento fundamental para blocos de texto em um documento HTML, separando o conteúdo em unidades legíveis.

Quando usar: Para qualquer bloco de texto que forma um parágrafo.

html

<p>

Quebra de Linha

Insere uma quebra de linha simples, movendo o conteúdo subsequente para a próxima linha sem criar um novo parágrafo. Usado para quebras de linha dentro do mesmo bloco de texto (e.g., em um endereço).

Quando usar: Quando uma quebra de linha é necessária, mas um novo parágrafo não é semanticamente apropriado.

html

<br>

Linha Horizontal (Quebra Temática)

Representa uma quebra temática entre parágrafos de conteúdo, indicando uma mudança de assunto ou seção. Geralmente renderizada como uma linha horizontal pelo navegador, mas seu propósito é semântico.

Quando usar: Para indicar uma mudança de tópico ou seção dentro do conteúdo.

html

<hr>

Formatação e Ênfase de Texto

6 snippets

Tags para aplicar formatação e dar significado semântico a partes específicas do texto.

Texto Importante (Strong)

Indica que o texto contido é de grande importância, relevância ou urgência. Geralmente renderizado em negrito pelos navegadores. Possui um significado semântico mais forte que apenas `<b>`.

Quando usar: Para destacar conteúdo crítico ou de alta prioridade.

html

<strong>

Texto Enfatizado (Emphasized)

Indica que o texto contido deve ser enfatizado, geralmente para dar um significado diferente ou para expressar um tom. Geralmente renderizado em itálico pelos navegadores. Possui um significado semântico mais forte que apenas `<i>`.

Quando usar: Para dar ênfase a uma palavra ou frase que muda o sentido da sentença.

html

<em>

Texto Destacado (Mark)

Destaca ou realça um trecho de texto, como se fosse marcado com um marcador de texto amarelo. Usado para chamar a atenção para partes específicas do conteúdo que são relevantes para o contexto atual do usuário.

Quando usar: Para realçar texto relevante em um contexto específico, como resultados de busca.

html

<mark>

Texto Menor (Small)

Representa comentários secundários, direitos autorais, textos de rodapé e outras informações que são consideradas "pequenas" em relação ao texto principal. Geralmente renderizado com uma fonte menor.

Quando usar: Para informações de copyright, avisos legais ou texto de rodapé.

html

<small>

Texto Deletado (Deleted)

Representa texto que foi excluído de um documento ou que não é mais relevante. Geralmente renderizado com uma linha sobre o texto (tachado), indicando que foi removido.

Quando usar: Para mostrar alterações em um documento, como preços antigos.

html

<del>

Texto Inserido (Inserted)

Representa texto que foi inserido em um documento. Geralmente renderizado com um sublinhado, indicando que foi adicionado. Usado em conjunto com `<del>` para mostrar revisões.

Quando usar: Para mostrar texto que foi adicionado a um documento revisado.

html

<ins>

Links e Imagens

4 snippets

Elementos para criar hiperlinks e incorporar imagens em páginas web, essenciais para navegação e conteúdo visual.

Link Básico (Anchor)

Cria um hiperlink para outra página, recurso ou parte do mesmo documento. O atributo `href` (Hypertext REFerence) especifica o URL de destino para onde o link aponta.

Quando usar: Para criar links de navegação ou referências externas.

html

<a href="url">

Link em Nova Aba

Cria um hiperlink que, ao ser clicado, abre o recurso especificado em uma nova aba ou janela do navegador. O atributo `target="_blank"` é usado para este comportamento.

Quando usar: Para abrir links externos sem tirar o usuário da página atual.

html

<a href="url" target="_blank">

Incorporar Imagem

Incorpora uma imagem no documento. O atributo `src` (SouRCe) especifica o caminho para o arquivo da imagem, e `alt` (ALTernative text) fornece uma descrição textual alternativa, essencial para acessibilidade (leitores de tela) e SEO.

Quando usar: Para exibir imagens em sua página.

html

<img src="caminho" alt="descrição">

Imagens Responsivas (Picture)

Um container que permite especificar múltiplas fontes de imagem (`<source>`) para diferentes condições (como tamanhos de tela, densidades de pixel ou formatos de imagem), e um elemento `<img>` como fallback. Ajuda a otimizar o carregamento de imagens e a adaptá-las a diversos dispositivos.

Quando usar: Para servir imagens otimizadas para diferentes viewports ou formatos.

html

<picture>

🎯 Elementos Semânticos de Estrutura

7 snippets

Elementos que fornecem significado estrutural ao conteúdo, melhorando a acessibilidade, SEO e a manutenção do código.

Cabeçalho da Página/Seção

Representa o conteúdo introdutório de uma seção ou de todo o documento, geralmente contendo títulos, logotipos, navegação e/ou um campo de busca. Não deve ser confundido com os títulos `<h1>-<h6>`.

Quando usar: Para agrupar elementos introdutórios, como o topo de uma página ou seção.

html

<header>

Navegação Principal

Representa uma seção de links de navegação, como menus, índices ou tabelas de conteúdo. Destinado a navegação principal do site ou de uma seção importante.

Quando usar: Para envolver blocos de links de navegação primária.

html

<nav>

Conteúdo Principal

Representa o conteúdo dominante do `<body>` do documento. Deve haver apenas um elemento `<main>` por documento e seu conteúdo deve ser único para aquela página, excluindo barras laterais, navegação, etc.

Quando usar: Para delimitar o conteúdo principal e único de sua página.

html

<main>

Seção Genérica

Representa uma seção genérica de conteúdo tematicamente agrupado. Geralmente contém um título (h1-h6) e pode ser usado para dividir o conteúdo principal em partes lógicas e coerentes.

Quando usar: Para agrupar conteúdo relacionado que forma uma seção lógica.

html

<section>

Conteúdo Independente (Article)

Representa um conteúdo independente e autossuficiente, como um post de blog, um artigo de jornal, um comentário de usuário ou um widget interativo. Pode ser distribuído e reutilizado independentemente do resto da página.

Quando usar: Para conteúdo que pode ser lido de forma independente, como um artigo de blog.

html

<article>

Conteúdo Secundário (Aside)

Representa um conteúdo que é tangencialmente relacionado ao conteúdo principal do documento, mas que pode ser considerado separado. Frequentemente usado para barras laterais, caixas de citação ou blocos de anúncios.

Quando usar: Para barras laterais, caixas de citação ou informações relacionadas.

html

<aside>

Rodapé da Página/Seção

Representa o rodapé de uma seção ou de todo o documento. Geralmente contém informações sobre o autor, direitos autorais, links relacionados, informações de contato ou navegação secundária.

Quando usar: Para agrupar informações de rodapé, como direitos autorais e links de contato.

html

<footer>

Elementos de Texto Semântico

6 snippets

Tags que adicionam significado estrutural e contextual a blocos de texto específicos.

Citação Longa (Blockquote)

Indica que o texto contido é uma citação longa de outra fonte. Geralmente renderizado com um recuo pelo navegador. O atributo `cite` pode ser usado para apontar para a fonte da citação.

Quando usar: Para citar blocos de texto de outras fontes.

html

<blockquote>

Título de Obra (Cite)

Usado para citar o título de uma obra criativa (livro, filme, música, pintura, etc.) ou o nome da fonte de uma citação. O conteúdo é geralmente renderizado em itálico.

Quando usar: Para referenciar o título de uma obra citada.

html

<cite>

Código de Computador

Exibe um pequeno fragmento de código de computador. O conteúdo é geralmente renderizado em uma fonte monoespaçada, indicando que é código. Pode ser usado dentro de `<pre>` para blocos maiores de código.

Quando usar: Para exibir trechos de código inline ou dentro de um parágrafo.

html

<code>

Texto Pré-formatado

Exibe texto pré-formatado. O texto dentro desta tag é exibido em uma fonte monoespaçada e mantém espaços em branco e quebras de linha exatamente como foram escritos no código-fonte. Útil para exibir código ou arte ASCII.

Quando usar: Para exibir blocos de código ou texto que requerem formatação exata.

html

<pre>

Abreviação

Representa uma abreviação ou um acrônimo. O atributo `title` pode ser usado para fornecer a expansão completa da abreviação, melhorando a acessibilidade e a compreensão do usuário.

Quando usar: Para marcar abreviações e fornecer seu significado completo.

html

<abbr>

Informações de Contato

Fornece informações de contato para o autor/proprietário do documento ou da seção mais próxima. Pode incluir nome, endereço físico, e-mail, telefone, URL, etc.

Quando usar: Para exibir informações de contato de forma semântica.

html

<address>

Mídia e Conteúdo Embutido

5 snippets

Elementos para incorporar figuras, legendas e outros tipos de conteúdo externo na página.

Container de Figura

Usado para agrupar conteúdo auto-contido, como imagens, diagramas, fotos, blocos de código, etc., juntamente com sua legenda (`<figcaption>`), tornando-o independente do fluxo principal do documento e referenciável.

Quando usar: Para agrupar uma imagem, código ou outro conteúdo com sua legenda.

html

<figure>

Legenda da Figura

Fornece uma legenda ou descrição para o conteúdo de um elemento `<figure>`. Deve ser o primeiro ou o último filho de um `<figure>`.

Quando usar: Para adicionar uma legenda descritiva a um elemento <figure>.

html

<figcaption>

Conteúdo Externo (Iframe)

Incorpora outro documento HTML dentro do documento atual. Usado para exibir conteúdo de outras fontes, como vídeos do YouTube, mapas do Google ou conteúdo de outros sites, de forma isolada.

Quando usar: Para incorporar conteúdo de outras fontes ou documentos HTML.

html

<iframe>

Conteúdo Embutido (Embed)

Incorpora conteúdo externo de um ponto de inserção especificado no documento. Usado para integrar plugins de terceiros ou conteúdo que não é HTML, como PDFs, arquivos de áudio/vídeo ou animações Flash (embora seu uso tenha diminuído).

Quando usar: Para incorporar conteúdo de plugins externos ou mídias não HTML.

html

<embed>

Objeto Multimídia (Object)

Incorpora um objeto externo (como um plugin, PDF, Flash ou mesmo outro documento HTML) no documento HTML. Oferece mais opções de fallback e controle de conteúdo do que `<embed>`, mas é menos comum hoje em dia.

Quando usar: Para incorporar objetos externos com mais controle sobre fallbacks.

html

<object>

📋 Tipos de Listas

6 snippets

Elementos para organizar informações em listas ordenadas, não ordenadas ou de definição.

Lista Não Ordenada

Cria uma lista não ordenada de itens. Os itens da lista são geralmente marcados com marcadores (bolinhas, quadrados, etc.), indicando que a ordem não é semanticamente importante.

Quando usar: Para listas onde a ordem dos itens não é relevante (e.g., lista de compras).

html

<ul>

Lista Ordenada

Cria uma lista ordenada de itens. Os itens da lista são geralmente marcados com números ou letras, indicando uma sequência ou hierarquia.

Quando usar: Para listas onde a ordem dos itens é importante (e.g., passos de uma receita).

html

<ol>

Item de Lista

Representa um item individual dentro de uma lista (`<ul>` ou `<ol>`). Deve ser um filho direto de `<ul>`, `<ol>` ou `<menu>`.

Quando usar: Para cada item dentro de uma lista ordenada ou não ordenada.

html

<li>

Lista de Definição

Cria uma lista de definição, que é uma lista de termos e suas respectivas descrições. Útil para glossários, perguntas e respostas ou metadados.

Quando usar: Para criar glossários ou listas de termos e suas definições.

html

<dl>

Termo de Definição

Representa um termo a ser definido dentro de uma lista de definição (`<dl>`). Cada `<dt>` é geralmente seguido por um ou mais elementos `<dd>`.

Quando usar: Para definir o termo em uma lista de definição.

html

<dt>

Descrição de Definição

Representa a descrição ou definição de um termo (`<dt>`) dentro de uma lista de definição (`<dl>`).

Quando usar: Para fornecer a descrição ou explicação de um termo em uma lista de definição.

html

<dd>

Atributos de Listas

6 snippets

Atributos para personalizar a aparência e o comportamento de listas ordenadas e não ordenadas.

Lista Numerada Padrão

Define uma lista ordenada que usa números arábicos (1, 2, 3...) como marcadores. Este é o tipo padrão e pode ser omitido.

Quando usar: Para listas ordenadas com numeração padrão.

html

<ol type="1">

Lista com Letras Maiúsculas

Define uma lista ordenada que usa letras maiúsculas (A, B, C...) como marcadores para os itens da lista.

Quando usar: Para listas ordenadas que usam letras maiúsculas como marcadores.

html

<ol type="A">

Lista com Letras Minúsculas

Define uma lista ordenada que usa letras minúsculas (a, b, c...) como marcadores para os itens da lista.

Quando usar: Para listas ordenadas que usam letras minúsculas como marcadores.

html

<ol type="a">

Lista com Algarismos Romanos

Define uma lista ordenada que usa algarismos romanos maiúsculos (I, II, III...) como marcadores para os itens da lista.

Quando usar: Para listas ordenadas que usam algarismos romanos como marcadores.

html

<ol type="I">

Início da Lista Ordenada

Inicia a contagem de uma lista ordenada a partir de um número específico (neste caso, 5), em vez de começar do 1. O valor pode ser qualquer número inteiro.

Quando usar: Para continuar uma lista de um ponto específico ou quando a ordem lógica exige um início diferente.

html

<ol start="5">

Lista Sem Marcadores

Remove os marcadores padrão de uma lista não ordenada, permitindo customização completa via CSS. Este é um exemplo de estilo inline, mas é preferível usar CSS externo.

Quando usar: Quando você quer remover os marcadores padrão e estilizar a lista com CSS.

html

<ul style="list-style-type: none;">

Estrutura de Tabelas

7 snippets

Elementos fundamentais para criar e organizar dados em formato tabular.

Container da Tabela

O container principal para dados tabulares. Define uma tabela HTML, agrupando todos os seus elementos (cabeçalho, corpo, rodapé, linhas e células).

Quando usar: Para criar qualquer tabela de dados.

html

<table>

Cabeçalho da Tabela

Agrupa o conteúdo do cabeçalho de uma tabela. Contém as informações de cabeçalho das colunas, geralmente usando elementos `<th>`.

Quando usar: Para definir o cabeçalho semântico de uma tabela.

html

<thead>

Corpo da Tabela

Agrupa o conteúdo do corpo de uma tabela. Contém as linhas de dados principais da tabela, usando elementos `<tr>` e `<td>`.

Quando usar: Para definir o corpo principal de dados de uma tabela.

html

<tbody>

Rodapé da Tabela

Agrupa o conteúdo do rodapé de uma tabela. Geralmente contém resumos, totais ou informações adicionais relacionadas aos dados do corpo da tabela.

Quando usar: Para definir o rodapé semântico de uma tabela, como totais ou notas.

html

<tfoot>

Linha da Tabela

Define uma linha de células em uma tabela (Table Row). Cada `<tr>` deve conter um ou mais elementos `<th>` (células de cabeçalho) ou `<td>` (células de dados).

Quando usar: Para cada nova linha de dados ou cabeçalho na tabela.

html

<tr>

Célula de Cabeçalho

Define uma célula de cabeçalho em uma tabela (Table Header). O conteúdo é geralmente centralizado e em negrito por padrão, e semanticamente representa um cabeçalho para uma coluna ou linha, melhorando a acessibilidade.

Quando usar: Para células que servem como cabeçalhos de colunas ou linhas.

html

<th>

Célula de Dados

Define uma célula de dados padrão em uma tabela (Table Data). Contém o dado real da tabela. É o elemento mais básico para exibir conteúdo dentro de uma linha.

Quando usar: Para cada célula de dados comum em uma tabela.

html

<td>

Atributos de Tabelas

5 snippets

Atributos para controlar a apresentação e o layout das células em tabelas HTML.

Borda da Tabela (Obsoleto)

Adiciona uma borda de 1 pixel ao redor da tabela e de suas células. Este atributo é obsoleto no HTML5; o estilo de bordas deve ser aplicado exclusivamente via CSS para melhor separação de responsabilidades.

Quando usar: Evitar o uso. Preferir CSS para estilização de bordas.

html

<table border="1">

Mesclar Colunas (Colspan)

Faz com que uma célula de dados ocupe (mescle) duas ou mais colunas adjacentes na tabela. O valor do atributo indica o número de colunas a serem mescladas.

Quando usar: Para mesclar células horizontalmente, abrangendo múltiplas colunas.

html

<td colspan="2">

Mesclar Linhas (Rowspan)

Faz com que uma célula de dados ocupe (mescle) três ou mais linhas adjacentes na tabela. O valor do atributo indica o número de linhas a serem mescladas.

Quando usar: Para mesclar células verticalmente, abrangendo múltiplas linhas.

html

<td rowspan="3">

Escopo de Cabeçalho (Coluna)

Indica que a célula de cabeçalho (`<th>`) fornece um cabeçalho para todas as células na mesma coluna. Essencial para acessibilidade, pois leitores de tela podem associar dados a seus respectivos cabeçalhos.

Quando usar: Para indicar que um <th> é o cabeçalho de uma coluna inteira.

html

<th scope="col">

Escopo de Cabeçalho (Linha)

Indica que a célula de cabeçalho (`<th>`) fornece um cabeçalho para todas as células na mesma linha. Essencial para acessibilidade, especialmente em tabelas complexas.

Quando usar: Para indicar que um <th> é o cabeçalho de uma linha inteira.

html

<th scope="row">

📝 Estrutura do Formulário

5 snippets

Elementos básicos para construir formulários HTML e agrupar seus campos de forma lógica.

Container de Formulário

Define um formulário HTML para coletar entrada do usuário. Todos os elementos de entrada de um formulário (inputs, textareas, selects, buttons) devem estar contidos dentro desta tag para que seus dados possam ser enviados.

Quando usar: Para iniciar a criação de um formulário para coleta de dados.

html

<form>

Formulário com Ação e Método

Define um formulário que enviará seus dados para o URL `/submit` usando o método HTTP POST. O atributo `action` especifica o URL de destino e `method` o método HTTP (GET/POST) para o envio dos dados.

Quando usar: Para configurar como e para onde os dados do formulário serão enviados.

html

<form action="/submit" method="post">

Grupo de Campos (Fieldset)

Agrupa elementos relacionados dentro de um formulário, criando uma caixa visual ao redor deles. Ajuda a organizar formulários complexos em seções lógicas e melhora a acessibilidade para leitores de tela.

Quando usar: Para agrupar logicamente campos relacionados em um formulário.

html

<fieldset>

Legenda do Grupo (Legend)

Fornece uma legenda ou título para o conteúdo de um elemento `<fieldset>`, descrevendo o propósito do grupo de campos. É exibida na borda do fieldset.

Quando usar: Para dar um título a um grupo de campos dentro de um <fieldset>.

html

<legend>

Rótulo de Campo (Label)

Associa um rótulo de texto a um campo de formulário (como `<input>`, `<textarea>`, `<select>`). O atributo `for` deve corresponder ao `id` do campo para garantir acessibilidade, permitindo que o usuário clique no rótulo para focar o campo.

Quando usar: Para fornecer rótulos acessíveis para todos os campos de formulário.

html

<label for="id">

Campos de Entrada Básicos

6 snippets

Tipos de campos de entrada mais comuns para coletar diferentes tipos de dados do usuário.

Campo de Texto

Cria um campo de entrada de texto de linha única para dados gerais, como nomes, sobrenomes ou endereços curtos.

Quando usar: Para entrada de texto genérico de linha única.

html

<input type="text">

Campo de E-mail

Cria um campo de entrada para endereços de e-mail. Os navegadores podem oferecer validação básica de formato de e-mail e, em dispositivos móveis, ativar um teclado otimizado para e-mails.

Quando usar: Para coletar endereços de e-mail.

html

<input type="email">

Campo de Senha

Cria um campo de entrada para senhas. Os caracteres digitados são mascarados (geralmente com asteriscos ou pontos) para ocultar a entrada, mas o valor é enviado como texto simples.

Quando usar: Para coletar senhas ou informações sensíveis que devem ser mascaradas.

html

<input type="password">

Campo Numérico

Cria um campo de entrada para números. Os navegadores podem exibir controles para aumentar/diminuir o valor (spin buttons) e validar que a entrada é numérica. Pode usar atributos `min`, `max`, `step`.

Quando usar: Para coletar entradas numéricas, como idade ou quantidade.

html

<input type="number">

Campo de Telefone

Cria um campo de entrada para números de telefone. Em dispositivos móveis, pode ativar um teclado numérico otimizado. Não possui validação de formato de telefone nativa, que deve ser feita com `pattern` ou JavaScript.

Quando usar: Para coletar números de telefone.

html

<input type="tel">

Campo de URL

Cria um campo de entrada para URLs. Os navegadores podem oferecer validação básica de formato de URL. Em dispositivos móveis, pode ativar um teclado otimizado para URLs.

Quando usar: Para coletar endereços de websites ou links.

html

<input type="url">

Campos de Seleção de Formulário

6 snippets

Elementos para permitir que os usuários escolham entre opções predefinidas em um formulário.

Caixa de Seleção (Checkbox)

Cria uma caixa de seleção que permite ao usuário escolher zero ou mais opções de um conjunto. Cada checkbox é independente, a menos que agrupado semanticamente.

Quando usar: Quando o usuário pode selecionar várias opções de uma lista.

html

<input type="checkbox">

Botão de Rádio (Radio)

Cria um botão de rádio que permite ao usuário selecionar apenas uma opção de um conjunto mutuamente exclusivo. Botões de rádio com o mesmo atributo `name` formam um grupo, garantindo que apenas um possa ser selecionado.

Quando usar: Quando o usuário deve selecionar apenas uma opção de um grupo.

html

<input type="radio">

Lista Suspensa (Select)

Cria uma lista suspensa (dropdown) de opções. O usuário pode selecionar uma opção por padrão, ou várias se o atributo `multiple` for adicionado. Cada opção é definida por uma tag `<option>`.

Quando usar: Para permitir que o usuário selecione uma ou mais opções de uma lista longa.

html

<select>

Opção da Lista Suspensa

Define uma opção individual dentro de um elemento `<select>` ou `<datalist>`. O texto entre as tags `<option>` é o que o usuário vê, e o atributo `value` é o que é enviado ao servidor.

Quando usar: Para cada item selecionável dentro de um <select>.

html

<option>

Grupo de Opções (Optgroup)

Agrupa opções relacionadas dentro de um elemento `<select>`, criando um cabeçalho para o grupo de opções. O atributo `label` define o texto do cabeçalho do grupo.

Quando usar: Para organizar opções em um <select> em categorias lógicas.

html

<optgroup>

Área de Texto Multilinha

Cria uma área de texto multilinha para entrada de texto mais longa, como comentários ou mensagens. Os atributos `rows` e `cols` definem suas dimensões iniciais visíveis (linhas e colunas).

Quando usar: Para coletar entradas de texto longas, como comentários ou descrições.

html

<textarea>

Botões e Controles de Formulário

5 snippets

Elementos para permitir o envio, reset ou outras ações em um formulário.

Botão de Envio (Button)

Cria um botão que, quando clicado, envia os dados do formulário para o servidor. É o tipo de botão mais comum para finalizar a interação com o formulário. Permite conteúdo HTML dentro da tag.

Quando usar: Para enviar os dados de um formulário.

html

<button type="submit">

Botão de Reset (Button)

Cria um botão que, quando clicado, redefine todos os campos do formulário para seus valores iniciais. Útil para permitir que o usuário comece novamente.

Quando usar: Para permitir que o usuário limpe e reinicie o formulário.

html

<button type="reset">

Botão Genérico (Button)

Cria um botão genérico que não tem comportamento padrão de envio ou reset. Usado para acionar scripts JavaScript ou outras ações customizadas sem enviar o formulário.

Quando usar: Para botões que executam ações JavaScript sem enviar o formulário.

html

<button type="button">

Botão de Envio (Input)

Cria um botão de envio de formulário com a aparência de um `input`. Funcionalmente similar a `<button type="submit">`, mas não permite conteúdo HTML dentro da tag, apenas o valor do atributo `value` como texto.

Quando usar: Para enviar os dados de um formulário, como alternativa ao <button type="submit">.

html

<input type="submit">

Botão de Reset (Input)

Cria um botão de reset de formulário com a aparência de um `input`. Funcionalmente similar a `<button type="reset">`, mas não permite conteúdo HTML dentro da tag.

Quando usar: Para permitir que o usuário limpe e reinicie o formulário, como alternativa ao <button type="reset">.

html

<input type="reset">

🚀 Campos HTML5 Modernos

8 snippets

Novos tipos de campos de entrada introduzidos no HTML5 para coletar dados específicos com validação e interfaces de usuário aprimoradas.

Seletor de Data

Cria um campo de entrada para selecionar uma data (dia, mês, ano). Os navegadores geralmente fornecem um seletor de calendário (date picker) nativo para facilitar a seleção.

Quando usar: Para coletar uma data específica do usuário.

html

<input type="date">

Seletor de Hora

Cria um campo de entrada para selecionar uma hora (horas e minutos). Os navegadores podem oferecer um controle de tempo otimizado.

Quando usar: Para coletar um horário específico do usuário.

html

<input type="time">

Seletor de Data e Hora Local

Cria um campo de entrada para selecionar uma data e hora local, sem informações de fuso horário. Combina as funcionalidades de `type="date"` e `type="time"`.

Quando usar: Para coletar uma data e hora local combinadas.

html

<input type="datetime-local">

Seletor de Mês

Cria um campo de entrada para selecionar um mês e ano. Útil para datas de validade de cartões de crédito ou períodos de tempo.

Quando usar: Para coletar apenas o mês e o ano.

html

<input type="month">

Seletor de Semana

Cria um campo de entrada para selecionar uma semana e ano. O formato de exibição pode variar entre navegadores.

Quando usar: Para coletar uma semana específica do ano.

html

<input type="week">

Seletor de Cor

Cria um campo de entrada para selecionar uma cor. Os navegadores geralmente fornecem um seletor de cores (color picker) nativo, retornando o valor em formato hexadecimal (e.g., `#RRGGBB`).

Quando usar: Para permitir que o usuário escolha uma cor.

html

<input type="color">

Controle Deslizante (Range)

Cria um controle deslizante (slider) para selecionar um valor dentro de um intervalo especificado. Os atributos `min`, `max` e `step` definem o comportamento e os limites do controle.

Quando usar: Para permitir a seleção de um valor numérico dentro de um intervalo, como volume ou zoom.

html

<input type="range">

Upload de Arquivos

Cria um campo de entrada que permite ao usuário selecionar um ou mais arquivos do seu dispositivo para upload para o servidor. O atributo `multiple` permite a seleção de múltiplos arquivos.

Quando usar: Para permitir que o usuário faça upload de arquivos.

html

<input type="file">

Validação de Formulários HTML5

7 snippets

Atributos HTML5 para validação de formulários nativa, reduzindo a necessidade de JavaScript para verificações básicas.

Campo Obrigatório

Um atributo booleano que torna o campo de formulário obrigatório. O formulário não pode ser enviado se o campo estiver vazio. O navegador exibirá uma mensagem de erro padrão.

Quando usar: Para campos que devem ser preenchidos antes do envio do formulário.

html

required

Padrão de Validação (Pattern)

Define uma expressão regular que a entrada do campo deve corresponder para ser considerada válida. Usado para validação de formato customizada (e.g., código postal, formato de nome).

Quando usar: Para validar o formato da entrada de um campo usando expressões regulares.

html

pattern="[A-Za-z]{3}"

Comprimento Mínimo

Define o número mínimo de caracteres que um campo de texto (`<input type="text">`, `<textarea>`) deve ter para ser válido.

Quando usar: Para garantir que a entrada de texto tenha um número mínimo de caracteres.

html

minlength="3"

Comprimento Máximo

Define o número máximo de caracteres que um campo de texto (`<input type="text">`, `<textarea>`) pode ter.

Quando usar: Para limitar o número de caracteres que podem ser inseridos em um campo de texto.

html

maxlength="50"

Valor Mínimo

Define o valor mínimo permitido para campos numéricos (`type="number"`, `type="range"`) ou de data/hora (`type="date"`, `type="time"`).

Quando usar: Para definir o valor mínimo aceitável para entradas numéricas ou de data/hora.

html

min="0"

Valor Máximo

Define o valor máximo permitido para campos numéricos (`type="number"`, `type="range"`) ou de data/hora (`type="date"`, `type="time"`).

Quando usar: Para definir o valor máximo aceitável para entradas numéricas ou de data/hora.

html

max="100"

Incremento (Step)

Define o incremento permitido para campos numéricos (`type="number"`, `type="range"`) ou de data/hora. Por exemplo, um `step` de 5 permitiria apenas múltiplos de 5 (0, 5, 10...).

Quando usar: Para controlar os incrementos de valores em campos numéricos ou de tempo.

html

step="5"

Elementos Auxiliares de Formulário

5 snippets

Elementos HTML5 que aprimoram a experiência do usuário em formulários, oferecendo sugestões, feedback visual e resultados dinâmicos.

Lista de Opções Predefinidas (Datalist)

Fornece uma lista de opções predefinidas para um campo `<input>`. O usuário pode digitar e o navegador sugere opções da lista, ou pode escolher diretamente. O `id` do `<datalist>` é referenciado pelo atributo `list` do `<input>`.

Quando usar: Para fornecer sugestões de preenchimento automático para campos de texto.

html

<datalist>

Resultado de Cálculo (Output)

Exibe o resultado de um cálculo ou a saída de uma ação do usuário. Usado em conjunto com JavaScript para atualizar dinamicamente o valor exibido com base na entrada do usuário em outros campos do formulário.

Quando usar: Para exibir resultados de cálculos ou feedback dinâmico em formulários.

html

<output>

Barra de Progresso

Representa o progresso de uma tarefa. Pode ser usado para indicar o progresso de um download, upload, carregamento de página ou qualquer outra operação que tenha um valor máximo conhecido. Os atributos `value` e `max` definem o progresso.

Quando usar: Para exibir o progresso de uma tarefa em andamento.

html

<progress>

Medidor Escalar (Meter)

Representa um valor escalar dentro de um intervalo conhecido. Usado para exibir medidas como uso de disco, relevância de um resultado de pesquisa, temperatura ou qualquer valor dentro de um limite. Diferente de `<progress>`, que mostra o progresso de uma tarefa.

Quando usar: Para exibir um valor dentro de um intervalo fixo, como um medidor de bateria.

html

<meter>

Geração de Chaves (Keygen - Obsoleto)

Elemento obsoleto, usado para gerar um par de chaves (pública/privada) para autenticação. Não deve ser usado em novos desenvolvimentos devido a questões de segurança e falta de suporte moderno. Foi removido do padrão HTML5.

Quando usar: Evitar o uso, pois é obsoleto e não suportado.

html

<keygen>

🎬 Áudio e Vídeo

6 snippets

Elementos HTML5 para incorporar e controlar conteúdo multimídia diretamente nas páginas web.

Reprodutor de Áudio

Incorpora conteúdo de áudio no documento. O atributo `controls` adiciona os controles de reprodução padrão do navegador (play/pause, volume, barra de progresso, etc.), permitindo a interação do usuário.

Quando usar: Para incorporar arquivos de áudio em sua página.

html

<audio controls>

Reprodutor de Vídeo

Incorpora conteúdo de vídeo no documento. O atributo `controls` adiciona os controles de reprodução padrão do navegador (play/pause, volume, barra de progresso, tela cheia, etc.), permitindo a interação do usuário.

Quando usar: Para incorporar arquivos de vídeo em sua página.

html

<video controls>

Fonte de Mídia

Especifica múltiplas fontes de mídia para os elementos `<audio>` ou `<video>`. O navegador escolhe a primeira fonte que pode reproduzir, com base no atributo `type` (e.g., `video/mp4`, `audio/mpeg`), garantindo compatibilidade entre navegadores.

Quando usar: Para fornecer diferentes formatos de áudio/vídeo para ampla compatibilidade.

html

<source src="file.mp4" type="video/mp4">

Trilha de Legendas/Descrições

Permite adicionar faixas de texto temporizadas (como legendas, legendas ocultas, descrições, capítulos) a elementos `<video>` ou `<audio>`. O atributo `kind` define o tipo de faixa (e.g., `subtitles`, `captions`, `descriptions`).

Quando usar: Para adicionar legendas, descrições ou outros metadados temporizados a mídias.

html

<track kind="subtitles" src="subtitles.vtt">

Vídeo com Reprodução Automática

Um vídeo configurado para iniciar a reprodução automaticamente (`autoplay`), repetir indefinidamente (`loop`) e com o áudio desativado (`muted`) ao carregar a página. Comum para vídeos de fundo ou banners, pois navegadores geralmente bloqueiam `autoplay` com som.

Quando usar: Para vídeos de fundo ou que não devem ter som e se repetem automaticamente.

html

<video autoplay loop muted>

Imagem de Pôster do Vídeo

Define uma imagem que será exibida no reprodutor de vídeo antes que o vídeo comece a tocar, enquanto o vídeo está sendo baixado ou se o vídeo não puder ser carregado. Serve como uma miniatura ou capa.

Quando usar: Para exibir uma imagem de pré-visualização para o vídeo.

html

<video poster="poster.jpg">

Gráficos e Canvas

4 snippets

Elementos para criar gráficos dinâmicos e vetoriais diretamente no navegador.

Elemento Canvas

Fornece uma área de desenho retangular na página HTML, onde gráficos podem ser renderizados dinamicamente usando JavaScript (API Canvas). Ideal para jogos, visualização de dados, animações complexas e edição de imagens.

Quando usar: Para desenho gráfico dinâmico via JavaScript.

html

<canvas>

Gráfico Vetorial Escalável (SVG)

Define gráficos vetoriais escaláveis (Scalable Vector Graphics). Imagens SVG são baseadas em XML, podem ser dimensionadas para qualquer tamanho sem perda de qualidade e são manipuláveis via CSS e JavaScript, tornando-as ideais para ícones e ilustrações.

Quando usar: Para gráficos vetoriais que precisam ser escaláveis e manipuláveis.

html

<svg>

Canvas com Dimensões

Cria um elemento canvas com dimensões específicas de largura e altura em pixels. Estas dimensões definem o espaço de coordenadas para o desenho e são importantes para a renderização correta do conteúdo.

Quando usar: Ao definir as dimensões iniciais para a área de desenho do canvas.

html

<canvas width="300" height="150">

SVG com ViewBox

Define as dimensões e a posição da área de visualização de um SVG. Os quatro valores representam `min-x`, `min-y`, `width` e `height` do sistema de coordenadas do usuário, permitindo que o SVG seja escalado para se ajustar ao contêiner.

Quando usar: Para controlar o sistema de coordenadas e o escalonamento de um SVG.

html

<svg viewBox="0 0 100 100">

Elementos Gráficos Adicionais

4 snippets

Elementos para criar interatividade em imagens e garantir a correta interpretação de gráficos SVG.

Mapa de Imagem

Define um mapa de imagem do lado do cliente, que permite criar áreas clicáveis (hotspots) em uma imagem. Usado em conjunto com o elemento `<area>` e referenciado pelo atributo `usemap` de uma `<img>`.

Quando usar: Para criar áreas clicáveis em uma imagem.

html

<map>

Área Clicável em Mapa

Define uma área clicável (hotspot) dentro de um mapa de imagem (`<map>`). Os atributos `shape` (e.g., `rect`, `circle`, `poly`) e `coords` definem a forma e posição da área, e `href` o destino do link.

Quando usar: Para definir as regiões interativas dentro de um mapa de imagem.

html

<area>

Canvas com ID para JavaScript

Um elemento canvas com um identificador único (`id`), permitindo que seja facilmente acessado e manipulado por scripts JavaScript usando `document.getElementById()`.

Quando usar: Para interagir com o canvas usando JavaScript.

html

<canvas id="myCanvas">

SVG com Namespace

Declara o namespace XML para o elemento SVG, indicando que o conteúdo dentro da tag `<svg>` deve ser interpretado como gráficos vetoriais escaláveis. Embora muitas vezes implícito em HTML5, é boa prática para compatibilidade.

Quando usar: Ao incorporar SVG diretamente no HTML, especialmente para garantir compatibilidade com parsers XML.

html

<svg xmlns="http://www.w3.org/2000/svg">

🔍 Metadados Essenciais para SEO

5 snippets

Elementos `<meta>` cruciais para a otimização de motores de busca (SEO) e para a correta exibição da página.

Descrição da Página

Fornece uma breve e precisa descrição do conteúdo da página, que pode ser exibida pelos motores de busca nos resultados da pesquisa (SERP). Crucial para atrair cliques e melhorar o SEO.

Quando usar: Para fornecer um resumo conciso do conteúdo da página para SEO.

html

<meta name="description" content="...">

Palavras-chave (Keywords)

Lista de palavras-chave relacionadas ao conteúdo da página. Embora sua importância para SEO tenha diminuído significativamente para os principais motores de busca, ainda pode ser útil para algumas ferramentas e contextos específicos.

Quando usar: Opcional, para listar palavras-chave relevantes (impacto mínimo no SEO moderno).

html

<meta name="keywords" content="...">

Autor da Página

Especifica o nome do autor do documento HTML. Útil para atribuição, gerenciamento de conteúdo e, em alguns casos, para SEO de conteúdo autoral.

Quando usar: Para identificar o autor do conteúdo da página.

html

<meta name="author" content="...">

Diretivas para Robôs de Busca

Instrui os robôs dos motores de busca sobre como indexar e seguir links na página. `index` permite indexação, `follow` permite seguir links. Outros valores incluem `noindex` (não indexar) e `nofollow` (não seguir links).

Quando usar: Para controlar como os motores de busca interagem com sua página.

html

<meta name="robots" content="index, follow">

Configuração de Viewport (SEO Mobile)

Configura a viewport para dispositivos móveis, controlando a largura da área visível e o nível de zoom inicial. Essencial para design responsivo e um fator de ranqueamento importante para SEO mobile-first.

Quando usar: Em todas as páginas para garantir responsividade e boa classificação em buscas móveis.

html

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Open Graph para Redes Sociais

5 snippets

Metatags do protocolo Open Graph para controlar como o conteúdo é exibido quando compartilhado em plataformas como Facebook, LinkedIn e WhatsApp.

Título Open Graph

Define o título que será exibido quando a página for compartilhada em redes sociais como Facebook e LinkedIn. Faz parte do protocolo Open Graph e deve ser conciso e atraente.

Quando usar: Para definir o título de compartilhamento em redes sociais.

html

<meta property="og:title" content="...">

Descrição Open Graph

Define a descrição que será exibida quando a página for compartilhada em redes sociais, fornecendo um resumo do conteúdo. Deve ser persuasiva e informativa.

Quando usar: Para definir a descrição de compartilhamento em redes sociais.

html

<meta property="og:description" content="...">

Imagem Open Graph

Define o URL de uma imagem que será exibida como miniatura (thumbnail) quando a página for compartilhada em redes sociais. É crucial para o engajamento visual.

Quando usar: Para definir a imagem de pré-visualização para compartilhamento em redes sociais.

html

<meta property="og:image" content="...">

URL Canônica Open Graph

Define o URL canônico da página para Open Graph, garantindo que todas as referências de compartilhamento apontem para a mesma URL, evitando problemas de conteúdo duplicado.

Quando usar: Para especificar a URL preferencial da página para redes sociais.

html

<meta property="og:url" content="...">

Tipo de Conteúdo Open Graph

Define o tipo de objeto que a página representa (e.g., "website", "article", "video.movie"). Ajuda as redes sociais a entender o contexto do conteúdo e a exibir informações relevantes.

Quando usar: Para categorizar o tipo de conteúdo da página para redes sociais.

html

<meta property="og:type" content="website">

Twitter Cards

4 snippets

Metatags específicas para controlar a exibição de links compartilhados na plataforma Twitter.

Tipo de Twitter Card

Define o tipo de "card" do Twitter a ser exibido quando a página for compartilhada. `summary` é um card padrão com título, descrição e uma pequena miniatura. Outros tipos incluem `summary_large_image` e `app`.

Quando usar: Para definir o layout do card de compartilhamento no Twitter.

html

<meta name="twitter:card" content="summary">

Título para Twitter

Define o título específico para o Twitter Card, que pode ser diferente do `og:title` se houver necessidade de otimização para o Twitter.

Quando usar: Para um título otimizado especificamente para o Twitter.

html

<meta name="twitter:title" content="...">

Descrição para Twitter

Define a descrição específica para o Twitter Card, que pode ser diferente do `og:description` para se adequar aos limites de caracteres ou estilo do Twitter.

Quando usar: Para uma descrição otimizada especificamente para o Twitter.

html

<meta name="twitter:description" content="...">

Imagem para Twitter

Define o URL da imagem específica para o Twitter Card. É importante para a representação visual do link no Twitter.

Quando usar: Para uma imagem de pré-visualização otimizada especificamente para o Twitter.

html

<meta name="twitter:image" content="...">

Otimização de Performance

4 snippets

Elementos `<link>` que ajudam a melhorar o tempo de carregamento e a experiência do usuário, pré-carregando ou pré-conectando a recursos.

Pré-carregamento de Recursos

Instrui o navegador a pré-carregar um recurso (como uma fonte, imagem, script ou folha de estilo) que será necessário em breve na página. Isso garante que o recurso esteja disponível mais cedo, melhorando o tempo de carregamento percebido.

Quando usar: Para recursos essenciais que devem ser carregados o mais rápido possível.

html

<link rel="preload" href="...">

Pré-busca de Recursos

Instrui o navegador a pré-buscar um recurso que pode ser necessário em navegações futuras, mas não imediatamente na página atual. Ajuda a acelerar a navegação entre páginas, pois o recurso já estará em cache.

Quando usar: Para recursos que podem ser necessários em páginas futuras.

html

<link rel="prefetch" href="...">

Pré-resolução DNS

Instrui o navegador a resolver o DNS de um domínio antes que o recurso seja realmente solicitado. Reduz a latência para recursos de domínios externos, como CDNs ou APIs de terceiros.

Quando usar: Para acelerar a resolução de DNS para domínios externos.

html

<link rel="dns-prefetch" href="...">

URL Canônica para SEO

Especifica a URL canônica preferencial para a página, ajudando os motores de busca a evitar problemas de conteúdo duplicado e a consolidar sinais de classificação (como links e métricas) para a versão principal da página.

Quando usar: Para indicar a URL preferencial de uma página, especialmente em casos de conteúdo duplicado.

html

<link rel="canonical" href="...">

♿ Atributos ARIA para Acessibilidade

5 snippets

Atributos WAI-ARIA para melhorar a acessibilidade de elementos HTML, fornecendo informações semânticas para tecnologias assistivas.

Rótulo Acessível (aria-label)

Fornece um rótulo de texto acessível para um elemento quando não há um rótulo visível disponível (e.g., um botão de ícone). Usado por tecnologias assistivas (leitores de tela) para descrever o elemento.

Quando usar: Para fornecer um rótulo textual para elementos sem texto visível, como botões de ícone.

html

aria-label="descrição"

Descrição por ID (aria-describedby)

Associa um elemento com outro que fornece uma descrição mais detalhada. O valor é o `id` do elemento que contém a descrição, permitindo que leitores de tela leiam a descrição associada.

Quando usar: Para associar um elemento a uma descrição mais longa e detalhada em outro elemento.

html

aria-describedby="id"

Estado Expandido/Colapsado (aria-expanded)

Indica o estado de um elemento expansível (como um menu dropdown, acordeão ou botão que revela conteúdo), informando se ele está expandido (`true`) ou colapsado (`false`).

Quando usar: Para indicar se um componente (menu, acordeão) está aberto ou fechado.

html

aria-expanded="true"

Esconder de Tecnologias Assistivas (aria-hidden)

Remove um elemento e todos os seus descendentes da árvore de acessibilidade, tornando-o invisível para tecnologias assistivas (leitores de tela). Usado para conteúdo puramente decorativo ou oculto que não deve ser anunciado.

Quando usar: Para ocultar elementos puramente decorativos de leitores de tela.

html

aria-hidden="true"

Região de Atualização Dinâmica (aria-live)

Define uma região "ao vivo" que deve ser anunciada por tecnologias assistivas quando seu conteúdo muda dinamicamente. `polite` significa que as mudanças são anunciadas quando o usuário está ocioso, enquanto `assertive` anuncia imediatamente.

Quando usar: Para anunciar atualizações de conteúdo dinâmico (e.g., mensagens de erro, resultados de busca).

html

aria-live="polite"

Roles Semânticos ARIA

5 snippets

Atributos `role` para definir a função ou propósito de um elemento, especialmente quando elementos não-semânticos são usados.

Role de Navegação

Define que o elemento atua como uma região de navegação, contendo links para navegar no documento ou em documentos relacionados. Usado quando um elemento não-semântico (como `div`) é usado para navegação.

Quando usar: Para indicar que um elemento é uma área de navegação (se não for <nav>).

html

role="navigation"

Role de Conteúdo Principal

Define que o elemento contém o conteúdo principal do documento. Usado quando um elemento não-semântico (como `div`) é usado para o conteúdo principal, como um fallback para navegadores antigos que não suportam `<main>`.

Quando usar: Para indicar o conteúdo principal da página (se não for <main>).

html

role="main"

Role de Conteúdo Complementar

Define que o elemento contém conteúdo de suporte que complementa o conteúdo principal, mas é separado dele. Similar a `<aside>`, usado quando um `div` é empregado.

Quando usar: Para indicar conteúdo complementar (se não for <aside>).

html

role="complementary"

Role de Busca

Define que o elemento é uma região que contém um mecanismo de busca para o documento ou site. Ajuda tecnologias assistivas a identificar rapidamente a funcionalidade de busca.

Quando usar: Para identificar a área de busca em sua página.

html

role="search"

Role de Alerta

Define que o elemento é uma mensagem de alerta importante que é adicionada dinamicamente e deve ser anunciada imediatamente por tecnologias assistivas. Usado para notificações críticas que exigem atenção imediata.

Quando usar: Para mensagens de alerta importantes que exigem atenção imediata.

html

role="alert"

Navegação por Teclado e Foco

4 snippets

Atributos para controlar a ordem de tabulação e o foco de elementos, essencial para usuários que navegam via teclado.

Elemento Focável (tabindex="0")

Torna um elemento focável via teclado e o inclui na ordem de tabulação padrão do documento, seguindo a ordem do DOM. Permite que elementos que normalmente não são focáveis (como `div` ou `span`) recebam foco.

Quando usar: Para tornar elementos não interativos focáveis via teclado na ordem natural.

html

tabindex="0"

Focável Programaticamente (tabindex="-1")

Torna um elemento focável programaticamente (via JavaScript usando `.focus()`), mas o remove da ordem de tabulação padrão do teclado. Útil para focar elementos dinamicamente sem interferir na navegação linear.

Quando usar: Para focar elementos via JavaScript sem incluí-los na ordem de tabulação.

html

tabindex="-1"

Tecla de Atalho (Accesskey)

Define uma tecla de atalho para um elemento, permitindo que o usuário ative o elemento pressionando uma combinação de teclas (varia por navegador e sistema operacional, e.g., Alt+Shift+S no Chrome).

Quando usar: Para fornecer atalhos de teclado para elementos importantes (usar com moderação).

html

accesskey="s"

Foco Automático

Um atributo booleano que faz com que um elemento de formulário seja automaticamente focado quando a página é carregada. Apenas um elemento pode ter `autofocus` por página. Pode ser problemático para a acessibilidade se não usado com cuidado.

Quando usar: Para focar automaticamente um campo de formulário crucial ao carregar a página.

html

autofocus

Conteúdo Alternativo para Acessibilidade

4 snippets

Técnicas para fornecer alternativas textuais e contextuais para conteúdo não textual, garantindo que todos os usuários possam acessar a informação.

Texto Alternativo para Imagens

Fornece uma descrição textual alternativa para uma imagem. Essencial para usuários de leitores de tela e quando a imagem não pode ser carregada, transmitindo o significado da imagem.

Quando usar: Sempre para imagens que transmitem informações importantes.

html

<img src="..." alt="Descrição detalhada">

Imagem Decorativa

Indica que a imagem é puramente decorativa e não transmite informações importantes. O `alt=""` vazio e `role="presentation"` instruem leitores de tela a ignorá-la, evitando ruído desnecessário.

Quando usar: Para imagens que não adicionam valor informativo, como ícones puramente visuais.

html

<img src="..." alt="" role="presentation">

Descrição Longa (longdesc - Obsoleto)

Um atributo obsoleto para `<img>` que apontava para um documento HTML contendo uma descrição longa da imagem. Foi substituído por `aria-describedby` ou por descrições no texto adjacente à imagem.

Quando usar: Evitar o uso, pois é obsoleto.

html

<longdesc="descricao.html">

Figura com Legenda Acessível

Associa um elemento `<figure>` a uma legenda (`<figcaption>`) usando seu `id`, melhorando a acessibilidade para leitores de tela que podem não associar automaticamente. O `aria-labelledby` aponta para o `id` da `<figcaption>` ou outro elemento de rótulo.

Quando usar: Para associar explicitamente uma figura à sua legenda para leitores de tela.

html