DOCTYPE
A
instrução DOCTYPE indica para o navegador qual a versão do HTML. Utilizamos <!DOCTYPE
html>, que indica para o navegador a utilização da versão mais recente do
HTML - a versão 5, atualmente.
O elemento HTML
O código HTML é uma série de
elementos em árvore onde alguns elementos são filhos de outros e assim por
diante. O elemento principal dessa grande árvore é sempre a tag HTML.
<html
lang="pt-br">
O
atributo LANG é necessário para que os user-agents saibam qual a linguagem
principal do documento.
Lembre-se
que o atributo LANG não é restrito ao elemento HTML, ele pode ser utilizado em
qualquer outro elemento para indicar o idioma do texto representado.
Metatag Charset
A
MetaTag Charset é responsável por chavear qual tabela de caracteres a página
está utilizando.
<meta
charset="utf-8">
section
A
tag section define uma nova seção genérica no documento. Por exemplo, a home de
um website pode ser dividida em diversas seções: introdução ou destaque,
novidades, informação de contato e chamadas para conteúdo interno.
nav
O
elemento nav representa uma seção da página que contém links para outras partes
do website. Nem todos os grupos de links devem ser elementos nav, apenas
aqueles grupos que contém links importantes. Isso pode ser aplicado naqueles
blocos de links que geralmente são colocados no Rodapé e também para compor o
menu principal do site.
article
O
elemento article representa uma parte da página que poderá ser distribuído e
reutilizável em FEEDs por exemplo. Isto pode ser um post, artigo, um bloco de
comentários de usuários ou apenas um bloco de texto comum.
aside
O
elemento aside representa um bloco de conteúdo que referência o conteúdo que
envolta do elemento aside. O asidepode ser representado por conteúdos em
sidebars em textos impressos, publicidade ou até mesmo para criar um grupo de
elementos nav e outras informações separados do conteúdo principal do website.
header
O
elemento header representa um grupo de introdução ou elementos de navegação. O
elemento header pode ser utilizado para agrupar índices de conteúdos, campos de
busca ou até mesmo logos.
footer
O
elemento footer representa literalmente o rodapé da página. Seria o último
elemento do último elemento antes de fechar a tag HTML. O elemento footer não
precisa aparecer necessariamente no final de uma seção.
time
Este
elemento serve para marcar parte do texto que exibe um horário ou uma data
precisa no calendário gregoriano.
Estrutura HTML5
<!DOCTYPE html>
<html
lang="pt-br">
<head>
<title>Título
do documento HTML</title>
<meta
charset="utf-8" />
</head>
<body>
<header>
<!--
Conteúdo do cabeçalho -->
<nav>
<ul>
<li><a
href="#">Item do menu 1</a></li>
<li><a
href="#">item do menu 2</a></li>
</ul>
</nav>
</header>
<section id="main">
<!-- Conteúdo
principal -->
<article>
<h1>Título</h1>
<article>
<h1>Título</h1>
<p>Início</p>
<h2>Subtítulo</h2>
<p>Texto</p>
<p>Mais
texto</p>
</article>
</section>
<section id="segundo">
<!-- Segundo
Painel-->
</section>
<footer>
<!--
Conteúdo do rodapé -->
</footer>
</body>
</html>
Este
atributos foram descontinuados porque modificam a formatação do elemento e suas
funções são melhores controladas pelo CSS:
·
align como
atributo da tag caption, iframe, img, input, object, legend, table,
·
hr, div,h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead e tr.
·
alink, link, text e vlink como
atributos da tag body.
·
background como
atributo da tag body.
·
bgcolor como
atributo da tag table, tr, td, th e body.
·
border como
atributo da tag table e object.
·
cellpadding e cellspacing como
atributos da tag table.
·
char e charoff como
atributos da tag col, colgroup, tbody, td, tfoot, th, thead e tr.
·
clear como
atributo da tag br.
·
compact como
atributo da tag dl, menu, ol e ul.
·
frame como
atributo da tag table.
·
frameborder como
atributo da tag iframe.
·
height como
atributo da tag td e th.
·
hspace e vspace como
atributos da tag img e object.
·
marginheight e marginwidth como
atributos da tag iframe.
·
noshade como
atributo da tag hr.
·
nowrap como
atributo da tag td e th.
·
rules como
atributo da tag table.
·
scrolling como
atributo da tag iframe.
·
size como
atributo da tag hr.
·
type como
atributo da tag li, ol e ul.
·
valign como
atributo da tag col, colgroup, tbody, td, tfoot, th, thead e tr.
·
width como
atributo da tag hr, table, td, th, col, colgroup e pre.
Alguns
atributos do HTML4 não são mais permitidos no HTML5. Se eles tiverem algum
impacto negativo na compatibilidade de algum user-agent eles serão discutidos.
·
rev e charset como
atributos da tag link e a.
·
shape e coords como
atributos da tag a.
·
longdesc como
atributo da tag img and iframe.
·
target como
atributo da tag link.
·
nohref como
atributo da tag area.
·
profile como
atributo da tag head.
·
version como
atributo da tag html.
·
name como
atributo da tag img (use id instead).
·
scheme como
atributo da tag meta.
·
archive, classid, codebase, codetype, declare e standby como
atributos da tag object.
·
valuetype e type como
atributos da tag param.
·
axis e abbr como
atributos da tag td e th.
·
scope como
atributo da tag td.
Atributos
Alguns elementos ganharam
novos atributos:
·
O atributo
autofocus pode ser especificado nos
elementos input (exceto
quando há atributohidden atribuído), textarea, select e button.
·
A tag
a passa a suportar o
atributo media como
a tag link.
·
A tag
form ganha um atributo chamado novalidate.
Quando aplicado o formulário pode ser enviado sem validação de dados.
·
O elemento
ol ganhou um atributo chamado reversed. Quando ele é aplicado os
indicadores da lista são colocados na ordem inversa, isto é, da forma
descendente.
·
O elemento
fieldset agora permite o atributo disabled. Quando aplicado, todos os
filhos de fieldset são
desativados.
·
O novo atributo
placeholder pode
ser colocado em inputs e textareas.
·
O elemento
area agora suporta os atributos hreflang e rel como os elementos a e link
·
O elemento
base agora suporta o atributo target assim como o elemento a. O atributo target também
não está mais descontinuado nos elementos a e area porque são úteis para
aplicações web.
·
Os atributos abaixo foram descontinuados:
·
O atributo
border utilizado na tag img.
·
O atributo
language na tag script.
·
O atributo
name na tag a. Porque os desenvolvedores
utilizam ID em vez de name.
·
O atributo
summary na tag table.
·
O W3C mantém um documento
atualizado constantemente nesta página:http://www.w3.org/TR/2010/WD-html5-diff-20100624/.
Boa prática - Indentação
Uma
prática sempre recomendada, ligada à limpeza e utilizada para facilitar a
leitura do código, é o uso correto de recuos, ou indentação, no HTML.
Costumamos alinhar elementos “irmãos” na mesma margem e adicionar alguns
espaços ou um tab para elementos “filhos”.
Boa prática - Comentários
A
utilização de comentários permite manter o código mais legível, é recomendada a
adição de comentários antes da abertura e após o fechamento de tags estruturais
(que conterão outras tags). Dessa maneira, nós podemos identificar claramente quando um elemento está dentro dessa estrutura
ou depois da mesma.
<!-- início do cabecalho -->
<div
id="header">
<p>Esse
parágrafo está "dentro" da área principal.</p>
</div>
<!-- fim do cabecalho -->
<p>Esse parágrafo
está "depois" da área principal.</p>
