HTML: Estrutura Básica#
Preciso fazer uma confissão: o código do exemplo anterior está errado.
Clique aqui para abrir o W3C Markup Validation Service. Esse é um serviço oficial de validação de HTML disponibilizado gratuitamente pelo World Wide Web Consortium.
Selecione Validate by File Upload, escolha o arquivo exemplo.html e clique em Check.
Conforme adiantei, ele vai indicar um aviso e vários erros.
Isso acontece porque eu omiti algumas tags obrigatórias e atributos obrigatórios para que pudéssemos focar no assunto principal. Mas agora chegou o momento de apresentar a versão correta.
Comece abrindo o exercício abaixo. Nós vamos utilizá-lo ao longo deste handout.
Novamente, abra o arquivo HTML em dois programas diferentes: no Visual Studio Code e um navegador de Internet. Se quiser, repita o processo de validação para confirmar que de fato não há erros.
Vamos entender essa versão correta. Segue abaixo um resumo dela, no qual uma parte foi substituída por reticências (...).
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Exemplo</title>
<meta charset="UTF-8">
</head>
<body>
...
<!-- https://www.tudogostoso.com.br/receita/23-bolo-de-cenoura.html -->
</body>
</html>
Por que essa parte for omitida? Porque ela é exatamente igual ao exemplo anterior! Ou seja, o código na verdade estava apenas incompleto, sem a "casca" acima.
E o que seria essa "casca"? Vamos por partes.
Tag !DOCTYPE#
A tag !DOCTYPE é especial por ser a única que não representa um elemento.
Essa tag declara a versão do HTML na qual o código está escrito. Antigamente ela era mais complexa, mas hoje em dia precisamos apenas escrever !DOCTYPE html para declarar que o código foi escrito em HTML 5.
Elemento html#
O elemento html representa... tudo! Ou seja, o documento inteiro. Repare que, exceto pela !DOCTYPE (que não representa elemento), todas as tags estão dentro dele.
Esse elemento deve ter um atributo lang que declara o idioma no qual o documento está escrito. Nesse caso, o valor é pt-BR para indicar que esse idioma é o português do Brasil.
Elemento head#
O elemento head representa metadados, ou seja, informações que são sobre o documento mas não fazem parte do documento propriamente dito.
Um bom exemplo de metadado é o primeiro filho, o elemento title. Esse elemento declara qual é o texto que deve aparecer na aba do navegador.
Repare que esse texto é, de fato, uma informação sobre o documento mas não faz parte do documento propriamente dito. Aliás, está literalmente fora dele!
Outro exemplo é o segundo filho, que declara a codificação na qual o documento está escrito. Nesse caso, o valor é UTF-8. Não vamos nos aprofundar nos detalhes técnicos porque eles estão fora do escopo desta disciplina, mas por enquanto basta saber que essa tag (que, aliás, é outro exemplo de self-closing) evita que o navegador tenha problemas com caracteres acentuados.
Elemento body#
O elemento representa dados, ou seja, informações que fazem parte do documento propriamente dito. É por isso que o exemplo anterior está dentro desse.
Na verdade, o que escrevemos além do exemplo anterior nem era necessário, mas...
Comentários em HTML#
...aproveitamos a oportunidade para mostrar como adicionar comentários a um código HTML. Tudo o que você escreve entre <!-- e --> é ignorado pelo navegador.
Lembra do primeiro exercício da primeira parte do handout? A resposta do exercício estava em um comentário no HTML e por isso não aparecia na página mostrada pelo navegador.
A estrutura básica#
Resumindo: em qualquer código HTML que você escrever, deve incluir no mínimo o conjunto de tags abaixo.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title></title>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
Vamos chamar esse conjunto de estrutura básica.
Sobre as indentações#
Repare que, desde o primeiro exemplo, estamos usando indentações para indicar quem está dentro de quem (conteúdo mais à direita que as tags de abertura e fechamento). Indentações não são obrigatórias em HTML, mas são fortemente recomendadas para deixar seu código mais legível.
Isso não significa que você precisa indentar seu código em todas as oportunidades possíveis e imagináveis. Nós próprios não fizemos isso nos exemplos apresentados neste material. Mas é importante vocês estabelecerem algum sistema interno do time (no mínimo combinar qual vai ser o número de espaços) e serem coerentes com ele.
Uma última observação#
Se o código do exemplo anterior estava errado, por que o navegador mostrou o documento corretamente? Isso acontece porque, ao constatar erros, o navegador tenta desesperadamente adivinhar o que você quer e corrige o código conforme necessário.
Abra novamente o arquivo HTML da primeira parte do handout no Chrome e pressione F12 ou Ctrl+Shift+j (Cmd+Option+j no macOS) para abrir as Ferramentas de Desenvolvedor. Selecione a aba Elements e veja o código-fonte nela.
Repare que, embora o arquivo exemplo.html não tenha os elementos html, head, body, esse código-fonte tem. Isso é resultado da "correção desesperada" do Chrome.
É ao mesmo tempo uma bênção e uma maldição. Uma bênção porque impede que um documento exploda por causa de um errinho bobo como esquecer de fechar um elemento. Uma maldição porque pode esconder um monte desses erros bobos até que o acúmulo deles exploda na sua cara.
Para evitar o segundo caso, vale a pena desenvolver o hábito de usar validadores como os do início desta página. Não é difícil descobrir como integrá-los ao Visual Studio Code.
Exercise 1
Answer
Apesar da "correção desesperada" do Chrome, um documento HTML sem os elementos html, head e body está inválido. A estrutura do arquivo deve sempre incluir esses elementos.