forked from zenorocha/diveintohtml5
-
Notifications
You must be signed in to change notification settings - Fork 6
/
semantics.html
2087 lines (1993 loc) · 88.5 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
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
---
title: Semântica - Dive Into HTML5
---
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8" />
<title>{{ page.title }}</title>
<!--[if lt IE 9]><script src=j/html5.js></script><![endif]-->
<link
rel="alternate"
type="application/atom+xml"
href="https://github.com/webfatorial/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" />
</head>
<body cz-shortcut-listen="true">
{% include fork.html %}
<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>
</p>
<h1><br />O que significa tudo isso?</h1>
<p id="toc"><a href="javascript:showTOC()">exibir índice analítico</a></p>
<p class="a">❧</p>
<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>
<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>
<p class="a">❧</p>
<h2 id="the-doctype">O Doctype</h2>
<p>A partir do topo:</p>
<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>
<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>
<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>
<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:
</p>
<blockquote>
<dl>
<dt>Quirks Mode (Modo peculiar)</dt>
<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.
</dd>
<dt>Standards Mode (Modo padrão)</dt>
<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.”
</dd>
<dt>Almost Standards Mode (Modo quase padrão)</dt>
<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.”
</dd>
</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>
<p>Agora onde estavamos? Ah sim, o doctype:</p>
<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>
<p>Este é o doctype do <abbr>HTML5</abbr>:</p>
<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>
<p class="a">❧</p>
<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>
<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>
<p>
Nessa <a href="examples/blog-original.html">página de exemplo</a>, o
elemento raiz se parece com isso:
</p>
<table role="presentation">
<tbody>
<tr>
<td>
<pre><code><html xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"></code></pre>
</td>
</tr>
</tbody>
</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>
<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>
<p>
Descartando o atributo <code>xmlns</code>, ficamos com este elemento raiz:
</p>
<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
>.
</p>
<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.
</p>
</blockquote>
<p>
Está pronto para descartá-lo? Tudo bem, deixe-o ir. Indo, indo… já era!
Isso nos deixa com este elemento raiz:
</p>
<pre><code><html lang="en"></code></pre>
<p>E isso é tudo que tenho para falar sobre isso.</p>
<p class="a">❧</p>
<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>
<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>:
</p>
<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>
<p class="a">❧</p>
<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>
<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>
<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:
</p>
<blockquote>
<p><code>Content-Type: text/html; charset="utf-8"</code></p>
</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:
</p>
<blockquote>
<p>
<code
><meta http-equiv="Content-Type" content="text/html;
charset=utf-8"></code
>
</p>
</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>
<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.
</p>
<blockquote>
<p><code><meta charset="utf-8" /></code></p>
</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
>:
</p>
<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>
<p>
<code
><META HTTP-EQUIV=Content-Type CONTENT=text/html;
charset=ISO-8859-1></code
>
</p>
</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.
</p>
<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>
<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
>.
</p>
</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>
<p class="a">❧</p>
<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...”
</p>
<ul>
<li>
...é uma stylesheet que contém regras de CSS que o browser deveria
aplicar a esse documento.
</li>
<li>
...é um feed que contém o mesmo conteúdo desta página, mas em um formato
padrão registrável.
</li>
<li>...é uma tradução desta página para outra língua.</li>
<li>
...é o mesmo conteúdo desta página, mas em formato <abbr>PDF</abbr>.
</li>
<li>
...é o próximo capítulo de um livro online o qual esta página também faz
parte.
</li>
</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
>:
</p>
<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>
<p>
O comportamento exato para links de recursos externos depende da exata
relação, como definido para o tipo de link relevante.
</p>
</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>
<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>.
</p>
<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>
<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
>.
</p>
</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>:
</p>
<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).
</p>
<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>:
</p>
<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>
<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>
<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>.
</p>
<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>
<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>
<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>
<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>
<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>
<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>
<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:
</p>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<p class="a">❧</p>
<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.
</p>
<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
>
</dt>
<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.
</dd>
<dt>
<a
href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-nav-element"
><code><nav></code></a
>
</dt>
<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>.
</dd>
<dt>
<a
href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-article-element"
><code><article></code></a
>
</dt>
<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.
</dd>
<dt>
<a
href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-aside-element"
><code><aside></code></a
>
</dt>
<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.
</dd>
<dt>
<a
href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-hgroup-element"
><code><hgroup></code></a
>
</dt>
<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.
</dd>
<dt>
<a
href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element"
><code><header></code></a
>
</dt>
<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.
</dd>
<dt>
<a
href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-footer-element"
><code><footer></code></a
>
</dt>
<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.
</dd>
<dt>
<a
href="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-time-element"
><code><time></code></a
>
</dt>
<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.
</dd>
<dt>
<a
href="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-mark-element"
><code><mark></code></a
>
</dt>
<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.
</dd>
</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>
<p class="a">❧</p>
<h2 id="unknown-elements">