Formulários, tabelas e mídias em HTML

Um formulário coleta respostas relacionadas e as envia para uma URL. O elemento <form> envolve seus controles e o botão de envio. Mantenha formulários separados: o HTML não permite um formulário dentro de outro.

Escolha o destino e o método

action indica a URL que recebe os dados. Sem ele, a requisição vai para a página atual. method escolhe como o navegador envia os dados; o padrão é GET.

Dados enviados por GET podem aparecer no histórico, nos favoritos e nos registros do servidor. POST os mantém fora da string de consulta (query string), mas não os criptografa. Use HTTPS para proteger dados em trânsito. O programa no servidor recebe e processa a requisição; o formulário HTML não salva nem envia respostas por email por conta própria.

Acompanhe uma requisição de pesquisa

<form action="/search" method="get">
  <label for="query">Search</label>
  <input id="query" type="search" name="q">
  <label for="language">Language</label>
  <select id="language" name="lang">
    <option value="en">English</option>
  </select>
  <button type="submit">Search</button>
</form>

Se o usuário inserir “html tables”, o navegador requisita /search?q=html+tables&lang=en. Ele pega o nome do campo q e seu valor atual, codifica o espaço como + e une os dois pares com &. O ? inicia a string de consulta.

Um controle precisa de um name para fornecer dados. Seu id tem outra finalidade: identificar o elemento na página, inclusive para associar um rótulo. Uma entrada com id="query", mas sem name, pode parecer e funcionar normalmente sem fornecer nenhuma resposta à requisição.

Saiba quais controles fornecem dados

Um campo de texto vazio com nome fornece um valor vazio, como comment=. Uma caixa de seleção marcada fornece seu value; sem um valor, fornece on. Uma caixa desmarcada não fornece nada. Um controle desativado fica indisponível e é omitido. Um campo readonly compatível não pode ser editado, mas ainda fornece seu valor.

Uma entrada oculta, como <input type="hidden" name="source" value="newsletter">, fornece um valor sem um controle visível. Ele não é secreto: os visitantes podem inspecioná-lo e alterá-lo nas ferramentas do desenvolvedor.

Deixe explícito o comportamento dos botões

Dentro de um formulário, um <button> comum envia o formulário por padrão. Escreva type="submit" para o botão de envio e type="button" para um botão que precisa de um script. type="reset" restaura os valores iniciais e pode apagar o trabalho do usuário. Pressionar Enter em um campo de uma linha também costuma enviar o formulário. <input type="submit" value="Send"> é outro controle de envio; um <button> também pode conter conteúdo em linha, como um ícone.

Envie o conteúdo de um arquivo

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="attachment">Attachment</label>
  <input id="attachment" type="file" name="attachment">
  <button type="submit">Upload</button>
</form>

Tanto POST quanto enctype="multipart/form-data" são necessários para um envio comum de arquivo. Com a codificação padrão do formulário, os nomes dos arquivos são enviados como texto, mas o conteúdo dos arquivos não é enviado.

Um <input> é um elemento vazio, portanto não tem conteúdo nem tag de fechamento. Seu type seleciona o controle e a ajuda que o navegador oferece com ele. Tipos ausentes ou não reconhecidos recorrem a um campo de texto.

Associe o texto à sua finalidade

Um campo de email verifica a sintaxe, mas não se a caixa de entrada existe. Até “ana@example” passa na verificação básica de sintaxe. Adicione multiple para aceitar uma lista de endereços separados por vírgulas. Um campo de URL espera um esquema: “https://example.com” passa, enquanto “example.com” não passa. Os formatos de telefone variam, então tel não impõe nenhuma regra de formato. Ocultar a senha impede que pessoas próximas leiam a tela; HTTPS ainda fornece criptografia durante a transmissão.

Separe quantidades de códigos de dígitos

Use number para uma quantidade, como uma contagem ou uma massa. Ele costuma ter botões para aumentar ou diminuir o valor. Use range para um ajuste aproximado, como o volume; seu intervalo padrão vai de 0 a 100 e seu valor padrão é 50.

Um código de associado não é uma quantidade. Use <input type="text" inputmode="numeric"> para um código de dígitos, para que zeros iniciais permaneçam como texto e os botões de incremento não o alterem. inputmode apenas sugere um teclado na tela: ele não valida a entrada. decimal, tel, email e url são outras indicações úteis de teclado.

Separe os formatos de exibição e de envio

Seletores de data seguem a configuração regional do usuário. 15 de março de 2026 pode aparecer como “03/15/2026” ou “15/03/2026”, mas a data enviada é 2026-03-15.

Esses controles não armazenam um fuso horário. Portanto, quando isso for relevante, o local ou fuso de um horário de compromisso local precisa ser explicado separadamente.

Ofereça escolhas independentes ou únicas

Caixas de seleção são independentes: várias podem ser marcadas. Botões de opção formam um grupo de escolha única quando seus valores de name são iguais. Dê a cada botão de opção um value diferente e use checked para definir um padrão.

<label><input type="radio" name="size" value="S"> Small</label>
<label><input type="radio" name="size" value="M" checked> Medium</label>
<label><input type="radio" name="size" value="L"> Large</label>

A seleção padrão envia size=M. Nomes diferentes criariam grupos separados e permitiriam várias seleções.

Escolha cores e arquivos

color oferece um seletor e pode enviar uma cor RGB como #ff8800. file abre um seletor de arquivos; accept=".pdf,image/*" sugere PDFs e imagens, e multiple permite vários arquivos. O filtro ajuda os usuários a escolher; o servidor ainda deve verificar o tipo e o conteúdo do arquivo recebido. Para controles que o utilizam, value define o valor inicial, que permanece como valor enviado se o usuário não fizer alterações.

Uma entrada de uma linha não é adequada para todas as respostas. Textos mais longos precisam de espaço, enquanto um conjunto fixo de escolhas precisa de controles que mostrem o que é permitido. Antes de escolher o elemento, decida se o usuário pode inserir algo fora das opções.

Dê espaço a textos mais longos com uma área de texto

<label for="message">Message</label>
<textarea id="message" name="message" rows="5" cols="40"></textarea>

rows fornece o número visível de linhas e cols a largura aproximada em caracteres. Nenhum dos dois limita a quantidade de texto que pode ser inserida; use maxlength para limitar o comprimento. O texto inicial deve ficar entre as tags, não em um atributo value. Espaços e quebras de linha ali passam a fazer parte do valor inicial, então tags de abertura e fechamento adjacentes criam uma caixa realmente vazia.

Envie um valor de uma lista suspensa

<label for="delivery">Delivery</label>
<select id="delivery" name="delivery" required>
  <option value="">Choose delivery</option>
  <option value="standard">Standard (3–5 days)</option>
  <option value="express">Express (next day)</option>
</select>

Escolher “Express (next day)” envia delivery=express. O texto visível pode explicar uma escolha enquanto seu value permanece curto e estável. Se uma opção não tiver value, seu texto será enviado. Adicione selected para selecionar previamente uma opção. Aqui, a primeira opção tem valor vazio, então a lista obrigatória de escolha única não pode ser enviada até que o usuário escolha um método de entrega.

Agrupe opções ou permita várias escolhas

Um <optgroup label="Hot drinks"> dá um título a opções relacionadas. Esse título não é uma opção. Um select com multiple permite selecionar várias opções, e size define suas linhas visíveis. Cada valor selecionado se torna um par separado com o mesmo nome: topics=html&topics=css.

A seleção múltipla em computadores costuma exigir Ctrl e clique ou Cmd e clique. Para uma lista curta de escolhas independentes, caixas de seleção geralmente tornam a seleção mais clara. Para uma lista curta de escolha única, botões de opção mantêm todas as opções visíveis. Uma lista fixa longa é um bom caso para usar um select.

Sugira sem restringir

<label for="city">City</label>
<input id="city" name="city" list="cities">
<datalist id="cities">
  <option value="Nairobi">
  <option value="Osaka">
</datalist>

O list da entrada corresponde ao id da datalist. Os usuários veem sugestões, mas ainda podem digitar outra cidade. Uma datalist é, portanto, útil para respostas comuns a uma pergunta aberta. Substituir um select por uma datalist altera as escolhas aceitas; não muda apenas a aparência da mesma lista fixa.

Exiba progresso ou uma medição

<progress> e <meter> exibem valores em vez de coletar respostas. Uma barra de progresso acompanha a conclusão, como em <progress value="70" max="100">70%</progress>. Um medidor mostra uma medição em um intervalo conhecido: <meter value="0.6">60%</meter> pode representar o armazenamento usado. Um medidor tem por padrão o intervalo de 0 a 1, a menos que min e max o alterem. O texto dentro desses elementos fornece conteúdo alternativo quando a barra não pode ser desenhada. Mantenha um rótulo explicativo ao lado de cada indicador para que os usuários saibam o que seu número mede.

Um campo precisa de um nome que permaneça visível enquanto o usuário o preenche. Um <label> associado também fornece ao controle um nome acessível para leitores de tela e torna seu texto um alvo maior para clique. As instruções explicam qualquer regra que o rótulo sozinho não consiga transmitir.

Associe o rótulo ao controle

<label for="email">Email address</label>
<input id="email" name="email" type="email" autocomplete="email">

O for do rótulo corresponde ao id da entrada, incluindo maiúsculas e minúsculas. O name controla o envio e não precisa ser igual. Cada id deve ser único na página. Se for="email" apontar para um name, mas não houver um id correspondente, o rótulo parecerá normal, mas não estará associado.

Outra opção é envolver a entrada no rótulo:

<label>
  <input type="checkbox" name="news">
  Send me the monthly newsletter
</label>

Essa associação implícita é útil para um rótulo curto de caixa de seleção. Um par explícito de for e id também funciona quando o rótulo e o controle estão separados no HTML.

Mantenha rótulos separados de exemplos

Um texto de exemplo do campo, como “name@example.com”, desaparece quando a digitação começa. Ele também pode ser difícil de ler e não é um nome acessível confiável. Mantenha o rótulo visível; use um texto de exemplo apenas como exemplo curto quando ele ajudar.

Identifique campos obrigatórios com palavras, como “Nome (obrigatório)”, ou explique um asterisco uma vez acima do formulário. A cor sozinha não consegue informar a todos o que é obrigatório. Explique um formato antes que os usuários tentem enviar o formulário.

<label for="pw">Password (required)</label>
<input id="pw" name="password" type="password"
       required minlength="8" aria-describedby="pw-hint">
<p id="pw-hint">Use at least 8 characters.</p>

aria-describedby aponta para o id da orientação. Ele adiciona a instrução como descrição após o nome do campo; não substitui o rótulo.

Nomeie um grupo de controles

<fieldset>
  <legend>Delivery speed</legend>
  <label><input type="radio" name="speed" value="standard"> Standard</label>
  <label><input type="radio" name="speed" value="express"> Express</label>
  <label><input type="radio" name="speed" value="pickup"> Pickup</label>
</fieldset>

A legenda apresenta a pergunta comum; cada rótulo nomeia uma resposta. Um fieldset também pode agrupar campos de endereço relacionados. Coloque a legenda primeiro. disabled em um fieldset desativa seus controles descendentes, exceto controles dentro de sua primeira legenda. Mantenha controles comuns de formulário fora da legenda para que essa exceção não cause surpresas.

Ajude os navegadores a preencher dados conhecidos

autocomplete descreve a finalidade das informações sobre o usuário. Os valores incluem name, email, tel, street-address, postal-code, country-name, bday, new-password, current-password e one-time-code. Finalidades corretas ajudam no preenchimento com dados salvos e atendem ao critério 1.3.5 das WCAG 2.2, Identificar a finalidade da entrada (AA). autocomplete="off" é uma solicitação; os navegadores ainda podem oferecer senhas salvas.

Para um campo de telefone opcional, use o rótulo “Número de telefone (opcional)” com type="tel", name="phone" e autocomplete="tel". Clique no rótulo para verificar o foco e depois percorra o formulário usando Tab. Teste todos os rótulos dessa forma, incluindo os rótulos ao lado de caixas de seleção e botões de opção.

A validação nativa verifica os controles de um formulário quando o usuário o envia. Um controle que falha bloqueia o envio; o navegador coloca o foco no primeiro campo inválido e fornece uma mensagem em seu próprio idioma. A redação exata é escolhida pelo navegador. Alterá-la exige JavaScript.

Exija uma resposta

required significa que um controle precisa de um valor. Para um campo de texto, uma string vazia falha. Em uma caixa de seleção, required significa que aquela caixa específica deve ser marcada, como na aceitação de termos. Para botões de opção com o mesmo nome, colocar required em um deles significa que um botão do grupo deve ser selecionado. Um select obrigatório de escolha única com uma primeira opção vazia precisa de uma seleção não vazia.

<label for="username">Username (required)</label>
<input id="username" name="username"
       required minlength="4" maxlength="12">

O navegador combina essas regras. O campo deve conter uma resposta, e o texto inserido pelo usuário deve respeitar os limites de comprimento. Omitir type resulta na entrada de texto normal.

Conte os caracteres inseridos

minlength define o menor comprimento permitido e maxlength o maior. Espaços e pontuação contam. O comprimento é medido em unidades de código UTF-16, então alguns emojis contam como dois; letras latinas comuns contam como uma unidade cada.

Neste exemplo, “Li” tem dois caracteres e não atinge o mínimo. “Lina” tem quatro e passa. “mountainhiker” tem 13 caracteres. Durante a digitação normal, o navegador para depois do décimo segundo, deixando “mountainhike”. A largura de uma caixa de texto não define esse limite.

Trate presença e comprimento como regras diferentes

Um campo opcional com minlength="4" pode ficar vazio. O comprimento mínimo é verificado quando o usuário fornece um valor. Adicionar required faz com que uma entrada vazia também falhe. Isso é relevante para um apelido opcional: o usuário pode omiti-lo, mas um apelido fornecido ainda precisa ter caracteres suficientes.

required é um atributo booleano. Sua presença o ativa, inclusive em required="false". Para tornar o campo opcional, remova o atributo. A mesma regra de presença se aplica a muitos outros atributos HTML que ativam opções.

Saiba o que essas verificações não determinam

Uma sequência de espaços ainda é conteúdo em um campo de texto. Portanto, required a aceita, e os espaços também contam para o comprimento. Uma regra que exija um caractere visível precisa de um padrão adequado ou de uma verificação no servidor. Não diga aos usuários que required sozinho garante uma resposta significativa.

As restrições de comprimento também dependem de como o valor foi inserido. Um valor inicial escrito em HTML, ou atribuído por um script, não é sinalizado por minlength ou maxlength apenas por ser curto ou longo demais. Um valor padrão correto continua sendo importante mesmo quando a digitação normal é limitada.

Para verificar esse campo, tente um envio vazio, depois insira duas letras, quatro letras e mais de 12 letras. Cada tentativa isola uma regra diferente. Quando o navegador parar a digitação no limite, leia o valor que realmente ficou no campo em vez de presumir que toda a entrada tentada foi aceita.

Um valor numérico ou de data pode ter o formato correto e ainda ser inadequado. min e max definem seus limites; step define quais incrementos são permitidos dentro deles. Um número deve passar nas duas verificações.

Defina o intervalo

<label for="weight">Parcel weight (kg)</label>
<input id="weight" name="weight" type="number"
       min="0.5" max="30" step="0.5">

Os extremos estão incluídos. Valores de 0,5 a 30 kg estão no intervalo, mas também precisam corresponder a incrementos de meio quilograma. Começando em 0,5, temos 0,5; 1; 1,5 e assim por diante até 30: 60 valores permitidos. Uma entrada de 31 excede o máximo; 2,25 está no intervalo, mas falha na verificação de incremento.

Encontre o ponto inicial antes de contar

Os incrementos são contados a partir de min quando ele está presente. Caso contrário, são contados a partir de um atributo HTML value válido e, na ausência dele, a partir da base padrão do tipo. Para number, essa base padrão é 0. O incremento padrão é 1.

Com min="1" step="2", os valores aceitos são 1, 3, 5, 7 e assim por diante. Quatro falha mesmo sendo múltiplo de dois, porque a sequência começa em um. Com min="0.5" e sem atributo de incremento, o incremento ainda é um: 0,5; 1,5 e 2,5 passam, enquanto 1 e 2 não passam.

Se nem min nem um atributo value fornecer uma base diferente, um campo numérico padrão aceita números inteiros. Use step="0.01" para incrementos de um centésimo ou step="any" para remover a verificação de incremento. any não remove o valor mínimo nem o máximo.

Use as unidades adequadas para datas e horários

Uma entrada de data com min="2026-06-01" max="2026-08-31" aceita datas nesse intervalo, incluindo os extremos. Escreva os atributos no formato de envio, mesmo que o seletor exiba outra ordem de data.

Para compromissos, type="time" min="09:00" max="17:00" step="900" usa 900 segundos, ou 15 minutos, por incremento. A sequência começa às 09:00 e termina às 17:00. Há 32 intervalos e 33 horários selecionáveis, incluindo os dois extremos.

Separe a digitação do valor armazenado

Alguns navegadores adaptados a diferentes regiões permitem a entrada decimal “2,5”, mas enviam 2.5. Um texto que não seja um número é bloqueado ou deixa o valor numérico vazio, dependendo do navegador. Uma entrada opcional vazia ainda é permitida, a menos que required esteja presente.

Um controle deslizante range permanece dentro do intervalo permitido e se ajusta aos incrementos, então os usuários não encontram os mesmos erros de intervalo e incremento que encontram ao digitar um número. Além disso, campos email e url não vazios passam por verificações de tipo mesmo sem required: tornar uma resposta opcional não torna válida uma resposta fornecida com formato incorreto.

Um padrão é útil quando uma organização define um formato de texto exato, como um código de produto. O navegador verifica o valor não vazio inteiro em relação ao padrão. Explique o formato ao lado do campo para que os usuários possam atendê-lo antes que apareça um erro.

Crie um padrão simples

<label for="code">Product code (required)</label>
<input id="code" name="code" required
       pattern="[A-Z]{3}-[0-9]{4}" aria-describedby="code-hint">
<p id="code-hint">Use 3 capital letters, a hyphen, and 4 digits (ABC-1234).</p>

[A-Z] corresponde a uma letra latina maiúscula e {3} a repete exatamente três vezes. O hífen fora dos grupos de caracteres é literal. [0-9]{4} exige quatro dígitos. “ABC-1234” passa. “abc-1234”, “ABC1234” e “ABC-12345” descumprem, cada um, uma parte diferente da regra.

Os padrões são comparados com o valor inteiro, então texto extra em qualquer uma das extremidades falha. Não adicione as barras externas usadas em expressões regulares do JavaScript. pattern se aplica a entradas semelhantes a texto, como text, search, tel, email, url e password, mas não a uma área de texto. Valores vazios ignoram a verificação de padrão; required trata uma resposta vazia.

Escreva a pontuação literal com cuidado

Caracteres como ., + e ? têm significados especiais. Use uma barra invertida quando eles precisarem aparecer literalmente: \. corresponde a um ponto. Dentro de um grupo de caracteres, padrões HTML modernos também exigem uma barra invertida para pontuação como um hífen literal: [a-z0-9\-]. Esse hífen é diferente daquele que define o intervalo a-z.

Um padrão inválido é ignorado. Outras regras, incluindo required e verificações de tipo, continuam sendo executadas. Teste um padrão com entradas que passam e que falham; um formulário que envia um valor esperado ainda não demonstrou que o padrão rejeita algo.

Explique a regra e o erro

Mantenha o texto de orientação visível ao lado do controle. Um title pode contribuir para algumas mensagens do navegador; mantenha a instrução de formato visível ao lado do campo. Evite padrões rígidos para nomes, telefones ou códigos postais, a menos que o formato aceito seja realmente fixo; respostas internacionais válidas podem variar muito.

O CSS oferece :valid e :invalid para o estado de validação atual de um campo. :user-invalid adia o estado inválido até a interação do usuário, evitando que um formulário ainda não preenchido fique coberto por estilos de erro. Combine cores com palavras ou um ícone para que a distinção permaneça visível sem a percepção de cores.

Decida quando as verificações são executadas

novalidate no formulário pula a validação do navegador durante o envio. formnovalidate em um botão de envio pula a validação para esse botão, o que pode ser útil para “Salvar rascunho” ao lado de um botão normal “Enviar”. As verificações do navegador também podem ser removidas pelas ferramentas do desenvolvedor ou contornadas por uma requisição direta. O servidor deve verificar os dados recebidos novamente antes de confiar neles.

Use uma tabela quando um valor depende tanto de sua linha quanto de sua coluna: um registro de treinos, um quadro de horários ou uma comparação de medições. Use CSS para o layout da página. Um layout feito com células de tabela cria relações enganosas entre linhas e colunas para leitores de tela e se adapta mal a telas estreitas.

Construa a estrutura a partir dos dados

<table> contém a tabela, <tr> uma linha, <th> uma célula de cabeçalho e <td> uma célula de dados. As células são escritas da esquerda para a direita dentro de cada linha. Uma célula de dados em negrito continua sendo uma célula de dados; use <th> para expressar um cabeçalho.

<table>
  <caption>Running log, week 12</caption>
  <thead>
    <tr>
      <th scope="col">Day</th>
      <th scope="col">Distance (km)</th>
      <th scope="col">Time (min)</th>
    </tr>
  </thead>
  <tbody>
    <tr><th scope="row">Monday</th><td>5.0</td><td>28</td></tr>
    <tr><th scope="row">Wednesday</th><td>7.5</td><td>45</td></tr>
    <tr><th scope="row">Saturday</th><td>10.0</td><td>62</td></tr>
  </tbody>
  <tfoot>
    <tr><th scope="row">Total</th><td>22.5</td><td>135</td></tr>
  </tfoot>
</table>

O título é o primeiro elemento dentro da tabela. Ele informa aos leitores o que a tabela inteira descreve antes que encontrem seus valores. Um título próximo pode ajudar visualmente, mas o título da tabela fica associado à própria tabela.

Associe cada valor aos seus cabeçalhos

scope="col" indica que um cabeçalho se aplica ao longo de uma coluna. scope="row" indica que ele se aplica ao longo de uma linha. Portanto, o valor 7,5 pertence à linha “Wednesday” e à coluna “Distance (km)”. Um leitor de tela pode anunciar esse significado completo em vez de um número isolado.

Coloque unidades nos cabeçalhos das colunas para que se apliquem de forma consistente. Cada distância aqui está em quilômetros; cada tempo está em minutos. A distância total vem de 5,0; 7,5 e 10,0, resultando em 22,5 km. Os tempos 28, 45 e 62 resultam em 135 min.

Dê uma função a cada grupo

<thead> agrupa linhas de cabeçalho, <tbody> os dados principais e <tfoot> o resumo após o corpo. Esses grupos descrevem a estrutura e fornecem pontos de referência para o CSS. Os navegadores inserem um <tbody> em torno de linhas comuns escritas diretamente dentro de uma tabela, então a estrutura exibida pode ser diferente do código-fonte sem agrupamento.

Verifique o significado e também a aparência

Cada linha aqui cobre três colunas. Omitir uma célula de dados não informa ao navegador qual valor interno está faltando: as células seguintes podem ficar sob o cabeçalho errado. Escreva as células em suas posições corretas e use “0” para um zero conhecido ou “não aplicável” quando um valor não se aplicar. Uma célula vazia sem explicação deixa os leitores sem saber seu significado.

Tabelas não têm bordas por padrão. Para linhas simples, aplique border: 1px solid às células e border-collapse: collapse à tabela. O antigo atributo border é obsoleto. Uma borda ajuda a mostrar a grade, mas não pode fornecer relações de cabeçalho ausentes nem corrigir um valor fora de posição.

Células mescladas permitem que uma entrada cubra várias posições na grade. Elas alteram o número de novas células necessárias em uma linha, então planeje as posições ocupadas antes de escrever as tags.

Conte as posições em um quadro de horários com células mescladas

Considere três colunas: “Horário”, “Segunda-feira” e “Terça-feira”. Às 09:00, segunda-feira tem “Formulários” e terça-feira tem “Tabelas”. Às 10:00, segunda-feira começa “Validação”, que continua na linha das 11:00. Terça-feira tem “Mídia” às 10:00 e “Incorporações” às 11:00. Às 12:00, “Intervalo para almoço” cobre os dois dias.

<tr>
  <th scope="row">10:00</th>
  <td rowspan="2">Validation</td><td>Media</td>
</tr>
<tr>
  <th scope="row">11:00</th><td>Embeds</td>
</tr>
<tr>
  <th scope="row">12:00</th><td colspan="2">Lunch break</td>
</tr>

Às 11:00, a posição de segunda-feira já está ocupada pela célula de cima. As novas células são apenas o cabeçalho de horário e a entrada de terça-feira. Adicionar outra célula para segunda-feira empurraria o último valor para uma quarta coluna. Às 12:00, o cabeçalho de horário cobre uma coluna e a célula do almoço cobre duas, totalizando três.

colspan cobre colunas horizontalmente; rowspan cobre linhas verticalmente. Ambos têm valor padrão um. Ao verificar uma linha, conte as posições preenchidas por novas células e pelas extensões de linhas anteriores.

Descreva grupos de colunas

<colgroup> e <col> descrevem colunas e aparecem após o título da tabela, mas antes dos grupos de linhas. <col span="2"> representa duas colunas. Apenas um conjunto limitado de estilos se aplica por meio desses elementos, incluindo fundos, largura, visibilidade e bordas conforme as regras de borda da tabela aplicáveis. Eles não substituem cabeçalhos.

Para “Distância (km)” acima de duas colunas chamadas “Planejada” e “Realizada”, defina essas duas colunas como um grupo. Atribua ao cabeçalho superior colspan="2" scope="colgroup"; atribua aos cabeçalhos inferiores scope="col". A extensão controla a largura, enquanto o escopo declara a relação do cabeçalho. Um escopo de grupo de colunas precisa de um grupo de colunas correspondente na estrutura da tabela.

Associe cabeçalhos explicitamente quando necessário

Para relações que o escopo não consegue expressar com clareza, atribua IDs únicos aos cabeçalhos e liste-os no atributo headers da célula de dados:

<table>
  <caption>Monday distance plan</caption>
  <colgroup></colgroup>
  <colgroup span="2"></colgroup>
  <thead>
    <tr>
      <th rowspan="2" scope="col">Day</th>
      <th id="distance" colspan="2" scope="colgroup">Distance (km)</th>
    </tr>
    <tr>
      <th id="planned" scope="col">Planned</th>
      <th id="actual" scope="col">Actual</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="mon" scope="row">Monday</th>
      <td headers="mon distance planned">8</td>
      <td headers="mon distance actual">7.5</td>
    </tr>
  </tbody>
</table>

O valor planejado de 8 aponta para Monday, Distance (km) e Planned. O valor realizado de 7,5 compartilha os cabeçalhos de linha e de grupo, mas aponta para Actual. Os nomes separados por espaços devem corresponder aos IDs dos cabeçalhos, não ao texto visível deles.

O abbr de um cabeçalho pode fornecer uma versão mais curta para repetição, como <th abbr="Distance">Distance covered in kilometers</th>. Alguns leitores de tela usam essa forma mais curta. Quando muitas extensões ou três níveis de cabeçalhos tornam uma tabela difícil de acompanhar, divida os dados em tabelas mais simples com títulos individuais. Evite aninhar uma tabela dentro de uma célula de outra tabela.

<video> e <audio> vinculam arquivos de mídia a uma página. O navegador baixa esses arquivos separados; o vídeo ou som não fica armazenado dentro do HTML. Adicionar controls disponibiliza os controles de reprodução, pausa, linha do tempo e volume do navegador.

<video src="intro.mp4" controls width="640" height="360"
       poster="intro-poster.jpg" preload="metadata"></video>
<audio src="episode-12.mp3" controls></audio>

Sem controles, um elemento de áudio não tem reprodutor visível e um vídeo não tem botão de reprodução visível. A página precisaria de controles com scripts para dar esse acesso aos usuários. Para uma página básica, mantenha os controles nativos de reprodução.

Reserve o espaço com a proporção adequada

width e height aceitam números simples em pixels CSS. Eles reservam espaço enquanto um vídeo carrega, reduzindo o movimento da página. Um vídeo de 1920 × 1080 exibido com largura de 640 tem altura correspondente de 360: a largura foi dividida por três, então a altura também deve ser dividida por três. Uma caixa de reprodutor com outra forma mantém as proporções da imagem e adiciona faixas vazias.

poster fornece uma imagem estática antes da reprodução. Sem ela, o navegador espera pelos dados de mídia antes de poder mostrar o primeiro quadro. A imagem de apresentação é útil quando pouco ou nenhum vídeo é pré-carregado.

Decida quanto pré-carregar

Essas são indicações: o navegador pode ignorá-las. A reprodução automática também tem prioridade sobre o pré-carregamento. none é útil para mídias longas que muitos visitantes não assistirão; metadata ajuda a mostrar a duração sem buscar intencionalmente o clipe inteiro.

Entenda os atributos de reprodução

controls, autoplay, muted, loop e playsinline são atributos booleanos. Sua presença os ativa: muted="false" ainda inicia sem som. Remova o atributo para desativá-lo.

A reprodução automática com som costuma ser bloqueada até a interação do usuário, conforme as permissões e configurações do navegador. Vídeos silenciados são permitidos com mais frequência; o Safari no iPhone também precisa de playsinline para esse uso. Um clipe silencioso em repetição pode usar autoplay muted loop playsinline. loop reinicia o clipe após seu término. Não dependa da reprodução automática para comunicar informações essenciais.

O som automático pode competir com um leitor de tela, e o movimento pode distrair. O critério 1.4.2 (A) das WCAG 2.2 exige uma forma de pausar ou parar áudio automático com duração superior a três segundos, ou controlar seu volume de forma independente. O critério 2.2.2 (A) trata de conteúdo em movimento automático que dura mais de cinco segundos ao lado de outro conteúdo, a menos que seja essencial. Mantenha um mecanismo de pausa disponível; os controles nativos fornecem um para esses reprodutores de mídia.

Estime o consumo de dados

Um clipe de dois minutos a 5 megabits por segundo contém 600 megabits. Dividir por oito resulta em cerca de 75 megabytes antes de custos adicionais. Clipes mais curtos e uma indicação adequada de pré-carregamento reduzem transferências desnecessárias. O reprodutor iframe de uma plataforma hospedada pode transferir a distribuição para fora do servidor do seu site, mas os visitantes ainda baixam a mídia quando a assistem.

A extensão de uma mídia identifica seu contêiner, a estrutura de arquivo que contém imagem e som. Codecs comprimem e decodificam os fluxos dentro dele. Um navegador precisa oferecer suporte tanto ao contêiner quanto aos codecs; a extensão .mp4 sozinha não determina o que há dentro do arquivo.

Escolha formatos adequados

MP4 com vídeo H.264 e áudio AAC é uma opção de ampla compatibilidade nos sistemas atuais comuns. WebM com vídeo VP9 ou AV1 e áudio Opus também é amplamente compatível e pode reduzir o tamanho para uma determinada qualidade. Para áudio, MP3 é uma opção única amplamente compatível. O suporte ainda depende do codec efetivo e do sistema do usuário, então teste os próprios arquivos.

Ofereça fontes em ordem de prioridade

<video controls width="640" height="360" poster="tour.jpg">
  <source src="tour.webm" type="video/webm">
  <source src="tour.mp4" type="video/mp4">
  <p>Your browser cannot play this video.
    <a href="tour.mp4">Download the tour video (MP4)</a>.
  </p>
</video>
<p><a href="tour.mp4">Download the tour video (MP4)</a></p>

O navegador experimenta as fontes filhas em ordem e usa a primeira que consegue reproduzir. WebM é o formato preferido aqui; MP4 oferece outra opção caso WebM não possa ser reproduzido. Deixe src fora do próprio <video> ao usar fontes filhas. Um src no elemento de mídia tem prioridade e a lista de fontes filhas é ignorada.

O type é um tipo MIME que descreve o arquivo. Ele permite que o navegador pule um formato incompatível sem buscar dados de mídia primeiro. Um tipo incorreto pode fazer com que um arquivo reproduzível seja ignorado, então a declaração deve corresponder ao arquivo real. Listar a mesma codificação incompatível com outro nome não cria uma alternativa compatível.

Coloque a alternativa onde ela permaneça disponível

O conteúdo dentro de <video> é uma alternativa para um navegador que não reconhece o elemento de vídeo. Um navegador moderno que o reconhece, mas não consegue reproduzir nenhuma fonte, não mostra aquele parágrafo interno como uma mensagem geral de erro. O link de download separado fora do reprodutor permanece disponível nesse caso. Um link alternativo e fontes alternativas resolvem falhas diferentes.

Aplique o mesmo padrão ao áudio

<audio controls>
  <source src="episode-12.opus" type="audio/ogg; codecs=opus">
  <source src="episode-12.mp3" type="audio/mpeg">
  <p>Your browser cannot play this audio.</p>
</audio>
<p><a href="episode-12.mp3">Download episode 12 (MP3)</a></p>

Esse primeiro arquivo usa um contêiner Ogg com áudio Opus. A alternativa em MP3 usa audio/mpeg, o tipo MIME correto para MP3. O navegador não consegue deduzir pelo parágrafo alternativo que deve trocar de arquivo; os elementos source fornecem essa escolha. Ao verificar a página, confira os caminhos, os formatos reais dos arquivos e a reprodução e confirme separadamente se o link de download externo funciona.

As informações da mídia precisam de outra forma de acesso quando uma pessoa não consegue ouvi-las ou vê-las. Legendas descritivas incluem fala, identificação de quem fala e sons relevantes. Legendas de diálogo transcrevem ou traduzem diálogos para pessoas que ouvem o áudio, mas precisam de ajuda para compreendê-lo. Uma transcrição fornece a fala e os sons importantes em texto perto do reprodutor ou por meio de um link próximo claramente identificado. A audiodescrição narra informações visuais importantes.

Associe uma faixa de legendas descritivas

<video controls>
  <source src="intro.mp4" type="video/mp4">
  <track kind="captions" src="intro.en.vtt"
         srclang="en" label="English" default>
</video>
<p><a href="intro-transcript.html">Read the introduction transcript</a></p>

Coloque <track> depois das fontes. src aponta para um arquivo de faixa de texto, kind identifica sua finalidade, srclang identifica o idioma e label fornece o texto do menu do reprodutor. Uma faixa de legendas de diálogo deve ter srclang; inclua-o também para legendas descritivas. Apenas uma faixa deve ter default. Sem kind, o padrão é subtitles.

Escreva o arquivo de legendas descritivas

WebVTT é texto UTF-8 salvo com a extensão .vtt. A primeira linha é WEBVTT, seguida de uma linha em branco. Cada entrada temporizada tem uma linha de tempo e seu texto, com uma linha em branco antes da próxima entrada. Um identificador opcional pode preceder a linha de tempo de uma entrada.

WEBVTT

00:00:01.000 --> 00:00:04.500
MAYA: Welcome to the workshop.

00:00:05.000 --> 00:00:07.250
[door closes]

00:00:07.500 --> 00:00:11.000
MAYA: Let's build our first form.

A primeira entrada dura 3,5 segundos, a segunda 2,25 segundos e a terceira 3,5 segundos. A entrada de som comunica algo que um ouvinte escuta mesmo sem ninguém falar.

Mantenha a sintaxe de tempo exata

Minutos e segundos usam dois dígitos; milissegundos usam três após um ponto. As horas podem ser omitidas: 01:05.000 significa um minuto e cinco segundos. O fim deve ser posterior ao início. Uma linha em branco encerra uma entrada, então mantenha todo o texto dela junto, sem uma linha em branco no meio.

SRT usa marcas de tempo com vírgula, como 00:00:01,000; uma faixa precisa de WebVTT. A conversão exige o cabeçalho WebVTT e marcas de tempo com ponto, além da verificação da sintaxe das demais entradas. Renomear uma extensão .srt não converte seu conteúdo.

Verifique a disponibilização e a acessibilidade

Mantenha a faixa na mesma origem da página: o mesmo esquema, hospedeiro e porta. Uma faixa de outra origem precisa de uma configuração crossorigin adequada no vídeo e de permissão desse servidor. Caso contrário, um arquivo correto pode falhar ao carregar.

O critério 1.2.2 (A) das WCAG 2.2 exige legendas descritivas para vídeo pré-gravado com áudio, sujeito à exceção para mídia alternativa. O critério 1.2.1 (A) exige uma alternativa para conteúdo pré-gravado apenas em áudio, como uma transcrição para um podcast. Verifique nomes, termos técnicos, mudanças de falante e sons nas legendas automáticas antes de publicar.

Outros tipos de faixa incluem descriptions, chapters e metadata. Os reprodutores dos navegadores geralmente não os mostram como legendas comuns. Não coloque instruções visíveis essenciais em uma faixa de metadados esperando que apareçam na tela.

Um <iframe> é um quadro embutido: ele exibe uma página web separada dentro da página atual. Esse documento tem seu próprio HTML, CSS e scripts. Os estilos da sua página podem dimensionar o quadro, mas não estilizam o conteúdo de outro documento dentro dele.

Comece com um quadro claro e dimensionado

<iframe src="https://maps.example.com/venue"
        title="Map of the venue"
        width="600" height="400" loading="lazy"></iframe>
<p><a href="https://maps.example.com/venue">Open the venue map</a></p>

src indica a página a carregar. O título informa a um usuário de leitor de tela o que há no quadro antes de entrar nele. “Mapa do local” descreve sua finalidade; “iframe” ou “conteúdo” não. O link direto oferece outro caminho se o navegador do visitante bloquear o quadro.

width e height aceitam números simples em pixels CSS. Sem eles, o quadro padrão mede 300 × 150 pixels CSS. Os navegadores também desenham uma borda padrão. Estilize-a com CSS em vez do atributo obsoleto frameborder.

Adapte o código de incorporação fornecido

Serviços de mapas e vídeo geralmente oferecem um trecho de código de incorporação nos controles de compartilhamento. Depois de colá-lo, inspecione a URL, melhore o título, verifique as dimensões e remova atributos de apresentação obsoletos. Uma URL de iframe é um endereço de página ou de reprodutor de serviço, não necessariamente um arquivo de mídia direto.

Use HTTPS para o endereço incorporado. Um quadro HTTP dentro de uma página HTTPS é conteúdo misto ativo e é bloqueado. Apenas escrever um título ou alterar o tamanho do quadro não faz uma URL insegura carregar.

Carregue no momento adequado

loading="lazy" adia um quadro até que ele esteja perto da área de visualização, poupando trabalho inicial para um mapa localizado muito abaixo na página. O padrão eager inicia o carregamento imediatamente. Use carregamento imediato para uma incorporação de destaque no topo, para que os visitantes não esperem pelo conteúdo principal. O carregamento tardio altera o momento; ele não elimina o contato com a rede quando o quadro finalmente carrega.

Para ajustar um reprodutor ao seu contêiner, o CSS pode definir sua largura como 100% e preservar sua proporção:

iframe.video-player {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

Aplique class="video-player" ao iframe correspondente. As dimensões HTML ainda fornecem informações iniciais, enquanto o CSS controla o tamanho exibido.

Reconheça a recusa de um provedor

Um site pode proibir a incorporação em quadros por meio do cabeçalho de resposta HTTP X-Frame-Options ou de uma regra frame-ancestors de Content Security Policy. O navegador pode mostrar um quadro em branco ou um erro. Essas restrições ajudam a evitar o sequestro de cliques, em que uma página enganosa em um quadro captura cliques destinados a outra coisa.

O HTML da sua página não pode anular a recusa do outro site. Use o endereço de incorporação permitido pelo provedor, se ele oferecer um; caso contrário, forneça um link comum. Mantenha esse link também para falhas futuras: se um provedor remover ou mover seu conteúdo, um iframe inalterado em sua página pode parar de funcionar.

Uma incorporação de terceiros entra em contato com seu provedor quando o conteúdo incorporado carrega, mesmo antes de um visitante iniciar a reprodução. Essa requisição revela informações como um endereço IP e pode envolver cookies. Decida se a página precisa desse contato imediatamente e de qual acesso o documento incorporado precisa.

Adie o contato quando apropriado

O carregamento tardio adia um quadro fora da tela até que ele esteja perto dela. Uma prévia que carrega uma incorporação apenas após um clique oferece aos visitantes uma escolha mais direta. Alguns serviços também oferecem modos de privacidade aprimorada. Um quadro do mesmo site não entra necessariamente em contato com outro provedor; srcdoc em linha evita buscar uma página separada, embora recursos referenciados por esse HTML ainda possam fazer requisições de rede.

Restrinja o comportamento do documento com sandbox

<iframe src="https://quiz.example.com/start"
        title="Practice quiz"
        sandbox="allow-scripts allow-forms"></iframe>

Um sandbox vazio aplica todas as suas restrições, incluindo o bloqueio de scripts, envio de formulários e pop-ups e a atribuição de uma origem opaca. Tokens removem restrições selecionadas. Aqui, o questionário pode executar scripts e enviar formulários, mas allow-popups não foi concedido. Adicione apenas os tokens necessários ao conteúdo; caso contrário, uma lista de permissões copiada pode anular limites úteis.

allow-same-origin permite que o documento mantenha sua origem normal. Não o combine com allow-scripts para conteúdo incorporado da sua própria origem: essa combinação pode permitir que o documento remova seu ambiente restrito. Um ambiente restrito também não significa que um quadro não faça requisições de rede.

Conceda recursos do navegador separadamente

allow é uma política de permissões para recursos como tela cheia, imagem em imagem, câmera e microfone. Um reprodutor de vídeo pode solicitar allow="fullscreen; picture-in-picture". Ele não precisa de acesso à câmera apenas por conter vídeo. O antigo allowfullscreen também concede acesso à tela cheia.

Tokens de sandbox governam o comportamento do documento; permissões de recursos respondem a outra questão. Conceder tela cheia não permite, por si só, que uma página em ambiente restrito envie um formulário ou execute um script.

Controle o referenciador e o conteúdo em linha

referrerpolicy="no-referrer" omite o endereço da página referenciadora da requisição. Com a política padrão usual, uma requisição HTTPS para outra origem envia a origem em vez do caminho completo; requisições para conexões menos seguras não enviam referenciador. Isso controla um cabeçalho, não todas as informações que um provedor recebe.

srcdoc fornece o HTML do quadro diretamente e tem prioridade sobre src:

<iframe title="Message preview" sandbox
        srcdoc="<p>Preview of your message</p>"></iframe>

O sandbox mantém essa pequena prévia restrita. Prévias de HTML mais gerais exigem cuidado com os recursos e a marcação que permitem.

Selecione o elemento para o recurso

<object> pode conter conteúdo alternativo, como um link de download, caso o recurso não possa ser exibido. Conteúdo antigo de plug-ins, como Flash, não funciona mais nos navegadores atuais comuns; a Adobe encerrou o suporte ao Flash Player no fim de 2020. Mantenha links diretos ao lado de incorporações importantes e verifique periodicamente se o provedor ainda as disponibiliza.