HTML – 23/02/2026

Por /

Estrutura Básica de um Documento HTML

Resultado:

Explicação das partes:

<!DOCTYPE html>

  • Informa ao navegador que o documento está usando HTML5.

<html>

  • É a raiz do documento.
  • Todo o conteúdo da página fica dentro dessa tag.
  • O atributo lang="pt-br" indica o idioma da página.

<head>

  • Contém informações sobre a página, mas que não aparecem diretamente no conteúdo visível.
  • Inclui metadados, título, links para CSS, scripts etc.

<body>

  • Contém todo o conteúdo visível da página (textos, imagens, vídeos, links etc.).

<title>

  • Fica dentro do <head>.
  • Define o título da aba do navegador.
  • Também é usado por mecanismos de busca (Google).

Tags de Título: <h1> até <h6>

As tags h1 a h6 são usadas para títulos e subtítulos.

  • <h1>Título Principal</h1>
  • <h2>Subtítulo</h2>
  • <h3>Subseção</h3>
  • <h4>Subnível</h4>
  • <h5>Detalhamento</h5>
  • <h6>Menor nível de título</h6>

📊 Hierarquia

  • <h1> → Título mais importante
  • <h2> → Subtítulo do h1
  • <h3> → Subtítulo do h2
  • <h4> → E assim por diante…
  • <h6> → Menor nível hierárquico

Representam importância, não apenas tamanho de fonte.

O que é lang="pt-br"?

<html lang="pt-br">
  • lang é um atributo.
  • Ele indica o idioma principal da página.
  • pt-br significa Português do Brasil.

✅ Para que serve?

  • Ajuda leitores de tela (acessibilidade).
  • Ajuda mecanismos de busca (SEO).
  • Ajuda o navegador a aplicar regras corretas de idioma.

O que é charset="UTF-8"?

<meta charset="UTF-8">
  • charset é um atributo.
  • Ele define o conjunto de caracteres que a página usa.
  • UTF-8 permite usar acentos, símbolos e caracteres especiais.

✅ Por que usar UTF-8?

Porque ele suporta praticamente todos os idiomas.

Que tipo de elemento é <meta>?

<meta charset="UTF-8">
  • <meta> é uma tag HTML vazia (self-closing).
  • Ela fica dentro do <head>.
  • Serve para fornecer metadados (informações sobre o documento).

PARÁGRAFO

<p> — Parágrafo

<p>Este é um parágrafo.</p>
  • Um elemento de bloco.
  • Usado para representar parágrafos de texto.
  • Sempre começa em uma nova linha.
  • Possui espaçamento automático antes e depois.
<p>Este é um parágrafo.</p>

Este é um parágrafo

<p>Este é um texto em <b>negrito</b>.</p>

Este é um parágrafo em negrito

<p>Este é um texto <strong>muito importante</strong>.</p>

Este é um texto muito importante.

<p>Este é um texto em <i>itálico</i>.</p>

Este é um texto em itálico.

<p>2<sup>3</sup> = 8</p>
<p>Fórmula da água: H<sub>2</sub>O</p>

23 = 8

Fórmula da água: H2O

<p>O valor do produto é <ins>R$ 100,00</ins>.</p>

O valor do produto é R$ 100,00.

<p>De <del>R$ 150,00</del> por R$ 100,00.</p>

De R$ 150,00 por R$ 100,00.

<p>Este é um texto <mark>destacado</mark>.</p>

Este é um texto destacado.

<br> — Quebra de linha

A tag <br> (break line) serve para quebrar a linha, como se você apertasse Enter no teclado.

Ela é uma tag vazia (não precisa de fechamento).

<p>
Rua das Flores, 123<br>
Centro<br>
São Paulo - SP
</p>

Rua das Flores, 123
Centro
São Paulo – SP

<hr> — Linha horizontal

A tag <hr> (horizontal rule) cria uma linha horizontal que normalmente indica separação de conteúdo.

Também é uma tag vazia.

<h2>Capítulo 1</h2>
<p>Texto do primeiro capítulo.</p>

<hr>

<h2>Capítulo 2</h2>
<p>Texto do segundo capítulo.</p>

Capítulo 1

Texto do primeiro capítulo.

Capítulo 2

Texto do segundo capítulo.

ATIVIDADE

No seu caderno, crie uma sobre você página utilizando a linguagem HTML. Sua página deverá conter os seguintes parágrafos:

  • Nome
  • Idade
  • Hobbies
  • Uma frase favorita
  • Uma curiosidade sobre si

Utilize as todas as TAGs abaixo para criar sua página:

Sua página deve conter:

  • <html>
  • <head>
  • <title>
  • <body>
  • <h1> (título principal)
  • <h2> (subtítulo)
  • <p> (parágrafo)
  • <br>
  • <hr>
  • <strong> ou <b>
  • <em> ou <i>
  • <mark>
  • <del>
  • <ins>

Exemplo de uma página criada:

Rolar para cima