📘 Aula 1: Estrutura Básica do HTML 📘

Início da sua jornada no Front-End...

1. Declaração do tipo de documento

A primeira linha do HTML é a declaração do tipo de documento:

<!DOCTYPE html>

Ela indica ao navegador que este documento é HTML5.

2. Tag <html>

A tag <html> envolve todo o conteúdo da página. Dentro dela, encontramos duas seções principais: <head> e <body>.

3. Tag <head>

O <head> contém informações importantes para o navegador e motores de busca, como:

<title>: título da página que aparece na aba do navegador.
<meta charset="UTF-8">: define a codificação de caracteres.
<meta name="viewport">: define como a página será exibida em dispositivos móveis.

4. Tag <body>

O <body> contém todo o conteúdo visível da página: textos, imagens, links, tabelas e tudo que o usuário vê.

5. Estrutura mínima completa de um HTML

Exemplo do HTML básico com comentários explicativos:


<!DOCTYPE html> <!-- Identificação HTML5 -->
<html lang="pt-br"> <!-- Abrindo HTML e definindo idioma -->
<head> <!-- Cabeçalho da página -->
    <meta charset="UTF-8"> <!-- Conjunto de caracteres -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Responsividade -->
    <title>Meu título</title> <!-- Título da aba -->
</head> <!-- Fechando cabeçalho -->
<body> <!-- Corpo da página -->
<h1>Olá, mundo! Obrigado por estar aqui.</h1> <!-- Título principal visível -->
<p>Este é um parágrafo de exemplo.</p> <!-- Parágrafo de Exemplo -->
</body> <!-- Fechando corpo -->
</html> <!-- Fechando HTML -->

Exemplo Visual da Estrutura HTML acima.

Olá, mundo! Obrigado por estar aqui.

Este é um parágrafo de exemplo.

6. Resumo

Estrutura básica do HTML:

<!DOCTYPE html>: define HTML5
<html>: envolve todo o documento
<head>: informações da página (meta, title, links de CSS, scripts)
<body>: conteúdo visível para o usuário

Seguindo essa estrutura, sua página será compreendida corretamente pelo navegador e organizada para manutenção futura.