Um documento HTML válido precisa seguir obrigatoriamente a estrutura composta pelas tags
<html>, <head> e <body> e a instrução <!DOCTYPE>. Esta estrutura está informada em uma documentação que descreve todos os detalhes do HTML, no caso as tags e atributos, e como os navegadores devem considerar e interpretar estas tags, esta documentação é chamada de "especificação do HTML", e através do que está declarado nela que é possível entender se um documento HTML válido. Um documento HTML inválido é carregado pelo navegador, porém em um "modo de compatibilidade", vamos entender melhor sobre isto logo mais.
Abaixo, vamos conhecer em detalhes cada uma das tags estruturais obrigatórias:
Na estrutura do nosso documento, antes de começar a colocar o conteúdo, inserimos uma tag <html>. Dentro dessa tag, é necessário declarar outras duas tags: <head> e <body>. Essas duas tags são "irmãs", pois estão no mesmo nível hierárquico em relação à sua tag "mãe", que é <html>.
<html> <!-- mãe -->
<head></head> <!-- filha -->
<body></body> <!-- filha -->
</html>A tag <head> contém informações sobre o documento HTML que são de interesse somente do navegador e para outros serviços da web, e não para as pessoas que vão acessar nosso site. São informações que não serão exibidas diretamente no navegador, também podemos considerar um local onde informamos os metadados sobre a página.
A especificação do HTML obriga a presença da tag de conteúdo <title> dentro da <head>, permitindo definir o título do documento, que poder ser visto na barra de título ou aba da janela do navegador. Caso contrário, a página não será um documento HTML válido.
Outra configuração muito importante, principalmente em documentos HTML cujo conteúdo é escrito em um idioma como o português, que contém caracteres "especiais" (acentos e cedilha), é a codificação/conjunto de caracteres, chamada de encoding ou charset.
Podemos configurar qual codificação queremos utilizar em nosso documento por meio da configuração de charset na tag <meta>. Um dos valores mais comuns usados hoje em dia é o UTF-8, também chamado de Unicode. Há outras possibilidades, como o latin1, muito usado antigamente.
O UTF-8 é a recomendação atual para encoding na Web por ser amplamente suportada em navegadores e editores de código, além de ser compatível com praticamente todos os idiomas do mundo. É o que usaremos no curso.
<html>
<head>
<meta charset="utf-8">
<title>MusicDot</title>
</head>
<body>
</body>
</html>A tag <body> contém o corpo de um documento HTML, que é exibido pelo navegador em sua janela, ou seja, todo o conteúdo visível do site. É necessário que o <body> tenha ao menos um elemento "filho", ou seja, uma ou mais tags HTML dentro dele.
<html>
<head>
<meta charset="utf-8">
<title>MusicDot</title>
</head>
<body>
<h1>A MusicDot</h1>
</body>
</html>Nesse exemplo, usamos a tag <h1>, que indica o título principal da página.
O DOCTYPE não é uma tag HTML, mas uma instrução especial. Ela indica para o navegador qual versão do HTML deve ser utilizada para exibir a página. Quando não colocamos essa instrução a página é exibida numa espécie de "modo de compatibilidade" na qual algumas tags e estilizações não funcionam 100% corretamente. Principalmente as tags e estilizações mais atuais (lançadas na versão 5 do HTML). Inclusive é possível ver a diferença na folha de estilos padrão que o navegador usa quando não colocamos essa instrução.
A imagem da esquerda é a página sem Doctype e a imagem da direita é a página com Doctype. Dá para ver que existe uma leve diferença entre as duas páginas, principalmente com relação aos espaçamentos.
Utilizaremos <!DOCTYPE html>, que indica para o navegador a utilização da versão mais recente do HTML - a versão 5, atualmente*.
Há muitas possibilidades mais complicadas nessa parte de DOCTYPE que eram usados em versões anteriores do HTML e do XHTML. Hoje em dia, nada disso é mais importante. O recomendado é sempre usar a última versão do HTML, usando a declaração de DOCTYPE simples:
<!DOCTYPE html>A declaração do DOCTYPE, pode ser escrita toda em maiúsculo ou toda em minúsculo ou com a primeira letra maiúscula: <!DOCTYPE HTML>, <!DOCTYPE html>, <!Doctype HTML>, <!Doctype html>, <!doctype html>, <!doctype HTML>. O resultado será o mesmo para todos os casos.
*Obs: desde maio de 2019 o desenvolvimento do HTML é mantido pelo W3C (World Wide Web Consortium) https://www.w3.org/, WHATWG e comunidade de desenvolvedores, e sua especificação é aberta no Github https://github.com/whatwg/html, e desde este movimento o HTML é considerado um "padrão vivo" (living standard) onde sua versão a partir da 5 é atualizada continuamente.