O Google odeia <div>. Use a estrutura semântica correta para colocar seu site no topo das buscas sem gastar com anúncios.
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 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.
<!DOCTYPE html>Quando usar: Ao iniciar qualquer documento HTML para definir a versão do 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).
<html lang="pt-BR">Quando usar: Sempre como o primeiro elemento dentro do DOCTYPE.
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.
<head>Quando usar: Para incluir todas as informações não visíveis da página.
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.
<body>Quando usar: Para envolver todo o conteúdo que será exibido no navegador.
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.
<meta charset="UTF-8">Quando usar: Sempre no início do <head> para evitar problemas de codificação.
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.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Quando usar: Em todas as páginas para garantir responsividade em dispositivos móveis.
Elementos essenciais para estruturar o texto, definir hierarquia de títulos e controlar o fluxo de conteúdo.
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.
<h1> a <h6>Quando usar: Para definir a hierarquia e estrutura de cabeçalhos em seu conteúdo.
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.
<p>Quando usar: Para qualquer bloco de texto que forma um parágrafo.
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).
<br>Quando usar: Quando uma quebra de linha é necessária, mas um novo parágrafo não é semanticamente apropriado.
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.
<hr>Quando usar: Para indicar uma mudança de tópico ou seção dentro do conteúdo.
Tags para aplicar formatação e dar significado semântico a partes específicas do texto.
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>`.
<strong>Quando usar: Para destacar conteúdo crítico ou de alta prioridade.
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>`.
<em>Quando usar: Para dar ênfase a uma palavra ou frase que muda o sentido da sentença.
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.
<mark>Quando usar: Para realçar texto relevante em um contexto específico, como resultados de busca.
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.
<small>Quando usar: Para informações de copyright, avisos legais ou texto de rodapé.
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.
<del>Quando usar: Para mostrar alterações em um documento, como preços antigos.
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.
<ins>Quando usar: Para mostrar texto que foi adicionado a um documento revisado.
Elementos para criar hiperlinks e incorporar imagens em páginas web, essenciais para navegação e conteúdo visual.
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.
<a href="url">Quando usar: Para criar links de navegação ou referências externas.
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.
<a href="url" target="_blank">Quando usar: Para abrir links externos sem tirar o usuário da página atual.
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.
<img src="caminho" alt="descrição">Quando usar: Para exibir imagens em sua página.
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.
<picture>Quando usar: Para servir imagens otimizadas para diferentes viewports ou formatos.
Elementos que fornecem significado estrutural ao conteúdo, melhorando a acessibilidade, SEO e a manutenção do código.
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>`.
<header>Quando usar: Para agrupar elementos introdutórios, como o topo de uma página ou seção.
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.
<nav>Quando usar: Para envolver blocos de links de navegação primária.
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.
<main>Quando usar: Para delimitar o conteúdo principal e único de sua página.
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.
<section>Quando usar: Para agrupar conteúdo relacionado que forma uma seção lógica.
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.
<article>Quando usar: Para conteúdo que pode ser lido de forma independente, como um artigo de blog.
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.
<aside>Quando usar: Para barras laterais, caixas de citação ou informações relacionadas.
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.
<footer>Quando usar: Para agrupar informações de rodapé, como direitos autorais e links de contato.
Tags que adicionam significado estrutural e contextual a blocos de texto específicos.
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.
<blockquote>Quando usar: Para citar blocos de texto de outras fontes.
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.
<cite>Quando usar: Para referenciar o título de uma obra citada.
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.
<code>Quando usar: Para exibir trechos de código inline ou dentro de um parágrafo.
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.
<pre>Quando usar: Para exibir blocos de código ou texto que requerem formatação exata.
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.
<abbr>Quando usar: Para marcar abreviações e fornecer seu significado completo.
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.
<address>Quando usar: Para exibir informações de contato de forma semântica.
Elementos para incorporar figuras, legendas e outros tipos de conteúdo externo na página.
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.
<figure>Quando usar: Para agrupar uma imagem, código ou outro conteúdo com sua legenda.
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>`.
<figcaption>Quando usar: Para adicionar uma legenda descritiva a um elemento <figure>.
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.
<iframe>Quando usar: Para incorporar conteúdo de outras fontes ou documentos HTML.
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).
<embed>Quando usar: Para incorporar conteúdo de plugins externos ou mídias não HTML.
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.
<object>Quando usar: Para incorporar objetos externos com mais controle sobre fallbacks.
Elementos para organizar informações em listas ordenadas, não ordenadas ou de definição.
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.
<ul>Quando usar: Para listas onde a ordem dos itens não é relevante (e.g., lista de compras).
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.
<ol>Quando usar: Para listas onde a ordem dos itens é importante (e.g., passos de uma receita).
Representa um item individual dentro de uma lista (`<ul>` ou `<ol>`). Deve ser um filho direto de `<ul>`, `<ol>` ou `<menu>`.
<li>Quando usar: Para cada item dentro de uma lista ordenada ou não ordenada.
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.
<dl>Quando usar: Para criar glossários ou listas de termos e suas definições.
Representa um termo a ser definido dentro de uma lista de definição (`<dl>`). Cada `<dt>` é geralmente seguido por um ou mais elementos `<dd>`.
<dt>Quando usar: Para definir o termo em uma lista de definição.
Representa a descrição ou definição de um termo (`<dt>`) dentro de uma lista de definição (`<dl>`).
<dd>Quando usar: Para fornecer a descrição ou explicação de um termo em uma lista de definição.
Atributos para personalizar a aparência e o comportamento de listas ordenadas e não ordenadas.
Define uma lista ordenada que usa números arábicos (1, 2, 3...) como marcadores. Este é o tipo padrão e pode ser omitido.
<ol type="1">Quando usar: Para listas ordenadas com numeração padrão.
Define uma lista ordenada que usa letras maiúsculas (A, B, C...) como marcadores para os itens da lista.
<ol type="A">Quando usar: Para listas ordenadas que usam letras maiúsculas como marcadores.
Define uma lista ordenada que usa letras minúsculas (a, b, c...) como marcadores para os itens da lista.
<ol type="a">Quando usar: Para listas ordenadas que usam letras minúsculas como marcadores.
Define uma lista ordenada que usa algarismos romanos maiúsculos (I, II, III...) como marcadores para os itens da lista.
<ol type="I">Quando usar: Para listas ordenadas que usam algarismos romanos como marcadores.
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.
<ol start="5">Quando usar: Para continuar uma lista de um ponto específico ou quando a ordem lógica exige um início diferente.
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.
<ul style="list-style-type: none;">Quando usar: Quando você quer remover os marcadores padrão e estilizar a lista com CSS.
Elementos fundamentais para criar e organizar dados em formato tabular.
O container principal para dados tabulares. Define uma tabela HTML, agrupando todos os seus elementos (cabeçalho, corpo, rodapé, linhas e células).
<table>Quando usar: Para criar qualquer tabela de dados.
Agrupa o conteúdo do cabeçalho de uma tabela. Contém as informações de cabeçalho das colunas, geralmente usando elementos `<th>`.
<thead>Quando usar: Para definir o cabeçalho semântico de uma tabela.
Agrupa o conteúdo do corpo de uma tabela. Contém as linhas de dados principais da tabela, usando elementos `<tr>` e `<td>`.
<tbody>Quando usar: Para definir o corpo principal de dados de uma 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.
<tfoot>Quando usar: Para definir o rodapé semântico de uma tabela, como totais ou notas.
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).
<tr>Quando usar: Para cada nova linha de dados ou cabeçalho na tabela.
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.
<th>Quando usar: Para células que servem como cabeçalhos de colunas ou linhas.
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.
<td>Quando usar: Para cada célula de dados comum em uma tabela.
Atributos para controlar a apresentação e o layout das células em tabelas HTML.
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.
<table border="1">Quando usar: Evitar o uso. Preferir CSS para estilização de bordas.
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.
<td colspan="2">Quando usar: Para mesclar células horizontalmente, abrangendo múltiplas colunas.
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.
<td rowspan="3">Quando usar: Para mesclar células verticalmente, abrangendo múltiplas linhas.
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.
<th scope="col">Quando usar: Para indicar que um <th> é o cabeçalho de uma coluna inteira.
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.
<th scope="row">Quando usar: Para indicar que um <th> é o cabeçalho de uma linha inteira.
Elementos básicos para construir formulários HTML e agrupar seus campos de forma lógica.
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.
<form>Quando usar: Para iniciar a criação de um formulário para coleta de dados.
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.
<form action="/submit" method="post">Quando usar: Para configurar como e para onde os dados do formulário serão enviados.
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.
<fieldset>Quando usar: Para agrupar logicamente campos relacionados em um formulário.
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.
<legend>Quando usar: Para dar um título a um grupo de campos dentro de um <fieldset>.
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.
<label for="id">Quando usar: Para fornecer rótulos acessíveis para todos os campos de formulário.
Tipos de campos de entrada mais comuns para coletar diferentes tipos de dados do usuário.
Cria um campo de entrada de texto de linha única para dados gerais, como nomes, sobrenomes ou endereços curtos.
<input type="text">Quando usar: Para entrada de texto genérico de linha única.
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.
<input type="email">Quando usar: Para coletar endereços de e-mail.
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.
<input type="password">Quando usar: Para coletar senhas ou informações sensíveis que devem ser mascaradas.
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`.
<input type="number">Quando usar: Para coletar entradas numéricas, como idade ou quantidade.
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.
<input type="tel">Quando usar: Para coletar números de telefone.
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.
<input type="url">Quando usar: Para coletar endereços de websites ou links.
Elementos para permitir que os usuários escolham entre opções predefinidas em um formulário.
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.
<input type="checkbox">Quando usar: Quando o usuário pode selecionar várias opções de uma lista.
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.
<input type="radio">Quando usar: Quando o usuário deve selecionar apenas uma opção de um grupo.
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>`.
<select>Quando usar: Para permitir que o usuário selecione uma ou mais opções de uma lista longa.
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.
<option>Quando usar: Para cada item selecionável dentro de um <select>.
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.
<optgroup>Quando usar: Para organizar opções em um <select> em categorias lógicas.
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).
<textarea>Quando usar: Para coletar entradas de texto longas, como comentários ou descrições.
Elementos para permitir o envio, reset ou outras ações em um formulário.
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.
<button type="submit">Quando usar: Para enviar os dados de um formulário.
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.
<button type="reset">Quando usar: Para permitir que o usuário limpe e reinicie o formulário.
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.
<button type="button">Quando usar: Para botões que executam ações JavaScript sem enviar o formulário.
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.
<input type="submit">Quando usar: Para enviar os dados de um formulário, como alternativa ao <button type="submit">.
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.
<input type="reset">Quando usar: Para permitir que o usuário limpe e reinicie o formulário, como alternativa ao <button type="reset">.
Novos tipos de campos de entrada introduzidos no HTML5 para coletar dados específicos com validação e interfaces de usuário aprimoradas.
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.
<input type="date">Quando usar: Para coletar uma data específica do usuário.
Cria um campo de entrada para selecionar uma hora (horas e minutos). Os navegadores podem oferecer um controle de tempo otimizado.
<input type="time">Quando usar: Para coletar um horário específico do usuário.
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"`.
<input type="datetime-local">Quando usar: Para coletar uma data e hora local combinadas.
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.
<input type="month">Quando usar: Para coletar apenas o mês e o ano.
Cria um campo de entrada para selecionar uma semana e ano. O formato de exibição pode variar entre navegadores.
<input type="week">Quando usar: Para coletar uma semana específica do ano.
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`).
<input type="color">Quando usar: Para permitir que o usuário escolha uma cor.
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.
<input type="range">Quando usar: Para permitir a seleção de um valor numérico dentro de um intervalo, como volume ou zoom.
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.
<input type="file">Quando usar: Para permitir que o usuário faça upload de arquivos.
Atributos HTML5 para validação de formulários nativa, reduzindo a necessidade de JavaScript para verificações básicas.
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.
requiredQuando usar: Para campos que devem ser preenchidos antes do envio do formulário.
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).
pattern="[A-Za-z]{3}"Quando usar: Para validar o formato da entrada de um campo usando expressões regulares.
Define o número mínimo de caracteres que um campo de texto (`<input type="text">`, `<textarea>`) deve ter para ser válido.
minlength="3"Quando usar: Para garantir que a entrada de texto tenha um número mínimo de caracteres.
Define o número máximo de caracteres que um campo de texto (`<input type="text">`, `<textarea>`) pode ter.
maxlength="50"Quando usar: Para limitar o número de caracteres que podem ser inseridos em um campo de texto.
Define o valor mínimo permitido para campos numéricos (`type="number"`, `type="range"`) ou de data/hora (`type="date"`, `type="time"`).
min="0"Quando usar: Para definir o valor mínimo aceitável para entradas numéricas ou de data/hora.
Define o valor máximo permitido para campos numéricos (`type="number"`, `type="range"`) ou de data/hora (`type="date"`, `type="time"`).
max="100"Quando usar: Para definir o valor máximo aceitável para entradas numéricas ou de data/hora.
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...).
step="5"Quando usar: Para controlar os incrementos de valores em campos numéricos ou de tempo.
Elementos HTML5 que aprimoram a experiência do usuário em formulários, oferecendo sugestões, feedback visual e resultados dinâmicos.
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>`.
<datalist>Quando usar: Para fornecer sugestões de preenchimento automático para campos de texto.
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.
<output>Quando usar: Para exibir resultados de cálculos ou feedback dinâmico em formulários.
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.
<progress>Quando usar: Para exibir o progresso de uma tarefa em andamento.
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.
<meter>Quando usar: Para exibir um valor dentro de um intervalo fixo, como um medidor de bateria.
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.
<keygen>Quando usar: Evitar o uso, pois é obsoleto e não suportado.
Elementos HTML5 para incorporar e controlar conteúdo multimídia diretamente nas páginas web.
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.
<audio controls>Quando usar: Para incorporar arquivos de áudio em sua página.
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.
<video controls>Quando usar: Para incorporar arquivos de vídeo em sua página.
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.
<source src="file.mp4" type="video/mp4">Quando usar: Para fornecer diferentes formatos de áudio/vídeo para ampla compatibilidade.
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`).
<track kind="subtitles" src="subtitles.vtt">Quando usar: Para adicionar legendas, descrições ou outros metadados temporizados a mídias.
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.
<video autoplay loop muted>Quando usar: Para vídeos de fundo ou que não devem ter som e se repetem automaticamente.
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.
<video poster="poster.jpg">Quando usar: Para exibir uma imagem de pré-visualização para o vídeo.
Elementos para criar gráficos dinâmicos e vetoriais diretamente no navegador.
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.
<canvas>Quando usar: Para desenho gráfico dinâmico via JavaScript.
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.
<svg>Quando usar: Para gráficos vetoriais que precisam ser escaláveis e manipuláveis.
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.
<canvas width="300" height="150">Quando usar: Ao definir as dimensões iniciais para a área de desenho do canvas.
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.
<svg viewBox="0 0 100 100">Quando usar: Para controlar o sistema de coordenadas e o escalonamento de um SVG.
Elementos para criar interatividade em imagens e garantir a correta interpretação de gráficos SVG.
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>`.
<map>Quando usar: Para criar áreas clicáveis em uma imagem.
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.
<area>Quando usar: Para definir as regiões interativas dentro de um mapa de imagem.
Um elemento canvas com um identificador único (`id`), permitindo que seja facilmente acessado e manipulado por scripts JavaScript usando `document.getElementById()`.
<canvas id="myCanvas">Quando usar: Para interagir com o canvas usando JavaScript.
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.
<svg xmlns="http://www.w3.org/2000/svg">Quando usar: Ao incorporar SVG diretamente no HTML, especialmente para garantir compatibilidade com parsers XML.
Elementos `<meta>` cruciais para a otimização de motores de busca (SEO) e para a correta exibiçã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.
<meta name="description" content="...">Quando usar: Para fornecer um resumo conciso do conteúdo da página para SEO.
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.
<meta name="keywords" content="...">Quando usar: Opcional, para listar palavras-chave relevantes (impacto mínimo no SEO moderno).
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.
<meta name="author" content="...">Quando usar: Para identificar o autor do conteúdo da página.
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).
<meta name="robots" content="index, follow">Quando usar: Para controlar como os motores de busca interagem com sua página.
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.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Quando usar: Em todas as páginas para garantir responsividade e boa classificação em buscas móveis.
Metatags do protocolo Open Graph para controlar como o conteúdo é exibido quando compartilhado em plataformas como Facebook, LinkedIn e WhatsApp.
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.
<meta property="og:title" content="...">Quando usar: Para definir o título de compartilhamento em redes sociais.
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.
<meta property="og:description" content="...">Quando usar: Para definir a descrição de compartilhamento em redes sociais.
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.
<meta property="og:image" content="...">Quando usar: Para definir a imagem de pré-visualização para compartilhamento em redes sociais.
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.
<meta property="og:url" content="...">Quando usar: Para especificar a URL preferencial da página para redes sociais.
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.
<meta property="og:type" content="website">Quando usar: Para categorizar o tipo de conteúdo da página para redes sociais.
Metatags específicas para controlar a exibição de links compartilhados na plataforma Twitter.
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`.
<meta name="twitter:card" content="summary">Quando usar: Para definir o layout do card de compartilhamento no 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.
<meta name="twitter:title" content="...">Quando usar: Para um título otimizado especificamente para o 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.
<meta name="twitter:description" content="...">Quando usar: Para uma descrição otimizada especificamente para o Twitter.
Define o URL da imagem específica para o Twitter Card. É importante para a representação visual do link no Twitter.
<meta name="twitter:image" content="...">Quando usar: Para uma imagem de pré-visualização otimizada especificamente para o Twitter.
Elementos `<link>` que ajudam a melhorar o tempo de carregamento e a experiência do usuário, pré-carregando ou pré-conectando a 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.
<link rel="preload" href="...">Quando usar: Para recursos essenciais que devem ser carregados o mais rápido possível.
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.
<link rel="prefetch" href="...">Quando usar: Para recursos que podem ser necessários em páginas futuras.
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.
<link rel="dns-prefetch" href="...">Quando usar: Para acelerar a resolução de DNS para domínios externos.
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.
<link rel="canonical" href="...">Quando usar: Para indicar a URL preferencial de uma página, especialmente em casos de conteúdo duplicado.
Atributos WAI-ARIA para melhorar a acessibilidade de elementos HTML, fornecendo informações semânticas para tecnologias assistivas.
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.
aria-label="descrição"Quando usar: Para fornecer um rótulo textual para elementos sem texto visível, como botões de ícone.
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.
aria-describedby="id"Quando usar: Para associar um elemento a uma descrição mais longa e detalhada em outro elemento.
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`).
aria-expanded="true"Quando usar: Para indicar se um componente (menu, acordeão) está aberto ou fechado.
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.
aria-hidden="true"Quando usar: Para ocultar elementos puramente decorativos de leitores de tela.
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.
aria-live="polite"Quando usar: Para anunciar atualizações de conteúdo dinâmico (e.g., mensagens de erro, resultados de busca).
Atributos `role` para definir a função ou propósito de um elemento, especialmente quando elementos não-semânticos são usados.
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.
role="navigation"Quando usar: Para indicar que um elemento é uma área de navegação (se não for <nav>).
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>`.
role="main"Quando usar: Para indicar o conteúdo principal da página (se não for <main>).
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.
role="complementary"Quando usar: Para indicar conteúdo complementar (se não for <aside>).
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.
role="search"Quando usar: Para identificar a área de busca em sua página.
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.
role="alert"Quando usar: Para mensagens de alerta importantes que exigem atenção imediata.
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.
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.
<img src="..." alt="Descrição detalhada">Quando usar: Sempre para imagens que transmitem informações importantes.
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.
<img src="..." alt="" role="presentation">Quando usar: Para imagens que não adicionam valor informativo, como ícones puramente visuais.
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.
<longdesc="descricao.html">Quando usar: Evitar o uso, pois é obsoleto.
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.
<figure aria-labelledby="caption1">Quando usar: Para associar explicitamente uma figura à sua legenda para leitores de tela.