Tags e elementos

Um elemento costuma ser três coisas em sequência: uma tag de abertura, um conteúdo e uma tag de fechamento com uma barra.

As partes de um elemento

Veja <p>Bread is ready.</p>. A tag de abertura <p> diz que um parágrafo começa aqui. A tag de fechamento </p>, com uma barra depois do primeiro sinal de menor, diz que ele termina. Tudo o que fica entre elas é o conteúdo. O conjunto todo, tags mais conteúdo, é o elemento. Muita gente diz tag quando quer dizer elemento, e numa conversa tudo bem, mas a diferença ajuda na hora de ler a documentação: a tag é o pedaço entre os sinais de menor e maior; o elemento é a peça pronta da página.

Atributos acrescentam detalhes

Uma tag de abertura pode levar atributos, configurações extras escritas como name="value". Em <a href="menu.html">Menu</a>, o atributo href diz para onde o link vai. Em <html lang="en">, o atributo lang informa o idioma. Coloque o valor entre aspas duplas; o padrão aceita alguns valores sem aspas, mas as aspas nunca dão problema. Vários atributos são separados por espaços, e a ordem não importa. Alguns atributos, como required num campo de formulário, são booleanos: basta escrever o nome para ativá-los.

<p class="note" id="opening">We open at <strong>7 am</strong>.</p>

Aninhamento: feche na ordem inversa

Elementos vão dentro de outros elementos. No exemplo acima, <strong> fica dentro de <p>. A regra é a mesma dos parênteses na aritmética: o que abriu por último fecha primeiro. <p><strong>7 am</p></strong> está errado porque o parágrafo fecha enquanto o elemento strong ainda está aberto. Os navegadores vão tentar adivinhar o que você quis dizer, mas erros diferentes levam a palpites diferentes. Recuar os elementos filhos em dois espaços, como fazem os exemplos deste curso, deixa o aninhamento fácil de ver.

Elementos vazios

Alguns elementos não podem ter conteúdo, então não têm tag de fechamento. Eles se chamam elementos vazios (void elements). Os mais comuns são <br> (quebra de linha), <hr> (quebra temática), <img>, <input>, <meta> e <link>. Você pode vê-los escritos com uma barra, como <br />; em HTML a barra é permitida e ignorada, então as duas formas funcionam.

Significado, não aparência

Dentro de um parágrafo, você pode marcar palavras com <strong> para indicar grande importância e com <em> para dar ênfase, aquela que muda o jeito de falar a frase. Os navegadores mostram strong em negrito e em em itálico, mas o que importa é o significado. Um leitor de tela pode lê-los com outra entonação, e um buscador os trata como palavras importantes. Se você só quer negrito como enfeite, isso é trabalho do CSS. <b> e <i> ainda existem para textos destacados sem importância extra, como o nome de um navio ou uma palavra estrangeira.

Caracteres especiais e comentários

Como < abre uma tag, você não pode digitá-lo como texto comum. Escreva uma referência de caractere: < para menor que, > para maior que e & para o próprio e comercial. Um comentário, <!-- like this -->, é ignorado pelo navegador e serve para anotações suas. Por fim, o HTML junta os espaços em branco: dez espaços ou três quebras de linha no arquivo aparecem como um único espaço. O layout vem dos elementos e do CSS, não de apertar a barra de espaço.