Guilherme Müller | Freelance Front-end Developer - Artigos e tutoriais sobre Front-end Design, HTML, CSS e Javascript

Uma Página HTML5 Básica

Com o HTML5, muito ficou simplificado na hora de iniciar um documento HTML. Neste post iremos analisar o mínimo de código que precisamos para um documento HTML5.

Todo o código aqui mostrado pode ser utilizado hoje, pois devido à natureza “tolerante” dos navegadores, não irá causar nenhum problema de compatibilidade (e é código HTML5 válido). Neste documento também estarei utilizando a sintaxe do HTML, e não do XHTML, portanto as tags que auto-fecham não terão a barra “/” no final (mas nada impede de utilizar a sintaxe XHTML).

O que iremos incluir no documento:

  1. DOCTYPE (para que o navegador reconheça que deve funcionar no “standards mode”)
  2. Tag html com o atributo lang, para identificar a língua na qual o conteúdo do documento será escrito
  3. Tag head, com as informações de cabeçalho não visíveis da página
  4. Tag meta especificando a codificação da página (charset)
  5. Tag title com o título da página
  6. Tag body com o conteúdo da página

Vamos começar com o doctype:

<!doctype html>

Bem simples, não? Este doctype até dá para decorar, ao contrário dos que utilizávamos antes. Perceba que não há uma versão do HTML especificada no doctype, o que o torna um doctype geral para qualquer versão do HTML. A sua única função é “ligar” o modo de padrões web (standards mode) dos navegadores.

Segundo, abrimos a tag html:

<html lang="pt-BR">

Perceba o atributo lang, diferente do que era feito no XHTML para identificar a língua.

Em seguida, a tag head:

<head>

Dentro, a tag meta especificando a codificação (também consideravelmente mais simples que antes):

<meta charset="UTF-8">

Em seguida, a tag title que já conhecemos bem:

<title>Uma Página HTML5 Básica</title>

Por fim, a tag body, com o conteúdo da página:

<body>
<!-- conteúdo da página -->
</body>

Abaixo, o código completo:

<!doctype html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8">
    <title>Uma Página HTML5 Básica</title>
  </head>
  <body>
    <!-- conteúdo da página -->
  </body>
</html>

Inserindo CSS e Javascript

Para finalizar, o código para inserir CSS e Javascript também fica um pouco mais simples, não precisando ser especificado o atributo type:

<script src="arquivo.js"></script>
<link href="arquivo.css" rel="stylesheet">

Comente