-
Notifications
You must be signed in to change notification settings - Fork 85
/
semantics.html
898 lines (650 loc) · 76.6 KB
/
semantics.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
<!DOCTYPE html>
<html lang=pt-br>
<meta charset=utf-8>
<title>Semântica - Dive Into HTML5</title>
<!--[if lt IE 9]><script src=j/html5.js></script><![endif]-->
<link rel=alternate type=application/atom+xml href=https://github.com/zenorocha/diveintohtml5/commits/gh-pages.atom>
<link rel=alternate href=http://diveintohtml5.info/semantics.html hreflang=en>
<link rel=stylesheet href=screen.css>
<style>
body{counter-reset:h1 3}
dl.col dt{float:left;clear:left}
dl.col dd{margin-left:7em}
dl.col dt,dl.col dd{padding-bottom:1.75em}
</style>
<link rel=stylesheet media='only screen and (max-device-width: 480px)' href=mobile.css>
<link rel=prefetch href=index.html>
<a href="https://github.com/zenorocha/diveintohtml5"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<p>Você está aqui: <a href=index.html>Home</a> <span class=u>‣</span> <a href=table-of-contents.html#semantics>Dive Into <abbr>HTML5</abbr></a> <span class=u>‣</span>
<h1><br>O que significa tudo isso?</h1>
<p id=toc>
<p class=a>❧
<h2 id=divingin>Mergulhando</h2>
<p class=f><img src=i/aoc-e.png alt=E width=107 height=105>sse capítulo pegará uma página <abbr>HTML</abbr> a qual não há nada de errado e irá melhorá-la. Algumas partes ficarão menores, outras partes maiores. Tudo isso ficará com uma melhor semântica. E ficará incrível.
<p style="clear:both"><a href=examples/blog-original.html>Esta é a página em questão</a>. Abra a página em uma nova aba e não volte até dar uma olhada no código fonte pelo menos uma vez.
<p class=a>❧
<h2 id=the-doctype>O Doctype</h2>
<p>A partir do topo:
<pre><code><!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></code></pre>
<p>Esse é o chamado “doctype.” Há uma longa história por trás do doctype. Enquanto trabalhavam no Internet Explorer 5 para Mac, os desenvolvedores da Microsoft depararam-se com um problema. A próxima versão do browser tinha melhorado tanto seus padrões, que páginas antigas não eram mais apresentadas corretamente. Ou até eram apresentadas (de acordo com as especificações), mas eles esperavam que fossem apresentadas <em>incorretamente</em>. Essas páginas foram criadas baseadas nas peculiaridades dos browsers que dominavam na época, como Netscape 4 e o Internet Explorer 4. O IE5/Mac estava tão avançado que acabou quebrando a web.
<p>A Microsoft apareceu com uma nova solução. Antes de renderizar uma página, o IE5 verificava o “doctype,” que geralmente era a primeira linha do código <abbr>HTML</abbr> (até mesmo antes do próprio elemento <code><html></code>). Páginas antigas (que seguiam os padrões dos browsers antigos) geralmente não tinham o doctype. O IE5 renderizava essas páginas como os browsers antigos faziam. Para ativar os novos padrões, os autores das páginas web tinham que optar por inserir o doctype antes do elemento <code><html></code>.
<p>Essa idéia se espalhou como fogo, e logo, todos os principais browsers passaram a ter duas opções de interpretação: “modo peculiar (quirks mode)” e “modo padronizado (standards mode)”. É claro que, tratando-se da web, as coisas rapidamente perderam o controle. Quando a Mozilla tentou enviar a versão 1.1 de seu browser, eles descobriram que haviam páginas sendo apresentadas no “modo padronizado” que na verdade dependiam de uma peculiaridade específica. A Mozilla tinha acabado de corrigir sua <em>rendering engine</em> para eliminar essa peculiaridade, mas milhares de páginas quebraram de uma vez. Então foi criado — e não estou inventando isso — “<a href="https://developer.mozilla.org/en/Gecko's_%22Almost_Standards%22_Mode">o modo quase padronizado (almost standards mode)</a>.”
<p>Neste trabalho seminal, <a href=http://hsivonen.iki.fi/doctype/>Activating Browser Modes with Doctype</a>, Henri Sivonen resume os diferentes modos de renderização:
<blockquote>
<dl>
<dt>Quirks Mode (Modo peculiar)
<dd>No Quirks mode, os browsers violam as especificações da web contemporânea para evitar “quebrar” páginas criadas de acordo com as práticas que prevaleciam no anos 90.
<dt>Standards Mode (Modo padrão)
<dd>No Standards mode, os browsers tentam, conforme os documentos da especificação, tratar corretamente a extensão implementada para um browser específico. Para o <abbr>HTML5</abbr> este é o “quirks mode.”
<dt>Almost Standards Mode (Modo quase padrão)
<dd>Firefox, Safari, Chrome, Opera (a partir da versão 7.5) e o IE8 também possuem o modo conhecido como “modo quase padrão”, que implementa o dimensionamento vertical das células de tabelas tradicionalmente e não rigorosamente de acordo com a especificação CSS2. Para o <abbr>HTML5</abbr> este é o “limited quirks mode.”
</dl>
</blockquote>
<p>(Você deveria ler o resto do artigo de Henri, pois estou apenas simplificando aqui. Até no IE5/Mac, haviam alguns doctypes antigos que não contavam como opção padronizada. Ao longo do tempo, a lista de peculiaridades cresceu, assim como a lista de doctypes que as desencadeava. A última vez que tentei contar, haviam 5 doctypes que disparavam o “almost standards mode,” e 73 que disparavam o “quirks mode.” Mas provavelmente esqueci de alguns e não vou nem falar sobre a besteira que o Internet Explorer 8 faz para trocar entre seus quatro, — quatro! — diferentes modos de renderização. <a href=http://hsivonen.iki.fi/doctype/ie8-mode.png>Este é o diagrama de fluxo</a>. Mate-o e queime-o.)
<p>Agora onde estavamos? Ah sim, o doctype:
<pre><code><!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></code></pre>
<p>Este passa a ser um dos 15 doctypes que disparam o “standards mode” em todos os browsers atuais. Não há nada de errado com ele. Se você gosta dele, pode ficar. Ou você pode mudá-lo para o doctype do <abbr>HTML5</abbr>, que é menor e melhor, e também dispara o “standards mode” em todos os browsers atuais.
<p>Este é o doctype do <abbr>HTML5</abbr>:
<pre><code><!DOCTYPE html></code></pre>
<p>É só isso. Apenas 15 caracteres. É tão fácil que você pode digitá-lo na mão sem medo de errar.
<p class=a>❧
<h2 id=html-element>O elemento raiz</h2>
<p class=ss style="float:left;margin:0 1.75em 1.75em 0;width:280px"><img src=i/openclipart.org_johnny_automatic_tree_on_top_of_hill.png alt="tree on top of hill" width=280 height=394>
<p>Uma página <abbr>HTML</abbr> consiste em uma série de elementos. Toda sua estrutura é como uma árvore. Alguns elementos são “irmãos,” como dois galhos que extendem-se de um mesmo tronco. Alguns podem ser “filhos” de outros elementos, como um galho menor que extende-se de um maior. (Também funciona de outro jeito; um elemento que contém outro elemento é chamado de nó “pai” de seus elementos filhos, e o “antecessor” de seus elementos netos). Elementos que não possuem filhos são chamados de nós “folha”. O elemento mais externo, o qual é o antecessor de todos os outros elementos da página, é chamado de “elemento raiz.” O elemento raiz de uma página <abbr>HTML</abbr> é sempre o <code><html></code>.
<p>Nessa <a href=examples/blog-original.html>página de exemplo</a>, o elemento raiz se parece com isso:
<table role=presentation><tr><td><pre><code><html xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"></code></pre></td></table>
<p>Não há nada de errado com esta implementação. De novo, se você gosta dela, pode ficar. É válido no <abbr>HTML5</abbr>. Mas algumas partes não são mais necessárias no <abbr>HTML5</abbr>, então você pode economizar alguns bytes ao removê-las.
<p>A primeira coisa a se discutir é o atributo <code>xmlns</code>. É um vestígio do <a href=http://www.w3.org/TR/xhtml1/><abbr>XHTML</abbr> 1.0</a>. Ele serve para saber que os elementos da página estão dentro do namespace <abbr>XHTML</abbr>, <code>http://www.w3.org/1999/xhtml</code>. Mas os elementos no <abbr>HTML5</abbr> <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/infrastructure.html#xml>estão sempre neste namespace</a>, sendo que você não precisa mais declará-lo explicitamente. Sua página <abbr>HTML5</abbr> funcionará exatamente igual em todos os browsers, este atributo estando ou não presente.
<p>Descartando o atributo <code>xmlns</code>, ficamos com este elemento raiz:
<pre><code><html lang="en" xml:lang="en"></code></pre>
<p>Estes dois atributos, <code>lang</code> e <code>xml:lang</code>, definem a língua da página <abbr>HTML</abbr>. (<code>en</code> significa “Inglês.” Não escreve em inglês? <a href=http://www.w3.org/International/questions/qa-choosing-language-tags>Encontre sua língua</a>.) Mas porque dois atributos para a mesma coisa? De novo, isso é um vestígio do <abbr>XHTML</abbr>. Apenas o atributo <code>lang</code> tem algum efeito no <abbr>HTML5</abbr>. Você pode deixar o atributo <code>xml:lang</code> se preferir, mas se deixá-lo, deve garantir que ele <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-lang-and-xml:lang-attributes">contenha o mesmo valor do atributo <code>lang</code></a>.
<blockquote cite="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-lang-and-xml:lang-attributes">
<p>Para facilitar a migração do XHTML, devemos especificar um atributo sem namespace, sem prefixo e com o localname "xml:lang" nos elementos <abbr>HTML</abbr> de documentos <abbr>HTML</abbr>, mas estes atributos devem apenas serem especificados se o atributo <code>lang</code> também for especificado sem namespace. Os dois atributos são case-insensitive e devem conter o mesmo valor. O atributo sem namespace, sem prefixo e com o localname "xml:lang" não tem efeito no processamento da língua.
</blockquote>
<p>Está pronto para descartá-lo? Tudo bem, deixe-o ir. Indo, indo… já era! Isso nos deixa com este elemento raiz:
<pre><code><html lang="en"></code></pre>
<p>E isso é tudo que tenho para falar sobre isso.
<p class=a>❧
<h2 id=head-element>O elemento <head> </h2>
<p class=c><img src=i/openclipart.org_johnny_automatic_8_from_behind.png alt="8 men from behind" width=554 height=164>
<p>O primeiro filho do elemento raiz geralmente é o elemento <code><head></code>. O <code><head></code> contém informações —metadata <em>sobre</em> a página, em vez do próprio corpo da página. (O corpo da página fica no elemento <code><body></code>). O elemento <code><head></code> é um pouco chato, e não mudou nada de interessante no <abbr>HTML5</abbr>. A parte boa é o que está <em>dentro</em> do <code><head></code>. E para isso, usaremos novamente nossa <a href=examples/blog-original.html>página de exemplo</a>:
<pre><code><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Weblog</title>
<link rel="stylesheet" type="text/css" href="style-original.css" />
<link rel="alternate" type="application/atom+xml"
title="My Weblog feed"
href="/feed/" />
<link rel="search" type="application/opensearchdescription+xml"
title="My Weblog search"
href="opensearch.xml" />
<link rel="shortcut icon" href="/favicon.ico" />
</head></code></pre>
<p>Primeiramente: O elemento <code><meta></code>.
<p class=a>❧
<h2 id=encoding>Codificação de caracteres</h2>
<p>Quando você pensa em “texto,” provavelmente pensa em “caracteres e símbolos que vejo na tela do meu computador.” Mas os computadores não lidam com caracteres e símbolos, mas sim com bits e bytes. Cada pedaço de texto que vê na tela de seu computador, é na verdade armazenado em uma <em>codificação de caracteres (character encoding)</em>. Há <a href=http://www.iana.org/assignments/character-sets>centenas de character encodings diferentes</a>, alguns otimizados para algumas línguas em particular como russo, chinês ou inglês, e outras que podem ser utilizadas para várias línguas. Rudemente falando, o character encoding fornece um mapeamento entre as coisas que você vê em sua tela e as coisas que o computador armazena na memória ou em disco.
<p>Na realidade, é mais complicado que isso. O mesmo caracter pode aparecer em mais de uma codificação, mas cada uma pode usar uma sequência diferente de bytes para realmente armazenar o caracter em memória ou em disco. Então, você pode pensar no character encoding como um tipo de chave de decodificação para o texto. Sempre que alguém lhe der uma sequência de bytes e reivindicar seu “texto”, você precisa saber qual character encoding eles usaram, assim você pode decodificar os bytes em caracteres e exibí-los (ou processá-los, que seja).
<p>Então, como seu browser determina o character encoding de um fluxo de bytes que um servidor web envia? Estou contente que perguntou. Se você está familiarizado com headers (cabeçalhos) <abbr>HTTP</abbr>, já deve ter visto um como esse:
<blockquote><p><code>Content-Type: text/html; charset="utf-8"</code></blockquote>
<p>Brevemente, ele acha que o servidor web está lhe enviando um documento <abbr>HTML</abbr>, e pensa que o documento usa o character encoding <code>UTF-8</code>. Infelizmente, no magnífico mundo da World Wide Web, poucos realmente tem controle sobre seus servidores HTTP. Pense no <a href="http://www.blogger.com/">Blogger</a>: o conteúdo é fornecido pelas pessoas, mas os servidores rodam pelo Google. Então o <abbr>HTML</abbr> 4 fornecia uma maneira de especificar o character encoding no prórpio documento <abbr>HTML</abbr>. Você provavelmente já deve ter visto isso também:
<blockquote><p><code><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></code></blockquote>
<p>Ele diz que o autor da página web pensa que criaram um documento <abbr>HTML</abbr> usando o character encoding <code>UTF-8</code>.
<p>Essas duas técnicas ainda funcionam no <abbr>HTML5</abbr>. O header <abbr>HTTP</abbr> é o método preferido, e ele substitui a tag <code><meta></code> se estiver presente. Mas não é qualquer um que pode definir headers <abbr>HTTP</abbr>, então a tag <code><meta></code> ainda está por aí. Na verdade, ficou um pouco mais fácil no <abbr>HTML5</abbr>. Agora ela é assim.
<blockquote><p><code><meta charset="utf-8" /></code></blockquote>
<p>Isso funciona em todos os browsers. Como essa sintaxe abreviada apareceu? Aqui está <a href="http://lists.w3.org/Archives/Public/public-html/2007Jul/0550.html">a melhor explicação que consegui encontrar</a>:
<blockquote cite="http://lists.w3.org/Archives/Public/public-html/2007Jul/0550.html">
<p>A lógica para a combinação do atributo <code><meta charset=""></code> é que UAs já implementam isso, pois as pessoas tendem a deixar as coisas sem áspas como:
<p><code><META HTTP-EQUIV=Content-Type CONTENT=text/html; charset=ISO-8859-1></code>
</blockquote>
<p>Há até alguns <a href="http://simon.html5.org/test/html/parsing/encoding/">casos de teste de <code><meta charset></code></a> se você não acreditar que os browsers já fazem isso.
<div class=pf>
<h4>Pergunte ao Professor Markup</h4>
<div class=inner>
<blockquote class=note>
<p><span>☞</span>P: Eu nunca uso caracteres diferentes. Eu ainda preciso declarar meu character encoding?<br>
<p>R: Sim! Você deve <em>sempre</em> especificar um character encoding em toda página <abbr>HTML</abbr> que escreve. Não especificar um encoding <a href=http://openmya.hacker.jp/hasegawa/security/utf7cs.html>pode levar a vulnerabilidades de segurança</a>.
</blockquote>
</div>
</div>
<p>Resumindo: character encoding é complicado, e ele não foi feito de uma maneira mais fácil devido a décadas de software mal escrito feito por copia-e-cola. Você deve <strong>sempre</strong> especificar um character encoding em <strong>todos</strong> os documentos <abbr>HTML</abbr>, ou <a href=http://openmya.hacker.jp/hasegawa/security/utf7cs.html>coisas ruins vão acontecer</a>. Você pode fazer isso com o HTTP <code>Content-Type</code> header, com a declaração <code><meta http-equiv></code>, ou com a declaração mais curta <code><meta charset></code>, mas por favor faça. A web agradece.
<p class=a>❧
<h2 id=link>Amigos & (Link) Relations</h2>
<p>Links normais (<code><a href></code>) simplesmente apontam para uma outra página. Link relations são uma maneira de explicar o <em>por que</em> você está apontando para uma outra página. Eles terminam a frase “Estou apontando para esta outra página por que...”
<ul>
<li>...é uma stylesheet que contém regras de CSS que o browser deveria aplicar a esse documento.
<li>...é um feed que contém o mesmo conteúdo desta página, mas em um formato padrão registrável.
<li>...é uma tradução desta página para outra língua.
<li>...é o mesmo conteúdo desta página, mas em formato <abbr>PDF</abbr>.
<li>...é o próximo capítulo de um livro online o qual esta página também faz parte.
</ul>
<p>E por aí vai. <abbr>HTML5</abbr> separa os link relations <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#attr-link-rel>em duas categorias</a>:
<blockquote cite=http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#attr-link-rel>
<p>Duas categorias de links podem ser criadas usando o elemento link. <b>Links para recursos externos</b> são links para recursos que são usados para extender o documento atual, e <b>hyperlinks</b> são links para outros documentos. ...
<p>O comportamento exato para links de recursos externos depende da exata relação, como definido para o tipo de link relevante.
</blockquote>
<p>Dos exemplos que acabei de dar, somente o primeiro (<code>rel="stylesheet"</code>) é um link para um recurso externo. O resto são hyperlinks para outros documentos. Você pode querer seguir esses links, ou não, mas eles não são exigidos para ver a página atual.
<p>Geralmente, link relations são vistos nos elementos <code><link></code> dentro do elemento <code><head></code> de uma página. Alguns podem também ser usados em elementos <code><a></code>, mas isso é incomum mesmo quando permitido. <abbr>HTML5</abbr> também permite alguns relations em elementos <code><area></code>, mais isso é até <em>menos</em> comum (HTML 4 não permitia um atributo <code>rel</code> nos elementos <code><area></code>). Veja <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#linkTypes>a tabela completa de link relations</a> para verificar onde você pode usar valores específicos de <code>rel</code>.
<div class=pf>
<h4>Pergunte ao Professor Markup</h4>
<div class=inner>
<blockquote class=note>
<p><span>☞</span>P: Posso criar meu próprio link relations?<br>
<p>R: Parece haver um suprimento infinito de idéias para novos link relations. Em uma tentativa para evitar que as pessoas <a href=http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4>façam besteira</a>, o WHATWG <a href=http://wiki.whatwg.org/wiki/RelExtensions>mantém um registro das propostas para valores <code>rel</code></a> e <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#other-link-types>define o processo para aceitá-las</a>.
</blockquote>
</div>
</div>
<h3 id=rel-stylesheet>rel = stylesheet</h3>
<p>Vamos olhar o primeiro link relation em <a href=examples/blog-original.html>nossa página de exemplo</a>:
<pre><code><link rel="stylesheet" href="style-original.css" type="text/css" /></code></pre>
<p>Este é o link relation mais usado no mundo (literalmente). <code><link rel="stylesheet"></code> é para apontar para regras <abbr>CSS</abbr> que estão armazenadas em um arquivo separado. Uma pequena otimização que você pode fazer no <abbr>HTML5</abbr> é retirar o atributo <code>type</code>. Há somente uma linguagem stylesheet para a web, <abbr>o CSS</abbr>, então esse é o valor padrão para o atributo <code>type</code>. Isso funciona em todos os browsers. (Creio que alguem pode inventar uma nova linguagem stylesheet algum dia, mas se acontecer, apenas acrescente o atributo <code>type</code> de volta).
<pre><code><link rel="stylesheet" href="style-original.css" /></code></pre>
<h3 id=rel-alternate>rel = alternate</h3>
<p>Continuando com <a href=examples/blog-original.html>nossa página de exemplo</a>:
<pre><code><link rel="alternate"
type="application/atom+xml"
title="My Weblog feed"
href="/feed/" /></code></pre>
<p>Esse link relation também é bastante comum. <code><link rel="alternate"></code>, combinado com <abbr>RSS</abbr> ou Atom media no atributo <code>type</code>, habilita algo chamado “descoberta de feed”. Ele permite que leitores de feeds (como <a href="http://www.google.com/reader/">Google Reader</a>) descubram que um site tem um feed de notícias dos últimos artigos. Alguns browsers também suportam a descoberta de feed exibindo um ícone especial perto da <abbr>URL</abbr>. (Ao contrário do <code>rel="stylesheet"</code>, o atributo <code>type</code> importa aqui. Não remova-o!)
<p>O link relation <code>rel="alternate"</code> sempre foi um caso estranho de uso, <a href=http://www.w3.org/TR/html401/types.html#type-links>até no <abbr>HTML</abbr> 4</a>. No <abbr>HTML5</abbr>, sua definição foi clareada e extendida para descrever o atual conteúdo da web mais cuidadosamente. Como você acabou de ver, usando <code>rel="alternate"</code> em conjunto com <code>type=application/atom+xml</code> indica um feed Atom para a página atual. Mas você também pode usar o <code>rel="alternate"</code> em conjunto com outros atributos <code>type</code> para indicar o mesmo conteúdo em outro formato, como <abbr>PDF</abbr>.
<p>HTML5 também encerrou uma confusão de longa data sobre como apontar para documentos de tradução. <abbr>HTML</abbr> 4 diz para usar o atributo <code>lang</code> em conjunto com <code>rel="alternate"</code> para especificar a língua do documento apontado, mas isso é incorreto. O documento <a href=http://www.w3.org/MarkUp/html4-updates/errata>HTML 4 Errata</a> lista quatro erros na especificação do <abbr>HTML</abbr> 4. Um desses erros é como especificar a língua de um documento apontado com <code>rel="alternate"</code>. A maneira correta, descrita no <abbr>HTML</abbr> 4 Errata e agora no <abbr>HTML5</abbr>, é usar o atributo <code>hreflang</code>. Infelizmente, essa errata nunca foi reintegrada na especificação do <abbr>HTML</abbr> 4, por que ninguém mais no W3C <abbr>HTML</abbr> Working Group estava trabalhando com <abbr>HTML</abbr>.
<h3 id=new-relations>Outros Link Relations no HTML5</h3>
<p><code>rel="author"</code> é usado para apontar para informações sobre o autor da página. Pode ser um endereço <code>mailto:</code>, embora não precise ser. Ele pode simplesmente levar a um formulário de contato ou a uma página “sobre o autor”.
<p><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#link-type-external>rel="external"</a> “indica que o link trata-se de um documento que não faz parte do site em que o documento atual está.” Acredito que isso foi popularizado pela <a href=http://www.wordpress.org/>WordPress</a>, a qual o utiliza nos links dos comentários deixados pelas pessoas.
<p class=ss style="width:313px"><img src=i/openclipart.org_johnny_automatic_girl_feeding_birds.png width=313 height=384 alt="girl feeding birds">
<p>HTML 4 usava <a href=http://www.w3.org/TR/html401/types.html#type-links><code>rel="start"</code>, <code>rel="prev"</code>, e <code>rel="next"</code></a> para definir relações entre páginas que fazem parte de uma série (como capítulos de um livro ou até posts de um blog). O único que era utilizado corretamente era o <code>rel="next"</code>. As pessoas usavam <code>rel="previous"</code> ao invés de <code>rel="prev"</code>; usavam <code>rel="begin"</code> e <code>rel="first"</code> ao invés de <code>rel="start"</code>; utilizavam <code>rel="end"</code> invés de <code>rel="last"</code>. Oh, e — por conta própria — eles criaram <code>rel="up"</code> para apontar para uma “página pai”.
<p><abbr>HTML5</abbr> inclui <code>rel="first"</code>, que é a variação mais comum das diferentes maneiras para dizer “primeira página da série.” (<code>rel="start"</code> é um sinônimo sem conformidade, fornecido para compatibilidade.) Também inclui <code>rel="prev"</code> e <code>rel="next"</code>, igual ao <abbr>HTML</abbr> 4, e suporta <code>rel="previous"</code> para compatibilidade, assim como <code>rel="last"</code> (a última da série, começada por <code>rel="first"</code>) e <code>rel="up"</code>.
<p>A melhor maneira de pensar em <code>rel="up"</code> é olhar para sua trilha de navegação (ou pelo menos imaginá-la). Sua página principal é provavelmente a primeira página em sua trilha e a página atual está no final. <code>rel="up"</code> aponta para a página seguinte a última página da trilha.
<p><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#rel-icon>rel="icon"</a> é o <a href=http://code.google.com/webstats/2005-12/linkrels.html>segundo link relation mais popular</a>, depois do <code>rel="stylesheet"</code>. Ele é geralmente encontrado junto ao <code>shortcut</code>, assim:
<pre><code><link rel="shortcut icon" href="/favicon.ico"></code></pre>
<p>Todos os principais browsers suportam seu uso para associar um pequeno ícone a uma página. Geralmente é exibido na barra de endereço do browser próximo a URL, ou na aba do browser, ou em ambos.
<p>Novo também no <abbr>HTML5</abbr>: os atributos <code>sizes</code> podem ser usados em conjunto em um relacionamento com o <code>ícone</code> para <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#rel-icon>indicar o tamanho do ícone referenciado</a>.
<p><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#link-type-license>rel="license"</a> foi <a href=http://microformats.org/wiki/rel-license>inventado pela comunidade de microformatos</a>. Ele “indica que o documento referenciado fornece os termos da licença sob o qual o documento atual é fornecido.”
<p><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#link-type-nofollow>rel="nofollow"</a> “indica que o link não foi aprovado pelo autor original ou publicador da página, ou que o link para o documento referenciado foi incluído inicialmente por causa de uma relação comercial entre pessoas afiliadas com as duas páginas.” Isso foi <a href=http://googleblog.blogspot.com/2005/01/preventing-comment-spam.html>inventado pelo Google</a> e <a href=http://microformats.org/wiki/rel-nofollow>padronizado dentro da comunidade de microformatos</a>. <a href=http://www.wordpress.org>WordPress</a> adicionou <code>rel="nofollow"</code> para links incluídos nos comentários. A idéia era que se os links “nofollow” não aparecessem no PageRank, spammers desistiriam de tentar postar spams nos comentários dos blogs. Isso não aconteceu, mas <code>rel="nofollow"</code> ainda persiste.
<p><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#link-type-noreferrer>rel="noreferrer"</a> “indica que nenhuma informação de referência deve ser vazada quando clicar no link.” Atualmente nenhum browser suporta isso, mas o suporte <a href=http://webkit.org/blog/907/webkit-nightlies-support-html5-noreferrer-link-relation/>foi adicionado pelo WebKit</a>, sendo que ele aparecerá no Safari, Google Chrome, e outros WebKit browsers. [<a href=http://wearehugh.com/public/2009/04/rel-noreferrer.html>rel="noreferrer" test case</a>]
<p><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#link-type-pingback>rel="pingback"</a> especifica o endereço de um servidor “pingback”. Como explicado na <a href=http://hixie.ch/specs/pingback/pingback-1.0>especificação do Pingback</a>, “O sistema pingback é uma maneira de um blog ser notificado automaticamente quando outros sites chamarem um link para ele. ... Ele permite um vínculo reverso — um modo de voltar em uma corrente de links ao invés de somente fazer um drill down.” Sistemas de blogs, especialmente o WordPress, implementam o mecanismo de pingback para notificar os autores que você criou um link para a página deles quando criou um novo post em seu blog.
<p class=ss style="float:left;margin:0 1.75em 1.75em 0;width:271px"><img src=i/openclipart.org_johnny_automatic_dog_on_chair.png width=271 height=309 alt="dog on chair">
<p><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#link-type-prefetch>rel="prefetch"</a> “indica que buscar e armazenar um recurso especificado preventivamente é provável que seja benéfico, como o usuário provavelmente irá exigir este recurso.” Mecanismos de busca, às vezes, adicionam <code><link rel="prefetch" href="<i>URL do primeiro resultado da busca</i>"></code> para a página de resultados da busca se eles sentem que o primeiro resultado é freneticamente mais popular que qualquer um. Por exemplo: usando Firefox, <a href="http://www.google.com/search?q=cnn">procure CNN no Google</a>, olhe o código fonte, e procure pela palavra-chave <code>prefetch</code>. Mozilla Firefox é o único browser atual que suporta <code>rel="prefetch"</code>.
<p><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#link-type-search>rel="search"</a> “indica que o documento referenciado fornece uma interface específica para procurar o documento e seus recursos relacionados.” Especificamente, se você quer que o <code>rel="search"</code> faça algo útil, ele deve apontar para um documento <a href=http://www.opensearch.org/>OpenSearch</a> que descreve como um browser poderia construir uma URL para procurar o site atual para uma dada palavra-chave. OpenSearch (e <code>rel="search"</code> ligam aquele ponto para documentos OpenSearch) tem sido suportado no Microsoft Internet Explorer desde a versão 7 e no Mozilla Firefox desde a versão 2.
<p><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#link-type-sidebar>rel="sidebar"</a> “indica que o documento referenciado, se recuperado, destina-se a ser exibido em um contexto de navegação secundário (se possível), ao invés de no mesmo contexto de navegação atual.” O que isso significa? No Opera e no Mozilla Firefox, isso significa que “quando eu clicar neste link, é solicitado ao usuário para criar um bookmark que, quando selecionado pelo menu de Bookmarks, abre o documento vinculado em uma sidebar do browser.” (Opera atualmente chama isso de “painel” ao invés de “sidebar.”) Internet Explorer, Safari, e Chrome ignoram <code>rel="sidebar"</code> e apenas o tratam como um link normal. [<a href=http://wearehugh.com/public/2009/04/rel-sidebar.html>rel="sidebar" test case</a>]
<p><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#link-type-tag>rel="tag"</a> “indica que a tag que o documento referenciado representa aplica-se ao documento atual.” Marcação de “tags” (category keywords) com o atributo <code>rel</code> foi <a href=http://www.powazek.com/2005/07/000532.html>inventado pela Technorati</a> para ajuda-los a categorizar os posts do blog. Blogs antigos e tutoriais assim se referiu a eles como “Technorati tags.” (Você leu certo: uma empresa comercial convenceu o mundo todo a adicionar metadata que facilitaram o trabalho da empresa. Belo trabalho se você pode te-lo!) A sintaxe foi mais tarde <a href=http://microformats.org/wiki/rel-tag>padronizada dentro da comunidade de microformatos</a>, onde foi simplesmente chamada de <code>rel="tag"</code>. A maioria de sistemas de blog que permitem categorias associadas, palavras-chave, ou tags com posts individuais vão marca-las com links <code>rel="tag"</code>. Os browsers não fazem nada de especial com eles; eles são realmente desenhados para mecanismos de busca para usar como um sinal sobre do que a página se trata.
<p class=a>❧
<h2 id=new-elements>Novos elementos semânticos no HTML5</h2>
<p><abbr>HTML5</abbr> não se trata somente em reduzir as marcações existentes (embora faça-o em uma quantidade razoável). Ele também define novos elementos semânticos.
<dl class=col>
<dt><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element><code><section></code></a>
<dd>O elemento <code>section</code> representa uma seção genérica de um documento ou aplicação. Uma seção, neste contexto, é um agrupamento de conteúdo, geralmente com um título. Exemplos de seções podem ser capítulos, páginas em abas de uma caixa de diálogo, ou as seções numeradas de uma tese. A página inicial de um website pode ser separada em seções para introdução, itens de notícias, informações para contato.
<dt><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-nav-element><code><nav></code></a>
<dd>O elemento <code>nav</code> representa a seção de uma página que aponta para outras páginas ou para partes dentro da página: uma seção com links de navegação. Nem todos os grupos de links de uma página precisam estar em um elemento <code>nav</code> — apenas seções que consistem em grandes blocos de navegação são apropriados para o elemento <code>nav</code>. Particularmente, é comum para rodapés (footers) possuir uma pequena lista de links para páginas em comum de um site, tal como termos de uso, página inicial e página de direitos autorais. O elemento <code>footer</code> sozinho é suficiente para esses casos, sem o elemento <code>nav</code>.
<dt><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-article-element><code><article></code></a>
<dd>O elemento <code>article</code> representa um componente de uma página que consiste em uma composição de conteúdo próprio em um documento, página, aplicação, ou site e que destina-se a ser independentemente distribuível ou reutilizável, e.g. in syndication. Pode ser uma postagem em um fórum, um artigo de uma revista ou jornal, o comentário de um usuário, um widget ou gadget interativo, ou qualquer outro item independente de conteúdo.
<dt><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-aside-element><code><aside></code></a>
<dd>O elemento <code>aside</code> representa a seção de uma página que consiste em conteúdo que é tangencialmente relacionado ao conteúdo em torno do elemento <code>aside</code>, e o qual pode ser considerado separado daquele conteúdo. Tais seções são frequentemente representadas como barras laterias em tipografia impressa. O elemento pode ser usado para efeitos tipográficos como citações e barras laterais, para publicidade, para grupos de elementos <code>nav</code>, e para outro conteúdo que é considerado separado do conteúdo principal da página.
<dt><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-hgroup-element><code><hgroup></code></a>
<dd>O elemento <code>hgroup</code> representa o título de uma seção. O elemento é usado para agrupar um conjunto de elementos <code>h1</code>–<code>h6</code> quando o título possui vários níveis, tais como subtítulos, títulos alternativos, ou slogans.
<dt><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element><code><header></code></a>
<dd>O elemento <code>header</code> representa um grupo de ajuda introdutória ou navegação. Um elemento <code>header</code> geralmente pretende possuir o título da seção (um elemento <code>h1</code>–<code>h6</code> ou um elemento <code>hgroup</code>), mas isso não é obrigatório. O elemento <code>header</code> também pode ser usado para cobrir uma seção de tabelas de conteúdo, um formulário de busca, ou qualquer logo relevante.
<dt><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-footer-element><code><footer></code></a>
<dd>O elemento <code>footer</code> representa um rodapé para a seção de conteúdo mais próxima ou seção do elemento raiz. Um rodapé tipicamente contém informação sobre sua seção tal como quem a escreveu, links para documentos relacionados, declaração de direitos autorais, e assim por diante. Os rodapés não precisam necessariamente aparecer no fim da seção, embora eles geralmente apareçam. Quando o elemento <code>footer</code> contém seções inteiras, eles representam apêndices, índices, longos termos de uso, e outros conteúdos.
<dt><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-time-element><code><time></code></a>
<dd>O elemento <code>time</code> representa tanto uma hora em um relógio de 24 horas, como uma data precisa no calendário gregoriano, opcionalmente com uma hora e um fuso horário.
<dt><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-mark-element><code><mark></code></a>
<dd>O elemento <code>mark</code> representa a execução de texto em um documento marcado ou destacado com o propósito de referência.
</dl>
<p>Eu sei que você está ansioso para começar a usar esses novos elementos, caso contrário você não estaria lendo este capítulo. Mas primeiro nós precisamos fazer um pequeno desvio.
<p class=a>❧
<h2 id=unknown-elements>Um longo desvio em como os browsers lidam com elementos desconhecidos</h2>
<p>Todo browser tem uma lista de elementos <abbr>HTML</abbr> que suporta. Por exemplo, a lista do Mozilla Firefox está armazenada em <a href="http://mxr.mozilla.org/seamonkey/source/parser/htmlparser/src/nsElementTable.cpp">nsElementTable.cpp</a>. Elementos que não estão nesta lista são tratados como “elementos desconhecidos.” Há dois problemas fundamentais com elementos desconhecidos:
<ol>
<li><b>Como deve ser o estilo do elemento?</b> Por padrão, <code><p></code> tem espaçamento na parte superior e inferior, <code><blockquote></code> é recuado com uma margem esquerda, e <code><h1></code> é exibido em uma fonte maior. Mas quais estilos padrão devem ser aplicados aos elementos desconhecidos?</li>
<li><b>Como o elemento do DOM deve parecer?</b> O elemento <code>nsElementTable.cpp</code> do Mozilla inclui informações sobre quais tipos de outros elementos cada um pode conter. Se você incluir markup como <code><p><p></code>, o elemento do segundo parágrafo implicitamente fecha o primeiro, assim os elementos terminam como irmãos, e não pai e filho. Mas se você escrever <code><p><span></code>, o <code>span</code> não fecha o parágrafo, porque o Firefox sabe que <code><p></code> é um elemento de bloco que pode conter o elemento de linha <code><span></code>. Então, o <code><span></code> termina como um filho do <code><p></code> no DOM.</li>
</ol>
<p>Browsers diferentes respondem a essas perguntas de diferentes maneiras. (Revoltante, Eu sei). Dos principais browsers, a resposta do Microsoft Internet Explorer para as duas perguntas é a mais problemática, mas todo browser precisa de uma pequena ajuda aqui.
<p>A primeira pergunta deveria ser relativamente simples de responder: Não aplique nenhum estilo especial para elementos desconhecidos. Apenas deixe-os herdar qualquer que seja as propriedades CSS que estão em vigor e onde quer que apareça, e deixe que o autor da página especifique todos os estilos com CSS. E isso funciona, com a maioria, mas há uma pequena pegadinha que você precisa estar ciente.
<div class=pf>
<h4>Professor Markup diz</h4>
<div class=inner>
<blockquote>
<p>Todos os browsers apresentam elementos desconhecidos como elementos em linha, <i>i.e.</i> como se eles tivessem a regra <code>display:inline</code> de <abbr>CSS</abbr>.
</blockquote>
</div>
</div>
<p>Há diversos elementos novos definidos no <abbr>HTML5</abbr> que são de nível de bloco. Isto é, eles podem conter outros elementos com nível de bloco, e os browsers compatíveis com o <abbr>HTML5</abbr> irão aplicar a propriedade <code>display:block</code> por padrão. Se você quiser utilizar esses elementos em browsers antigos, precisará definir a propriedade display manualmente:
<pre><code>article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}</code></pre>
<p>(Esse código é tirado de <a href=http://html5doctor.com/html-5-reset-stylesheet/><abbr>HTML5</abbr> Reset Stylesheet</a> de Rich Clark, o qual faz muitas outras coisas além do escopo deste capítulo).
<p>Mas espere, fica pior! Antes da versão 9, o Internet Explorer não aplicou <em>qualquer</em> estilo nos elementos desconhecidos. Por exemplo, se você tivesse essa implementação:
<pre><code><style type="text/css">
article { display: block; border: 1px solid red }
</style>
...
<article>
<h1>Welcome to Initech</h1>
<p>This is your <span>first day</span>.</p>
</article></code></pre>
<p>O Internet Explorer (até a versão 8) não trata o elemento <code><article></code> como um elemento de nível de bloco, nem coloca uma borda vermelha em volta do article. Todas as regras de estilo são simplesmente ignoradas. <a href=http://msdn.microsoft.com/en-us/ie/ff468705.aspx#_HTML_Parsing>O Internet Explorer 9 corrige este problema</a>.
<p>O segundo problema é o DOM que os browsers criam quando encontram elementos desconhecidos. Novamente, o browser mais problemático são as versões antigas do Internet Explorer (antes da versão 9, <a href=http://msdn.microsoft.com/en-us/ie/ff468705.aspx#_HTML_Parsing>a qual corrige esse problema também</a>). Se o IE 8 não reconhecer explicitamente o nome do elemento, ele irá inserir o elemento no DOM <em>como um nó vazio sem filhos</em>. Todos os elementos que você esperaria serem filhos diretos de um elemento desconhecido, na verdade estarão inseridos como irmãos do mesmo.
<p>Aqui está uma arte <abbr>ASCII</abbr> para ilustrar a diferença. Este é o DOM que o <abbr>HTML5</abbr> determina:
<pre>article
|
+--h1 (filho de article)
| |
| +--text node "Welcome to Initech"
|
+--p (filho de article, irmão de h1)
|
+--text node "This is your "
|
+--span
| |
| +--text node "first day"
|
+--text node "."</pre>
<p>Mas esse é o DOM que o Internet Explorer atualmente cria:
<pre>article (sem filhos)
h1 (irmão de article)
|
+--text node "Welcome to Initech"
p (irmão de h1)
|
+--text node "This is your "
|
+--span
| |
| +--text node "first day"
|
+--text node "."</pre>
<p>Existe uma maravilhosa solução alternativa para este problema. Se você <a href=http://xopus.com/devblog/2008/style-unknown-elements.html>criar um elemento <code><article></code> falso</a> com JavaScript antes de usá-lo na página, o Internet Explorer irá magicamente reconhecer o elemento <code><article></code> e deixar você aplicar um estilo CSS nele. Não há necessidade de inserir o elemento falso dentro do <abbr>DOM</abbr>. Simplesmente criar o elemento uma vez (por página) é o suficiente para ensinar o IE como aplicar estilo ao elemento que ele não reconhece.
<pre><code><html>
<head>
<style>
article { display: block; border: 1px solid red }
</style>
<mark><script>document.createElement("article");</script></mark>
</head>
<body>
<article>
<h1>Welcome to Initech</h1>
<p>This is your <span>first day</span>.</p>
</article>
</body>
</html></code></pre>
<p>Isso funciona em todas as versões do Internet Explorer, até o IE 6! Nós podemos extender essa técnica para criar cópias falsas de todos os novos elementos do <abbr>HTML5</abbr> agora mesmo — novamente, eles nunca são inseridos no <abbr>DOM</abbr>, sendo que você nunca verá esses elementos falsos — e apenas começar usá-los sem se preocupar muito com os browsers não compatíveis com o HTML5.
<p>Remy Sharp fez justamente isso, com seu acertadamente chamado <a href=http://remysharp.com/2009/01/07/html5-enabling-script/><abbr>HTML5</abbr> enabling script</a>. Esse script passou por mais de uma dúzia de revisões desde quando comecei a escrever este livro, mas a idéia é basicamente esta:
<pre><code><!--[if lt IE 9]>
<script>
var e = ("abbr,article,aside,audio,canvas,datalist,details," +
"figure,footer,header,hgroup,mark,menu,meter,nav,output," +
"progress,section,time,video").split(',');
for (var i = 0; i < e.length; i++) {
document.createElement(e[i]);
}
</script>
<![endif]--></code></pre>
<p>Os trechos <code><!--[if lt IE 9]></code> e <code><![endif]--></code> são <a href="http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx">comentários condicionais</a>. O Internet Explorer os interpreta como um <code>if</code>: “se o browser atual é uma versão do Internet Explorer anterior a versão 9, então executa este bloco.” Qualquer outro browser irá tratar todo o bloco como um comentário <abbr>HTML</abbr>. O resultado é que o Internet Explorer (até e incluindo a versão 8) executará este script, mas os outros browsers irão ignorar este script completamente. Isso faz sua página carregar mais rápido em browsers que não precisam deste hack.
<p>O código JavaScript é relativamente simples. A variável <var>e</var> termina como um array de strings como <code>"abbr"</code>, <code>"article"</code>, <code>"aside"</code>, e assim por diante. Depois percorremos o array e criamos cada elemento nomeado chamando <code>document.createElement()</code>. Mas uma vez que ignoramos o valor de retorno, os elementos nunca são inseridos dentro do <abbr>DOM</abbr>. Mas é o suficiente para o Internet Explorer tratar esses elementos do jeito que queremos que sejam tratados, uma vez que os usamos mais tarde na página.
<p>Este trecho “mais tarde” é importante. Este script precisa estar no topo de sua página, preferencialmente em seu elemento <code><head></code>, e não no final. Dessa forma, o Internet Explorer irá executar este script <em>antes</em> de analisar suas tags e atributos. Se você colocar este script no final de sua página, ele o executará tarde. O Internet Explorer já terá mal interpretado sua implementação e construído o <abbr>DOM</abbr> errado, e não voltará para ajustá-lo por causa desse script.
<p>Remy Sharp “minificou” este script e <a href=http://code.google.com/p/html5shiv/>o hospedou no Google Project Hosting</a>. (Para o caso de estar se perguntando, o script é open source e possui licença MIT, então pode ser usado em qualquer projeto.) Se preferir, você pode até “linkar” o script apontando diretamente para a versão hospedada, assim:
<pre><code><head>
<meta charset="utf-8" />
<title>My Weblog</title>
<!--[if lt IE 9]>
<script <mark>src="<a href=http://html5shiv.googlecode.com/svn/trunk/html5.js>http://html5shiv.googlecode.com/svn/trunk/html5.js</a>"</mark>></script>
<![endif]-->
</head></code></pre>
<p>Agora estamos prontos para começar a usar os novos elementos no <abbr>HTML5</abbr>.
<p class=a>❧
<h2 id=header-element>Headers</h2>
<p class=ss style="width:205"><img src=i/openclipart.org_johnny_automatic_newsboy.png alt="newsboy hawking newspaper" width=205 height=335>
<p>Vamos voltar para <a href=examples/blog-original.html>nossa página de exemplo</a>. Especificamente, vamos olhar apenas para os headers:
<pre><code><div id="header">
<h1>My Weblog</h1>
<p class="tagline">A lot of effort went into making this effortless.</p>
</div>
…
<div class="entry">
<h2>Travel day</h2>
</div>
…
<div class="entry">
<h2>I'm going to Prague!</h2>
</div></code></pre>
<p>Não há nada de errado com essa implementação. Se preferir, você pode mantê-la. É válido no <abbr>HTML5</abbr>. Mas o <abbr>HTML5</abbr> provê alguns elementos adicionais para headers e sections.
<p>Primeiramente, vamos nos livrar daquele <code><div id="header"></code>. Esse é um padrão comum, mas isso não significa nada. O elemento <code>div</code> não possui uma semântica definida, e o atributo <code>id</code> também não. (User agents não têm permissão para inferir qualquer significado do valor do atributo <code>id</code>). Você pode mudar isso para <code><div id="shazbot"></code> e ele terá o mesmo valor semântico, <i>i.e.</i>, nenhum.
<p><abbr>HTML5</abbr> define um elemento <code><header></code> para este propósito. A especificação do <abbr>HTML5</abbr> possui <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element>exemplos reais do uso do elemento <code><header></code></a>. Aqui está como ficaria parecido em <a href=examples/blog-original.html>nossa página de exemplo</a>:
<pre><code><header>
<h1>My Weblog</h1>
<p class="tagline">A lot of effort went into making this effortless.</p>
…
</header></code></pre>
<p>Isso é legal. Ele diz para quem quiser saber que este é o header. Mas e aquela tagline? Outro padrão comum, que até agora não tinha implementação padrão. É uma coisa difícil de implementar. Uma tagline é como um subtítulo, mas está “ligado” ao título principal. Isso é, é um subtítulo que não cria sua própria section.
<p>Elementos Header como <code><h1></code> e <code><h2></code> dão estrutura para sua página. Juntos, eles criam um esboço que você pode usar para visualizar (ou navegar) em sua página. Leitores de tela usam esboços de documentos para ajudar usuários cegos a navegar por sua página. Existem <a href="http://gsnedders.html5.org/outliner/">ferramentas online</a> e <a href=http://chrispederick.com/work/web-developer/>extensões de browsers</a> que ajudam a visualizar o esboço de seu documento.
<p>No <abbr>HTML</abbr> 4, os elementos <code><h1></code>–<code><h6></code> são <em>a única</em> maneira de criar um esboço do documento. O esboço da página de exemplo se parece com isso:
<pre>My Weblog (h1)
|
+--Travel day (h2)
|
+--I'm going to Prague! (h2)</pre>
<p>Tudo bem, mas quer dizer que não tem como implementar a tagline “Um grande esforço foi feito para reduzir o esforço.” Se tentássemos implementá-lo como um <code><h2></code>, ele iria adicionar um nó fantasma ao esboço do documento:
<pre>My Weblog (h1)
|
+--A lot of effort went into making this effortless. (h2)
|
+--Travel day (h2)
|
+--I'm going to Prague! (h2)</pre>
<p>Mas essa não é a estrutura do documento. A tagline não representa uma section, é apenas um subtítulo.
<p>Talvez nós poderiamos implementar a tagline como um <code><h2></code> e marcar cada título de artigo como um <code><h3></code>? Não, é até pior:
<pre>My Weblog (h1)
|
+--A lot of effort went into making this effortless. (h2)
|
+--Travel day (h3)
|
+--I'm going to Prague! (h3)</pre>
<p>Agora nós ainda temos um nó fantasma no esboço de nosso documento, mas ele “roubou” os filhos que legitimamente pertencem ao nó raiz. E aqui reside o problema: <abbr>HTML</abbr> 4 não fornece uma maneira de implementar um subtítulo sem adicioná-lo ao esboço do documento. Não importa o quanto tentarmos mudar as coisas, “um grande esforço feito para reduzir o esforço” terminará naquele gráfico. Esse é o porque acabamos com marcações semânticas sem significado como <code><p class="tagline"></code>.
<p><abbr>HTML5</abbr> fornece uma solução para isso: o elemento <code><hgroup></code>. O elemento <code><hgroup></code> atua como um empacotador para dois ou mais elementos de título <em>relacionados</em>. O que quer dizer “relacionados”? Significa que juntos, eles criam um único nó no esboço do documento.
<p>Dada esta implementação:
<pre><code><header>
<mark><hgroup></mark>
<h1>My Weblog</h1>
<mark><h2></mark>A lot of effort went into making this effortless.<mark></h2></mark>
<mark></hgroup></mark>
…
</header>
…
<div class="entry">
<h2>Travel day</h2>
</div>
…
<div class="entry">
<h2>I'm going to Prague!</h2>
</div></code></pre>
<p>Esse é o esboço do documento que é criado:
<pre>My Weblog (h1 of its hgroup)
|
+--Travel day (h2)
|
+--I'm going to Prague! (h2)</pre>
<p>Você pode testar suas próprias páginas no <a href="http://gsnedders.html5.org/outliner/"><abbr>HTML5</abbr> Outliner</a> para garantir que você está usando os elementos de título corretamente.
<p class=a>❧
<h2 id=article-element>Articles</h2>
<p>Continuando com <a href=examples/blog-original.html>nossa página de exemplo</a>, vamos ver o que podemos fazer sobre esta implementação:
<pre><code><div class="entry">
<p class="post-date">October 22, 2009</p>
<h2>
<a href="#"
rel="bookmark"
title="link to this post">
Travel day
</a>
</h2>
…
</div></code></pre>
<p>Novamente, isto é <abbr>HTML5</abbr> válido. Mas o <abbr>HTML5</abbr> fornece elementos mais específicos para o caso comum de implementação de um artigo em uma página — chamado apropriadamente de <code><article></code>.
<pre><code><mark><article></mark>
<p class="post-date">October 22, 2009</p>
<h2>
<a href="#"
rel="bookmark"
title="link to this post">
Travel day
</a>
</h2>
…
<mark></article></mark></code></pre>
<p>Ah, mas não é tão simples assim. Há mais uma mudança que você deve fazer. Vou lhe mostrar primeiro, depois eu explico:
<pre><code><article>
<header>
<p class="post-date">October 22, 2009</p>
<mark><h1></mark>
<a href="#"
rel="bookmark"
title="link to this post">
Travel day
</a>
<mark></h1></mark>
</header>
…
</article></code></pre>
<p>Você entendeu isso? Eu mudei o elemento <code><h2></code> para um elemento <code><h1></code>, e o coloquei dentro de um elemento <code><header></code>. Você já viu o elemento <code><header></code> em ação. Seu propósito é envolver todos os elementos que formam o cabeçalho do artigo (neste caso, a data de publicação e título do artigo). Mas…mas…mas… não deveríamos ter apenas um <code><h1></code> por documento? Isso não vai estragar o esboço do documento? Não, mas para entender porque não, nós precisamos dar um passo para trás.
<p>No <abbr>HTML</abbr> 4, a <em>única</em> maneira de criar um esboço do documento era com os elementos <code><h1></code>–<code><h6></code>. Se você apenas quisesse um nó raiz em seu esboço, você tinha que limitar-se a um <code><h1></code> em sua implementação. Mas a especificação do <abbr>HTML5</abbr> <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#headings-and-sections>define um algoritmo para gerar um esboço de documento</a> que incorpora os novos elementos semânticos no <abbr>HTML5</abbr>. O algoritmo do <abbr>HTML5</abbr> diz que um elemento <code><article></code> cria uma nova seção, que é, um novo nó no esboço do documento. E no <abbr>HTML5</abbr>, cada seção pode possuir seu próprio elemento <code><h1></code>.
<p>Esta é uma mudança drástica do <abbr>HTML</abbr> 4, e aqui está o porque isso é uma coisa boa. Muitas páginas da web são realmente geradas por templates. Um pouco de conteúdo é tirado de uma fonte e inserido na página aqui; um pouco de conteúdo é tirado de outra fonte e inserido na página ali. Muitos tutoriais são estruturados da mesma maneira. “Aqui está uma implementação <abbr>HTML</abbr>. Apenas copie e cole em sua página.” Tudo bem para pequenos trechos de conteúdo, mas e se a implementação que você está colando é uma seção inteira? Neste caso, o tutorial vai estar como algo do tipo: “Aqui está uma implementação <abbr>HTML</abbr>. Apenas copie e cole em seu editor de texto, e corrija as tags de cabeçalho para que possam coincidir com o nível de aninhamento das tags correspondentes da página em que você o está colando.
<p>Deixe-me colocar isso de outra forma. <abbr>HTML</abbr> 4 não possui um elemento de cabeçalho <em>genérico</em>. Ele possui seis elementos estritamente numerados, <code><h1></code>–<code><h6></code>, os quais têm que estar exatamente nesta ordem. Este tipo de coisa fede, especialmente se sua página é “montada” ao invés de “criada.” E este é o problema que o <abbr>HTML5</abbr> resolve com os novos elementos de seção e as novas regras para os elementos de cabeçalho existentes. Se você está usando os novos elementos de seção, posso lhe dar esta implementação:
<pre><code><article>
<header>
<h1>A syndicated post</h1>
</header>
<p>Lorem ipsum blah blah…</p>
</article></code></pre>
<p>e você pode copiar e colar <em>em qualquer lugar de sua página</em> sem modificação. O fato de ele conter um elemento <code><h1></code> não é um problema, porque a coisa toda está contida dentro de um <code><article></code>. O elemento <code><article></code> define um nó contido em si próprio no esboço do documento, o elemento <code><h1></code> fornece o título para aquele nó, e todos os outros elementos de seção da página vão permanecer em qualquer nível de aninhamento que se encontravam antes.
<div class=pf>
<h4>Professor Markup diz</h4>
<div class=inner>
<blockquote><p>Como todas as coisas na web, a realidade é um pouco mais complicada do que estou mostrando. Os novos elementos de seção “explícitos” (como <code><h1></code> contido no <code><article></code>) podem interagir de inesperadas maneiras com os velhos elementos “implícitos” (<code><h1></code>–<code><h6></code>). Sua vida ficará mais simples se você usar um ou outro, mas não os dois. Se você precisar usar os dois na mesma página, tenha certeza de checar o resultado em <a href=http://gsnedders.html5.org/outliner/> <abbr>HTML5</abbr> Outliner</a> e verifique se o esboço de seu documento faz sentido.
</blockquote>
</div>
</div>
<p class=a>❧
<h2 id=time-element>Datas e Horas</h2>
<p class=ss style="float:left;margin:0 30px 0 0"><img src=i/openclipart.org_johnny_automatic_clock_tower.png width=205 height=378 alt="clock tower">
<p>Isso é emocionante, não é? Digo, não é como “esquiar pelado no Mount Everest enquanto recita o Star Spangled Banner de trás pra frente”, mas é bem emocionante o quão longe a marcação semântica vai. Vamos continuar com <a href=examples/blog-original.html>nossa página de exemplo</a>. A próxima linha que quero destacar é esta:
<pre><code><div class="entry">
<mark><p class="post-date">October 22, 2009</p></mark>
<h2>Travel day</h2>
</div></code></pre>
<p>A mesma velha estória, certo? Um padrão comum — designando a data de publicação de um artigo — que não contém marcação semântica para apoiá-lo, então autores recorrem às implementações genéricas com alterações em atributos de <code>class</code>. Novamente, isso é <abbr>HTML5</abbr> válido. Você não é <em>obrigado</em> a mudar isso. Mas o <abbr>HTML5</abbr> fornece uma solução específica para este caso: o elemento <code><time></code>.
<pre><code><time datetime="2009-10-22" pubdate>October 22, 2009</time></code></pre>
<p>Há três partes no elemento <code><time></code>:
<ol>
<li>Uma máquina de leitura para timestamp
<li>Conteúdo de texto de leitura para humanos
<li>Uma flag opcional <code>pubdate</code>
</ol>
<p>Neste exemplo, o atributo <code>datetime</code> apenas especifica a data, não o tempo. O formato é de quatro dígitos para o ano, dois dígitos para o mês, e dois dígitos para o dia, separado por traços:
<pre><code><time <mark>datetime="2009-10-22"</mark> pubdate>October 22, 2009</time></code></pre>
<p>Se você quiser incluir o tempo também, adicione a letra <code>T</code> após a data, o tempo no formato de 24 horas, depois a diferença da timezone.
<pre><code><time datetime="<mark>2009-10-22T13:59:47-04:00</mark>" pubdate>
October 22, 2009 1:59pm EDT
</time></code></pre>
<p>(O formato data/tempo é bastante flexível. A especificação do <abbr>HTML5</abbr> <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#valid-global-date-and-time-string>contém exemplos de data/tempo válidas</a>.)
<p>Note que mudei o texto — entre <code><time></code> e <code></time></code> — para combinar com a máquina de leitura para timestamp. Isso não é obrigatório. O conteúdo pode ser o que você quiser, contanto que você forneça uma máquina de leitura para data/timestamp no atributo <code>datetime</code>. Então isso é <abbr>HTML5</abbr> válido:
<pre><code><time datetime="2009-10-22"><mark>last Thursday</mark></time></code></pre>
<p>E isso também é <abbr>HTML5</abbr> válido:
<pre><code><time datetime="2009-10-22"></time></code></pre>
<p>A peça final do quebra-cabeça é o atributo <code>pubdate</code>. É um atributo Boolean, então apenas adicione-o se precisar, assim:
<pre><code><time datetime="2009-10-22" <mark>pubdate</mark>>October 22, 2009</time></code></pre>
<p>Se você não gostar de atributos “pelados”, isso é equivalente:
<pre><code><time datetime="2009-10-22" <mark>pubdate="pubdate"</mark>>October 22, 2009</time></code></pre>
<p>O que significa o atributo <code>pubdate</code>? Significa uma de duas coisas. Se o elemento <code><time></code> está em um elemento <code><article></code>, significa que este timestamp é a data de publicação do artigo. Se o elemento <code><time></code> não está em um elemento <code><article></code>, significa que esse timestamp é a data de publicação do documento inteiro.
<p>Este é o artigo inteiro, reformulado para tirar total vantagem do <abbr>HTML5</abbr>:
<pre><code><article>
<header>
<time datetime="2009-10-22" pubdate>
October 22, 2009
</time>
<h1>
<a href="#"
rel="bookmark"
title="link to this post">
Travel day
</a>
</h1>
</header>
<p>Lorem ipsum dolor sit amet…</p>
</article></code></pre>
<p class=a>❧
<h2 id=nav-element>Navegação</h2>
<p class=ss><img src=i/openclipart.org_johnny_automatic_a_pink.png alt="a man navigating a sailboat on the water" width=345 height=377>
<p>Uma das partes mais importantes de qualquer site é a barra de navegação. A CNN.com tem “abas” ao longo do topo de cada página que apontam para diferentes seções de notícias — “Tech,” “Health,” “Sports,” <i class=baa>&</i>c. As páginas de resultado da busca do Google têm uma faixa semelhante no topo da página para tentar realizar sua busca em diferentes serviços do Google — “Imagens,” “Videos,” “Mapas,” <i class=baa>&</i>c. E <a href=examples/blog-original.html>nossa página de exemplo</a> possui uma barra de navegação no cabeçalho que inclui links para diferentes seções de nosso hipotético site — “home,” “blog,” “gallery,” e “about.”
<p>Assim é como a barra de navegação era originalmente implementada:
<pre><code><div id="nav">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">about</a></li>
</ul>
</div></code></pre>
<p>Novamente, isso é <abbr>HTML5</abbr> válido. Mas enquanto é feito como uma lista de quatro itens, não há nada sobre a lista que lhe diga que ela faz parte da navegação do site. Visualmente, você pode adivinhar pelo fato dela fazer parte do cabeçalho da página, e pelo texto dos links. Mas semanticamente, não há nada para distinguir a lista de links de qualquer outra.
<p>Quem liga para a semântica de navegação do site? Por exemplo, <a href=http://diveintoaccessibility.org/>pessoas com deficiências</a>. Por que isso? Considere este cenário: seu movimento é limitado, e usar o mouse é difícil ou impossível. Para compensar, você pode usar um componente do browser que lhe permite avançar para a maioria dos links de navegação. Ou considere isso: se sua visão é limitada, você pode usar um programa dedicado chamado “leitor de tela” que usa text-to-speech para falar e resumir as páginas da web. Uma vez que passar do título da página, os próximos trechos importantes de informação sobre uma página são os principais links de navegação. Se você quer navegar rápido, você dirá ao seu leitor de tela para pular para a barra de navegação e começar a ler. Se você quiser consultar rápido, você pode dizer ao seu leitor de tela para <em>pular</em> a barra de navegação e começar a ler o conteúdo principal. De qualquer forma, ser capaz de determinar os links de navegação programaticamente é importante.
<p>Então, enquanto não há nada de errado em usar <code><div id="nav"></code> para criar a navegação de seu site, Também não há particularmente nada certo sobre isso. O <abbr>HTML5</abbr> fornece uma maneira semântica para implementar seções de navegação: o elemento <code><nav></code>.
<pre><code><mark><nav></mark>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">about</a></li>
</ul>
<mark></nav></mark></code></pre>
<div class=pf>
<h4>Pergunte ao Professor Markup</h4>
<div class=inner>
<blockquote class=note>
<p><span>☞</span>P: Há <a href=http://www.webaim.org/techniques/skipnav/>skip links</a> compatíveis com o elemento <code><nav></code>? Eu ainda preciso de skip links no <abbr>HTML5</abbr>?<br>
<p>R: Skip links permitem os leitores pularem entre as seções de navegação. Eles são úteis para usuários com deficiência que usam software de terceiros para ler uma página da web e navegar nela sem mouse. (<a href=http://www.webaim.org/techniques/skipnav/>Aprenda como e porque fornecer os skip links</a>.)
<p>Uma vez que os leitores de tela forem atualizados para reconhecer o elemento <code><nav></code>, os skip links ficarão obsoletos, desde que o software de leitor de tela esteja apto a automaticamente saltar sobre uma seção de navegação implementada com o elemento <code><nav></code>. Contudo, isso será um pouco antes de todos os usuários com deficiência da web atualizarem para o software de leitor de tela com <abbr>HTML5</abbr>, então você deve continuar fornecendo seus próprios skip links para saltarem sobre as seções <code><nav></code>.
</blockquote>
</div>
</div>
<p class=a>❧
<h2 id=footer-element>Footers</h2>
<p>Finalmente, nós chegamos ao fim de <a href=examples/blog-original.html>nossa página de exemplo</a>. A última coisa sobre qual quero falar é a última coisa da página: o footer. O footer era originalmente implementado assim:
<pre><code><div id="footer">
<p>&#167;</p>
<p>&#169; 2001&#8211;9 <a href="#">Mark Pilgrim</a></p>
</div></code></pre>
<p>Isso é <abbr>HTML5</abbr> válido. Se você gostar, pode continuar com ele. Mas o <abbr>HTML5</abbr> fornece um elemento mais específico para isso: o elemento <code><footer></code>.
<pre><code><mark><footer></mark>
<p>&#167;</p>
<p>&#169; 2001&#8211;9 <a href="#">Mark Pilgrim</a></p>
<mark></footer></mark></code></pre>
<p>O que é apropriado colocar em um elemento <code><footer></code>? Provavelmente qualquer coisa que você estiver colocando agora em um <code><div id="footer"></code>. OK, é uma resposta redundante. Mas sério, é isso. A especificação do <abbr>HTML5</abbr> diz, “Um footer geralmente contém informação sobre sua seção como quem a escreveu, links para documentos relacionados, copyright, e assim por diante.” É o que há em nossa página de exemplo: declaração de copyright e um link para uma página de "Sobre o autor". Olhando ao redor em alguns sites populares, vejo muito potencial nos footers.
<ul>
<li><a href=http://www.cnn.com/>CNN</a> possui um footer que contém uma declaração de copyright, links para traduções, links para termos de uso e páginas de privacidade, “sobre,” “contato,” e “ajuda”. Todas totalmente apropriadas para o <code><footer></code>.
<li><a href=http://www.google.com/>Google</a> possui uma home page esparsa, mas no final dela há links para “Programas de publicidade,” “Solução para negócios,” e “Sobre o Google”; uma declaração de copyright; e um link para a política de publicidade do Google. Tudo isso pode ser incluído em um <code><footer></code>.
<li><a href=http://diveintomark.org/>My weblog</a> possui um footer com links para meus outros sites, mais uma declaração de copyright. Definitivamente apropriado pra um elemento <code><footer></code>. (Note que os links <em>não</em> devem ser incluídos em um elemento <code><nav></code>, porque eles não são links de navegação do site; eles são apenas uma coleção de links para meus outros projetos em outros sites).
</ul>
<p>“<a href=http://ui-patterns.com/pattern/FatFooter>Footers gordos</a>” são raivosos hoje em dia. Dê uma olhada no footer do <a href=http://www.w3.org/>site da <abbr>W3C</abbr></a>. Ele contém três colunas, rotuladas “Navigation,” “Contact W3C,” e “W3C Updates.” A implementação se parece mais ou menos com isso:
<pre><code><div id="w3c_footer">
<div class="w3c_footer-nav">
<h3>Navigation</h3>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/standards/">Standards</a></li>
<li><a href="/participate/">Participate</a></li>
<li><a href="/Consortium/membership">Membership</a></li>
<li><a href="/Consortium/">About W3C</a></li>
</ul>
</div>
<div class="w3c_footer-nav">
<h3>Contact W3C</h3>
<ul>
<li><a href="/Consortium/contact">Contact</a></li>
<li><a href="/Help/">Help and FAQ</a></li>
<li><a href="/Consortium/sup">Donate</a></li>
<li><a href="/Consortium/siteindex">Site Map</a></li>
</ul>
</div>
<div class="w3c_footer-nav">
<h3>W3C Updates</h3>
<ul>
<li><a href="http://twitter.com/W3C">Twitter</a></li>
<li><a href="http://identi.ca/w3c">Identi.ca</a></li>
</ul>
</div>
<p class="copyright">Copyright © 2009 W3C</p>
</div></code></pre>
<p>Para converter isso para <abbr>HTML5</abbr> semântico, Eu faria as seguintes alterações:
<ul>
<li>Converter o <code><div id="w3c_footer"></code> externo para um elemento <code><footer></code>.
<li>Converter as primeiras duas instâncias de <code><div class="w3c_footer-nav"></code> para elementos <code><nav></code>, e a terceira instância para um elemento <code><section></code>.
<li>Converter o <code><h3></code> para <code><h1></code>, desde que cada um ficará dentro de um elemento de seção. O elemento <code><nav></code> cria uma seção no esboço do documento, assim como o elemento <a href=#article-element><code><article></code></a>.
</ul>
<p>A implementação final pode parecer como algo do tipo:
<pre><code><mark><footer></mark>
<mark><nav></mark>
<mark><h1></mark>Navigation<mark></h1></mark>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/standards/">Standards</a></li>
<li><a href="/participate/">Participate</a></li>
<li><a href="/Consortium/membership">Membership</a></li>
<li><a href="/Consortium/">About W3C</a></li>
</ul>
<mark></nav></mark>
<mark><nav></mark>
<mark><h1></mark>Contact W3C<mark></h1></mark>
<ul>
<li><a href="/Consortium/contact">Contact</a></li>
<li><a href="/Help/">Help and FAQ</a></li>
<li><a href="/Consortium/sup">Donate</a></li>
<li><a href="/Consortium/siteindex">Site Map</a></li>
</ul>
<mark></nav></mark>
<mark><section></mark>
<mark><h1></mark>W3C Updates<mark></h1></mark>
<ul>
<li><a href="http://twitter.com/W3C">Twitter</a></li>
<li><a href="http://identi.ca/w3c">Identi.ca</a></li>
</ul>
<mark></section></mark>
<p class="copyright">Copyright © 2009 W3C</p>
<mark></footer></mark></code></pre>
<p class=a>❧
<h2 id=further-reading>Leitura complementar</h2>
<p>Páginas de exemplo usadas em todo este capítulo:
<ul>
<li><a href=examples/blog-original.html>Original (<abbr>HTML</abbr> 4)</a>
<li><a href=examples/blog-html5.html>Modificado (<abbr>HTML5</abbr>)</a>
</ul>
<p>Sobre codificação de caracteres:
<ul>
<li><a href="http://www.joelonsoftware.com/articles/Unicode.html">The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!)</a> por <cite>Joel Spolsky</cite>
<li><a href="http://www.tbray.org/ongoing/When/200x/2003/04/06/Unicode">On the Goodness of Unicode</a>, <a href="http://www.tbray.org/ongoing/When/200x/2003/04/13/Strings">On Character Strings</a>, e <a href="http://www.tbray.org/ongoing/When/200x/2003/04/26/UTF">Characters vs. Bytes</a> por <cite>Tim Bray</cite>
</ul>
<p>Sobre permitir novo <abbr>HTML5</abbr> no Internet Explorer:
<ul>
<li><a href=http://xopus.com/devblog/2008/style-unknown-elements.html>How to style unknown elements in IE</a> por <cite>Sjoerd Visscher</cite>
<li><a href=http://ejohn.org/blog/html5-shiv/><abbr>HTML5</abbr> shiv</a> por <cite>John Resig</cite>
<li><a href=http://remysharp.com/2009/01/07/html5-enabling-script/><abbr>HTML5</abbr> enabling script</a> por <cite>Remy Sharp</cite>
</ul>
<p>Sobre modos padrões e doctype:
<ul>
<li><a href=http://hsivonen.iki.fi/doctype/>Activating Browser Modes with Doctype</a> por <cite>Henri Sivonen</cite>. Este é o único artigo que você deve ler sobre o assunto. Qualquer artigo sobre doctypes que não referencie o trabalho de Henri é garantia de estar desatualizado, incompleto, ou incorreto.
</ul>
<p>Validador <abbr>HTML5</abbr>:
<ul>
<li><a href=http://html5.validator.nu/>html5.validator.nu</a>
</ul>
<p class=a>❧
<p>Este foi o “O que significa tudo isso?”. Consulte o <a href=table-of-contents.html>Sumário</a>, caso queira continuar com a leitura.
<div class=pf>
<h4>Você sabia?</h4>
<div class=moneybags>
<blockquote><p>Em associação com o Google Press, O’Reilly está distribuindo este livro em uma variedade de formatos, incluindo papel, ePub, Mobi, e <abbr>DRM</abbr>-de graça <abbr>PDF</abbr>. A edição paga é chamada de “HTML5: Up & Running,” e está disponível agora. Este capítulo está incluído na edição paga.
<p>Se você gostou deste capítulo e quer demonstrar sua apreciação, você pode <a href="http://www.amazon.com/HTML5-Up-Running-Mark-Pilgrim/dp/0596806027?ie=UTF8&tag=diveintomark-20&creativeASIN=0596806027">comprar “HTML5: Up & Running” com este link afiliado </a> ou <a href=http://oreilly.com/catalog/9780596806033>comprar a edição eletrônica diretamente da O’Reilly</a>. Você terá um livro, e eu um dinheirinho. Eu não estou aceitando doações diretas.
</blockquote>
</div>
</div>
<p class=c>Copyright MMIX–MMXI <a href=about.html>Mark Pilgrim</a>
<form action=https://www.google.com/cse><div><input type=hidden name=cx value=014437924039265546826:2nmoshc8y3y><input type=hidden name=ie value=UTF-8><input type=search name=q size=25 placeholder="powered by Google™"> <input type=submit name=sa value=Pesquisar></div></form>
<script src=j/jquery.js></script>
<script src=j/dih5.js></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-4114546-27', 'auto');
ga('send', 'pageview');
</script>
</html>