html
HyperText Mark-up Language
Linguagem de formatação de
documentos
Modelos de conteúdo
 Elementos em linha – InLine Elements
 Elementos de bloco – Block Elements
5/30/2015
Modelos de conteúdo
 Elementos em linha – InLine Elements
 Normalmente são marcadores de texto
<a>
<strong>
<em>
<img>
<...
Modelos de conteúdo
 Elementos de bloco – Block Elements
 São como caixas que dividem o conteúdo nas
secções do layout
<...
Regras básicas de layout
 Os elementos Inline podem conter outros
elementos Inline dependendo da categoria do
elemento.
E...
Regras básicas de layout
 Os elementos InLine nunca podem conter
elementos bloco:
<a><div>...</div></a>
5/30/2015
Regras básicas de layout
 Os elementos Block podem conter qualquer
elemento inline:
<div><strong>...</strong></div>
<arti...
Regras básicas de layout
 Os elementos Block podem conter elementos
Block dependendo da categoria em que eles se
encontre...
Regras básicas de layout
CATEGORIAS
Cada elemento no HTML pode ou não fazer parte de
um grupo de elementos com característ...
Regras básicas de layout
CATEGORIAS
Cada elemento no HTML pode ou não fazer parte de
um grupo de elementos com característ...
Regras básicas de layout
CATEGORIAS
Cada elemento no HTML pode ou não fazer parte de
um grupo de elementos com característ...
Regras básicas de layout
CATEGORIAS
Cada elemento no HTML pode ou não fazer parte de
um grupo de elementos com característ...
Regras básicas de layout
CATEGORIAS
Cada elemento no HTML pode ou não fazer parte de
um grupo de elementos com característ...
Regras básicas de layout
CATEGORIAS
Cada elemento no HTML pode ou não fazer parte de
um grupo de elementos com característ...
Regras básicas de layout
CATEGORIAS
Cada elemento no HTML pode ou não fazer parte de
um grupo de elementos com característ...
Regras básicas de layout
CATEGORIAS
 Sectioning Content
 Article
 Aside
 Nav
 Section
5/30/2015
Regras básicas de layout
CATEGORIAS
 Heading Content
 H1
 H2
 H3
 H4
 H5
 H6
 hgroup
5/30/2015
Regras básicas de layout
CATEGORIAS
 Phrasing Content
 a
 abbr
 area (map>area)
 audio
 b
 bdo
 br
 button
 canv...
Regras básicas de layout
CATEGORIAS
 Phrasing Content
 Mark
 Meter
 Noscript
 Object
 Output
 Progress
 Samp
 Scr...
Regras básicas de layout
CATEGORIAS
 Embeded Content
 Audio
 Canvas
 Iframe
 Img
 Math
 Object
 Svg
 Video
5/30/2...
Novos Elementos Estruturais do html5
Estrutura base de um documento:
<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset...
Estrutura base do elemento BODY:
Novos Elementos Estruturais do html5
Estrutura base de um documento:
<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset=Latin-1>
</head>
<body>
<HEADER>…</H...
BODY
HEADER
NAV
SECTION
HEADER
ARTICLE
HEADER
ASIDE
FOOTER
<P>...
<P>...
ARTICLE
HEADER
ASIDE
FOOTER
<P>...
FOOTER
SECTION...
Estrutura do elemento <body>
Elementos semânticos do html5
html 5
Estrutura do elemento <body>
Elementos semânticos do html5
html 5
Exercício
Defina a secção header:
<!doctype html>
<html lang=“pt”>
<head>
<meta charset=ISO-8859-1>
<title>Benvindo ao htm...
html 5
 Exercício
5. Defina a secção header:
<!doctype html>
<html lang=“pt”>
<head>
<meta charset=ISO-8859-1>
<title>Ben...
html 5
 Exercício
5. Defina a secção header:
<!doctype html>
<html lang=“pt”>
<head>
<meta charset=ISO-8859-1>
<title>Ben...
 Exercício
5. Defina a secção header:
<!doctype html>
<html lang=“pt”>
<head>
<meta charset=ISO-8859-1>
<title>Benvindo a...
 Exercício
5. Defina a secção header:
<!doctype html>
<html lang=“pt”>
<head>
<meta charset=ISO-8859-1>
<title>Benvindo a...
 Exercício
5. Defina a secção nav:
<!doctype html>
<html lang=“pt”>
<head>
<meta charset=ISO-8859-1>
<title>Benvindo ao h...
 Exercício
5. Defina a secção nav:
…
<body>
<header>
<h1>Explore o continente Europeu</h1>
<h2>Onde quer ir hoje?</h2>
</...
ver
Deve ser utilizado quando
existir um resumo por tópicos
do documento.
“Document Outline” (esboço
do documento) ou cont...
 Exercício
6. Defina a secção section:
<!doctype html>
...
<section>
<h1>Emprersa de Viagens</h1>
<p>Dê a volta ao mundo ...
ver
 Exercício
6. Cada <section> pode conter o seu
Próprio <header>:
<!doctype html>
...
<section>
<header><h1>Quem Somos...
Deve ser um
conteúdo
independente e
auto-contido que
possa ser
reutilizado.
 Exercício
7. Defina a secção <article>
38
html 5
Deve ser um
conteúdo
independente e
auto-contido que
possa ser
reutilizado.
Blog
Post
Notícias
Sobre
O sitePromo...
39
html 5
ver
 Exercício
7. Defina a secção <article>
...
<body>
...
</section>
<article>
<h1>Artigos em promoção</h1>
<u...
40
html 5
 Exercício
8. Defina a secção <aside>
Deve ser conter
informação
relacionada com a
informação do
<article> mas ...
41
html 5
 Exercício
8. Defina a secção <aside>
Deve ser conter
informação
relacionada com a
informação do
<article> mas ...
42
SECTION –Economia
html 5
 Exercício
8. Defina a secção <aside>
HEADER - Expresso
ASIDE – Resgate à
Grécia
ASIDE – Resg...
43
SECTION –Economia
html 5
 Exercício
8. Defina a secção <aside>
HEADER - Expresso
ASIDE - Comissário
viu-se grego
NAV
•...
44
html 5
 Exercício
9. Defina <footer>
Não é uma secção mas uma
descrição de uma secção.
HEADER - Expresso
HEADER
Os Rre...
45
html 5
 Exercício
9. Defina <footer>
Pode colocar mais de um footer e não tem
de ser no fim da página.
HEADER - Expres...
46
html 5
A forma como hirerquizamos o código de html5 vai
influenciar o modo como os motores de busca e os
geradores de c...
HTML5
Como decidir que elemento utilizar
html 5
48
HTML5
Como decidir que elemento utilizar
O elemento deve iniciar
uma nova Secção ?
html 5
49
HTML5
Como decidir que elemento utilizar
O elemento deve iniciar
uma nova Secção ?
NÃO
html 5
50
HTML5
Como decidir que elemento utilizar
O elemento deve iniciar
uma nova Secção ?
NÃO
conteúdo é
introdutório ?
html 5
51
HTML5
Como decidir que elemento utilizar
O elemento deve iniciar
uma nova Secção ?
NÃO
• O conteúdo é
introdutório ?
SI...
52
HTML5
Como decidir que elemento utilizar
NÃO
• O conteúdo é
introdutório ?
html 5
53
HTML5
Como decidir que elemento utilizar
NÃO
• O conteúdo é
introdutório ?
O conteúdo tem
informação sobre o autor,
lin...
54
HTML5
Como decidir que elemento utilizar
NÃO
• O conteúdo é
introdutório ?
O conteúdo tem
informação sobre o autor,
lin...
55
HTML5
Como decidir que elemento utilizar
NÃO
O conteúdo tem
informação sobre o autor,
links rerlacionados, ou
informaçã...
56
HTML5
Como decidir que elemento utilizar
NÃO
O conteúdo tem
informação sobre o autor,
links rerlacionados, ou
informaçã...
57
HTML5
Como decidir que elemento utilizar
O conteúdo está agrupado apenas por
uma questão visiual ou para que o seu
sigi...
58
HTML5
Como decidir que elemento utilizar
O conteúdo está agrupado apenas por
uma questão visiual ou para que o seu
sigi...
59
HTML5
Como decidir que elemento utilizar
O elemento deve iniciar
uma nova Secção ?
SIM
html 5
60
HTML5
Como decidir que elemento utilizar
O elemento deve iniciar
uma nova Secção ?
SIM
O conteúdo faz parte da
navegaçã...
61
HTML5
Como decidir que elemento utilizar
SIM
SIM
NAV
html 5
Usar só para a
navegação principal
O elemento deve iniciar
...
62
HTML5
Como decidir que elemento utilizar
O conteúdo faz parte da
navegação principal da
página?
NÃO
html 5
63
HTML5
Como decidir que elemento utilizar
O conteúdo faz parte da
navegação principal da
página?
NÃO
O conteúdo é auto-c...
64
HTML5
Como decidir que elemento utilizar
SIM ARTICLE
html 5
O conteúdo faz parte da
navegação principal da
página?
NÃO
...
65
HTML5
Como decidir que elemento utilizar
O conteúdo é auto-
contido e poderia ser
usado de forma
independente ?
SIM ART...
66
HTML5
Como decidir que elemento utilizar
O conteúdo é auto-
contido e poderia ser
usado de forma
independente ?
SIM ART...
67
HTML5
Como decidir que elemento utilizar
SIM
NÃO
ASIDE
Está relacionado apenas
de forma tanjencial com o
conteúdo que o...
68
HTML5
Como decidir que elemento utilizar
SIM
NÃO
ASIDE
Está relacionado apenas
de forma tanjencial com o
conteúdo que o...
69
HTML5
Como decidir que elemento utilizar
SIM
NÃO
É conteúdo agrupado por
tema, e ter o seu próprio
header e footer?
SEC...
70
RESUMO
Tags (ou marcadores), elementos e atributos
Estrutura base de um documento HTML
Codificação de caracteres e d...
Próximos SlideShares
Carregando em…5
×

04 01 estrutura de um documento

198 visualizações

Publicada em

HTML5 Estrutura de um documento

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
198
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
6
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • http://www.w3c.br/cursos/html5/conteudo/capitulo4.html
  • http://www.w3c.br/cursos/html5/conteudo/capitulo4.html
  • http://www.w3c.br/cursos/html5/conteudo/capitulo4.html
  • http://www.w3c.br/cursos/html5/conteudo/capitulo4.html
  • http://www.w3c.br/cursos/html5/conteudo/capitulo4.html
  • http://www.w3c.br/cursos/html5/conteudo/capitulo4.html
  • http://www.w3c.br/cursos/html5/conteudo/capitulo4.html
  • http://www.w3c.br/cursos/html5/conteudo/capitulo4.html
  • http://www.w3c.br/cursos/html5/conteudo/capitulo4.html
  • http://www.w3c.br/cursos/html5/conteudo/capitulo4.html
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • Lynda – Choosing the right structural element
  • 04 01 estrutura de um documento

    1. 1. html HyperText Mark-up Language Linguagem de formatação de documentos
    2. 2. Modelos de conteúdo  Elementos em linha – InLine Elements  Elementos de bloco – Block Elements 5/30/2015
    3. 3. Modelos de conteúdo  Elementos em linha – InLine Elements  Normalmente são marcadores de texto <a> <strong> <em> <img> <imput> <span> 5/30/2015
    4. 4. Modelos de conteúdo  Elementos de bloco – Block Elements  São como caixas que dividem o conteúdo nas secções do layout <div> <nav> <section> <article> <aside> 5/30/2015
    5. 5. Regras básicas de layout  Os elementos Inline podem conter outros elementos Inline dependendo da categoria do elemento. Exemplos:  O elemento <p> pode conter um elemento <a>  O elemento <a> não pode conter o elemento <label> 5/30/2015
    6. 6. Regras básicas de layout  Os elementos InLine nunca podem conter elementos bloco: <a><div>...</div></a> 5/30/2015
    7. 7. Regras básicas de layout  Os elementos Block podem conter qualquer elemento inline: <div><strong>...</strong></div> <article><em>...</em></article> 5/30/2015
    8. 8. Regras básicas de layout  Os elementos Block podem conter elementos Block dependendo da categoria em que eles se encontrem: Exemplo: <p><div></div></p> <div><p></p></div> 5/30/2015
    9. 9. Regras básicas de layout CATEGORIAS Cada elemento no HTML pode ou não fazer parte de um grupo de elementos com características similares. As categorias são:  Metadata Content  Flow Content  Sectioning Content  Heading Content  Phrasing Content  Embeded Content  Interactive Content 5/30/2015
    10. 10. Regras básicas de layout CATEGORIAS Cada elemento no HTML pode ou não fazer parte de um grupo de elementos com características similares. As categorias são:  Metadata Content  Base  Link  Meta  NoScript  Script  Style  Title 5/30/2015
    11. 11. Regras básicas de layout CATEGORIAS Cada elemento no HTML pode ou não fazer parte de um grupo de elementos com características similares. As categorias são:  Flow Content – elementos utilizados no body  a  abbr  address  area (se for descendente do elemento map)  article  aside  audio  b 5/30/2015
    12. 12. Regras básicas de layout CATEGORIAS Cada elemento no HTML pode ou não fazer parte de um grupo de elementos com características similares. As categorias são:  Flow Content – elementos utilizados no body  Bdo (bi-directional override - rtl)  Blockquote  Br  Button  Canvas  Cite  Code  Command 5/30/2015
    13. 13. Regras básicas de layout CATEGORIAS Cada elemento no HTML pode ou não fazer parte de um grupo de elementos com características similares. As categorias são:  Flow Content – elementos utilizados no body  Datalist  Del  Details  Dfn  Div  DL  Em  Embed 5/30/2015 o FieldSet o Figure o Footer o Form o H1...H6 o Header o Hgroup o Hr o I o iframe
    14. 14. Regras básicas de layout CATEGORIAS Cada elemento no HTML pode ou não fazer parte de um grupo de elementos com características similares. As categorias são:  Flow Content – elementos utilizados no body  Img  Input  Ins  Kbd  Keygen  Label  Map  Mark 5/30/2015 o Math o Menu o Meter o Nav o NoScript o Object o OL o Output o P o pre
    15. 15. Regras básicas de layout CATEGORIAS Cada elemento no HTML pode ou não fazer parte de um grupo de elementos com características similares. As categorias são:  Flow Content – elementos utilizados no body  Progress  Q  Samp  Script  Section  Select  small  span 5/30/2015 o Strong o Sub o Sup o Table o Texarea o Time o Ul o Var o Video o Text
    16. 16. Regras básicas de layout CATEGORIAS  Sectioning Content  Article  Aside  Nav  Section 5/30/2015
    17. 17. Regras básicas de layout CATEGORIAS  Heading Content  H1  H2  H3  H4  H5  H6  hgroup 5/30/2015
    18. 18. Regras básicas de layout CATEGORIAS  Phrasing Content  a  abbr  area (map>area)  audio  b  bdo  br  button  canvas 5/30/2015 • cite • code • command • datalist • del • dfn • em • Embed • i • iframe • img • input • Ins • kbd • keygen • Label • Link • Map
    19. 19. Regras básicas de layout CATEGORIAS  Phrasing Content  Mark  Meter  Noscript  Object  Output  Progress  Samp  Script  Select  Small 5/30/2015 • Span • strong • Sub • Sup • Svg • Texarea • Time • Var • Video • Text
    20. 20. Regras básicas de layout CATEGORIAS  Embeded Content  Audio  Canvas  Iframe  Img  Math  Object  Svg  Video 5/30/2015
    21. 21. Novos Elementos Estruturais do html5 Estrutura base de um documento: <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=Latin-1> </head> <body> …. <body> </html>
    22. 22. Estrutura base do elemento BODY: Novos Elementos Estruturais do html5
    23. 23. Estrutura base de um documento: <!DOCTYPE html> <html lang=“pt”> <head> <meta charset=Latin-1> </head> <body> <HEADER>…</HEADER> <SECTION>…</SECTION> <ARTICLE>…</ARTICLE> <NAV>…</NAV> <ASIDE>…<ASIDE> <FOOTER>…</FOOTER> <body> </html> Novos Elementos Estruturais do html5
    24. 24. BODY HEADER NAV SECTION HEADER ARTICLE HEADER ASIDE FOOTER <P>... <P>... ARTICLE HEADER ASIDE FOOTER <P>... FOOTER SECTION ASIDE HEADER NAV <P>... FOOTER Novos Elementos Estruturais do html5 FOOTER FOOTER
    25. 25. Estrutura do elemento <body> Elementos semânticos do html5 html 5
    26. 26. Estrutura do elemento <body> Elementos semânticos do html5 html 5
    27. 27. Exercício Defina a secção header: <!doctype html> <html lang=“pt”> <head> <meta charset=ISO-8859-1> <title>Benvindo ao html</title> </head> <body> <header> </header> <nav> </nav> </body> </html> Deve conter o logotipo ou barra superior e pode conter a barra de navegação embora não seja o mais indicado. Deve conter elementos fixos de um site
    28. 28. html 5  Exercício 5. Defina a secção header: <!doctype html> <html lang=“pt”> <head> <meta charset=ISO-8859-1> <title>Benvindo ao html</title> </head> <body> <header> <h1>Explore o continente Europeu</h1> <h2>Onde quer ir hoje?</h2> </header> <nav> </nav> </body> </html>
    29. 29. html 5  Exercício 5. Defina a secção header: <!doctype html> <html lang=“pt”> <head> <meta charset=ISO-8859-1> <title>Benvindo ao html</title> </head> <body> <header> <h1>Explore o continente Europeu</h1> <h2>Onde quer ir hoje?</h2> <img src=“logo.gif”> </header> <nav> </nav> </body> </html> E se não quiser que o <h2> apareça no outline da página ? Como ver o header como um único elemento?
    30. 30.  Exercício 5. Defina a secção header: <!doctype html> <html lang=“pt”> <head> <meta charset=ISO-8859-1> <title>Benvindo ao html</title> </head> <body> <header> <hgroup> <h1>Explore o continente Europeu</h1> <h2>Onde quer ir hoje?</h2> <img src=“logo.gif”> </hgroup> </header> html 5
    31. 31.  Exercício 5. Defina a secção header: <!doctype html> <html lang=“pt”> <head> <meta charset=ISO-8859-1> <title>Benvindo ao html</title> </head> <body> <header> <hgroup> <h1>Explore o continente Europeu</h1> <h2>Onde quer ir hoje?</h2> <img src=“logo.gif”> </hgroup> </header> html 5
    32. 32.  Exercício 5. Defina a secção nav: <!doctype html> <html lang=“pt”> <head> <meta charset=ISO-8859-1> <title>Benvindo ao html</title> </head> <body> <header> <h1>Explore o continente Europeu</h1> <h2>Onde quer ir hoje?</h2> </header> <nav> </nav> </body> </html> Deve conter os elementos de navegação principal de uma página. Links / botões. Pode conter outros elementos que não navegação. html 5
    33. 33.  Exercício 5. Defina a secção nav: … <body> <header> <h1>Explore o continente Europeu</h1> <h2>Onde quer ir hoje?</h2> </header> <nav> <ul> <li><a href=“viagens.htm” title=“Viagens”>Viagens</a></li> <li><a href=“missao.htm” title=“Aquilo em que acreditamos”>Missão</a></li> <li><a href=“recursos.htm” title=“Planeie os seus rercursos”>Recursos</a></li> <li><a href=“exploradores.htm” title=“A nossa Comunidade”>Exploradores</a></li> <li><a href=“contactos.htm” title=“Contacte-nos” class=“ultimo”>Contactos</a></li> </ul> </nav> </body> ver html 5
    34. 34. ver Deve ser utilizado quando existir um resumo por tópicos do documento. “Document Outline” (esboço do documento) ou conteúdo de introdução.  Exercício 6. Defina a secção section: <!doctype html> <html lang=“pt”> <head> <meta charset=ISO-8859-1> <title>Benvindo ao html</title> </head> <body> <header>...</header> <nav>...</nav> <section> </section> </body> </html>
    35. 35.  Exercício 6. Defina a secção section: <!doctype html> ... <section> <h1>Emprersa de Viagens</h1> <p>Dê a volta ao mundo connosco em 80 dias.</p> <p>Consulte a nossa oferta nesta página</p> </section> ... </html> ver
    36. 36. ver  Exercício 6. Cada <section> pode conter o seu Próprio <header>: <!doctype html> ... <section> <header><h1>Quem Somos</h1></header> <h1>Emprersa de Viagens</h1> <p>Dê a volta ao mundo connosco em 80 dias.</p> <p>Consulte a nossa oferta nesta página</p> </section> ... </html>
    37. 37. Deve ser um conteúdo independente e auto-contido que possa ser reutilizado.  Exercício 7. Defina a secção <article>
    38. 38. 38 html 5 Deve ser um conteúdo independente e auto-contido que possa ser reutilizado. Blog Post Notícias Sobre O sitePromoções  Exercício 7. Defina a secção <article>
    39. 39. 39 html 5 ver  Exercício 7. Defina a secção <article> ... <body> ... </section> <article> <h1>Artigos em promoção</h1> <ul> <li><h2>Viagem às Maldivas</h2></li> <li><h2>Viagem a Marrocos</h2></li> </ul> </article>
    40. 40. 40 html 5  Exercício 8. Defina a secção <aside> Deve ser conter informação relacionada com a informação do <article> mas que poderia ser usada como conteúdo independente
    41. 41. 41 html 5  Exercício 8. Defina a secção <aside> Deve ser conter informação relacionada com a informação do <article> mas que poderia ser usada como conteúdo independente Informação Complementar Conteúdo independente
    42. 42. 42 SECTION –Economia html 5  Exercício 8. Defina a secção <aside> HEADER - Expresso ASIDE – Resgate à Grécia ASIDE – Resgate a Portugal HEADER Os Resgates Financeiros da UE ARTICLE O comissário europeu xpto rerferiu hoje nas suas declarações à..... NAV •Política • Economia • Desporto
    43. 43. 43 SECTION –Economia html 5  Exercício 8. Defina a secção <aside> HEADER - Expresso ASIDE - Comissário viu-se grego NAV •Política • Economia • Desporto ASIDE O local onde se coloca o ASIDE indica a sua função neste caso só diz rrespeito a um artigo HEADER Os Resgates Financeiros da UE ARTICLE O comissário europeu xpto rerferiu hoje nas suas declarações à.....
    44. 44. 44 html 5  Exercício 9. Defina <footer> Não é uma secção mas uma descrição de uma secção. HEADER - Expresso HEADER Os Rresgates Financeiros da UE ARTICLE O comissário europeu xpto rerferiu hoje nas suas declarações à..... NAV •Política • Economia • Desporto ASIDE – Resgate à Grécia ASIDE – Resgate a Portugal FOOTER FOOTER SECTION –Economia FOOTER
    45. 45. 45 html 5  Exercício 9. Defina <footer> Pode colocar mais de um footer e não tem de ser no fim da página. HEADER - Expresso NAV •Política • Economia • Desporto ASIDE – Resgate à Grécia ASIDE – Resgate a Portugal FOOTER FOOTER SECTION –Economia FOOTER HEADER Os Rresgates Financeiros da UE ARTICLE O comissário europeu xpto rerferiu hoje nas suas declarações à..... FOOTER
    46. 46. 46 html 5 A forma como hirerquizamos o código de html5 vai influenciar o modo como os motores de busca e os geradores de código automático vão interpretar os dados.
    47. 47. HTML5 Como decidir que elemento utilizar html 5
    48. 48. 48 HTML5 Como decidir que elemento utilizar O elemento deve iniciar uma nova Secção ? html 5
    49. 49. 49 HTML5 Como decidir que elemento utilizar O elemento deve iniciar uma nova Secção ? NÃO html 5
    50. 50. 50 HTML5 Como decidir que elemento utilizar O elemento deve iniciar uma nova Secção ? NÃO conteúdo é introdutório ? html 5
    51. 51. 51 HTML5 Como decidir que elemento utilizar O elemento deve iniciar uma nova Secção ? NÃO • O conteúdo é introdutório ? SIM HEADER html 5
    52. 52. 52 HTML5 Como decidir que elemento utilizar NÃO • O conteúdo é introdutório ? html 5
    53. 53. 53 HTML5 Como decidir que elemento utilizar NÃO • O conteúdo é introdutório ? O conteúdo tem informação sobre o autor, links rerlacionados, ou informação legal ? SIM FOOTER html 5
    54. 54. 54 HTML5 Como decidir que elemento utilizar NÃO • O conteúdo é introdutório ? O conteúdo tem informação sobre o autor, links rerlacionados, ou informação legal ? SIM FOOTER Pode não estar no fundo da página html 5
    55. 55. 55 HTML5 Como decidir que elemento utilizar NÃO O conteúdo tem informação sobre o autor, links rerlacionados, ou informação legal ? html 5
    56. 56. 56 HTML5 Como decidir que elemento utilizar NÃO O conteúdo tem informação sobre o autor, links rerlacionados, ou informação legal ? O conteúdo está agrupado apenas por uma questão visiual ou para que o seu siginificado possa ser extendido para um ID ou Class ? html 5
    57. 57. 57 HTML5 Como decidir que elemento utilizar O conteúdo está agrupado apenas por uma questão visiual ou para que o seu siginificado possa ser extendido para um ID ou Class ? Só por questão visual DIV html 5
    58. 58. 58 HTML5 Como decidir que elemento utilizar O conteúdo está agrupado apenas por uma questão visiual ou para que o seu siginificado possa ser extendido para um ID ou Class ? Não é conteúdo para uma secção aside html 5
    59. 59. 59 HTML5 Como decidir que elemento utilizar O elemento deve iniciar uma nova Secção ? SIM html 5
    60. 60. 60 HTML5 Como decidir que elemento utilizar O elemento deve iniciar uma nova Secção ? SIM O conteúdo faz parte da navegação principal da página? html 5
    61. 61. 61 HTML5 Como decidir que elemento utilizar SIM SIM NAV html 5 Usar só para a navegação principal O elemento deve iniciar uma nova Secção ? O conteúdo faz parte da navegação principal da página?
    62. 62. 62 HTML5 Como decidir que elemento utilizar O conteúdo faz parte da navegação principal da página? NÃO html 5
    63. 63. 63 HTML5 Como decidir que elemento utilizar O conteúdo faz parte da navegação principal da página? NÃO O conteúdo é auto-contido e poderia ser usado de forma independente ? html 5
    64. 64. 64 HTML5 Como decidir que elemento utilizar SIM ARTICLE html 5 O conteúdo faz parte da navegação principal da página? NÃO O conteúdo é auto-contido e poderia ser usado de forma independente ?
    65. 65. 65 HTML5 Como decidir que elemento utilizar O conteúdo é auto- contido e poderia ser usado de forma independente ? SIM ARTICLE NÃO Está relacionado apenas de forma tangencial com o conteúdo que o rodeia ? html 5
    66. 66. 66 HTML5 Como decidir que elemento utilizar O conteúdo é auto- contido e poderia ser usado de forma independente ? SIM ARTICLE Está relacionado apenas de forma tanjencial com o conteúdo que o rodeia ? SIM ASIDE html 5 NÃO
    67. 67. 67 HTML5 Como decidir que elemento utilizar SIM NÃO ASIDE Está relacionado apenas de forma tanjencial com o conteúdo que o rodeia ? É conteúdo agrupado por tema, e pode ter o seu próprio header e footer? html 5
    68. 68. 68 HTML5 Como decidir que elemento utilizar SIM NÃO ASIDE Está relacionado apenas de forma tanjencial com o conteúdo que o rodeia ? É conteúdo agrupado por tema, e ter o seu próprio header e footer? SIM SECTION html 5
    69. 69. 69 HTML5 Como decidir que elemento utilizar SIM NÃO É conteúdo agrupado por tema, e ter o seu próprio header e footer? SECTION Use um <h...> para criar uma secção implicitamente html 5
    70. 70. 70 RESUMO Tags (ou marcadores), elementos e atributos Estrutura base de um documento HTML Codificação de caracteres e definição de idioma Os primeiros novos elementos estruturais do HTML5: Header, Nav, Aside, Footer, Section, Article html 5

    ×