Conceitos de HTML — Lucilia's Notebook

O que é HTML?

🏗️ A estrutura de toda página web

HTML não é uma linguagem de programação — é uma linguagem de marcação. Ela define a estrutura e o significado do conteúdo de uma página web. Pense nela como o esqueleto de uma página: o CSS é a roupa e o JavaScript é o movimento.

🦴 HTML

Estrutura e conteúdo. Define o que cada coisa é — título, parágrafo, imagem, link.

👗 CSS

Aparência e estilo. Define como cada coisa parece — cores, tamanhos, fontes, layout.

⚡ JavaScript

Comportamento e interação. Define o que acontece quando o usuário age — cliques, animações, dados.

Anatomia de um elemento HTML

<p class="destaque">Olá, mundo!</p>

Tag de abertura: <p>

Atributo: class="destaque"

Conteúdo: Olá, mundo!

Tag de fechamento: </p>

🚫 Elementos void (sem fechamento)

Alguns elementos não têm tag de fechamento porque não envolvem conteúdo. São chamados de void elements.

<img> — imagem
<br> — quebra de linha
<input> — campo de entrada
<hr> — linha horizontal
<meta> — metadado
<link> — link externo

🏷️ Atributos

Atributos fornecem informação adicional aos elementos. Sempre ficam na tag de abertura no formato nome="valor".

class — categoria para CSS/JS
id — identificador único
href — destino de um link
src — caminho de imagem
alt — texto alternativo
style — CSS inline

Estrutura básica de uma página HTML

📄 O esqueleto obrigatório

Todo documento HTML válido precisa dessa estrutura base. Cada parte tem uma função específica que o browser usa para processar a página corretamente.

<!-- Declaração do tipo de documento -->
<!DOCTYPE html>

<!-- Elemento raiz, define o idioma -->
<html lang="pt-BR">

  <!-- Cabeçalho: informações para o browser -->
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Título da Página</title>
    <link rel="stylesheet" href="style.css"/>
  </head>

  <!-- Corpo: o que o usuário vê -->
  <body>
    <h1>Olá, mundo!</h1>
    <p>Minha primeira página web.</p>
  </body>

</html>

Tags essenciais — as mais usadas

Títulos

Hierarquia de títulos. H1 é o mais importante (um por página), H6 o menor. Importantíssimos para SEO e acessibilidade.

<p>

Parágrafo

Define um bloco de texto. O browser adiciona espaço automaticamente entre parágrafos.

<a>

Link (âncora)

Cria um hiperlink. O atributo href define o destino. Pode abrir em nova aba com target="_blank".

<img>

Imagem

Insere uma imagem. Sempre use o atributo alt para acessibilidade.

Listas

<ul> = lista não ordenada (bolinhas). <ol> = numerada. <li> = cada item.

Contêineres genéricos

<div> agrupa blocos. <span> agrupa inline. Sem significado semântico — usados com CSS.

Formulários

Coletam dados do usuário. <input type="text">, email, password, checkbox, radio...

Ênfase

<strong> = negrito com significado (importante). <em> = itálico com significado (ênfase).

HTML semântico — o HTML do HTML5

💡 Por que usar tags semânticas?

Tags semânticas dizem ao browser (e aos motores de busca e leitores de tela) o que aquele conteúdo significa, não só como ele parece. Usar <nav> em vez de <div id="nav"> ajuda no SEO, na acessibilidade e na legibilidade do código.

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

<nav>

Menu de navegação

<main>

Conteúdo principal da página

Seção temática do conteúdo

Conteúdo independente (post, notícia)

<aside>

Conteúdo lateral relacionado

Rodapé da página ou seção

Imagem com legenda

<time>

Data ou hora

<!-- ❌ Sem semântica -->
<div class="cabecalho">
  <div class="menu">...</div>
</div>

<!-- ✅ Com semântica -->
<header>
  <nav>...</nav>
</header>