O documento apresenta as principais mudanças na semântica da web com a introdução do HTML5, incluindo novos elementos estruturais como <section>, <article>, <nav>, <time> e <data> que fornecem informações sobre o conteúdo de maneira mais clara e significativa do que tags genéricas.

1. LIÇÕES PRÁTICAS
DE
SEMÂNTICA
COM
H T M L 55
HT L
HTML5pt.org
d 3 novembro 2011
André Luís c
@andr3 andre-filipe-luis@telecom.pt b

2. OH HAI!
@andr3 http://id.andr3.net
me@andr3.net
andre-filipe-luis@telecom.pt
andr3.net
dailyphotowall.net
igive.sapo.pt
mobifeeds.net

3. OH HAI!
@andr3 http://id.andr3.net
Departamento de
Qualidade & Usabilidade
do SAPO
http://ux.sapo.pt

4. OH HAI!

5. OH HAI!

6. OH HAI!
mais em http://slideshare.net/andr3
Atalho: http://33om.sl.pt

7. Agenda

8. Agenda
1 Semântica: O que é e porque é
importante?
2 A web semântica nos tempos
de “antigamente”
3 No admirável mundo novo
do HTML5

9. Agenda
Semântica

10. Agenda
Semântica

11. Semântica:
O que é & porque é importante?

12. Semântica: O que é & porque é importante?
Semântica subst. fem.
Estudo do significado das palavras.

13. Semântica: O que é & porque é importante?
Web Semântica?

14. Semântica: O que é & porque é importante?
Web Semântica?
http://id.sapo.pt/andr3

15. Semântica: O que é & porque é importante?
Web Semântica?
http://id.sapo.pt/andr3

16. Semântica: O que é & porque é importante?
Web Semântica?
http://id.sapo.pt/andr3

17. Semântica: O que é & porque é importante?
Web Semântica?
http://id.sapo.pt/andr3
Uma pessoa!

18. Semântica: O que é & porque é importante?
Web Semântica?
http://id.sapo.pt/andr3
Uma pessoa!

19. Semântica: O que é & porque é importante?
Web Semântica?
1x <div>,
1x <h1>,
http://id.sapo.pt/andr3 3x <p>,
1x <a>...
Uma pessoa!

20. Semântica: O que é & porque é importante?
Web Semântica?
1x <div>,
1x <h1>,
http://id.sapo.pt/andr3 3x <p>,
1x <a>...
Uma pessoa!

21. Semântica: O que é & porque é importante?
Web Semântica?
1x <div>,
1x <h1>,
http://id.sapo.pt/andr3 3x <p>,
1x <a>...
Uma pessoa!

22. Semântica: O que é & porque é importante?
Web Semântica?
1x <div>,
1x <h1>,
http://id.sapo.pt/andr3 3x <p>,
1x <a>...
Uma pessoa!

23. Semântica: O que é & porque é importante?
Web Semântica?
http://id.sapo.pt/andr3
Uma pessoa!
Try again...

24. Semântica: O que é & porque é importante?
Web Semântica?
1x Pessoa!
http://id.sapo.pt/andr3
Uma pessoa!

25. A web semântica nos
tempos de antigamente?

26. A web semântica nos tempos de antigamente?
HTML 4 XHTML 1.0

27. A web semântica nos tempos de antigamente?
HTML 4 XHTML 1.0
Desenhados para documentos hipertexto.

28. A web semântica nos tempos de antigamente?
HTML 4 XHTML 1.0
Desenhados para documentos hipertexto.
abbr acronym address applet area b base basefont
do big blockquote body br button caption center cite
ode col colgroup dd del dfn dir div dl dt em fieldset
nt form frame frameset h1 h2 h3 h4 h5 h6 head hr
ml i iframe img input ins isindex kbd label legend l
link map menu meta noframes noscript object ol

29. A web semântica nos tempos de antigamente?
HTML 4 XHTML 1.0
Desenhados para documentos hipertexto.
abbr acronym address applet area b base basefont
do big blockquote body br button caption center cite
ode col colgroup dd del dfn dir div dl dt em fieldset
nt form frame frameset h1 h2 h3 h4 h5 h6 head hr
ml i iframe img input ins isindex kbd label legend l
link map menu meta noframes noscript object ol

30. A web semântica nos tempos de antigamente?
CIRCA 2004
index.html
model.xml
(RDF)

31. A web semântica nos tempos de antigamente?
CIRCA 2004
index.html
model.xml
(RDF)
CIRCA 2005
index.html

32. A web semântica nos tempos de antigamente?
CIRCA 2004
index.html
model.xml
(RDF)
CIRCA 2005
index.html

33. A web semântica nos tempos de antigamente?
CIRCA 2004
index.html
model.xml
(RDF)
CIRCA 2005
RDFa
index.html RDF-in-attributes

34. A web semântica nos tempos de antigamente?
http://microformats.org

35. A web semântica nos tempos de antigamente?
http://microformats.org
<div>
<h1>André Luís</h1>
<p>Lisboa, Portugal</p>
<p>
<a href=“mailto:me@andr3.net”>
me@andr3.net
</a>
</p>
<p>web nerd.</p>
</div>

36. A web semântica nos tempos de antigamente?
http://microformats.org
<div class=“vcard”>
<h1 class=“fn”>André Luís</h1>
<p class=“adr”>Lisboa, Portugal</p>
<p>
<a class=“email” href=“mailto:me@andr3.net”>
me@andr3.net
</a>
</p>
<p class=“note”>web nerd.</p>
</div>

37. A web semântica nos tempos de antigamente?
http://microformats.org
<div class=“vcard”>
<h1 class=“fn”>André Luís</h1>
<p class=“adr”>Lisboa, Portugal</p>
<p>
<a class=“email” href=“mailto:me@andr3.net”>
me@andr3.net
</a>
</p>
<p class=“note”>web nerd.</p>
</div>

38. A web semântica nos tempos de antigamente?
http://microformats.org
Número de formatos limitado, são criados
pela comunidade.
Usados por motores de busca &
plugins de browsers para melhorar a experiência.
Baseiam-se em atributos omnipresentes.
Fáceis de publicar, fácil de consumir.

39. A web semântica nos tempos de antigamente?
RDFa
RDF-in-attributes
http://www.w3.org/TR/xhtml-rdfa-primer/

40. A web semântica nos tempos de antigamente?
RDFa
RDF-in-attributes
http://www.w3.org/TR/xhtml-rdfa-primer/
<div>
<h1>André Luís</h1>
<p>Lisboa, Portugal</p>
<p>
<a href=“mailto:me@andr3.net”>
me@andr3.net
</a>
</p>
<p>web nerd.</p>
</div>

41. A web semântica nos tempos de antigamente?
RDFa
RDF-in-attributes
http://www.w3.org/TR/xhtml-rdfa-primer/
<div xmlns:v="http://www.w3.org/2001/vcard-rdf/3.0#"
about=“http://id.sapo.pt/andr3” typeof=“v:VCard”>
<h1 property=“v:FN”>André Luís</h1>
<p role=“v:ADR”>Lisboa, Portugal</p>
<p>
<a rel=“v:EMAIL” href=“mailto:me@andr3.net”>
me@andr3.net
</a>
</p>
<p property=“v:NOTE”>web nerd.</p>
</div>

42. A web semântica nos tempos de antigamente?
RDFa
RDF-in-attributes
http://www.w3.org/TR/xhtml-rdfa-primer/
<div xmlns:v="http://www.w3.org/2001/vcard-rdf/3.0#"
about=“http://id.sapo.pt/andr3” typeof=“v:VCard”>
<h1 property=“v:FN”>André Luís</h1>
<p role=“v:ADR”>Lisboa, Portugal</p>
<p>
<a rel=“v:EMAIL” href=“mailto:me@andr3.net”>
me@andr3.net
</a>
</p>
<p property=“v:NOTE”>web nerd.</p>
</div>

43. A web semântica nos tempos de antigamente?
RDFa
RDF-in-attributes
http://www.w3.org/TR/xhtml-rdfa-primer/
Infinitos formatos... qualquer um pode escrever um
vocabulário (ex: OpenGraph do Facebook).
Usados por motores de busca &
plugins de browsers para melhorar a experiência.
Baseiam-se em novos atributos: namespaces em XHTML,
novos DTD para HTML.
Mais complexos de publicar & consumir.
http://www.alistapart.com/articles/introduction-to-rdfa/

44. 88mph

45. Copyright © 2000-2011 Berlin Wallpaper, Inc. The Jetsons are ©, ® & ™ by Hanna-Barbera Productions, Inc.

46. No admirável
mundo novo do HTML5!
Copyright © 2000-2011 Berlin Wallpaper, Inc. The Jetsons are ©, ® & ™ by Hanna-Barbera Productions, Inc.

47. No admirável mundo novo do HTML5!
Semântica no HTML5
Novos elementos estruturais
article aside audio canvas data
datalist details eventsource
figcaption figure footer header
mark meter nav progress
section source time track video

48. Lição nº1 Elementosnomes!
Chamar as coisas pelos
estruturais

50. <section>
Serve para
agrupar
conteúdo e
elementos de
um mesmo
tema.

51. <article>
Identifica
porções de
artigos
independentes,
items de
conteúdo
portável.
Também deve
ser aplicado em
widgets.

52. <nav>
Demarca
informação de
navegação.
Listas de links
para secções de
conteúdo
importante são
claros membros
de uma <nav>.
Nem todas as
listas de links
justificam uma
<nav>.

53. <time> vs. <data>
Esta semana o
Ian Hickson
mudou a
especificação e
removeu o
elemento <time>
e o atributo
@pubdate nos
<article>.
Introduziu um
<data value=“...”>.

54. <time> vs. <data>
Esta semana o
Ian Hickson
<time datetime="2011-11-03T18:55:42"> mudou a
3 de novembro 18:55 especificação e
removeu o
</time>
elemento <time>
e o atributo
@pubdate nos
<article>.
Introduziu um
<data value=“...”>.

55. <aside>, <figure>
Conteúdo à parte do principal. Notas, referências, conteúdo
relacionado são bons candidatos.
<figure> aplica-se, por ex., às imagens usadas na wikipedia.
<mark>, <b>, <i>, <u>, <s>
Elementos de UI sem qualquer valor semântico.
mark: keyword pesquisa. b: negrito. i: voz alternativa.
u: anotação,. s: irrelevante.

56. <aside>, <figure>
Conteúdo à parte do principal. Notas, referências, conteúdo
relacionado são bons candidatos.
<figure> aplica-se, por ex., às imagens usadas na wikipedia.
<mark>, <b>, <i>, <u>, <s>
Elementos de UI sem qualquer valor semântico.
mark: keyword pesquisa. b: negrito. i: voz alternativa.
u: anotação,. s: irrelevante.
<header>, <footer>, <small>
<header> & <footer> referem-se à importância da informação no
seu contexto. footer pode até estar antes do <header>.
<small> mudou de significado para “letra pequena” (contratos).

57. <mark>, <b>, <i>, <u>, <s>
Elementos de UI sem qualquer valor semântico.
mark: keyword pesquisa. b: negrito. i: voz alternativa.
u: anotação,. s: irrelevante.
<header>, <footer>, <small>
<header> & <footer> referem-se à importância da informação no
seu contexto. footer pode até estar antes do <header>.
<small> mudou de significado para “letra pequena” (contratos).

58. <mark>, <b>, <i>, <u>, <s>
Elementos de UI sem qualquer valor semântico.
mark: keyword pesquisa. b: negrito. i: voz alternativa.
u: anotação,. s: irrelevante.
<header>, <footer>, <small>
<header> & <footer> referem-se à importância da informação no
seu contexto. footer pode até estar antes do <header>.
<small> mudou de significado para “letra pequena” (contratos).

59. <mark>, <b>, <i>, <u>, <s>
Elementos de UI sem qualquer valor semântico.
mark: keyword pesquisa. b: negrito. i: voz alternativa.
u: anotação,. s: irrelevante.
<header>, <footer>, <small>
Leitura recomendada
<header> & <footer> referem-se à importância da informação no
Livro “HTML5 for Web Designers” do Jeremy Keith em versão HTML
seu contexto. footer pode até estar antes do <header>.
http://html5forwebdesigners.com
<small> mudou de significado para “letra pequena” (contratos).
Documento W3C com diferenças entre o HTML4 & HTML5
pelo Anne & Simon Pieters:
http://www.w3.org/TR/html5-diff/#new-elements

60. Lição nº2 Acesso com browsers antigos
Compatibilidade
universal
Aplicar estilo a elementos novos:
<section class=“noticias”></section>

61. Lição nº2 Acesso com browsers antigos
Compatibilidade
universal
Aplicar estilo a elementos novos:
Falha em <section class=“noticias”></section>
IE 6, 7 & 8 section.noticias { ... }

62. Lição nº2 Acesso com browsers antigos
Compatibilidade
universal
Aplicar estilo a elementos novos:
Falha em <section class=“noticias”></section>
IE 6, 7 & 8 section.noticias { ... }
IE 6, 7 & 8 HTML5 shiv do Remy Sharp (@rem)
sem javascript http://code.google.com/p/html5shiv/

63. Lição nº2 Acesso com browsers antigos
Compatibilidade
universal
Aplicar estilo a elementos novos:
Falha em <section class=“noticias”></section>
IE 6, 7 & 8 section.noticias { ... }
IE 6, 7 & 8 HTML5 shiv do Remy Sharp (@rem)
sem javascript http://code.google.com/p/html5shiv/
nenhum <div class=“html5-section”>
<section>
</section>
</div>
.html5-section { ... }

64. No admirável mundo novo do HTML5!
Semântica no HTML5
Distinguir semântica de dados auxiliares.
data-_____

65. No admirável mundo novo do HTML5!
Semântica no HTML5
Distinguir semântica de dados auxiliares.
<p data-_____
data-zone=“logotipo”> ...

66. No admirável mundo novo do HTML5!
Semântica no HTML5
Distinguir semântica de dados auxiliares.
<p data-_____
data-zone=“logotipo”> ...
Interessa a
alguém para
além de nós?

67. No admirável mundo novo do HTML5!
Semântica no HTML5
Distinguir semântica de dados auxiliares.
<p data-_____
data-zone=“logotipo”> ...
Interessa a
alguém para Meh! Não...
além de nós?

68. No admirável mundo novo do HTML5!
Semântica no HTML5
Distinguir semântica de dados auxiliares.
<p data-_____
data-zone=“logotipo”> ...
Interessa a
Então são dados Meh! Não...
alguém para
auxiliares... data-*!
além de nós?

69. Lição nº3 Aproveitarmulti-facetada!
A sua utilidade é sempre
os metadados
Aproveitem os metadados como
ganchos para o estilo do vosso site.
[data-zone] {
border: 1px solid green;
}
[data-zone]:before {
content: “Zona ” attr(data-zone);
}

70. Bookmarklet de debug

71. Então e os dados que
podem interessar a outros?

72. article aside audio canvas data datalist details
eventsource figcaption figure footer header
mark meter nav progress section source time
track video
a abbr acronym address applet area b base
Então e os dados que
basefont podem interessar a outros? button
bdo big blockquote body br
caption center cite code col colgroup dd del
dfn dir div dl dt em fieldset font form frame
frameset h1 h2 h3 h4 h5 h6 head hr html i
iframe img input ins isindex kbd label
legend li link map menu meta noframes
noscript object ol optgroup option p param
pre q s samp script select small span strike
strong style sub sup table tbody td textarea
tfoot th thead title tr tt u ul var

73. Em janeiro de 2009...

75. John Allsopp

76. “We don’t need to add
specific terms to the
vocabulary of HTML, we
need to add a mechanism
that allows semantic
richness to be added to a
document as required.”
John Allsopp
in http://www.alistapart.com/articles/semanticsinhtml5

77. “Nósdon’tprecisamos de adicionar
“We não need to add
termos específicos ao vocabulário
specific terms to the
do HTML, nósHTML, we de
vocabulary of precisamos
adicionar um mecanismo que
need to add a mechanism
permita quesemanticsemântica seja
that allows riqueza
adicionada ao documento
richness to be added to a
conforme seja precisa.”
document as required.”
John Allsopp
in http://www.alistapart.com/articles/semanticsinhtml5

78. mMICRODATA
m

79. No admirável mundo novo do HTML5!
Microdata
Mecanismo que permite
embeber dados legíveis
tes
ibu
por máquinas em
attr
documentos de HTML5.
Fa
n-
F-i
RD
RD
Extensível por natureza e
um pouco mais simples
que o RDFa.
Pares chave = “valor”.

80. Microdata: Passo-a-passo
Lição nº4 É fixar e pronto!

81. Microdata: Passo-a-passo
Lição nº4 É fixar e pronto!
1 Demarcar o item com itemscope.
<div itemscope> ...

82. Microdata: Passo-a-passo
Lição nº4 É fixar e pronto!
1 Demarcar o item com itemscope.
2 Declarar o tipo (URL) com itemtype.
<div itemscope itemtype=“http://data-vocabulary.org/Person”> ...

83. Microdata: Passo-a-passo
Lição nº4 É fixar e pronto!
1 Demarcar o item com itemscope.
2 Declarar o tipo (URL) com itemtype.
3 Identificar os valores de cada chave com itemprop.
itemscope> ...
<div itemscope itemtype=“http://data-vocabulary.org/Person”> ...
<h1 itemprop=“name”>André Luís</h1>
<p><a itemprop=“url”
href=“http://id.andr3.net/”>Site pessoal</a></p>...

84. No admirável mundo novo do HTML5!
Microdata
http://www.w3.org/TR/microdata/
<div itemscope
itemtype=“http://data-vocabulary.org/Person”>
<h1 itemprop=“name”>André Luís</h1>
<p><a itemprop=“email” href=“mailto:me@andr3.net”>
me@andr3.net
</a>
</p>
<p itemprop=“note” >web nerd.</p>
</div>

85. Qualquer um pode criar
e estender um vocabulário...

86. ...mas quais posso
ou devo usar?

87. No admirável mundo novo do HTML5!
Microdata: Quais usar?
Livros, filmes, receitas,
Prog. de TV, Eventos,
Organizações, Pessoas,
Lugares, etc.
Google, Microsoft & Yahoo! lançaram o Schema.org
http://schema.org/

88. No admirável mundo novo do HTML5!
Microdata: Quais usar?
Livros, filmes, receitas,
Prog. de TV, Eventos,
Organizações, Pessoas,
Lugares, etc.
Google, Microsoft & Yahoo! lançaram o Schema.org
http://schema.org/
Um ajudante para nos facilitar a vida... (pela empresa Sitening LLC)
http://schema-creator.org/

89. No admirável mundo novo do HTML5!
Microdata: Quais usar?
1. Microdata
2. Microformatos
3. RDFa
http://www.google.com/webmasters/tools/richsnippets

90. No admirável mundo novo do HTML5!
Microdata: Quais usar?
1. Microdata
2. Microformatos
3. RDFa
http://www.google.com/webmasters/tools/richsnippets

91. No admirável mundo novo do HTML5!
Microdata: Quais usar?
http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=146646
item
pro
p

92. No admirável mundo novo do HTML5!
Microdata: Quais usar?
http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=146646

93. Lição nº5 Escolher o formato ideal
Purismo fica à porta.
Microdata vs microformatos vs RDFa
Um formato pode ser mais correto
mas o que conta é a sua utilização
no dia-a-dia.

94. Para finalizar...

95. No admirável mundo novo do HTML5!
semântica Microdata
RDFa RDFa
1.1
microformatos dados
documentos
HTML
dificuldade

96. Obrigado.
QUESTÕES?

97. LIÇÕES PRÁTICAS
FIM DE
SEMÂNTICA
COM
HTML5
Download PDF
http://talks.andr3.net/2011/html5pt/semantics.pdf
Download Keynote (mac)
http://talks.andr3.net/2011/html5pt/semantics.key
HTML5pt.org
d 3 novembro 2011
André Luís c
@andr3 andre-filipe-luis@telecom.pt b

98. Créditos & Tipografia
Gotham American Typewriter
Gotham Rounded Chaparral Pro
Gotham Condensed
Fundação Calouste-Gulbenkian (biblarte no Flickr)
http://www.flickr.com/photos/biblarte/2709389469/
C
@ 2000-2011 All rights reserved to Berlin Wallpaper, Inc.
http:/ /www.berlinwallpaper.com/PrissPrints/Jetsons-Giant-Wall-Decal.htm
Used excerpt without permission.
Drew McLellan (drewm no Flickr)
http://www.flickr.com/photos/drewm/4732738890/
C
Katie Harries (kharied no Flickr)
http://www.flickr.com/photos/kharied/4177969736/
C