W3docs
pt
Entrar

Tags Básicas do HTML

Aprenda as tags HTML básicas que toda página precisa: títulos, parágrafos, imagens, links, botões, listas e linhas horizontais, com exemplos executáveis.

HTML é uma linguagem de marcação: você envolve o seu conteúdo em tags (elementos) que informam ao navegador o que cada parte do conteúdo significa — isto é um título, aquilo é um parágrafo, isto é um link. Sem marcação, o navegador veria apenas um bloco de texto sem estrutura alguma. Entender as tags básicas é a base para tudo o mais em HTML.

Aqui estão os elementos que você usará com mais frequência em quase todas as páginas:

Esta página apresenta cada uma delas, explica por que você precisa delas e fornece um exemplo executável que você pode editar.

Documentos HTML

Toda página HTML compartilha o mesmo esqueleto básico. As partes a seguir aparecem em todos os exemplos desta página, por isso vale a pena saber o que cada uma faz:

  • <!DOCTYPE html> deve ser a primeira linha. Não é uma tag, mas uma declaração que informa ao navegador para usar o modo padrão moderno (HTML5). Se você omiti-la, os navegadores voltarão a um antigo "modo quirks" que renderiza as páginas de forma inconsistente.
  • Todo o documento está envolvido no elemento <html>: começa com <html> e termina com </html>. Este é o elemento raiz.
  • A seção <head> contém informações sobre a página que não são exibidas no corpo da página — por exemplo, o <title>, que define o texto exibido na aba do navegador e usado pelos mecanismos de busca.
  • O conteúdo visível da página fica entre <body> e </body>. Tudo o que o usuário vê — títulos, parágrafos, imagens, links — vai aqui.

Exemplo de um documento HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <p>Here is the paragraph.</p>
  </body>
</html>
Experimente Você Mesmo »

Títulos HTML

Os títulos definem a estrutura de uma página. Existem seis níveis de títulos HTML, de <h1> (mais importante) até <h6> (menos importante). Use <h1> para o título principal da página, <h2> para as seções principais, <h3> para as subseções, e assim por diante — como um índice.

Os títulos não são apenas texto maior e em negrito. Seus níveis carregam significado que importa para acessibilidade e SEO: usuários de leitores de tela navegam pela página saltando entre títulos, e os mecanismos de busca usam a estrutura de títulos para entender sobre o que a página trata. Por esse motivo, escolha o nível do título pelo seu significado, não pelo seu tamanho — nunca pule níveis apenas para fazer o texto parecer menor.

Exemplo dos títulos HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    <h4>This is heading 4</h4>
    <h5>This is heading 5</h5>
    <h6>This is heading 6</h6>
  </body>
</html>
Experimente Você Mesmo »

Parágrafos HTML

O elemento <p> agrupa o seu texto em parágrafos. Os navegadores adicionam espaço acima e abaixo de cada parágrafo automaticamente, então você não precisa adicionar linhas em branco manualmente — na verdade, espaços extras e quebras de linha no código-fonte são recolhidos em um único espaço. Envolver o texto em <p> é a forma de informar ao navegador "este é um bloco de texto corrido."

Exemplo dos parágrafos HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Elements example</h2>
    <p>This is some paragraph.</p>
    <p>This is another paragraph <br /> with line break.</p>
  </body>
</html>
Experimente Você Mesmo »

Imagens HTML

A tag <img> incorpora uma imagem na página. É um elemento vazio (sem tag de fechamento) e é controlado inteiramente por seus atributos:

  • src — o caminho ou URL do arquivo de imagem a ser exibido. Sem ele, nada é mostrado.
  • alt — o texto alternativo (veja abaixo).
  • width / height — o tamanho da imagem em pixels. Defini-los reserva espaço para que o layout não salte enquanto a imagem carrega.

Por que o atributo alt é importante

O atributo alt contém uma breve descrição textual da imagem. É obrigatório porque serve a vários propósitos importantes:

  • Leitores de tela leem o texto alt em voz alta, para que pessoas que não conseguem ver a imagem ainda possam entendê-la — isso é essencial para acessibilidade.
  • Se a imagem falhar ao carregar, o navegador exibe o texto alt em seu lugar.
  • Os mecanismos de busca o utilizam para entender o que a imagem representa.

Um bom texto alt descreve o conteúdo ou propósito da imagem em poucas palavras, como se você a estivesse descrevendo a alguém pelo telefone. Por exemplo, em vez de alt="Aleq" (que não tem significado para quem não sabe o que é "Aleq"), prefira algo como alt="Retrato de um homem sorridente usando óculos". Se uma imagem é puramente decorativa e não acrescenta informação, use alt="" vazio para que os leitores de tela a ignorem.

Exemplo das imagens HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is an image example</h1>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185">
  </body>
</html>
Experimente Você Mesmo »

Os links são o que transforma páginas separadas em uma web conectada — eles permitem que os usuários cliquem de uma página para outra. Você cria um link com a tag <a> (âncora) e a envolve ao redor do texto ou imagem que deve ser clicável.

O destino é definido com o atributo href (abreviação de hypertext reference). É o endereço para o qual o navegador navega quando o link é clicado — uma URL absoluta como https://www.w3docs.com/, ou um caminho no seu próprio site como /learn-html/html-links. Sem um href, um elemento <a> é apenas texto e não faz nada.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a href="https://www.w3docs.com/">W3docs.com</a>
  </body>
</html>
Experimente Você Mesmo »

Botões HTML

A tag <button> cria um botão clicável que os usuários podem pressionar para disparar uma ação — enviar um formulário, abrir um menu ou executar algum JavaScript.

Um botão tem um atributo type. Definir type="button" é um bom hábito quando o botão não tem a intenção de enviar um formulário: por padrão, um <button> dentro de um <form> tem type="submit", então omitir o tipo pode fazer o formulário ser enviado (e a página recarregar) de forma inesperada. Usar type="button" faz o botão não fazer nada por conta própria até que você associe um comportamento a ele, evitando esse envio acidental.

Exemplo da tag HTML <button>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Example of the HTML &lt;button&gt; tag:</h1>
    <p>You can specify the HTML buttons with the button tag:</p>
    <button type="button">Button</button>
  </body>
</html>
Experimente Você Mesmo »

Listas HTML

As listas agrupam itens relacionados. Use a tag <ul> para uma lista não ordenada (itens com marcadores, onde a ordem não importa) ou a tag <ol> para uma lista ordenada (itens numerados, onde a sequência importa, como os passos de uma receita). Dentro de qualquer uma delas, cada item é envolvido em uma tag <li> (item de lista).

Exemplo das listas HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>An unordered list</h2>
    <ul>
      <li>Pen</li>
      <li>Pencil</li>
      <li>Ruler</li>
      <li>Book</li>
    </ul>
    <h2>An ordered list</h2>
    <ol>
      <li>Pen</li>
      <li>Pencil</li>
      <li>Ruler</li>
      <li>Book</li>
    </ol>
  </body>
</html>
Experimente Você Mesmo »

Linhas horizontais HTML

A tag HTML <hr> representa uma quebra temática entre conteúdos no nível de parágrafo — por exemplo, uma mudança para um novo tópico dentro de uma seção, ou uma mudança de cena em uma história. No HTML5, é um elemento semântico, não apenas uma linha decorativa: ele comunica que o conteúdo antes e depois dele trata de coisas diferentes. Os navegadores geralmente o renderizam como uma linha horizontal, mas essa é apenas sua aparência padrão. É uma tag vazia, portanto não possui tag de fechamento.

Exemplo da tag HTML <hr>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Welcome to W3Docs</h1>
    <hr />
    <p>
      Learn to design and build professional website<br />
      Learn to design and build professional website
    </p>
    <p>Learn to design and build a professional website</p>
    <hr />
    <p>Learn to design and build professional website</p>
    <p>Learn to design and build professional website</p>
    <p>Learn to design and build professional website</p>
    <hr />
  </body>
</html>
Experimente Você Mesmo »

Prática

Prática
Quais afirmações sobre os elementos HTML básicos são verdadeiras?
Quais afirmações sobre os elementos HTML básicos são verdadeiras?

Resumo

As tags HTML básicas apresentadas aqui são os blocos de construção de quase todas as páginas web:

Was this page helpful?