· · 13

Uma Página HTML5 Básica

Torne-se um profissional web freelancer

Novo curso: Seja um freelancer!
Clique aqui para mais informações

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">
Torne-se um profissional web freelancer

Novo curso: Seja um freelancer!
Clique aqui para mais informações


13 Comentários

  1. Gravatar
    VENICIOS COSTA

    MUITO BEM EXPLICADO.

  2. Gravatar
    Helison Santos

    Muito bom artigo!!!

  3. 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

  4. 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!

  5. Gravatar
    karina

    mto bom o post... adorei! =)

  6. Gravatar
    Edigleysson

    Show de bola bem simples e de fácil entendimento

  7. 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").

  8. 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.

  9. Gravatar
    9uinho

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

    Valeu!

  10. 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