Pular para o conteúdo
murad.guide

Introdução Completa à Web

Capítulo 2

Tags HTML

7 min de leitura 1.324 palavras 2 gravuras

Este capítulo ensina a unidade básica do HTML: a tag. Você vai abrir, fechar e aninhar tags na página da Casa da Restinga, cafeteria fictícia em Natal. Este volume tem 23 capítulos. Hoje o site ainda fica com a aparência padrão do navegador. Isso é esperado.

O exemplo está em exemplos/02-tags/. Copie a pasta. Abra index.html no editor e no navegador. O arquivo no disco não é a página. A janela só atualiza depois que você salva e recarrega.

Trabalhe na cópia inicio da etapa. Leia e digite o código; mude uma coisa. Antes de recarregar, anote sua previsão. Depois confira com a referência completa. Se nada mudar, confira o arquivo salvo e o caminho aberto. Blocos adicionais do capítulo podem ser digitados no console; o exemplo completo mostra a aplicação daquela etapa.

O que você vai aprender

HTML marca, não programa

HTML é linguagem de marcação. Ela descreve o papel de cada pedaço: título, parágrafo, lista. Não é um programa. Você não “executa” HTML. O navegador lê o arquivo e monta o documento.

O texto da Casa da Restinga já existiria num caderno. A tag diz o que aquele texto é na página. Sem tag, o navegador não sabe o que é título e o que é miolo.

CSS e JavaScript entram depois. Sem eles a página continua sendo um documento. Feia, talvez. Ainda assim um documento.

Leia este capítulo. Copie o exemplo. Mude uma coisa. Preveja. Recarregue. Confira.

O arquivo no disco é texto. A página no navegador é o documento montado. Se você mudar o HTML e não salvar, a janela permanece. F5 lê de novo o que está gravado.

127.0.0.1 só entrega essa pasta nesta máquina. Publicar o h1 da Casa viria depois, e não é o assunto de hoje.

Abertura, fechamento e conteúdo

Uma tag de abertura começa com < e termina com >. A de fechamento traz uma barra depois do <. O conteúdo fica no meio.

<h1>Casa da Restinga</h1>

<h1> abre. Casa da Restinga é o conteúdo. </h1> fecha. O navegador trata esse trecho como o assunto da página.

A tag descreve o que está dentro. h1 é heading, o título principal. O navegador deixa o texto maior e mais grosso. Isso é só o visual padrão. O papel importa mais: leitor de tela e buscador usam o h1 para achar o assunto.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Casa da Restinga</title>
  </head>
  <body>
    <h1>Casa da Restinga</h1>
    <p>Café, bolo de caju e a brisa da duna.</p>
  </body>
</html>

p marca um parágrafo. O fechamento </p> encerra aquele bloco de texto.

Tag de abertura, conteúdo e tag de fechamento

Pare e experimente. No exemplo, apague só o </h1>. Salve. Preveja: o título deve “engolir” o parágrafo. Recarregue. Recoloque o fechamento.

O nome da tag não leva espaço: <h1> vale, < h1> não. Maiúsculas no nome costumam funcionar, mas neste volume escrevemos minúsculas: h1, p, div.

O conteúdo pode ter outra tag dentro, desde que a de dentro feche antes. Isso é o aninhamento do capítulo 4.

Tags vazias

Algumas tags não envolvem conteúdo. Elas abrem e encerram no mesmo ponto. Chamamos de tags vazias ou void.

img e input são assim. Não existe </img> neste volume. A informação vai em atributos, na próximo capítulo.

Você pode escrever <input> ou <input />. Os dois valem. A barra final é opcional. O importante é não inventar um fechamento que a tag não tem.

<img src="fachada.png" alt="Fachada de madeira da Casa da Restinga.">
<input type="text">

br também é vazia. Ela força uma quebra de linha. Neste volume preferimos outro p quando o assunto muda. O capítulo 3 volta nisso.

Erro comum: escrever </img> ou esquecer de fechar um h1. O navegador tenta adivinhar. O resultado muda de um navegador para outro.

meta no head também é vazia. Você já a viu no esqueleto do capítulo 1. charset e viewport não envolvem texto visível. Por isso não há </meta>.

Não misture os dois tipos. p sempre fecha. img nunca fecha com par. Se o editor reclamar de um </p> faltando, acredite nele e feche.

Ordem de nidificação

A tag aberta por último fecha primeiro. Pense em caixas: a caixa de dentro fecha antes da de fora.

Correto:

<div>
  <h1>Cardápio da manhã</h1>
</div>

Incorreto:

<div>
  <h1>Cardápio da manhã
</div>
</h1>

No segundo bloco, o div fecha antes do h1. A árvore quebra. O navegador pode “consertar” à força. O documento fica difícil de ler e de estilizar depois.

Indentação não é obrigatória para o navegador. Ela é para você. Dois espaços por nível bastam neste volume.

Pare e experimente. No exemplo, inverta de propósito o fechamento de um div e um p. Recarregue. O visual pode até “parecer” igual. No editor, o aninhamento fica errado. Desfaça. Conferir o código importa tanto quanto olhar a janela.

Um div pode ter vários filhos, um depois do outro. Todos fecham antes do </div>. Não abra um segundo h1 dentro do primeiro. Cada título é um par próprio.

<div>
  <h1>Casa da Restinga</h1>
  <p>Cafeteria fictícia em Natal.</p>
</div>

Esse bloco é um pacote: título e parágrafo viajam juntos. O capítulo 5 dá nome a pacotes assim.

O papel da tag, não o tamanho

h1 não é “texto grande”. É o assunto desta página. Uma página tem um h1. Subtítulos usam h2, depois h3. Não pule nível só porque o h3 “parece menor”. Tamanho é trabalho do CSS, a partir do capítulo 7.

Leitor de tela usa a árvore de títulos para pular seções. Buscador também lê esses nomes. Trocar h1 por p com letra enorme tira essa pista.

O arquivo no disco guarda as tags. A página no navegador mostra o resultado. 127.0.0.1 só entrega essa pasta nesta máquina. Nada disso publica o site.

Início da referência desta etapa no navegador local

Pare e experimente. Troque o h1 por um p. Recarregue. A letra deve encolher. O assunto some da árvore de títulos. Recoloque o h1.

O primeiro bloco da cafeteria

Junte o que viu. O body da Casa hoje pode ficar assim:

<body>
  <h1>Casa da Restinga</h1>
  <p>Cafeteria fictícia em Natal.</p>
  <p>Abrimos cedo, perto da vegetação de restinga.</p>
</body>

Dois parágrafos, dois p. Não junte os dois assuntos com um br no meio.

O ciclo continua: ler → copiar → mudar uma coisa → prever → recarregar → conferir. Mude só o segundo parágrafo. A aba e o h1 devem permanecer.

Se a janela não mudar, o arquivo aberto não é o que você editou. Confira o caminho. Recarregue com F5. Abrir com dois cliques usa file://. Servir em 127.0.0.1 também é só estudo.

Quando abertura, fechamento e ordem estiverem estáveis, avance. O capítulo 3 apresenta os tipos de tag do dia a dia.

Antes de sair, abra o exemplo no editor e na janela de novo. Conte os pares: html, head, body, h1, cada p. Cada abertura visível deve ter fechamento, salvo meta e, se houver, img.

Se o texto da Casa aparecer com tags na tela, o arquivo provavelmente virou .txt. Volte à capítulo 1 e confira a extensão.

Salve. Preveja. Recarregue. Se o h1 e o p estiverem visíveis, sem as tags na tela, este capítulo fechou.

Atividades

  1. Qual a diferença entre a tag de abertura e a de fechamento?
  2. Por que h1 não deve ser usado só para “ficar grande”?
  3. O que acontece se você fechar o pai antes do filho?
  4. No exemplo 02-tags, o img tem tag de fechamento? Por quê?

Respostas comentadas

  1. A abertura usa o nome entre < e >. A de fechamento coloca / depois do <. O conteúdo fica entre as duas, salvo nas tags vazias.
  2. h1 marca o assunto da página. Leitor de tela e buscador usam esse papel. Tamanho é CSS.
  3. A árvore quebra. O navegador tenta adivinhar o fechamento. O documento fica frágil.
  4. Não. img é tag vazia. A informação vai em atributos, não num conteúdo entre tags.

Referências

O arquivo completo

Referência do exemplo 02-tags, 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 content="width=device-width, initial-scale=1" name="viewport"/>
<title>Tags HTML — Casa da Restinga</title>
<style>body{overflow-wrap:anywhere}img,input,textarea,select{max-width:100%}img{height:auto}fieldset,main{min-width:0}pre{max-width:100%;overflow:auto}:focus-visible{outline:3px solid #005fcc;outline-offset:3px}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}</style></head>
<body>
<a class="skip" href="#conteudo">Pular para o conteúdo</a>
<header>
<div class="wrap">
<a class="brand" href="index.html">Casa da Restinga</a>
<nav aria-label="Principal">
<ul>
<li><a aria-current="page" href="index.html">Início</a></li>
<li><a href="sobre.html">Sobre</a></li>
</ul>
</nav>
</div>
</header>
<main class="wrap" id="conteudo" tabindex="-1">
<h1>Casa da Restinga</h1>
<p>Cafeteria fictícia em Natal. Esta é a etapa 02.</p>
<p><a href="#">Link de estudo</a></p>
</main>
<footer>
<div class="wrap">
<p>Casa da Restinga — Natal. Conteúdo fictício. Nada é enviado a um servidor.</p>
</div>
</footer>
</body>
</html>

assets/stylesheets/main.css

*,
*::before,
*::after { box-sizing: border-box; }
html, body, h1, h2, h3, p, ul { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; }
body {
  font-family: "Segoe UI", Tahoma, sans-serif;
  line-height: 1.5;
  color: #1a2a2c;
  background: #f7f3ea;
}
a { color: #0d5c63; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid #c45c26;
  outline-offset: 3px;
}
.skip { position: absolute; left: -999px; }
.skip:focus { left: 0.5rem; top: 0.5rem; background: #fff; padding: 0.4rem 0.7rem; z-index: 2; }
.wrap { width: min(44rem, calc(100% - 2rem)); margin-inline: auto; }
header { background: #0d5c63; color: #fff; padding: 1rem 0; }
header a { color: #fff; }
.brand { font-weight: 700; text-decoration: none; }
nav ul { list-style: none; display: flex; gap: 1rem; margin-top: 0.5rem; }
nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.2em; }
main { padding: 1.5rem 0 3rem; }
footer { border-top: 1px solid #ddd4c4; padding: 1rem 0; font-size: 0.95rem; }
article { margin: 1.25rem 0; padding-bottom: 1rem; border-bottom: 1px solid #ddd4c4; }