Elementos HTML são blocos fun­da­men­tais para es­tru­tu­rar páginas da web. Eles informam aos na­ve­ga­do­res como exibir e organizar o conteúdo, ga­ran­tindo que o site tenha a for­ma­ta­ção correta.

O que são elementos HTML?

Em HTML, um elemento informa ao navegador a forma de gerenciar o conteúdo. Os elementos costumam ser iniciados com uma tag de abertura (<>) e são en­cer­ra­dos com uma tag de fe­cha­mento (</>). O conteúdo ou área em que o elemento é aplicado fica disposta entre essas tags. A tag de abertura informa ao navegador o que fazer com o conteúdo, enquanto a tag de fe­cha­mento sinaliza o término dessas ins­tru­ções. Portanto, elementos HTML ajudam a formatar, es­tru­tu­rar e exibir o conteúdo.

Hos­pe­da­gem que se adapta às suas ambições
  • Fique online com 99,99% de tempo de atividade e segurança robusta
  • Aumente o de­sem­pe­nho com um clique à medida que o tráfego cresce
  • Inclui domínio gratuito, SSL, e-mail e suporte 24 horas por dia, 7 dias por semana

Como elementos HTML são es­tru­tu­ra­dos?

A maioria dos elementos HTML segue um padrão de estrutura simples. Veja a sintaxe básica:

<tag>Este é o conteúdo ou a área em que o elemento se aplica.</tag>
html

A tag de abertura <tag> es­pe­ci­fica o tipo do elemento. Em seguida, vem o conteúdo ou a área em que ele se aplica, seguido pela tag de fe­cha­mento </tag>.

Qual é a diferença entre elementos HTML e tags HTML?

Tags HTML fazem parte dos elementos HTML e são es­sen­ci­ais para sua im­ple­men­ta­ção. A tag de abertura marca o início do elemento, e a tag de fe­cha­mento sinaliza onde ele termina. O conjunto dessas tags, junto com seu conteúdo, forma um elemento HTML.

Exemplos de elementos HTML

O exemplo a seguir mostra como os elementos HTML funcionam. Adi­ci­o­na­mos elementos HTML in­cor­po­ra­dos para de­mons­trar­mos como do­cu­men­tos HTML usam ani­nha­mento (nesting) para criar uma estrutura hi­e­rár­quica. Neste exemplo, usamos quatro elementos HTML: <html>, body,<h1> e <p>:

<!DOCTYPE html>
<html>
<body>
<h1>Isso é um título.</h1>
<p>Isso é um parágrafo.</p>
</body>
</html>
html

Abaixo da de­cla­ra­ção <!DOCTYPE>, temos o elemento <html>. Ele define o tipo do documento como HTML. Esse elemento serve como uma base que abrange todos os outros elementos pos­te­ri­o­res. Depois, temos o elemento <body>, que apresenta o conteúdo da página que fica visível aos usuários. Dentro de “body” está o elemento <h1>. Ele informa ao navegador que o conteúdo deve ser tratado como um título HTML de alto nível. Esse elemento é seguido por <p>, que sinaliza um parágrafo de texto.

O que são elementos HTML vazios?

Existem elementos HTML que não possuem conteúdo interno e não precisam de uma tag de fe­cha­mento. Esses são chamados de elementos vazios. Um bom exemplo são as quebras de linha em HTML. Para im­ple­men­tar uma quebra de linha, basta inserir a tag de abertura <br>. Veja um exemplo:

<!DOCTYPE html>
<html>
<body>
<p>Isso é um parágrafo <br>
    com uma quebra de linha.</p>
</body>
</html>
html

Tabela: Elementos HTML mais im­por­tan­tes

Diversos elementos HTML estão dis­po­ní­veis nessa linguagem de marcação. Estes são alguns dos mais im­por­tan­tes:

Elemento HTML Descrição
<html> Define o tipo do documento como HTML
<head> Abriga as in­for­ma­ções que não são exibidas no navegador
<title> Es­pe­ci­fica o título da página
<base> Es­pe­ci­fica o URL base
<body> Abriga todo o conteúdo que será exibido no navegador
<h1>, <h2>, <h3>… Indica um título
<p> Marca uma seção do conteúdo
<ul> Inicia uma lista não ordenada
<ol> Define uma lista ordenada (numerada)
Ir para o menu principal