Atributos

Este capítulo ensina o que fica dentro da tag de abertura. Um atributo muda o comportamento ou identifica o elemento. O palco continua sendo a Casa da Restinga, cafeteria fictícia em Natal. Este volume tem 23 capítulos. O exemplo está em exemplos/04-atributos/.

Leia. Copie a pasta. Mude uma coisa. Preveja. Recarregue. Confira. O arquivo no disco guarda o atributo. A página só muda depois do recarregar.

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

• Ler nome e valor de um atributo.
• Usar href no link e type no campo.
• Marcar grupos com class.
• Reservar id para um único elemento.
• Distinguir atributo específico de atributo universal.

Nome, valor e aspas

O atributo vive na tag de abertura. O nome vem primeiro. O valor fica entre aspas depois do =.

<html lang="pt-BR">

Aqui o nome é lang. O valor é pt-BR. Sem esse par, o navegador não sabe o idioma da página.

Atributos não se inventam em qualquer tag. href faz sentido em a. Em div, href não vira link.

<!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><a href="sobre.html">Sobre a casa</a></p>
  </body>
</html>

Pare e experimente. Tire as aspas de lang="pt-BR" e deixe lang=pt-BR. Recarregue. Pode até funcionar neste caso simples. Não confie nisso. Neste volume o valor sempre vai entre aspas.

Vários atributos na mesma tag se separam por espaço. A ordem entre eles quase não importa. A tag continua sendo a primeira palavra depois do <.

<img src="balcao.png" alt="Balcão de madeira." width="800" height="500">

width e height avisam o tamanho e reduzem o pulo do layout. Não substituem o CSS. O alt continua obrigatório quando a foto informa.

href e type

href diz para onde o link leva. Caminho relativo aponta para um arquivo da pasta: sobre.html. Caminho da web começa com https://. Âncora na mesma página começa com #.

<a href="sobre.html">Sobre a casa</a>
<a href="#cardapio">Ir ao cardápio</a>

O texto do link deve fazer sentido sozinho. Evite “clique aqui”. Prefira “Sobre a casa”.

type no input muda o controle. Sem type, o padrão é texto.

<input type="text">
<input type="number">
<input type="checkbox">

type no button também importa. submit envia o formulário. button só desenha o botão, sem envio. Neste volume, evite envio real.

Erro comum: escrever href num div e esperar um link. O atributo não troca o tipo da tag. Link é a.

Caminho relativo parte do arquivo atual. sobre.html é o vizinho. imagens/balcao.png entra na pasta imagens. ../ sobe um nível. Maiúsculas importam no servidor.

O ciclo: ler → copiar → mudar uma coisa → prever → recarregar → conferir. Mude só o type de um input para number. Recarregue. O controle deve recusar letra em alguns navegadores. Volte para text se quiser o campo livre.

Classe: um rótulo reutilizável

class nomeia um grupo. Vários elementos podem ter a mesma classe. O CSS, no capítulo 7, escolhe esse grupo. O JavaScript também pode achá-lo depois.

<h2 class="destaque">Bolo de caju</h2>
<p class="destaque">Sai quente às sete.</p>

No HTML o nome vai sem ponto: class="destaque". No CSS o ponto entra: .destaque. Não misture os dois jeitos.

Um elemento pode ter várias classes, separadas por espaço.

<p class="destaque aviso">Última fatia da manhã.</p>

Classe não muda o visual sozinha. Sem CSS, os dois parágrafos continuam iguais na janela. O rótulo já está no disco, pronto para a folha de estilos.

Pare e experimente. Acrescente class="destaque" a um parágrafo que ainda não tinha classe. Recarregue. Nada deve mudar no visual hoje. O HTML, no editor, deve mostrar o atributo. Isso prova que classe ainda não é estilo.

id: um só na página

id identifica um único elemento. Não repita o mesmo id na página. O skip-link e a âncora usam id como destino.

<main id="conteudo">
  <h2 id="cardapio">Cardápio da manhã</h2>
</main>

href="#conteudo" procura id="conteudo". O # fica no link, não no atributo id.

Prefira class para estilo. Use id quando o destino precisa ser único: o main, um trecho do cardápio, um alvo de script mais adiante.

Pare e experimente. Duplique id="conteudo" em dois elementos. Recarregue. Clique num link #conteudo. O salto fica imprevisível. Deixe um id só.

Específico versus universal

href é específico: nasceu para o link. type no input também é específico. src e alt pertencem à imagem.

class, id, lang e hidden são universais. Quase toda tag pode recebê-los.

<img class="foto-post" src="balcao.png" alt="Balcão com xícaras.">
<p class="foto-legenda">O balcão às sete da manhã.</p>

alt não é enfeite. Descreve a cena. Sem alt, quem não vê a foto perde a informação.

lang na tag html vale para a página inteira. Um trecho em outro idioma pode ter o próprio lang. Neste volume, o texto é pt-BR.

O arquivo no disco guarda esses pares. A página no navegador usa alguns na hora (href, src) e deixa outros para CSS e script. Teste em file:// ou 127.0.0.1. Nenhum dos dois publica.

Atributos na página da Casa

Junte o que viu num recorte da home:

<header>
  <p><a href="index.html">Casa da Restinga</a></p>
  <nav aria-label="Principal">
    <ul>
      <li><a href="index.html">Início</a></li>
      <li><a href="sobre.html">Sobre</a></li>
    </ul>
  </nav>
</header>
<main id="conteudo">
  <h1>Casa da Restinga</h1>
  <article class="post">
    <h2 class="titulo-post">O espresso das sete</h2>
    <p class="meta">Iara Dantas · 12 de março</p>
    <p>A primeira xícara sai curta, com cheiro de torrada nova.</p>
  </article>
</main>

aria-label nomeia o menu para o leitor de tela. class="post" agrupa o que vai se repetir no blog.

O ciclo: ler → copiar → mudar uma coisa → prever → recarregar → conferir. Mude só o href de Sobre para um nome de arquivo que não existe. Recarregue. O clique deve falhar. Restaure sobre.html.

Erro comum: pôr ponto na classe do HTML, class=".post". O CSS então não acha o grupo. O ponto fica só no seletor.

Abrir com dois cliques usa file://. Servir em 127.0.0.1 entrega a mesma pasta. O href relativo funciona nos dois se o vizinho existir. Publicar exigiria colocar os dois arquivos num endereço público. Este volume não pede isso agora.

aria-label não aparece na tela para quem vê. Aparece para o leitor de tela. Não substitua o texto visível do link por um rótulo vazio.

Atividades

1. O que href faz no a, e o que acontece se você colocá-lo num div?
2. Qual a diferença entre class e id?
3. Onde entra o ponto: no HTML ou no CSS?
4. No exemplo 04-atributos, qual id o skip-link (ou o link interno) procura?

Respostas comentadas

1. href aponta o destino do link. Num div, o atributo não cria um link. A tag continua sendo uma caixa.
2. class é reutilizável. id é único na página. Estilo prefere classe. Âncora e alvo único usam id.
3. O ponto entra no seletor CSS (.post). No HTML o atributo é class="post", sem ponto.
4. O destino combinado com o href que começa com #, em geral conteudo. Confira o id no main do exemplo.

Referências

• Atributos HTML
• Atributo class
• Atributo id
• Elemento a

O arquivo completo

Referência do exemplo 04-atributos, 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>Atributos — 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 04.</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; }