Nessa aula vamos aprender a criar uma estrutura básica do HTML, que servirá de modelo para suas páginas HTML. Um “esqueleto” com as principais tags, para começar a implementar seus códigos HTML a partir dessa estrutura.

Estrutura básica do HTML:

Entendendo a estrutura básica do html

A primeira coisa que devemos criar no nosso HTML é a instrução <!DOCTYPE html>. Ela não é considerada uma tag como as outras, mas uma instrução que vai informar ao navegador que esse arquivo é do tipo HTML.

Essa instrução da forma escrita acima, é resultado de uma evolução que o HTML5 trouxe, nas versões anteriores do HTML era escrita da seguinte forma:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

<html></html>

Logo abaixo do <!DOCTYPE html> você vai criar as tags de abertura e fechamento do <html></html>.

É importante notar que dentro da tag de abertura <html> é indicado utilizar o atributo lang=”pt-br”, pois isso vai indicar que os conteúdos dessa página HTML possuem como padrão o idioma português brasileiro.

A tag <html lang=”pt-br”></html> é a tag mais “importante” do seu arquivo HTML, pois será dentro dela que você vai colocar todo o seu conteúdo, todoss os elementos do HTML.

Tudo que você for criar em sua página deve ficar dentro do <html></html>, pois o papel dela é justamente informar ao navegador “o que tiver aqui dentro está escrito na linguagem HTML”.

Head e body

Agora que já entendemos um pouco sobre a tag <html>, precisamos saber que dentro dela existe uma divisão: Uma parte dos códigos ficam dentro da tag <head> e a outra parte em <body>.

A tag <head></head> também chamada de cabeçalho, é a parte do arquivo HTML que não é visível para nós no navegador quando abrimos o site. Lembra quando a gente estava no tempo de escola e tínhamos que preencher o cabeçalho das provas? É exatamente isso! 

Basicamente o cabeçalho vai informar coisas importantes sobre a página para o navegador e aos sistemas de buscas, como por exemplo o título da página (aquele que aparece na aba do navegador), a descrição do página, quem foi o autor dela.

Lembrando que nada que enxergamos em nosso site fica dentro de <head>, apenas os metadados, que podem ser considerados como informações relevantes sobre a página.

A tag title

A tag <title> vai ser responsável pelo título da página, aquela informação mostrada na aba do navegador, e mostrada também nos sites de buscas. Sabe quando pesquisamos no Google algo e aparecem aqueles links? É dentro da tag <title></title> que você deve colocar a informação que deseja que apareça no link do Google quando sua página for encontrada.

Além do título, na estrutura básica usamos tbm a tag <meta charset=”utf-8″> para indicar o tipo de caractere da página HTML.

Utf-8

O atributo específico charset indica que essa página foi construída utilizando o padrão utf-8, que é um codificação que pode representar qualquer tipo de caractere universal, como por exemplo acentos, “ç”, etc.

Não sei se você já viu isso em algum site, mas as vezes quando a página não foi feita usando utf-8 as palavras acentuadas e com Ç ficam deformadas, por isso é muito importante usar isso em suas páginas HTML.

Essa tag <meta> pode informar várias outras coisas como por exemplo o autor desse código HTML, as palavras-chave, etc. Vamos ter uma aula com mais detalhes sobre as metatags.

Uma observação: Lembra que na aula anterior falamos sobre tags sem fechamento? essa tag <meta> é um exemplo disso, pois já escrevemos dentro do atributo dela o conteúdo. Por isso não precisa usar a tag de fechamento.

A tag body

A tag <body></body> vai ser literalmente o corpo de sua página HTML. Ela vai conter todo os conteúdos que serão mostrados na tela para os usuários.

Tudo que existir em seu site visualmente deve ser inserido dentro de body, desde imagens, textos, links, etc.