Configurar idioma, codificação, título e viewport

O atributo lang identifica o idioma principal do conteúdo. O valor pt-BR indica português do Brasil.

No arquivo da sua página, adicione essa informação à tag de abertura de html:

Leitores de tela podem ler o conteúdo em voz alta. A declaração lang="pt-BR" ajuda esses recursos a escolher a pronúncia adequada ao português do Brasil.

A codificação é a convenção usada para representar os caracteres no arquivo e interpretá-los na leitura. O UTF-8 permite representar acentos, cedilha e caracteres de diferentes idiomas.

Para preservar esses caracteres, use UTF-8 ao salvar o arquivo e declare essa mesma codificação no HTML.

O elemento vazio meta serve para configurações do documento. Neste trecho, o atributo charset informa a codificação ao navegador. Coloque essa declaração como a primeira configuração dentro de head.

1. Adicione <meta charset="UTF-8"> logo após a abertura de head.
2. No editor, confira a codificação usada para salvar e selecione UTF-8, se necessário. O nome e o local dessa opção variam conforme o editor.
3. Dentro de body, digite o texto de teste abaixo.
4. Salve o arquivo e atualize a página no navegador.

O elemento title fica em head e contém o título do documento, exibido na aba do navegador. Use um único title, com conteúdo apenas textual e a tag de fechamento </title>.

No seu arquivo de prática, coloque o title que você escreveu dentro de head. Se já houver um title, substitua seu texto em vez de criar outro.

1. Salve o arquivo.
2. Atualize a página no navegador.
3. Confira o novo título na aba.

Viewport é a área de visualização usada pelo navegador para apresentar a página. Sem essa configuração, navegadores móveis podem usar uma largura virtual maior que a tela e reduzir a página para exibi-la. O conteúdo fica visualmente pequeno.

O atributo name="viewport" identifica a configuração. O atributo content reúne seus parâmetros, separados por vírgula:

• width=device-width ajusta a largura do viewport à largura do dispositivo.
• initial-scale=1 define a escala inicial como 1.

initial-scale=1 define como a página começa a ser exibida. Isso não bloqueia a ampliação. O usuário deve poder aumentar o conteúdo para ler com mais conforto.

Prepare esta página sobre a feira do bairro. Inclua as quatro configurações estudadas: idioma português do Brasil, declaração UTF-8 no início de head, título descritivo e viewport para celulares sem bloquear a ampliação.

Mantenha o texto de body como está, sem adicionar outros elementos de conteúdo.

1. No código: confira o idioma em html. Em head, verifique a declaração de codificação no início, um único title e o viewport com os parâmetros estudados, sem restrições à ampliação.
2. No editor: confirme que o arquivo foi realmente salvo em UTF-8. A declaração no HTML, sozinha, não converte o arquivo.
3. No navegador: abra ou atualize a página. Confira se “música”, “opções” e “alimentação” aparecem corretamente e se a aba mostra o título que você escreveu.