Fundamentos de HTML

O HTML identifica as partes de uma página para que o navegador possa construir sua estrutura. Um título, um parágrafo e um link têm significados diferentes, mesmo antes de você adicionar qualquer estilo. O HTML descreve o conteúdo; o CSS controla sua aparência e o JavaScript acrescenta comportamento.

Leia um elemento

Em <p>The workshop opens at noon.</p>, <p> é a tag de abertura, a frase é o conteúdo e </p> é a tag de fechamento. O conjunto é um elemento de parágrafo. A barra marca a tag de fechamento. Use nomes de elementos em minúsculas para manter a consistência do código-fonte, embora o HTML também aceite nomes em maiúsculas.

Um atributo acrescenta informação dentro de uma tag de abertura:

<a href="hours.html" title="Workshop opening hours">Opening hours</a>

Aqui, href fornece o destino e title fornece texto informativo. Separe atributos com espaços e coloque seus valores entre aspas retas. A ordem deles não altera seu significado. As aspas mantêm um valor unido: class="intro note" fornece dois nomes de classe, enquanto class=intro note é lido como um valor de classe e um atributo separado chamado note.

Coloque elementos uns dentro dos outros

Um parágrafo pode conter uma expressão com importância acentuada:

<p>Bring your <strong>booking number</strong>.</p>

Abra o parágrafo, abra o elemento strong, feche o elemento strong e depois feche o parágrafo. Feche primeiro o elemento aberto mais recentemente. O parágrafo é o pai, e o elemento strong é seu filho. Os filhos e tudo o que está dentro deles são descendentes. O navegador organiza essas relações no DOM, uma árvore do conteúdo da página.

Nem todo elemento pode ficar dentro de qualquer outro. Por exemplo, uma lista não pode ficar dentro de um parágrafo. A indentação ajuda a visualizar o aninhamento, mas acrescentar espaços não torna válida uma relação inválida entre pai e filho.

Reconheça tipos especiais de elementos e atributos

Elementos vazios não têm conteúdo nem tag de fechamento. Exemplos são <img>, <br>, <hr>, <meta> e <link>. Escreva <br>, sem </br>. Uma barra ao final em <br /> não tem efeito em HTML.

Um atributo booleano está ativado quando está presente. Em uma lista ordenada, reversed faz a numeração contar em ordem decrescente. Escrever reversed="false" ainda deixa o atributo presente, então a contagem continua decrescente. Remova o atributo para desativá-lo.

Alguns atributos funcionam em diferentes elementos:

Leia espaços e comentários no código-fonte

Em texto comum, vários espaços, tabulações ou quebras de linha no código-fonte são reduzidos a um espaço. Escrever um parágrafo em três linhas do código-fonte ainda resulta em um parágrafo na tela. Use elementos para expressar a estrutura e indentação no código-fonte para facilitar a leitura.

Um comentário tem esta forma: <!-- Menu starts here -->. Ele fica oculto na página exibida, mas visível no código-fonte. Nunca coloque senhas ou informações privadas em comentários. Comentários não podem ser aninhados: o primeiro --> encerra o comentário.

Uma página completa separa as informações sobre o documento do conteúdo que as pessoas leem. Comece com uma estrutura básica pequena e consistente e depois adicione o título e o conteúdo do corpo próprios da página.

Monte a estrutura básica

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Opening Hours – Harbor Café</title>
  </head>
  <body>
    <h1>Harbor Café</h1>
    <p>Open every day except Monday.</p>
  </body>
</html>

<!DOCTYPE html> diz ao navegador para usar o modo de padrões, suas regras normais e modernas de renderização. É uma declaração, não um elemento. Omiti-la pode ativar o modo de compatibilidade, que imita o comportamento de navegadores antigos e pode alterar o layout e o dimensionamento.

<html> é o elemento raiz. Seus dois elementos filhos são <head> e <body>. O head contém metadados, informações sobre a página. O body contém o conteúdo visível. Um <h1> pertence ao body, mesmo que o navegador pareça se recuperar quando você o coloca no head.

Dê identidade à página

O <title> aparece na aba do navegador, nos favoritos e no histórico. Mecanismos de busca também podem usá-lo como título de um resultado. Dê a cada página normal exatamente um título, dentro do head. Coloque o assunto específico primeiro, seguido do nome do site, como em “Horário de funcionamento do Café do Porto”. O <h1> visível e o título do documento são elementos separados com funções diferentes.

Coloque <meta charset="utf-8"> primeiro no head. A declaração inteira deve estar nos primeiros 1.024 bytes do arquivo. Uma declaração no início permite que o navegador descubra como decodificar o texto antes de ter lido grande parte da página.

A linha da área de visualização solicita aos navegadores móveis que usem a largura do dispositivo para o layout e um zoom inicial de 1. Sem ela, muitos usam uma área de visualização virtual larga, como a de um computador, e reduzem o resultado, fazendo o texto parecer pequeno. Essa linha prepara o documento para o layout em dispositivos móveis; os estilos da página ainda determinam como seu conteúdo se ajusta.

Conecte outros recursos da página

Adições comuns ao head incluem:

<meta name="description" content="Fresh bread, coffee and lunch by the harbor.">
<link rel="icon" href="favicon.png">
<link rel="stylesheet" href="styles.css">
<script src="app.js" defer></script>

A descrição resume a página e pode aparecer nos resultados de busca. O ícone fornece a imagem da aba. O link da folha de estilo conecta um arquivo CSS. O elemento script conecta JavaScript; defer adia sua execução até que o documento tenha sido analisado. Diferentemente de <link> e <meta>, <script> precisa de uma tag de fechamento mesmo quando seu conteúdo está vazio.

Salve um arquivo de página web

Salve texto simples em um editor de código com a extensão .html. Um processador de texto pode adicionar formatação que não pertence a um arquivo de código-fonte HTML. A página padrão de uma pasta é convencionalmente index.html; a maioria dos servidores web a envia quando alguém solicita o endereço da pasta.

Escolha nomes em minúsculas com hífens, como opening-hours.html. Espaços se tornam %20 nas URLs, e muitos servidores diferenciam maiúsculas de minúsculas. Verifique se o editor não salvou sua página como index.html.txt. Depois de salvar, abra o arquivo HTML no navegador e atualize a página quando fizer uma alteração.

O idioma do texto e a forma como seus caracteres são armazenados respondem a perguntas diferentes. Um navegador precisa de ambos para apresentar a página corretamente, especialmente quando o conteúdo inclui acentos ou mais de um sistema de escrita.

Identifique o idioma do conteúdo

Escreva o idioma principal no elemento raiz: <html lang="en">. Leitores de tela podem escolher a pronúncia com essa informação, e navegadores podem usá-la para tradução e verificação ortográfica. Uma etiqueta de idioma começa com um código de idioma. Uma segunda parte opcional pode indicar uma região ou escrita.

A etiqueta descreve o conteúdo, não a localização do visitante. uk significa ucraniano, então não é a etiqueta para o inglês do Reino Unido.

Marque uma mudança de idioma no elemento adequado mais próximo:

<p>Our host said <span lang="fr">bon appétit</span>.</p>

Somente a expressão em francês recebe pronúncia francesa. Para uma citação inteira, o idioma pode ser indicado em seu <blockquote>. Uma página da direita para a esquerda também precisa da direção base do texto, por exemplo <html lang="ar" dir="rtl">. Letras árabes continuam da direita para a esquerda sem esse atributo, mas a direção base afeta o alinhamento dos parágrafos, a pontuação e o texto com direções misturadas.

Faça os bytes salvos corresponderem à declaração

Uma codificação de caracteres associa caracteres a bytes armazenados. UTF-8 pode representar todos os caracteres Unicode, incluindo letras acentuadas, outras escritas e emojis. Documentos HTML usam UTF-8.

Há duas etapas: salvar o arquivo como UTF-8 no editor e declarar <meta charset="utf-8"> no início do head. A declaração diz ao navegador como ler os bytes; ela não converte um arquivo salvo em outra codificação. Uma declaração de codificação do servidor no cabeçalho Content-Type tem precedência sobre o elemento meta.

Uma incompatibilidade de codificação frequentemente deixa uma pista. O texto UTF-8 “Café” lido como Windows-1252 pode se tornar “Café” porque os dois bytes de “é” são interpretados separadamente. Um arquivo Windows-1252 lido como UTF-8 pode mostrar “Caf�” porque o byte é inválido em UTF-8. Verifique a codificação do editor e as informações do documento recebido pelo navegador antes de substituir letras individualmente.

Exiba caracteres que o HTML usa como sintaxe

Para mostrar texto literal que se parece com uma tag, escreva referências de caracteres:

<p>Use &lt;p&gt; for paragraphs.</p>

A página exibe uma instrução para usar

em parágrafos. O < deve ser representado como < para que o navegador não inicie uma tag. Cada referência nomeada começa com & e termina com ;.

Por exemplo, 10 km mantém o número e a unidade na mesma linha. Caracteres acentuados comuns podem ser digitados diretamente em um arquivo UTF-8; você não precisa de uma referência separada para cada acento.

Um navegador tenta exibir uma página mesmo quando seu HTML está errado. Essa recuperação útil pode ocultar erros, então verificar uma página significa examinar tanto o código-fonte que você escreveu quanto a estrutura que o navegador construiu.

Compare o código-fonte com o DOM

Exibir código-fonte da página mostra o HTML recebido pelo navegador. O painel Elementos ou Inspetor nas ferramentas do desenvolvedor mostra o DOM, a árvore analisada que o navegador está usando. O navegador pode ter fechado um elemento antes do esperado ou movido conteúdo para outro lugar durante a análise sintática.

Abra o inspetor clicando com o botão direito na página e escolhendo Inspecionar, ou use o atalho das ferramentas do desenvolvedor do seu navegador. Selecione um elemento exibido e observe seu pai e seus filhos. Depois, encontre a mesma área no código-fonte. Diferenças podem explicar espaçamentos inesperados, links que se estendem demais ou estilos aplicados aos elementos errados.

Acompanhe um reparo automático

Suponha que você escreva:

<p>Our soups:
  <ul>
    <li>Tomato</li>
    <li>Lentil</li>
  </ul>
</p>

Um parágrafo aceita conteúdo de nível de texto, não uma lista. Ao chegar a <ul>, o navegador fecha o parágrafo. A lista se torna um bloco separado. O </p> final não tem um parágrafo aberto para fechar, então a análise sintática pode criar um parágrafo vazio extra.

O reparo necessário deve ser feito no código-fonte:

<p>Our soups:</p>
<ul>
  <li>Tomato</li>
  <li>Lentil</li>
</ul>

Mova a tag de fechamento do parágrafo para antes da lista. Agora o DOM pode expressar a relação pretendida sem recuperação de erros.

Use um verificador de HTML

O W3C Nu Html Checker aceita o endereço de uma página, um arquivo enviado ou HTML colado. Ele informa erros e avisos com suas localizações. Comece pelo primeiro erro, corrija-o e execute o verificador novamente. Uma única aspa ausente pode causar muitas mensagens posteriores, então editar todas as linhas informadas de uma vez pode desperdiçar esforço.

Por exemplo, falta a aspa de fechamento em <a href="about.html>. O navegador pode tratar a marcação seguinte como parte do valor do atributo. Corrigir a aspa pode eliminar vários erros posteriores. Da mesma forma, um </a> ausente pode fazer texto não relacionado se juntar ao link.

Procure especialmente por:

• Elementos fechados na ordem errada ou nomes escritos incorretamente, como <pargraph>.
• O mesmo id usado duas vezes em uma página.
• Um <li> fora de sua lista.
• Uma imagem sem atributo alt.
• Conteúdo visível colocado no head.

Verifique o significado além da sintaxe

Um resultado sem erros no verificador informa que a marcação testada segue suas regras. Ele não pode decidir se “Clique aqui” é um texto de link útil ou se o texto alternativo de uma imagem fornece a informação adequada. Leia a página em ordem e verifique essas escolhas por conta própria.

Antes de finalizar uma página, verifique o doctype, o idioma do documento, a declaração UTF-8 no início e um título específico. Revise os níveis de título, ids únicos, alternativas de imagem e destinos dos links. Abra a página em pelo menos dois navegadores e siga seus links. Um caminho relativo válido ainda pode apontar para um arquivo ausente, o que uma verificação apenas de sintaxe não descobrirá.

Títulos dão aos leitores um mapa da página. Parágrafos contêm frases relacionadas dentro desse mapa. Escolha os elementos de acordo com a estrutura do conteúdo e deixe que o CSS defina sua aparência.

Crie um esquema de títulos

O HTML tem seis níveis de título, de <h1> a <h6>. Use um <h1> para o assunto principal da página, <h2> para suas seções principais e <h3> para partes dentro de uma seção <h2>. A maioria das páginas precisa de apenas alguns níveis.

<h1>Growing Basil at Home</h1>
<p>Basil grows well on a sunny windowsill.</p>
<h2>Planting</h2>
<p>Sow the seeds 0.5 cm deep in moist soil.</p>
<h2>Care</h2>
<h3>Watering</h3>
<p>Water when the top of the soil feels dry.</p>
<h3>Harvesting</h3>
<p>Pick the top leaves first.</p>

Leia apenas os títulos. “Planting” e “Care” são seções principais de mesmo nível. “Watering” e “Harvesting” pertencem a “Care”. Esse esquema continua útil quando um leitor de tela lista os títulos ou quando uma pessoa examina rapidamente a página.

Um título pode descer apenas um nível em relação ao título anterior: depois de <h1>, use <h2>, não <h3>. Ao voltar para cima, é possível pular vários níveis. Um <h2> depois de um <h4> inicia uma nova seção principal. Os níveis de título seguem o documento inteiro, incluindo conteúdo dentro de seções e artigos.

O padrão HTML permite vários títulos de nível principal, mas um único <h1> principal é o padrão comum e claro. Não escolha <h4> apenas porque seu texto padrão é menor. Um parágrafo em negrito pode parecer um título, mas não aparecerá na lista de títulos de um leitor de tela.

Separe um subtítulo de uma seção

Uma frase de destaque descreve o título ao lado dela; não introduz uma nova seção. Agrupe um título e um subtítulo em <hgroup>:

<hgroup>
  <h1>Harbor Café</h1>
  <p>Fresh bread every morning</p>
</hgroup>

O parágrafo continua sendo um subtítulo. Transformá-lo em <h2> o colocaria incorretamente no esquema da página como uma seção principal.

Use parágrafos para frases relacionadas

Um elemento <p> contém um parágrafo. Comece um novo parágrafo quando o assunto ou a etapa da explicação mudar. Por padrão, os navegadores acrescentam espaço visível ao redor dos parágrafos.

Pressionar Enter no código-fonte HTML comum não cria um novo parágrafo exibido. Da mesma forma, elementos <p> vazios não são uma ferramenta de espaçamento. Mantenha a estrutura significativa e defina o espaço extra com CSS.

Escolha uma quebra pelo significado

Para um endereço, <p>Harbor Café<br>12 Quay Street<br>Port Town</p> mantém as linhas juntas como um parágrafo. Elementos <br> repetidos entre parágrafos comuns confundem a estrutura do conteúdo com o espaçamento. Uma linha horizontal desenhada por <hr> expressa uma mudança de assunto; escolha-a por esse significado, não apenas para decorar a página.

Elementos de texto dizem ao navegador o que uma palavra ou trecho significa. Sua aparência padrão em negrito, itálico ou com recuo é apenas um estilo inicial. Escolha primeiro o significado.

Diferencie ênfase, importância e atenção

Mudar a ênfase em “Eu tranquei a porta” altera o que a pessoa está corrigindo. A importância acentuada tem outra função: um aviso importa independentemente de como a frase é falada. Use CSS quando quiser apenas um estilo visual.

Marque citações e suas fontes

Uma citação longa usa <blockquote>. Seu atributo opcional cite fornece uma URL da fonte, mas esse endereço não é exibido automaticamente. Coloque uma atribuição visível fora da citação:

<blockquote cite="https://example.com/interview">
  <p>The garden is open to everyone.</p>
</blockquote>
<p>From <cite>A Conversation About the Garden</cite>.</p>

<cite> marca o título de uma obra, não o nome de uma pessoa. Uma citação curta dentro de uma frase usa <q>, e o navegador fornece as aspas. Não digite um segundo par ao redor das mesmas palavras.

Uma abreviação pode usar <abbr title="World Health Organization">WHO</abbr>. Escreva também sua forma completa de maneira visível na primeira vez em que aparecer. Uma dica isolada é difícil de acessar em telas sensíveis ao toque e não é uma explicação confiável para todos os leitores.

Mostre código e preserve seu espaçamento

<code> identifica um pequeno trecho de código dentro de uma frase. Para um bloco cujos espaços e quebras de linha importam, combine-o com <pre>:

<pre><code>&lt;p&gt;Welcome.&lt;/p&gt;</code></pre>

O leitor vê a marcação literal do parágrafo. <pre> preserva a formatação, mas não desativa a análise sintática de HTML. Você ainda precisa representar < como < e um e comercial como & quando eles devem aparecer como texto. Caso contrário, um exemplo de código pode ser interpretado como marcação real da página.

Marque datas, notação e outros significados úteis

<sub> e <sup> expressam subscrito e sobrescrito quando a notação exige: H<sub>2</sub>O e m<sup>2</sup>. Eles não são ferramentas para diminuir outro texto sem relação com essa notação.

<time> conecta o texto legível de uma data ou horário a um valor legível por máquina:

<time datetime="2026-03-14">March 14, 2026</time>

O valor de datetime usa ano-mês-dia. Um horário pode usar o valor de 24 horas 14:30, mesmo que as palavras visíveis digam “2:30 pm”.

Use <mark> para texto destacado por ser relevante no contexto atual, como uma correspondência de busca. <small> contém comentários secundários ou observações e ressalvas. Um <span> não tem significado próprio; é útil para um atributo de idioma ou um ponto de associação para estilização dentro de uma linha.

Uma lista real dá uma estrutura compartilhada a itens relacionados. Sua marcação permite que os leitores ouçam que estão entrando em uma lista e quantos itens ela contém. O tipo de lista depende do significado dos itens.

Escolha o tipo de lista

Use <ul> para itens cuja ordem não altera seu significado, como ingredientes. Use <ol> para uma sequência ou classificação em que a ordem importa. Ambos contêm itens de lista marcados com <li>.

<ol>
  <li>Boil the water.</li>
  <li>Add the pasta.</li>
  <li>Cook for 10 minutes.</li>
</ol>

Inverter essas etapas alteraria as instruções, então uma lista ordenada é adequada. Um navegador normalmente mostra números para <ol> e marcadores para <ul>. O CSS pode alterar esses marcadores; o significado da lista permanece o mesmo.

Não simule uma lista com traços digitados e quebras de linha. Esses caracteres podem parecer semelhantes, mas não informam ao leitor de tela que os itens formam uma lista. Um menu de navegação frequentemente usa uma lista não ordenada, enquanto uma trilha de navegação usa uma lista ordenada porque seu caminho tem uma sequência.

Aninhe uma lista dentro de seu item

No conteúdo comum de listas, os elementos filhos diretos de <ul> e <ol> são elementos <li>. Não coloque um parágrafo ou outra lista diretamente entre eles. O padrão também permite elementos de suporte a scripts, mas eles não substituem itens de lista.

Uma lista aninhada pertence ao item que descreve:

<ul>
  <li>Fruit
    <ul>
      <li>Apples</li>
      <li>Pears</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

Primeiro abra o item “Fruit”. Adicione sua lista aninhada, feche essa lista e depois feche o item “Fruit”. Agora “Apples” e “Pears” estão estruturalmente ligados a “Fruit”. Colocar o <ul> interno depois do </li> do elemento pai perderia essa relação. Um <li> também pode conter parágrafos, links e imagens.

Controle a numeração significativa

Uma lista ordenada pode continuar ou inverter uma contagem:

reversed é booleano. Ele continua ativado em reversed="false"; remova-o para voltar à contagem crescente. Com type, os valores 1, a, A, i e I selecionam formas comuns de numeração. Use uma forma de marcador significativa quando outro trecho do texto se referir a um marcador específico, como a cláusula “b”.

Associe termos e descrições

Uma lista de descrições usa <dl>, com <dt> para um termo ou nome e <dd> para sua descrição ou valor:

<dl>
  <dt>Opening time</dt>
  <dd>08:30</dd>
  <dt>Closing time</dt>
  <dd>17:00</dd>
</dl>

Um termo pode ter várias descrições, e vários termos podem compartilhar uma descrição. Um grupo pode ser envolvido por um <div>. Use essa estrutura para relações entre nomes e valores, como em um glossário ou nos detalhes de um produto, em vez de forçar esses pares em itens de lista sem relação.

Um link conecta conteúdo a um destino. O navegador determina esse destino a partir do endereço que você coloca em href, então escolher o tipo correto de URL faz parte da criação do link.

Escreva uma âncora

<a href="https://www.w3.org/">World Wide Web Consortium</a>

O elemento <a> é uma âncora (anchor). Seu href é o destino, e seu conteúdo é o texto clicável do link. Uma âncora sem href é um marcador de posição, não um hiperlink funcional. Uma imagem também pode ser seu conteúdo.

Uma URL absoluta fornece um esquema e um domínio, como em https://example.com/guide/. Use-a para criar um link para outro site. href="www.example.com" não tem esquema, então o navegador o trata como um caminho relativo de arquivo; ele não significa “abrir esse site”.

Parta da pasta atual

Uma URL relativa parte da localização da página atual. Considere este site:

site/
  index.html
  about.html
  recipes/
    index.html
    soup.html
  images/
    logo.png

A partir da página inicial, about.html chega à página de apresentação ao lado, e recipes/soup.html entra na pasta de receitas. A partir de recipes/soup.html, o mesmo about.html procuraria dentro de recipes/, onde esse arquivo não existe.

Acompanhe o caminho de recipes/soup.html até o logotipo:

1. A pasta inicial é recipes/.
2. ../ sobe até a pasta do site.
3. images/ entra na pasta de imagens.
4. logo.png identifica o arquivo.

O caminho completo é ../images/logo.png. Cada ../ adicional sobe mais uma pasta. Já index.html a partir da página da sopa chega ao índice de receitas, não à página inicial do site.

Uma URL relativa à raiz começa com /, como /about.html. Em um servidor web, ela parte da raiz do site, independentemente da pasta da página atual. Ao abrir o arquivo diretamente do disco, essa barra se refere à raiz do sistema de arquivos, então ela não identifica a pasta do site no seu projeto. Use caminhos relativos comuns para páginas que você também testa diretamente do disco.

Caminhos usam barras normais e devem corresponder aos nomes dos arquivos e ao uso de maiúsculas e minúsculas. Muitos servidores tratam Soup.html e soup.html como arquivos diferentes. Um link para uma pasta, como recipes/, normalmente solicita ao servidor seu arquivo padrão, geralmente index.html; a navegação direta pelo disco pode mostrar uma listagem da pasta.

Salte para uma parte da página

<a href="#watering">Watering</a>
<h2 id="watering">Watering</h2>

O fragmento começa com # na URL. O id do destino não tem # e deve corresponder exatamente. Para outra página, combine os dois: basil.html#watering. Um fragmento vazio # leva ao topo. #top também leva ao topo quando nenhum elemento correspondente é encontrado.

Abra um destino de e-mail ou telefone

mailto:info@example.com solicita ao aplicativo de e-mail do visitante que prepare uma mensagem. Um assunto pode ser incluído como mailto:info@example.com?subject=Table%20booking, com o espaço codificado como %20. tel:+15555550123 fornece um destino telefônico em formato internacional. O número de telefone visível pode conter espaços, embora esse href não os contenha.

Um link útil informa à pessoa o que esperar antes de acessá-lo. Seu texto, destino e comportamento de abertura funcionam em conjunto, inclusive quando o link é lido isoladamente na lista de links de um leitor de tela.

Indique o destino

Compare estes links:

Mantenha o texto do link breve, mas específico. Se dois links tiverem o mesmo texto, faça-os levar ao mesmo destino. Uma URL pura geralmente é mais difícil de ler do que uma descrição, embora um endereço de e-mail seja um texto de link útil quando o próprio endereço é a informação.

Uma dica de title não corrige um texto visível pouco claro. Usuários de telas sensíveis ao toque talvez nunca vejam a dica, e o acesso a ela pelo teclado não é confiável. Coloque as informações importantes sobre o destino no próprio conteúdo do link.

Indique arquivos e downloads

<a href="menu.pdf" download="harbor-cafe-menu.pdf">Lunch menu (PDF, 2 MB)</a>

O texto identifica o tipo e o tamanho do arquivo. O atributo download solicita ao navegador que salve o arquivo e sugere um nome para ele. Ele não converte uma página em PDF. Para links comuns de arquivos web, o destino deve estar na mesma origem para que download seja aplicado; URLs especiais blob: e data: também são aceitas. As configurações do navegador e os cabeçalhos do servidor podem afetar o comportamento final, então o atributo é uma solicitação, não uma promessa de uma caixa de diálogo específica.

Deixe as pessoas controlarem novas abas

Links comuns abrem no contexto de navegação atual, onde o botão Voltar pode retornar à página anterior. target="_blank" solicita uma nova aba ou janela. A nova aba não tem o histórico do botão Voltar da aba original, e o visitante pode não perceber a mudança.

Use uma nova aba apenas quando houver uma finalidade clara e informe isso no texto:

<a href="https://example.com/archive" target="_blank" rel="noopener">Archive (opens in a new tab)</a>

Navegadores modernos dão a links _blank a proteção de noopener: a página aberta não pode usar window.opener para controlar a página original. Escrever rel="noopener" explicitamente também cobre o comportamento antigo. noreferrer também suprime as informações de referenciador. nofollow comunica uma relação aos mecanismos de busca, não um destino de navegação.

Torne compreensíveis links de imagem e links maiores

Quando uma imagem é o único conteúdo de um link, seu texto alternativo fornece o nome do link:

<a href="index.html">
  <img src="logo.png" alt="Harbor Café home page">
</a>

A informação útil é para onde o link leva. Descrever apenas as cores do logotipo não indicaria seu destino.

Uma âncora pode envolver um cartão maior com título e parágrafo, mas não pode conter outro link ou um botão. Controles interativos aninhados oferecem destinos ou ações concorrentes dentro de um mesmo controle.

Um link leva a algum lugar: uma página, um arquivo ou uma seção da página. Um botão executa uma ação, como abrir um menu. href="#" é um link para o topo da página; ele não substitui um botão que executa uma ação.

A navegação ajuda as pessoas a encontrar tanto a página desejada no site quanto a parte necessária de uma página longa. O HTML pode identificar esses grupos para que pessoas que usam tecnologia assistiva os encontrem diretamente.

Dê uma região à navegação principal

Use <nav> ao redor de um grupo principal de links de navegação. Um menu de site costuma conter uma lista não ordenada:

<nav aria-label="Main">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="menu.html" aria-current="page">Menu</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

Essa marcação pertence à página do cardápio: aria-current="page" identifica o link para a página exibida no momento. Na página de contato, mova esse atributo para o link de contato. Não marque o índice de uma seção como página atual quando o leitor estiver visualizando outra página dentro dessa seção.

A lista disponibiliza aos leitores de tela a quantidade e o agrupamento dos links. Sem CSS, os itens do menu ficam empilhados verticalmente. O elemento <nav> não os organiza automaticamente em uma linha. Alguns links sem relação entre si no rodapé geralmente não precisam de uma região de navegação própria.

Mantenha os menus consistentes entre páginas

Use os mesmos itens na mesma ordem e posição em todo o site. Em um site HTML estático, copiar o menu significa atualizar cada cópia quando seu conteúdo mudar.

Verifique os destinos a partir da pasta real de cada página. Em recipes/soup.html, o link para a página inicial é ../index.html; index.html chegaria ao índice de receitas. As palavras no menu podem permanecer iguais enquanto os caminhos relativos mudam. Um site em servidor pode usar caminhos relativos à raiz para evitar essa dependência de pastas.

Crie um sumário

Um sumário contém links para títulos na página atual:

<nav aria-label="Contents">
  <ol>
    <li><a href="#planting">Planting</a></li>
    <li><a href="#care">Care</a></li>
  </ol>
</nav>
<h2 id="planting">Planting</h2>

Cada fragmento deve corresponder a um id único. Adicione um título correspondente com id="care" para o segundo link. Quando várias regiões de navegação têm funções diferentes, rótulos como “Main” e “Contents” permitem que usuários de leitores de tela as diferenciem.

Uma trilha de navegação é outro tipo de navegação. Ela mostra um caminho como “Início › Receitas › Sopa de tomate”. Use <nav aria-label="Breadcrumb"> com uma lista ordenada e coloque a página atual por último. A ordem expressa o caminho pelo site.

Ofereça um atalho para passar pelo conteúdo repetido

Coloque um link para pular blocos de conteúdo primeiro no body:

<a href="#main-content">Skip to main content</a>

Seu destino é a região principal, escrita como <main id="main-content">. Usuários de teclado podem seguir esse link para passar por um menu repetido. Mantenha o id do destino único e escrito exatamente como no fragmento. Um link para pular blocos de conteúdo funciona como recurso de navegação mesmo antes de o CSS alterar sua apresentação.

Uma imagem em HTML continua sendo um recurso separado. A página informa ao navegador qual arquivo buscar, quanto espaço reservar e qual texto pode substituir a imagem.

Adicione uma imagem

<img src="images/harbor.jpg" alt="Fishing boats moored in the harbor at sunset" width="1200" height="800">

<img> é vazio, então não tem tag de fechamento. src fornece o endereço de um arquivo, com as mesmas regras de caminho usadas para links. alt fornece uma alternativa textual. Se a imagem não aparecer, verifique a pasta, as maiúsculas e minúsculas e a extensão do arquivo em src. Um caminho .jpg não identifica um arquivo .png, e .JPG pode ser diferente de .jpg em um servidor.

Os bytes da imagem não são armazenados dentro desse elemento HTML. O navegador baixa o arquivo separadamente. Alterar a largura no HTML não diminui o arquivo baixado.

Escolha um formato adequado ao conteúdo

Os principais navegadores atuais oferecem suporte a WebP e AVIF. Escolha uma imagem pelo conteúdo e pelo tamanho resultante do arquivo, não apenas pela extensão. A compressão com perdas descarta alguns detalhes para economizar espaço; a compressão sem perdas mantém os dados originais da imagem.

Reserve a proporção correta

Os atributos width e height são números inteiros em pixels CSS, sem unidade no valor. Escreva width="1200", não width="1200px". Eles permitem que o navegador reserve espaço antes da chegada do arquivo, reduzindo deslocamentos de layout, quando o texto salta à medida que uma imagem carrega.

Uma imagem de 1200 × 800 tem proporção de 3:2. Tanto width="1200" height="800" quanto width="600" height="400" a preservam. O segundo par reduz as duas dimensões à metade. Um par de 600 × 600 força um quadrado e distorce a imagem. O CSS pode depois controlar as dimensões exibidas preservando a proporção.

Reduza o arquivo antes de usá-lo

Uma foto de celular com 4000 × 3000 tem 12 milhões de pixels e pode ocupar vários megabytes. Redimensione-a para perto do maior tamanho de exibição pretendido e escolha uma compressão adequada antes de adicioná-la ao site. Caso contrário, cada leitor baixa o arquivo grande mesmo quando a página mostra uma miniatura pequena.

Para imagens mais abaixo em uma página longa, loading="lazy" permite que o navegador espere até que o visitante se aproxime delas. Mantenha o carregamento normal para um banner ou imagem principal visível imediatamente, pois adiá-lo pode tornar mais lenta a primeira visualização da página.

Use imagens que sejam suas, que você tenha permissão para usar ou que possa reutilizar conforme a licença, com os créditos exigidos. Mantenha as imagens do site em sua própria pasta para que alterações em arquivos de outro site não as quebrem. Imagens de conteúdo pertencem ao HTML; texturas de fundo puramente decorativas geralmente são tratadas pelo CSS.

O texto alternativo fornece a informação necessária a quem não consegue ver uma imagem. Uma legenda fornece contexto visível para todos. A escolha de ambos começa pela finalidade da imagem naquela página específica.

Descreva a informação útil

Para uma foto que ajuda os leitores a entender um lugar, descreva o que importa: alt="The café's terrace with six tables overlooking the harbor". Uma lista longa de todos os objetos raramente é útil. Você geralmente não precisa de “Imagem de” porque os leitores de tela já anunciam a função de imagem. O meio, porém, pode importar, como em “Pintura em aquarela do porto”.

O contexto muda a alternativa útil. Em uma página de adoção, os detalhes importantes podem identificar um cachorro. Em uma página para visitantes de um parque, a mesma foto pode comunicar que cachorros são bem-vindos no gramado. Pergunte qual informação um leitor perderia se a imagem desaparecesse.

Para um gráfico, apresente sua mensagem principal e coloque os dados detalhados por perto. Por exemplo, o texto alternativo pode informar que as visitas ao site subiram de 1.200 em janeiro para 3.000 em março. O texto ao redor pode fornecer todos os valores. Uma placa fotografada ou outra imagem de texto precisa das palavras relevantes em sua alternativa.

Diferencie imagens informativas, decorativas e funcionais

Um valor alt vazio é uma instrução deliberada para ignorar uma imagem decorativa. Omitir o atributo é diferente: alguns leitores de tela podem anunciar o nome do arquivo. Use um atributo alt em toda imagem que você criar.

Um logotipo que é o único conteúdo de um link para a página inicial precisa de um nome útil para o link, como “Página inicial do Café do Porto”. O leitor precisa saber o destino, não apenas que o logotipo contém ondas azuis. title não é um substituto: sua dica não está disponível de forma confiável para usuários de teclado, tela sensível ao toque ou leitor de tela.

Adicione uma legenda com figure

<figure>
  <img src="images/old-harbor.jpg" alt="Sailing ships crowded along a stone quay" width="1000" height="667">
  <figcaption>The harbor around 1900. Photo: Port Town Archive.</figcaption>
</figure>

<figure> agrupa conteúdo independente e sua legenda visível opcional. <figcaption> é o primeiro ou o último filho da figure, com no máximo uma legenda por figure. Uma figure pode conter várias imagens, um exemplo de código, uma citação ou um diagrama; ela não se limita a fotografias.

Neste exemplo, o texto alternativo substitui o que a fotografia mostra. A legenda fornece a data e o crédito. Copiar a legenda inteira para o texto alternativo faria um leitor de tela repetir esse texto sem explicar a imagem. Uma legenda que diz apenas “Figura 1” também não substitui uma descrição da imagem.

Uma página contém regiões com funções diferentes: uma introdução, navegação, seu conteúdo exclusivo e informações complementares. Elementos semânticos nomeiam essas funções para que a estrutura seja útil além de seu layout visual.

Nomeie cada região

Um cabeçalho de site frequentemente contém um logotipo e um menu. Já o cabeçalho de um artigo pode conter seu título, autor e data. Um rodapé pode incluir dados de contato, links relacionados ou uma linha de direitos autorais. Esses elementos identificam funções, não um conjunto fixo de palavras.

Mantenha o conteúdo principal distinto

Uma página comum usa um <main> visível. Seu conteúdo é exclusivo da página, então a navegação do site que se repete fica fora dele. Não coloque main dentro de article, section, aside, header, footer ou nav. Um artigo de receita pode ficar dentro de main, não o contrário.

Um aside serve para material complementar relacionado apenas indiretamente. Um conjunto de links para receitas relacionadas pode ser um aside; uma etapa essencial da receita não pode. O nome “aside” não coloca o conteúdo em uma coluna lateral. Sem CSS, essas regiões normalmente ficam empilhadas na ordem do código-fonte.

<body>
  <header>
    <p>Harbor Café</p>
    <nav>...</nav>
  </header>
  <main>
    <h1>Our Menu</h1>
    <p>Everything is baked fresh each morning.</p>
  </main>
  <aside>
    <h2>Today's special</h2>
    <p>Tomato soup with fresh bread.</p>
  </aside>
  <footer>
    <p>&copy; 2026 Harbor Café</p>
  </footer>
</body>

O conteúdo exclusivo da página de cardápio fica em main. As informações do site ao seu redor ficam fora dele. O código-fonte faz sentido ao ser lido de cima para baixo antes de adicionar colunas, cores ou posicionamento.

Entenda as regiões de referência

Uma região de referência é uma região que a tecnologia assistiva pode apresentar como destino de navegação. Main e nav fornecem regiões de referência. Um header no nível da página fornece a região de referência de cabeçalho, e um footer no nível da página fornece a região de informações sobre o conteúdo. Um header ou footer aninhado dentro de article, aside, main, nav ou section não fornece essas regiões de referência no nível da página.

Um aside normalmente tem uma função complementar. Um aside aninhado ainda pode ter essa função; aninhá-lo em um article não elimina, por si só, o significado. Use-o apenas para conteúdo complementar adequado e mantenha compreensíveis as regiões da página.

<search> identifica uma região que contém controles e resultados de pesquisa ou filtragem. Ele cria uma região de pesquisa e tem suporte nos principais navegadores atuais. É diferente de nav: pesquisar conteúdo e escolher um link de navegação conhecido são funções distintas.

Um header não pode conter um header ou footer, e um footer não pode conter nenhum dos dois. Separe as regiões no nível da página dos cabeçalhos e rodapés que pertencem a artigos individuais. Escolher os nomes adequados fornece uma estrutura útil mesmo quando todas as regiões parecem blocos comuns.

Uma escolha semântica informa aos leitores o que é um bloco de conteúdo. Pergunte como o conteúdo se relaciona com a página antes de escolher um contêiner; duas caixas de aparência semelhante podem precisar de elementos diferentes.

Verifique se o conteúdo faz sentido por si só

Um artigo é uma composição independente que poderia ser compartilhada ou reutilizada separadamente. Uma publicação de blog, receita, notícia ou comentário de leitor pode passar nesse teste. Um artigo geralmente tem seu próprio título, mas ter um título, por si só, não transforma um bloco em artigo.

Uma seção agrupa um tema dentro de um conjunto maior, normalmente com um título. “Horário de funcionamento” e “Como chegar” podem ser seções de uma página de contato. Se o bloco não tem um tema claro e você não consegue dar a ele um título que faça sentido, provavelmente section é a escolha errada.

<article>
  <h2>Growing Basil at Home</h2>
  <section>
    <h3>Planting</h3>
    <p>Choose a sunny place for the pot.</p>
  </section>
  <section>
    <h3>Care</h3>
    <p>Check the soil regularly.</p>
  </section>
</article>

Aqui o artigo é um guia completo de cultivo, enquanto suas seções dividem o guia em temas. Esse exemplo é adequado a uma página cujo <h1> principal aparece antes do artigo.

O aninhamento também funciona na outra direção. Uma seção “Últimas notícias” pode conter vários artigos independentes. Comentários podem ser artigos aninhados no artigo ao qual respondem. A relação entre os conteúdos determina o aninhamento.

Mantenha os níveis de título no esquema da página

Uma seção não reinicia os níveis de título. Se uma página usa <h1> para seu assunto e <h2> para um grupo temático, use <h3> para artigos dentro desse grupo. Não coloque um novo <h1> em cada seção aninhada. Navegadores e leitores de tela usam os níveis de título que você realmente escreve; um contêiner section não corrige um nível pulado.

Use contêineres neutros quando nenhum significado for adequado

<div> é um contêiner de bloco neutro. <span> é um contêiner neutro dentro de uma linha de texto. Eles fornecem pontos de associação para uma classe, um atributo de idioma ou estilização posterior sem atribuir uma função especial ao conteúdo.

<p>Try <span lang="fr">pain au chocolat</span> today.</p>

O span identifica o trecho em francês sem introduzir um novo bloco. Construir a página inteira com divs genéricos perde funções úteis, mas transformar todo div em section inventa temas que não estão presentes.

Escolha perguntando qual é a função do bloco:

1. É o conteúdo exclusivo da página? Use main como região externa.
2. É um grupo principal de navegação? Use nav.
3. Poderia existir como uma composição completa? Considere article.
4. É uma parte temática com título? Considere section.
5. É conteúdo complementar relacionado indiretamente? Considere aside.
6. É apenas um contêiner? Use div ou span dentro do texto.

<address> também tem um significado específico: informações de contato do artigo mais próximo ou da página. Um link de e-mail em um rodapé de contato do site pode ficar nele. Um endereço postal mencionado como fato histórico ou local de um evento não se torna uma informação de contato apenas por conter o nome de uma rua.

Planeje as funções e a ordem de leitura antes de digitar uma página completa. Um esboço estrutural simples nomeia as regiões, enquanto um esquema de títulos identifica o conteúdo dentro delas. Juntos, eles orientam a escolha dos elementos e seu aninhamento.

Mapeie o conteúdo

Para uma página de receita, coloque o nome e o menu do site que se repetem em um header, a receita em main e as informações do site em um footer. A receita é independente, então um article cabe dentro de main. Seu esquema é “Sopa de tomate”, com “Ingredientes” e “Modo de preparo” abaixo.

A página abaixo está em uma pasta recipes/. Sua página inicial e a pasta de imagens estão uma pasta acima:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tomato Soup – Harbor Café Recipes</title>
  </head>
  <body>
    <a href="#main-content">Skip to main content</a>
    <header>
      <p><a href="../index.html">Harbor Café</a></p>
      <nav>
        <ul>
          <li><a href="../index.html">Home</a></li>
          <li><a href="index.html">Recipes</a></li>
        </ul>
      </nav>
    </header>
    <main id="main-content">
      <article>
        <h1>Tomato Soup</h1>
        <p>Published <time datetime="2026-03-14">March 14, 2026</time></p>
        <figure>
          <img src="../images/tomato-soup.jpg" alt="A bowl of red tomato soup with a swirl of cream" width="1200" height="800">
          <figcaption>Ready in 30 minutes.</figcaption>
        </figure>
        <h2>Ingredients</h2>
        <ul>
          <li>1 kg ripe tomatoes</li>
          <li>1 onion</li>
          <li>500 ml vegetable stock</li>
        </ul>
        <h2>Method</h2>
        <ol>
          <li>Chop the onion and tomatoes.</li>
          <li>Simmer them in the stock for 20 minutes.</li>
          <li>Blend until smooth.</li>
        </ol>
      </article>
    </main>
    <footer>
      <p>&copy; 2026 Harbor Café</p>
    </footer>
  </body>
</html>

Acompanhe as escolhas no código

O link para pular blocos de conteúdo é o primeiro no body e aponta para o id único da região principal. O header contém a identidade e a navegação do site que se repetem. O article da receita tem o único título principal da página, seguido de duas seções <h2> de mesmo nível.

Os ingredientes usam uma lista não ordenada porque mudar sua ordem de exibição não altera o que é necessário. O modo de preparo usa uma lista ordenada porque as etapas formam uma sequência. O texto alternativo da foto substitui a imagem; sua legenda fornece contexto sobre o preparo.

../index.html sobe até a página inicial. index.html permanece na pasta de receitas. Nenhum dos links do menu está marcado com aria-current="page", porque a página exibida é a receita de sopa, não um dos índices.

Verifique a página concluída

Leia o código-fonte de cima para baixo. Sua ordem deve funcionar para um usuário de teclado e um leitor de tela antes que o CSS reorganize qualquer elemento. Verifique o título, o esquema de títulos, o único main visível, os caminhos dos links e as alternativas das imagens. Execute o verificador de HTML e corrija as mensagens, depois teste os links e as imagens no navegador.

Em várias páginas, mantenha o mesmo cabeçalho, menu e rodapé repetidos. Dê a cada página seu próprio título e título principal e ajuste os caminhos relativos a partir de sua pasta. Cores, fontes, espaçamento e colunas podem então ser adicionados por meio de CSS sem alterar as funções que você já estabeleceu.