Estrutura de um documento HTML 5
Autor: Alan Nunes | Publicado: 2014-03-04T10:37:00-08:00


DOCTYPE

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;A
instrução DOCTYPE indica para o navegador qual a versão do HTML. Utilizamos &lt;!DOCTYPE
html&gt;, que indica para o navegador a utilização da versão mais recente do
HTML - a versão 5, atualmente.



O elemento HTML

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;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.

&lt;html
lang="pt-br"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; O
atributo LANG é necessário para que os user-agents saibam qual a linguagem
principal do documento.

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 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

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;A
MetaTag Charset é responsável por chavear qual tabela de caracteres a página
está utilizando.&nbsp;



&lt;meta
charset="utf-8"&gt;



section

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;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

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;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

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;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

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;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

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;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

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;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

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Este
elemento serve para marcar parte do texto que exibe um horário ou uma data
precisa no calendário gregoriano.



Estrutura HTML5



&lt;!DOCTYPE html&gt;

&lt;html
lang="pt-br"&gt;

&lt;head&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;title&gt;Título
do documento HTML&lt;/title&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;meta
charset="utf-8" /&gt;

&lt;/head&gt;

&lt;body&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;header&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;!--
Conteúdo do cabeçalho --&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;nav&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;ul&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a
href="#"&gt;Item do menu 1&lt;/a&gt;&lt;/li&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a
href="#"&gt;item do menu 2&lt;/a&gt;&lt;/li&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ul&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/nav&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/header&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;section id="main"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;!-- Conteúdo
principal --&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;article&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;Título&lt;/h1&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;p&gt;Início&lt;/p&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;h2&gt;Subtítulo&lt;/h2&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;p&gt;Texto&lt;/p&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;p&gt;Mais
texto&lt;/p&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/article&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/section&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;section id="segundo"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;!-- Segundo
Painel--&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/section&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;footer&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;!--
Conteúdo do rodapé --&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/footer&gt;

&lt;/body&gt;

&lt;/html&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Este
atributos foram descontinuados porque modificam a formatação do elemento e suas
funções são melhores controladas pelo CSS:

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->align&nbsp;como
atributo da tag&nbsp;caption,&nbsp;iframe,&nbsp;img,&nbsp;input,&nbsp;object,&nbsp;legend,&nbsp;table,

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->hr,&nbsp;div,h1,&nbsp;h2,&nbsp;h3,&nbsp;h4,&nbsp;h5,&nbsp;h6,&nbsp;p,&nbsp;col,&nbsp;colgroup,&nbsp;tbody,&nbsp;td,&nbsp;tfoot,&nbsp;th,&nbsp;thead&nbsp;e&nbsp;tr.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->alink,&nbsp;link,&nbsp;text&nbsp;e&nbsp;vlink&nbsp;como
atributos da tag&nbsp;body.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->background&nbsp;como
atributo da tag&nbsp;body.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->bgcolor&nbsp;como
atributo da tag&nbsp;table,&nbsp;tr,&nbsp;td,&nbsp;th&nbsp;e&nbsp;body.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->border&nbsp;como
atributo da tag&nbsp;table&nbsp;e&nbsp;object.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->cellpadding&nbsp;e&nbsp;cellspacing&nbsp;como
atributos da tag&nbsp;table.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->char&nbsp;e&nbsp;charoff&nbsp;como
atributos da tag&nbsp;col,&nbsp;colgroup,&nbsp;tbody,&nbsp;td,&nbsp;tfoot,&nbsp;th,&nbsp;thead&nbsp;e&nbsp;tr.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->clear&nbsp;como
atributo da tag&nbsp;br.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->compact&nbsp;como
atributo da tag&nbsp;dl,&nbsp;menu,&nbsp;ol&nbsp;e&nbsp;ul.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->frame&nbsp;como
atributo da tag&nbsp;table.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->frameborder&nbsp;como
atributo da tag&nbsp;iframe.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->height&nbsp;como
atributo da tag&nbsp;td&nbsp;e&nbsp;th.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->hspace&nbsp;e&nbsp;vspace&nbsp;como
atributos da tag&nbsp;img&nbsp;e&nbsp;object.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->marginheight&nbsp;e&nbsp;marginwidth&nbsp;como
atributos da tag&nbsp;iframe.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->noshade&nbsp;como
atributo da tag&nbsp;hr.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->nowrap&nbsp;como
atributo da tag&nbsp;td&nbsp;e&nbsp;th.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->rules&nbsp;como
atributo da tag&nbsp;table.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->scrolling&nbsp;como
atributo da tag&nbsp;iframe.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->size&nbsp;como
atributo da tag&nbsp;hr.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->type&nbsp;como
atributo da tag&nbsp;li,&nbsp;ol&nbsp;e&nbsp;ul.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->valign&nbsp;como
atributo da tag&nbsp;col,&nbsp;colgroup,&nbsp;tbody,&nbsp;td,&nbsp;tfoot,&nbsp;th,&nbsp;thead&nbsp;e&nbsp;tr.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->width&nbsp;como
atributo da tag&nbsp;hr,&nbsp;table,&nbsp;td,&nbsp;th,&nbsp;col,&nbsp;colgroup&nbsp;e&nbsp;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.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->rev&nbsp;e&nbsp;charset&nbsp;como
atributos da tag&nbsp;link&nbsp;e&nbsp;a.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->shape&nbsp;e&nbsp;coords&nbsp;como
atributos da tag&nbsp;a.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->longdesc&nbsp;como
atributo da tag&nbsp;img&nbsp;and&nbsp;iframe.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->target&nbsp;como
atributo da tag&nbsp;link.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->nohref&nbsp;como
atributo da tag&nbsp;area.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->profile&nbsp;como
atributo da tag&nbsp;head.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->version&nbsp;como
atributo da tag&nbsp;html.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->name&nbsp;como
atributo da tag&nbsp;img&nbsp;(use&nbsp;id&nbsp;instead).

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->scheme&nbsp;como
atributo da tag&nbsp;meta.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->archive,&nbsp;classid,&nbsp;codebase,&nbsp;codetype,&nbsp;declare&nbsp;e&nbsp;standby&nbsp;como
atributos da tag&nbsp;object.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->valuetype&nbsp;e&nbsp;type&nbsp;como
atributos da tag&nbsp;param.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->axis&nbsp;e&nbsp;abbr&nbsp;como
atributos da tag&nbsp;td&nbsp;e&nbsp;th.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->scope&nbsp;como
atributo da tag&nbsp;td.



Atributos

Alguns elementos ganharam
novos atributos:

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->O atributo&nbsp;autofocus&nbsp;pode ser especificado nos
elementos&nbsp;input&nbsp;(exceto
quando há atributohidden&nbsp;atribuído),&nbsp;textarea,&nbsp;select&nbsp;e&nbsp;button.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->A tag&nbsp;a&nbsp;passa a suportar o
atributo&nbsp;media&nbsp;como
a tag&nbsp;link.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->A tag&nbsp;form&nbsp;ganha um atributo chamado&nbsp;novalidate.
Quando aplicado o formulário pode ser enviado sem validação de dados.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->O elemento&nbsp;ol&nbsp;ganhou um atributo chamado&nbsp;reversed. Quando ele é aplicado os
indicadores da lista são colocados na ordem inversa, isto é, da forma
descendente.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->O elemento&nbsp;fieldset&nbsp;agora permite o atributo&nbsp;disabled. Quando aplicado, todos os
filhos de&nbsp;fieldset&nbsp;são
desativados.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->O novo atributo&nbsp;placeholder&nbsp;pode
ser colocado em&nbsp;inputs&nbsp;e&nbsp;textareas.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->O elemento&nbsp;area&nbsp;agora suporta os atributos&nbsp;hreflang&nbsp;e&nbsp;rel&nbsp;como os elementos&nbsp;a&nbsp;e&nbsp;link

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->O elemento&nbsp;base&nbsp;agora suporta o atributo&nbsp;target&nbsp;assim como o elemento&nbsp;a. O atributo target&nbsp;também
não está mais descontinuado nos elementos&nbsp;a&nbsp;e&nbsp;area&nbsp;porque são úteis para
aplicações web.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->&nbsp;

Os atributos abaixo foram descontinuados:

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->O atributo&nbsp;border&nbsp;utilizado na tag&nbsp;img.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->O atributo&nbsp;language&nbsp;na tag&nbsp;script.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->O atributo&nbsp;name&nbsp;na tag&nbsp;a. Porque os desenvolvedores
utilizam ID em vez de name.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->O atributo&nbsp;summary&nbsp;na tag&nbsp;table.

<!--[if !supportLists]-->·&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--[endif]-->&nbsp;

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

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 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

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 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.

&lt;!-- início do cabecalho --&gt;

&lt;div
id="header"&gt;

&lt;p&gt;Esse
parágrafo está "dentro" da área principal.&lt;/p&gt;

&lt;/div&gt;

&lt;!-- fim do cabecalho --&gt;


&lt;p&gt;Esse parágrafo
está "depois" da área principal.&lt;/p&gt;