· · 13

Uma Página HTML5 Básica

Com o HTML5, muito ficou simplificado na hora de iniciar um documento HTML. Neste post irei 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 tags sem conteúdo não terão a barra "/" no final (mas nada nos impede de utilizarmos 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 ser decorado, 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">

13 Comentários

  1. Gravatar
    Helison Santos

    Muito bom artigo!!!

  2. Gravatar
    Ludmila kassule Chiyaka

    Muito obrigada,acabei de ver a tua explicação.Nota mil.Foste bem conciso.

    Deus o abençoe.

    Quero segui-lo no Facebook

  3. Gravatar
    Jonatha Fernandes Costa

    Oi gostaria de agradecer, pois tive a mesma duvida do "Leonardo Geranio" e a sua resposta resolveu o meu problema, apesar de trabalhar com desenvolvimento a um tempo por coincidência nunca havia tido esse tipo de problema com caracteres pois sempre apliquei as devidas configurações de reconhecimento de charset etc, porem dessa vez o meu problema era o tipo que o editor realmente estava salvando o arquivo, verifiquei a sua dica e era exatamente isso,muito obrigado mesmo e parabéns pelo post muito objetivo e esclarecedor.

    1. Gravatar Guilherme Müller

      Fico feliz que tenha ajudado!

  4. Gravatar
    karina

    mto bom o post... adorei! =)

  5. Gravatar
    Edigleysson

    Show de bola bem simples e de fácil entendimento

  6. Gravatar
    Claudia

    Oi gostei do post, bem simples e objetivo. Só uma curiosidade, a extensão dos arquivos continua a mesma? Tks.

    1. Gravatar Guilherme Müller

      Sim, continua sendo um documento HTML normal (extensão ".html").

  7. Gravatar
    Leonardo Geranio

    Pode me dar uma ajuda?

    Meu codigo nao funciona com ou a declaracao antiga.

    Aparece um erro na acentuação.

    Somente funciona quando eu coloco com trema no U.

    Tanto com a declaracao antiga quanto a nova, e nao consigo achar o problema...

    Ja testei nos navegadores google chrome, firefox, ie e Safari... o mesmo problema.

    Grato.

    1. Gravatar Guilherme Müller

      Veja a codificação na qual está salva o seu documento. Ela deve ser igual à codificação especificada na tag meta. Por exemplo, se na tag meta estiver "UTF-8" e o documento estiver salvo com codificação ISO-8859-1, você vai ter problemas com acentuação e caracteres especiais. Qualquer editor de texto tem um recurso para mostrar e/ou mudar a codificação do documento.

  8. Gravatar
    9uinho

    Cara, muito bom.
    simples, direto e de facil entendimento.

    Valeu!

  9. Gravatar
    Paulo Linhares

    Parabéns, bem básico como manda o post, e objetivo no assunto. Abraços!

    1. Gravatar Guilherme Müller

      Obrigado Paulo!

Comente