ELEMENTOS HTML

Cabeçalhos

Há seis níveis de cabeçalhos em HTML, de <h1> a <h6>, que servem para colocar títulos e subtítulos nas páginas web, conforme apresentado nos exemplos abaixo (h de head = cabeçalho):

<h1>Leal em nível 1 </h1>

<h2>Leal em nível 2 </h2>

<h3>Leal em nível 3 </h3>

<h4>Leal em nível 4 </h4>

<h5>Leal em nível 5 </h5>

<h6>Leal em nível 6 </h6>

Separadores em HTML

Em páginas HTML, a forma como o código é escrito (com quebras de linha ou “Enter”) não altera a exibição do conteúdo no navegador. Isso significa que pular linhas no código não gera, automaticamente, um espaço ou quebra na página. Para organizar e estruturar os textos, utilizamos elementos específicos chamados separadores.

Quebra de linha – <br>

Quando for necessário iniciar uma nova linha em um ponto específico do texto, utiliza-se a tag <br>.

Ela significa break row (quebra de linha).
É um elemento vazio, ou seja, não precisa de fechamento (</br> não existe).
Se usada várias vezes seguidas, cria múltiplas linhas em branco.

Observação: normalmente os navegadores já quebram linhas automaticamente conforme o tamanho da tela, então <br> só é usado quando a quebra for realmente intencional.

Parágrafos – <p>

Para separar blocos de texto, utiliza-se a tag <p> ... </p>.
Cada parágrafo cria um espaço visível antes e depois do texto, ajudando na legibilidade.

Linha horizontal – <hr>

A tag <hr> insere uma linha horizontal que funciona como um divisor visual entre seções da página.

Assim como <br>, também é um elemento vazio.
Por padrão, a linha tem 1px de espessura, mas pode ser personalizada com CSS.

Comentários em HTML

Comentários são trechos de texto que não aparecem no navegador, servindo apenas para anotações dentro do código.
São escritos assim:

No VS Code, aparecem em verde por padrão. Eles ajudam a organizar o código e não afetam o resultado final da página.

Listas em HTML

As listas são muito utilizadas em páginas web, especialmente para menus e agrupamentos de itens.

Lista não ordenada (<ul>)
Cria uma lista com marcadores (●, ○, etc.).

<ul>

</ul>

Lista ordenada (<ol>)
Cria uma lista numerada ou com letras.

<ol>

</ol>

Em ambos os casos, cada item deve ser marcado com <li> (list item).

Ligações (Links) em HTML

Links são usados para conectar páginas, arquivos, imagens ou até partes do próprio documento.
A estrutura básica é:

<a href="endereco-do-arquivo">Texto do link</a>

href: define o destino do link (uma página, arquivo, imagem etc.).
target: define onde o link será aberto. Exemplo: target="_blank" abre em uma nova aba.
Também é possível criar âncoras internas para navegar dentro da mesma página, usando id.

<a href="#secao1">Ir para a seção 1</a>

<h2 id="secao1">Seção 1</h2>

Para criar um link que abre um e-mail no HTML:

<a href="mailto:seuemail@exemplo.com">Enviar e-mail</a>

Com assunto e corpo preenchidos:

Enviar e-mail

</a>

Link oficial do WhatsApp

<a href="https://wa.me/55DDDNUMERO">Chamar no WhatsApp</a>

Substitua:

55 = código do país (Brasil)
DDD = código da sua cidade
NUMERO = número sem espaços, sem traços e sem parênteses

Exemplo:

<a href="https://wa.me/5511999998888">Falar no WhatsApp</a>

Com mensagem pronta:

<a href="https://wa.me/5511999998888? text=Olá, tudo bem, no que podemos ajudar?" target="_blank"> Enviar WhatsApp </a>

Inserção de imagens

O elemento <img> adiciona imagens na página.
Estrutura:

src: indica o caminho da imagem (local no servidor ou URL externa).
alt: fornece um texto alternativo (essencial para acessibilidade e quando a imagem não carrega).
Formatos comuns: .jpg, .png, .gif.

Se a imagem estiver na mesma pasta do arquivo HTML, basta usar o nome e a extensão:

É recomendável manter as imagens hospedadas junto ao site para evitar links quebrados.

Elemento Pai e Filho - Hierarquia

TIPOS DE TAGS: NÍVEL DE BLOCO E INLINE