Uma Página HTML5 Básica
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:
- DOCTYPE (para que o navegador reconheça que deve funcionar no "standards mode")
- Tag
htmlcom o atributolang, para identificar a língua na qual o conteúdo do documento será escrito - Tag
head, com as informações de cabeçalho não visíveis da página - Tag
metaespecificando a codificação da página (charset) - Tag
titlecom o título da página - Tag
bodycom 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">
Novo curso: Seja um freelancer!
Clique aqui para mais informações
