Sintaxe e texto HTML

Trabalhe numa cópia da pasta inicio/ desta etapa. Ela já abre ou executa com as instruções do README. Leia o código, mude uma coisa e anote sua previsão antes de recarregar. Compare com a referência na pasta da etapa. Se nada mudar, confira a extensão do arquivo, o arquivo salvo e o caminho aberto. Blocos adicionais do capítulo são experiências separadas; a pasta de referência contém o programa completo desta etapa.

A Biblioteca da Ribeira ganha uma carta da coordenação fictícia, assinada por Lina Bezerra. Você marca títulos, listas e ênfase. O exemplo correspondente é 05-sintaxe-e-texto-html, no pacote que acompanha o volume.

Leia o index.html, copie se precisar, mude uma coisa (um item da lista ou o texto da carta), preveja, recarregue e confira. Não invente dados reais no lugar dos nomes do acervo.

O arquivo no disco é o texto marcado. A página no navegador mostra títulos e listas. 127.0.0.1 testa o documento como a Web, nesta máquina. Publicar a carta com um endereço verdadeiro não faz parte desta aula.

O que você vai aprender

• Reconhecer elemento, tag e atributo.
• Montar DOCTYPE, head e body.
• Usar headings, parágrafos, listas, ênfase e citação.
• Marcar uma carta curta sem virar um processador de texto.
• Incluir skip-link e lang="pt-BR".

Elemento, tag e atributo

Um elemento é uma peça da página: quase sempre tag de abertura, conteúdo e tag de fechamento. A tag é o nome entre < e >. Um atributo acrescenta dado na abertura, com valor entre aspas.

<p>A <strong>Biblioteca da Ribeira</strong> abre em março.</p>

strong marca importância. em marca ênfase. Não use os dois só para “ficar em negrito”: o significado vem primeiro.

O documento

<!DOCTYPE html> declara HTML. html lang="pt-BR" fixa o idioma. O head leva charset, viewport, título e descrição. O body leva o visível.

O skip-link é o primeiro foco útil: um a para #conteudo. Quem usa teclado pula o menu repetido.

Títulos e parágrafos

h1 é o título da página. h2 abre seções. Não pule níveis só por tamanho visual. Um parágrafo é p. Vários br no lugar de parágrafos atrapalham leitores de tela.

Na carta, o h1 é “Carta da coordenação”. Os h2 separam acervo e regras da casa.

Listas e ênfase

Lista não ordenada (ul + li) para itens sem ordem. Lista ordenada (ol + li) para passos. blockquote para uma citação destacada. cite identifica o título de uma obra, como um livro citado; o nome de quem assina fica em texto comum.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sintaxe — Biblioteca da Ribeira</title>
  </head>
  <body>
    <article>
      <h1>Carta da coordenação</h1>
      <p>A <strong>Biblioteca da Ribeira</strong> abre em março. Traga um livro que você já leu e leve outro.</p>
      <h2>O que tem no acervo</h2>
      <ul>
        <li>Literatura pernambucana</li>
        <li>Guias de maré e de mangue</li>
      </ul>
      <h2>Regras da casa</h2>
      <ol>
        <li>Fale baixo na sala de leitura.</li>
        <li>Devolva no prazo combinado.</li>
      </ol>
      <p>Assinatura: Lina Bezerra, coordenação fictícia.</p>
    </article>
  </body>
</html>

A pasta do exemplo traz também cabeçalho, menu e rodapé. Use aquele arquivo como referência completa.

Erro comum na sintaxe

Erro comum: esquecer a tag de fechamento </ul> ou misturar li fora da lista. O navegador “adivinha” e a página parece quase certa. A estrutura fica errada para o teclado e para buscas.

Valide olhando o aninhamento no editor. Recarregue depois de uma correção.

Disco, navegador e publicação

No disco, a carta é texto. No navegador, vira hierarquia. Em http://127.0.0.1:8765/exemplos/05-sintaxe-e-texto-html/ o documento viaja por HTTP local. Publicar copiaria a carta para um servidor público. Continue com nomes fictícios.

Atividades

1. Qual a diferença de significado entre strong e um b usado só por costume visual?
2. Quando você escolhe ol em vez de ul na carta da Ribeira?
3. Por que lang="pt-BR" fica no html e não “no navegador”?

Respostas comentadas

1. strong indica importância. O visual de negrito é consequência. b não carrega o mesmo papel semântico; neste volume preferimos strong quando o trecho é importante.
2. Quando a ordem importa: regras da casa, passos de empréstimo. Acervo sem ranking vai em ul.
3. O idioma é dado do documento, gravado no arquivo. Qualquer navegador ou leitor deve poder lê-lo. Não depende de publicar nem de 127.0.0.1.