O documento discute as novas tags de seção do HTML5 como <section>, <article> e <nav> para estruturar semanticamente o conteúdo da página. Também explica a diferença entre elementos de bloco como <p> e <div> e elementos de linha, além de revisar outros elementos como <table>, <ol> e <ul> para organizar dados e listas.

2. • Seccionando um Layout
– Novas (e não tão novas) tags de seção.
– Classe dos Elementos de estruturação.
• Elementos de Bloco.
• Elementos de Linha.
– Tabelas, listas e outras tags de bloco.
– Hierarquias e validação.

3. • Livros:
– HTML5 - Curso W3C Escritório Brasil. Elcio Ferreira e Diego
Eis;
– Smashing HTML5. Bill Sanders;
• Apêndices:
– Comparação de Elementos Válidos por DOCTYPE.
– Lista de Atributos de Tags.
– Lista de Eventos e Métodos de Audio e Video.
– Lista de Eventos.
– Lista de Métodos e Propriedades da Tag Canvas.
– Lista de Tags.
• Lista de Exercícios

4. • Layout
– Organização da disposição do conteúdo de um
documento web. Estruturação sistemática das
tags HTML.
• Itens para considerar:
– Validação da Hierarquia proposta.
• Compatibilidade, visibilidade de buscadores, etc.
– Semântica das tags empregadas.
– Usabilidade da aplicação.

5. • Regras desde as versões anteriores.
– HTML 4.1, XHTML, etc.
• Por que?
– Padronização da Redenrização.
– Semântica.
• Como saber se o documento respeita as
regras?
– http://validator.w3.org/

6. • Elementos de Linha
– Usados, na maioria, para de marcação de texto.
No entanto elementos de formulário e links
também são elementos de linha.
• Elementos de Bloco
– Marcam, na maioria, seções do layout do
documento. “Caixas” que dividem e o conteúdo.
• Observação: Sem o tratamento com as CSS fica um
pouco mais difícil de perceber a divisão e o “porque” de
dividir.

7. • Algumas regras óbvias de validação:
– Elementos linha não podem ter elementos de bloco
como filhos, por exemplo:
• <a href=“index.html><p>que lindo!</p></a>
– Toda tag aberta, deve ser fechada. Cuidado com a
regra acima.
– Os elementos de linha podem conter outros
elementos de linha, dependendo da categoria que ele
se encontra. Por exemplo: o elemento a não pode
conter o elemento label.

8. • Elementos de bloco sempre podem conter
elementos de linha.
• Elementos de bloco podem conter elementos de
bloco, dependendo da categoria que ele se
encontra. Por exemplo, um parágrafo - p - não
pode conter um div. Mas o contrário é possível.
• Como saber mais sobre essas regras? Teste o
código!
– http://validator.w3.org/

9. • Porque usar os novos elementos de seção?
– Section, article, nav, etc.
• Como era feito antes?
– “Sopa de divs”
• Código sem semântica.
• E antes do antes?
– Divisão feita com tabelas.
• Exportação do Fireworks para o Dreamweaver.

10. • <div>
– Divisão - division - do layout (se lembra? Tag
antiga), elemento de bloco, não traz implícito
qual é de fato o setor do layout que pretende-se
seccionar.
– Pode-se utilizar, no entanto é mais interessante
dar preferência para as tags adequadas da nova
implementação do HTML.

11. • <p>
– Elemento de bloco que deve ser utilizado para
estruturação de textos. Cada elemento p
estrutura um parágrafo do texto.
– O elemento p também é utilizado na estruturação
de formulários, veremos na próxima aula.

12. • Funções específicas:
– Tratamento adequado da informação.
– Adivinhe? Semântica.
– Padronização da estruturação dos documentos.
• Problemas irritantes:
– Browsers incompatíveis.
– Uso inadequado.
– Problemas com DOM (no JavaScript).

13. • <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.

14. • <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.

15. • <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.

16. • <aside>
– O elemento aside representa um bloco de
conteúdo que referência o conteúdo que envolta
do elemento aside. O aside pode 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.

17. • <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

18. • <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.

19. • <table>
– Apenas para dados tabulares.
– Container para abrigar as outras estruturas
tabulares providas por outras tags.

20. • <thead>
– Cabeçalho da tabela.
• <th>
– Célula do cabeçalho.
• <tbody>
– Corpo dos dado da tabela.
• <tr>
– Linha da tabela.
• <td>
– Celula dos dados da tabela.
• <tfooter>
– Rodapé da tabela.

21. • Lista Ordenada:
• <ol>
• Lista Não Ordenada:
• <ul>
• Itens da lista:
• <li>

22. • Muito!
• Formulários.
• Objetos.
• Elementos incorporados.
• Frames.
• Imagens.
• Conteúdo Multimídia.

23. www.tiago.blog.br
tiago@tiago.blog.br