🏗️ HTML - Estrutura e Tags

🔍 Anatomia de uma Tag HTML

<h1 class="titulo" > Meu Título </h1>

⬆️ TAG DE ABERTURA | ⬆️ ATRIBUTO | ⬆️ CONTEÚDO | ⬆️ TAG DE FECHAMENTO

Componentes de uma Tag:

🏷️ Nome da Tag

Define o tipo de elemento: h1, p, div, img, etc.

⚙️ Atributos (opcionais)

Configuram o comportamento: class="nome", id="id", src="imagem.jpg"

📝 Conteúdo

Texto ou outras tags HTML aninhadas

🔒 Tag de Fechamento

Marca o fim do elemento (algumas tags são auto-fechadas)

⚠️ Importante: Tags devem ser sempre fechadas na ordem correta. Se você abrir <div><p>, deve fechar </p></div>. Isso se chama "aninhamento correto".

📋 Estrutura Mínima HTML5

<!DOCTYPE html> ← Declara HTML5 <html lang="pt-BR"> ← Elemento raiz + idioma <head> ← Metadados (não visíveis) <meta charset="UTF-8"> ← Codificação de caracteres <meta name="viewport" content="width=device-width, initial-scale=1.0"> ← Responsividade mobile <title>Título da Página</title> ← Título na aba do navegador </head> <body> ← Conteúdo visível <h1>Olá, Mundo!</h1> ← Seu conteúdo aqui </body> </html>

Cada Parte Explicada:

<!DOCTYPE html>

Função: Informa ao navegador que é HTML5
Obrigatório: Sempre na primeira linha

<html lang="pt-BR">

Função: Elemento raiz do documento
lang: Idioma para acessibilidade e SEO

<head>

Função: Metadados, CSS, JavaScript
Invisível: Não aparece na página

<meta charset="UTF-8">

Função: Suporte a acentos e caracteres especiais
Essencial: Para textos em português

<meta name="viewport">

Função: Controla zoom em dispositivos móveis
Responsivo: Fundamental para mobile

<body>

Função: Todo conteúdo visível da página
Único: Apenas um por documento

🎯 Elementos Semânticos HTML5

<header>

Cabeçalho da página ou seção

Logo, título, navegação principal

<nav>

Navegação/Menu

Links de navegação do site

<main>

Conteúdo principal

Conteúdo único da página

<section>

Seção de conteúdo

Agrupamento temático

<article>

Artigo independente

Post, notícia, produto

<aside>

Conteúdo lateral

Sidebar, anúncios, relacionados

<footer>

Rodapé

Copyright, contato, links

🚀 Vantagem dos Elementos Semânticos: Melhoram SEO (Google entende melhor), acessibilidade (leitores de tela) e organização do código!

🎨 Layout Semântico em Ação

<header> - Logo e Navegação Principal

<nav> - Menu: Início | Sobre | Contato

<main>
Conteúdo principal da página
(artigos, formulários, etc.)

<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <title>Layout Semântico</title> </head> <body> <header> <h1>Meu Site</h1> <nav> <a href="#">Início</a> <a href="#">Sobre</a> <a href="#">Contato</a> </nav> </header> <main> <section> <h2>Bem-vindos!</h2> <p>Este é o conteúdo principal.</p> </section> <article> <h3>Meu Primeiro Post</h3> <p>Conteúdo do artigo...</p> </article> </main> <aside> <h4>Links Relacionados</h4> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> </ul> </aside> <footer> <p>© 2024 - Desenvolvido por Maugus</p> </footer> </body> </html>

🔧 Tags Auto-Fechadas

/* Tags que NÃO precisam de fechamento */ <br> ← Quebra de linha <hr> ← Linha horizontal <img src="..."> ← Imagem <input type="..."> ← Campo de entrada <meta ...> ← Metadados <link ...> ← Link para CSS/Favicon /* ERRO COMUM - NÃO faça isso: */ <br></br> ← ❌ Incorreto <img></img> ← ❌ Incorreto /* CORRETO: */ <br> ← ✅ Correto <img src="foto.jpg" alt="Minha foto"> ← ✅ Correto

💡 Dica: Se a tag não tem conteúdo interno (como texto), provavelmente é auto-fechada. Exemplos: img, br, hr, input, meta, link.

🏗️ Estrutura HTML - Tags e Anatomia