Fundamentos de HTML

HTML é a língua em que a página diz o que cada pedaço é: título, parágrafo, link, imagem. Neste capítulo você monta o esqueleto válido da Oficina da Lia. Ainda quase não há CSS. O navegador já mostra texto, e isso basta para conferir a estrutura.

O que você vai aprender

• Ler tag, elemento e atributo.
• Distinguir elemento de bloco e elemento em linha.
• Aninhar elementos sem cruzar tags.
• Escolher tags pelo sentido (semântica), não pela aparência padrão.
• Fechar um documento válido: doctype, html, head e body.

Sintaxe: onde começa e onde termina

HTML quer dizer linguagem de marcação de hipertexto. Marcação: você envolve o texto com palavras-chave. Hipertexto: as páginas se ligam por links.

<p>Cadernos costurados à mão, em Olinda.</p>

O que está entre < e > é a tag. Quase sempre há um par: abertura <p> e fechamento </p>. O traço / marca o fechamento. Abertura + conteúdo + fechamento = elemento.

O navegador não desenha as tags. Ele lê o p e trata o trecho como parágrafo.

Atributos ficam na tag de abertura. href diz o destino de um link. src diz o arquivo de uma imagem. alt descreve a imagem se ela não carregar ou se a pessoa não a vê.

<a href="sobre.html">Conheça a oficina</a>
<img src="imagens/frog.jpg" alt="Sapo sobre uma superfície rochosa">

Alguns elementos não têm fechamento: img, br, meta, input. A informação vai nos atributos.

Comentários o navegador ignora:

<!-- Isto não aparece na página -->

Erro comum: escrever </p> como <p/> no meio do texto, ou esquecer aspas no atributo. O navegador tenta adivinhar e o resultado fica instável.

Pare e experimente. Copie a regra ou a tag mostrada em uma cópia do arquivo. Mude só o texto do parágrafo, salve, preveja e recarregue. Confira no editor e na página.

Bloco e em linha

Elementos de bloco empilham na vertical e ocupam a largura disponível: p, h1, ul, article, section.

Elementos em linha correm junto com o texto: a, strong, em, img.

<p>Visite a <a href="sobre.html">página sobre a oficina</a> nesta semana.</p>

O link não quebra a linha. O parágrafo sim.

Listas e tabelas têm regras próprias (li, tr, td), mas a ideia bloco versus linha já organiza a maior parte da página.

Pare e experimente. Copie o parágrafo com o link para sobre.html. Mude só o texto do link. Preveja se ele abrirá uma linha nova, recarregue e confira. Não altere o href nesta rodada.

Hierarquia

Um elemento pode viver dentro de outro. O de fora é ancestral; o de dentro é descendente. Tags não se cruzam: feche primeiro o que abriu por último.

<ul>
  <li>Encadernação</li>
  <li>Papéis coloridos</li>
</ul>

Errado: <p><strong>texto</p></strong>. Certo: <p><strong>texto</strong></p>.

Pare e experimente. Copie a lista em sobre.html. Acrescente apenas um li com “Cartões fictícios”. Preveja a quantidade de itens, recarregue e confira. Retire o item depois.

Semântica e formatação do código

strong marca importância. em marca ênfase. h1 é o título da página, não “letra grande”. Se você escolhe a tag pela cor que o navegador aplica, está invertendo o trabalho: cor é CSS.

Indente o código. Use aspas duplas nos atributos. Escreva os nomes das tags em minúsculas. Isso não muda o desenho, muda a leitura humana e evita erro.

Pare e experimente. Copie um parágrafo e envolva apenas uma palavra com strong. Preveja a aparência, recarregue e confira. Depois explique por que essa palavra tem importância; se for só enfeite, restaure.

Documento válido

Um recorte <p>Oi</p> ajuda a estudar. Uma página precisa de envelope:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Oficina da Lia</title>
  </head>
  <body>
    <header>
      <p>Oficina da Lia</p>
    </header>
    <main>
      <h1>Ateliê de papelaria em Olinda</h1>
      <p>Cadernos, papéis e encadernação. Conteúdo fictício para estudo.</p>
    </main>
    <footer>
      <p>Olinda, PE. Apenas um exercício.</p>
    </footer>
  </body>
</html>

<!DOCTYPE html> declara HTML atual. Sem lang, leitores de tela podem pronunciar errado. Sem charset, acentos quebram. Sem viewport, o celular reduz a página.

O validador do W3C aponta erros de marcação. Use-o quando o desenho “quase” funciona e você não acha o motivo.

O exemplo deste capítulo está em 02-html-fundamentos. Abra, mude o título da aba (<title>) e confira se a aba do navegador muda — o texto da janela pode ficar igual.

Pare e experimente. Copie o documento completo para a pasta inicio. Mude só o title, preveja a mudança na aba, recarregue e confira. O título h1 deve permanecer igual.

Atividades

1. Marque no trecho <a href="sobre.html">Sobre</a> a tag, o atributo e o conteúdo.
2. Diga se strong é bloco ou em linha, e por quê.
3. Corrija: <p><em>Olinda</p></em>.
4. Liste três coisas que vivem no head e duas que vivem no body.

Respostas comentadas

1. Tag a (par de abertura e fechamento). Atributo href com valor sobre.html. Conteúdo: a palavra Sobre.
2. Em linha: ele envolve poucas palavras dentro de um parágrafo e não empilha uma faixa inteira.
3. Fechar em antes de p: <p><em>Olinda</em></p>.
4. Head: charset, viewport, title (também link para CSS). Body: o que a pessoa lê, como h1 e p.

O arquivo completo

Referência do exemplo 02-html-fundamentos, reproduzida aqui para que você possa conferir sem sair da página.

index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Oficina da Lia</title>
  
<style>img,input,select,textarea{max-width:100%;height:auto}fieldset{min-width:0}:focus-visible{outline:3px solid #005fcc;outline-offset:3px}body{overflow-wrap:anywhere}</style></head>
<body>
  <a class="saltar" href="#conteudo">Saltar para o conteúdo</a>
  <header class="topo">
    <p class="marca"><a href="index.html">Oficina da Lia</a></p>
    <nav aria-label="Principal">
      <ul class="menu">
        <li><a href="index.html" aria-current="page">Início</a></li>
        <li><a href="sobre.html">Sobre</a></li>
        <li><a href="contato.html">Contato</a></li>
      </ul>
    </nav>
  </header>
  <main id="conteudo" tabindex="-1"><h1>Oficina da Lia</h1><p>Atelie ficticio de papelaria em Olinda.</p><h2>O que fazemos</h2><ul><li>Encadernacao</li><li>Papeis coloridos</li><li>Kits de carta</li></ul></main>
  <footer>
    <p>Oficina da Lia — Olinda, PE. Conteúdo fictício para estudo. Não publique estes arquivos.</p>
  </footer>
</body>
</html>