Estrutura Básica do HTML

Agora que já sabemos como criar e salvar um arquivo HTML, chegou a hora de começar a entender os códigos e comandos dessa linguagem.

Sempre que iniciamos um novo arquivo, a primeira coisa a fazer é escrever a estrutura HTML. Trata-se de algumas tags que todos os documentos HTML devem ter. Alguns desenvolvedores costumam ter um arquivo HTML já salvo para utilizar e poupar o trabalho de ficar escrevendo as mesmas tags toda vez que for criar um HTML novo.

Vamos ao código da estrutura:

<html>

   <head>

   </head>

   <body>

   </body>

</html>

Explicando a estrutura básica do HTML

Note que a tag <HTML> envolve todos os demais códigos HTML, com exceção da tag <Doctype>. Isso porque com a tag <HTML> estamos informando ao navegador que o código que vamos trabalhar será da linguagem HTML. Se fossemos utilizar outra linguagem como o PHP por exemplo teríamos que colocar o código dentro das tags <?php ?>.

Bom, dentro das tags HTML temos outras duas tags. A tag <head> e a tag <body>. Head vem do inglês e significa cabeça e body significa corpo. Essa nomenclatura faz muito sentido já que é na tag head que guardamos as meta informações, que são informações que são usadas para determinados objetivos, mas que não aparecem no site quando o visualizamos no navegador.

(Box) O que são metadados? Para entender melhor o que significa metadados, podemos pensar no exemplo de fotografias que tiramos com o celular. Ao abrir uma fotografia, o que vemos é a imagem do que foi fotografado, porém, existem várias outras informações que foram gravadas em seu dispositivo além da imagem, como a data e hora que a fotografia foi tirada, o modelo do celular, modelo da lente, tamanho da imagem, tamanho do arquivo e até a localização de onde a fotografia foi feita. Essas informações não aparecem quando abrimos a fotografia, porém são muito úteis para, por exemplo, organizar os arquivos por tamanho, data, localização, etc.

Assim como nós, o HTML tem um corpo embaixo da cabeça. Ou seja, abaixo da tag head encontramos a tag body. É na tag body que colocamos tudo o que queremos que apareça na tela do navegador, como o fundo, os textos, imagens, links, etc.

Fora essa estrutura básica, é preciso adicionar o seguinte código antes de todos os demais:

<!DOCTYPE html>

<html>

   <head>

   </head>

   <body>

   </body>

</html>

Declaração Doctype

Este código é uma declaração do tipo de documento que estamos criando. Ele existe porque cada navegador, especialmente antigamente, costumava exibir o HTML de forma diferente uns dos outros. Ou seja, quando você abria seu site em um navegador, ele ficava de um jeito, quando abria em outro navegador, ficava de outro jeito. Para resolver esse problema foi criada essa declaração, que passa parâmetros para que os navegadores sigam um mesmo parâmetro de exibição do HTML. Assim, seu arquivo HTML será exibido da mesma forma em diferentes navegadores.

Tag Title

Antes de finalizar vamos colocar uma cereja no bolo. Vamos adicionar a tag title dentro da tag head. Com essa tag podemos definir um título para nossa página que aparecerá na aba do navegador. Veja o código:

<!DOCTYPE html>

<html>

   <head>
      <title>Título da Página</title>
   </head>

   <body>

   </body>

</html>