Os elementos básicos de uma pagina em HTML5
Assim como nas versões anteriores, uma página escrita utilizando o HTML5 também possui um conjunto básico de elementos. Segundo o W3C, a maior parte deles não é obrigatória, mas são fundamentais, pois nos auxiliam na delimitação das áreas do documento.
O primeiro elemento que devemos adicionar, à um arquivo HTML. é aquele de define o tipo de documento que está sendo construído, a este elemento damos o nome de Doctype. Dependendo da versão do HTML, ou, ainda, se for um documento um XHTML, a sintaxe deste objeto pode ser bem diferente. No caso do HTML5, o Doctype foi simplificado para:
<!DOCTYPE HTML>
O segundo elemento que adicionados à pagina é aquele que marca o inicio e o final do documento, bem como o idioma/linguagem no qual a página foi construída. A informação sobre o idioma é muito útil para os sites que realizam a tradução de páginas; com a informação sobre o idioma o tradutor não precisa tentar “adivinhar” o dialeto no qual a página foi escrita. O elemento html é formando por duas tags, uma de abertura e outra de fechamento, como podemos ver no exemplo abaixo:
<html lang="pt-br"> </html>
Seu atributo “lang” determina o idioma da página e aceita todos os valores indicados no documento HTML Language Code Reference do W3C Schools e disponível no endereço https://www.w3schools.com/tags/ref_language_codes.asp
OBS: A grande maioria dos elementos do HTML são formados por um par de tags, uma de abertura e outra de encerramento, assim como, podem possuir vários atributos, os quais são declarados na tag de abertura. No exemplo anterior, a tag de abertura do elemento httml possui o atributo lang, cujo valor é pr-br, informando que o texto do documento foi rescrito utilizando o dialeto da Língua “Portuguesa” falado no “Brasil”.
Cabeçalho e Corpo
Todo documento HTML é dividido em duas grandes áreas: (i) o cabeçalho, que é definido pelo elemento head e o (ii) corpo do documento, definido pelo elemento body. No head inserimos, as informações que não serão renderizadas pelo agente do usuário (browser), como por exemplo o título do documento, as meta tags, o CCS e os scripts utilizados na página. Já no elemento body incluímos todas as informações que serão renderizadas pelo navegador, todos os objetos que compões a DOM do documento fazem parte do corpo da página e estão contidas neste elemento.
Adicionando estes elementos, o código da nossa página fica igual à:
<!DOCTYPE HTML> <html lang="pt-br"> <head> <!-- Cabeçalho do Documento --> </head> <body> <!-- Corpo do Documento --> </body> </html>
Dentre os elementos que podem ser utilizados no head de um documento, temos aquele que define a codificação da página; alguns idiomas como o Português possuem caracteres que não fazem parte da tabela ASCII, estes caracteres são denominados de caracteres estendidos que são registrados de forma distinta dependendo a codificação utilizada. Atualmente a codificação mais utilizada nas páginas WEB é a UTF8.
<meta charset="UTF-8">
Outro elemento que podemos utilizar, dentro do head, é o title; que define o título do documento e cujo conteúdo é apresentado na barra de título do navegador ou nas abas.
<title>HTML 5 - Modelo de Pagina</title>
Ainda podemos adicionar nesta área do documento uma ou várias tags com a localização do(s) arquivo(s) com as regras CSS que serão utilizadas na página.
<link rel="stylesheet" type="text/css" href="estilo.css">
Assim como, podemos ter o elemento script, o qual permite importar arquivos contendo os javascript, que poderão ser invocados no corpo do documento.
<script type='text/javascript' src='/js/jquery/jquery.js?ver=1.12.4'></script>
Nosso modelo de página
Combinando todos estes elementos temos o conteúdo de uma página básica, ou de um documento básico, cujo corpo esta vazio e ao ser interpretado pelo navegador apresentará uma página totalmente em branco.
<!DOCTYPE HTML> <html lang="pt-br"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="estilo.css"> <script type='text/javascript' src='/js/jquery/jquery.js?ver=1.12.4'></script> <title>HTML 5 - Modelo de Pagina</title> </head> <body> <!-- Corpo do Documento --> </body> </html>
Este modelo será utilizado no decorrer do curso como sendo o modelo de página em branco, e que será a base para todas as demais páginas. Mas uma página em branco não é um exemplo muito bom, então vamos incluir algum conteúdo no corpo da nossa página de exemplo.
<!DOCTYPE HTML> <html lang=”pt-br”> <head> <meta charset=”UTF-8”> <link rel="stylesheet" type="text/css" href="estilo.css"> <script type='text/javascript' src='/js/jquery/jquery.js?ver=1.12.4'></script> <title>HTML 5 - Olá Mundo</title> </head> <body> <!-- Corpo do Documento --> <h1>HTML 5: <small>Introdução</small></h1> <p> Olá mundo<p> </body> </html>
O código HTML5 anterior, quando carregado no Chrome produz a seguinte tela: