forked from deianvasilev/diveintohtml5
-
Notifications
You must be signed in to change notification settings - Fork 10
/
semantics.html
896 lines (649 loc) · 75.1 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
<!DOCTYPE html>
<meta charset=utf-8>
<title>Sémantika - 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/diveintomark/diveintohtml5/commits/master.atom>
<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>
<p>Navigace: <a href=index.html>Domů</a> <span class=u>‣</span> <a href=table-of-contents.html#semantics>Dive Into <abbr>HTML5</abbr></a> <span class=u>‣</span>
<h1><br>Co to všechno znamená?</h1>
<p id=toc>
<p class=a>❧
<h2 id=divingin>Jdeme na to</h2>
<p class=f><img src=i/aoc-t.png alt=T width=107 height=105>ato kapitola vezme <abbr>HTML</abbr> stránku, na které není vůbec nic špatného, a zlepší ji. Některé části se zkrátí. Jiné se prodlouží. A všechno bude více sémantické. Bude to úchvatné.
<p style="clear:both"><a href=examples/blog-original.html>Tohle je naše stránka</a>. Naučte se ji. Žijte s ní. Mějte ji rádi. Otevřete ji v novém okně a nevracejte se, dokud jste si alespoň jednou neprohlédli její zdrojový kód.
<p class=a>❧
<h2 id=the-doctype>Typ dokumentu – doctype</h2>
<p>Pěkně od začátku:
<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>Říká se tomu „typ dokumentu (doctype)“. Skrývá se za ním dlouhá historie – a černá magie. Když vývojáři Microsoftu pracovali na Internet Exploreru 5 pro Mac, narazili na překvapivý problém. Připravovaná verze jejich prohlížeče podporovala standardy o tolik lépe, že se starší stránky přestaly zobrazovat správně. Přesněji řečeno, ony se zobrazovaly správně (podle specifikací), ale uživatelé čekali, že se budou zobrazovat <em>nesprávně</em>. Autoři stránek totiž počítali s chybami tehdejších prohlížečů, zejména Netscape 4 a Internet Explorer 4. IE5/Mac byl tak pokročilý, že vlastně rozbil web.
<p>Microsoft přišel s neobvyklým řešením. IE5/Mac před zobrazením stránky prozkoumal „doctype“, který zpravidla bývá v prvním řádku <abbr>HTML</abbr> kódu (ještě před prvkem <code><html></code>). Starší stránky (které spoléhaly na zobrazovací chyby starších prohlížečů) obvykle neobsahovaly žádný typ dokumentu. IE5/Mac tyto stránky zobrazil stejně jako starší prohlížeče. Pokud chtěl autor stránky „aktivovat“ podporu nových standardů, musel to dát najevo a poskytnout před prvkem <code><html></code> správný typ dokumentu.
<p>Myšlenka se rozšířila jako požár a všechny hlavní prohlížeče brzy měly dva režimy: „podivný režim (quirks mode)“ a „standardní režim“. Řeč je o webu, takže se věci samozřejmě brzy vymkly z rukou. Když se Mozilla snažila vydat verzi 1.1, zjistila, že existují stránky zobrazované ve „standardním režimu“, které ale ve skutečnosti počítají s určitou konkrétní chybou. Mozilla jednoduše opravila své zobrazování, aby chybu odstranila, a rázem se rozpadly tisíce stránek. Takže byl vytvořen – opravdu si nevymýšlím – „<a href="https://developer.mozilla.org/en/Gecko's_%22Almost_Standards%22_Mode">skoro standardní režim</a>“.”
<p>Henri Sivonen ve své významné práci <a href=http://hsivonen.iki.fi/doctype/>Activating Browser Modes with Doctype</a> shrnuje různé režimy:
<blockquote>
<dl>
<dt>Podivný režim (quirks mode)
<dd>V podivném režimu prohlížeče porušují aktuální specifikace webových formátů, aby zabránily „poškození“ stránek vytvořených podle zvyklostí převládajících v pozdních 90. letech.
<dt>Standardní režim
<dd>Ve standardním režimu se prohlížeče snaží v rámci svých možností poskytnout zpracování podle platných specifikací pro korektní dokumenty. <abbr>HTML5</abbr> tento režim označuje jako „nepodivný (no quirks mode)“.
<dt>Skoro standardní režim
<dd>Firefox, Safari, Chrome, Opera (od verze 7.5) a IE8 mají také režim známý jako „skoro standardní“, který svislé rozměry tabulek implementuje tradičně, místo aby se striktně držel specifikace CSS2. <abbr>HTML5</abbr> mu říká „trochu podivný režim (limited quirks mode)“.
</dl>
</blockquote>
<p>(Doporučuji přečíst si zbytek Henriho článku, protože silně zjednodušuji. Dokonce i v IE5/Mac existovalo několik starších typů dokumentu, které nebyly dost daleko na to, aby aktivovaly standardní režim. Postupem času seznam chyb rostl a s ním i seznam typů dokumentu, které vyvolají „podivný režim“. Když jsem je naposledy zkoušel spočítat, existovalo 5 typů spouštějících „skoro standardní režim“ a 73, které vyvolaly „podivný režim“. Ale pravděpodobně jsem nějaké přehlédl a raději se ani nesnažím mluvit o blázinci, který provozuje Internet Explorer 8 při přepínání mezi svými čtyřmi – čtyřmi! – různými režimy. <a href=http://hsivonen.iki.fi/doctype/ie8-mode.png>Tady je diagram</a>. Zničte to. Spalte to.)
<p>Tak tedy. Kde jsme skončili? Aha, typ dokumentu:
<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>Tohle je jeden z 15 typů vyvolávajících „standardní režim“ ve všech moderních prohlížečích. Není na něm nic špatného. Pokud se vám líbí, nechte si ho. Nebo ho můžete vyměnit za typ dokumentu pro <abbr>HTML5</abbr>, který je kratší, sladší a také vyvolá „standardní režim“ ve všech moderních prohlížečích.
<p>Tohle je doctype pro <abbr>HTML5</abbr>:
<pre><code><!DOCTYPE html></code></pre>
<p>To je celé. Jen 15 znaků. Je tak jednoduchý, že ho dokážete napsat z hlavy a neuděláte chybu.
<p class=a>❧
<h2 id=html-element>Kořenový prvek</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="stom na kopci" width=280 height=394>
<p><abbr>HTML</abbr> stránka je sekvencí vnořených prvků. Celá její struktura připomíná strom. Některé prvky jsou „sourozenci“ jako dvě větve, které vyrůstají ze stejného kmene. Některé prvky jsou „dětmi“ jiných prvků, jako když menší větev vyrůstá z větší větve. (Funguje to i obráceně; prvek, který obsahuje jiný prvek, je nazýván „rodičem“ uzlů představujících jeho přímé děti a „předkem“ svých vnoučat.) Bezdětné prvky se nazývají „listy“. Nejvnějšnější prvek, který je předkem všech ostatních prvků stránky, se nazývá „kořenový prvek“. Kořenovým prvkem <abbr>HTML</abbr> stránky je vždy <code><html></code>.
<p>Na <a href=examples/blog-original.html>této ukázkové stránce</a>, vypadá kořenový prvek následovně:
<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>Na jeho kódu není nic špatného. Zase, pokud se vám líbí, nechte si ho. Je to validní <abbr>HTML5</abbr>. Nicméně některé jeho části v <abbr>HTML5</abbr> už nejsou potřeba, takže se jejich odstraněním dá ušetřit pár bajtů.
<p>První věcí k diskusi je atribut <code>xmlns</code>. Je pozůstatkem <a href=http://www.w3.org/TR/xhtml1/><abbr>XHTML</abbr> 1.0</a>. Říká, že prvky na této stránce patří do jmenného prostoru <abbr>XHTML</abbr>, <code>http://www.w3.org/1999/xhtml</code>. Ale prvky <abbr>HTML5</abbr> <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/infrastructure.html#xml>jsou vždy v tomto jmenném prostoru</a>, takže už to nemusíme explicitně deklarovat. Vaše <abbr>HTML5</abbr> stránka bude ve všech prohlížečích fungovat zcela stejně, ať tento atribut uvedete nebo ne.
<p>Po zahození atributu <code>xmlns</code> nám zůstane tento kořenový prvek:
<pre><code><html lang="en" xml:lang="en"></code></pre>
<p>Oba jeho atributy <code>lang</code> a <code>xml:lang</code> definují jazyk této <abbr>HTML</abbr> stránky. (<code>en</code> znamená „English“. Nepíšete anglicky? <a href=http://www.w3.org/International/questions/qa-choosing-language-tags>Najděte si kód pro svůj jazyk</a>.) Proč dva atributy pro totéž? Opět se jedná o pozůstatek <abbr>XHTML</abbr>. V <abbr>HTML5</abbr> má nějaký účinek jen atribut <code>lang</code>. Můžete atribut <code>xml:lang</code> zachovat, pokud chcete, ale pokud to uděláte, musíte zajisit, aby <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-lang-and-xml:lang-attributes">obsahoval stejnou hodnotu jako atribut <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>Aby se usnadnila migrace z XHTML, autoři mohou v <abbr>HTML</abbr> prvcích uvnitř <abbr>HTML</abbr> dokumentu uvést atribut bez jmenného prostoru, bez prefixu a s přesným lokálním jménem "xml:lang", ale tyto atributy smí být uvedeny jen pokud je také uveden atribut <code>lang</code> bez jmenného prostoru a oba atributy musí mít stejnou hodnotu při porovnání v ASCII nerozlišujícím malá a velká písmena. Atribut s přesným lokálním jménem "xml:lang" bez jmenného prostoru a bez prefixu nemá žádný vliv na jazykové zpracování.
</blockquote>
<p>Jste připraveni ho zahodit? Nic nezkazíte, prostě nic nedělejte. Ještě, ještě… hotovo! Zůstal nám tenhle kořenový prvek:
<pre><code><html lang="en"></code></pre>
<p>Víc už nemusím říkat.
<p class=a>❧
<h2 id=head-element>Prvek <head></h2>
<p class=c><img src=i/openclipart.org_johnny_automatic_8_from_behind.png alt="8 mužů zezadu" width=554 height=164>
<p>Prvním dítětem kořenového prvku je obvykle prvek <code><head></code>. Obsahuje metadata – informace <em>o stránce</em>, nikoli její vlastní tělo. (Tělo stránky obsahuje, nepříliš překvapivě, prvek <code><body></code>.) Samotný prvek <code><head></code> je celkem nudný a v <abbr>HTML5</abbr> se nijak zajímavě nezměnil. Dobroty jsou <em>uvnitř</em> prvku <code><head></code>. A proto se opět obrátíme na <a href=examples/blog-original.html>naši ukázkovou stránku</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>Pro začátek: prvek <code><meta></code>.
<p class=a>❧
<h2 id=encoding>Kódování znaků</h2>
<p>Když uvažujete o „textu“, pravděpodobně uvažujete o „znacích a symbolech, které vidím na obrazovce svého počítače“. Ale počítače nepracují se znaky a symboly, pracují s bity a bajty. Každý kousek textu, který jste kdy viděli na počítačové obrazovce, je ve skutečnosti uložen v určitém <em>kódování znaků</em>. Existují <a href=http://www.iana.org/assignments/character-sets>stovky různých znakových kódování</a>, některá jsou optimalizována pro konkrétní jazyky, jako je ruština, čínština nebo angličtina, jiná lze použít pro více jazyků. Kódování znaků zhruba řečeno poskytuje mapování mezi tím co vidíte na obrazovce a tím co váš si počítač ukládá do paměti a na disk.
<p>Ve skutečnosti je to ještě složitější. Stejný znak se může vyskytovat v několika kódováních, ale každé z nich může používat jinou sekvenci bajtů k uložení tohoto znaku do paměti nebo na disk. Takže můžete znakové kódování brát jako určitý druh dešifrovacího klíče pro text. Kdykoli vám někdo předá sekvenci bajtů a tvrdí, že to je „text“, potřebujete znát kódování znaků, které použil, abyste mohli dekódovat bajty na znaky a zobrazit je (nebo je jakkoli zpracovat).
<p>Jak tedy váš prohlížeč vlastně určí kódování znaků pro proud bajtů, který mu posílá web server? Jsem rád, že se ptáte. Pokud se orientujete v <abbr>HTTP</abbr> hlavičkách, možná jste už viděli hlavičku podobnou této:
<blockquote><p><code>Content-Type: text/html; charset="utf-8"</code></blockquote>
<p>Stručně řečeno říká, že server si myslí, že vám posílá <abbr>HTML</abbr> dokument a že ten dokument používá kódování znaků <code>UTF-8</code>. Naneštěstí jen pár autorů v celém tom úžasném webovém oceánu ovládá svůj HTTP server. Vezměte si třeba <a href="http://www.blogger.com/">Blogger</a>: obsah vytvářejí jednotlivci, ale server provozuje Google. Proto <abbr>HTML</abbr> 4 poskytl způsob, jak specifikovat kódování znaků v samotném dokumentu. Tohle jste pravděpodobně viděli také:
<blockquote><p><code><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></code></blockquote>
<p>Stručně řečeno říká, že autor stránky si myslí, že vytvořil <abbr>HTML</abbr> dokument používající kódování znaků <code>UTF-8</code>.
<p>Obě techniky fungují i v <abbr>HTML5</abbr>. <abbr>HTTP</abbr> hlavička je preferovanou metodou a má přednost před značkou <code><meta></code>, pokud se vyskytnou obě. Ne každý ale může nastavovat <abbr>HTTP</abbr> hlavičky, takže <code><meta></code> zůstává k dispozici. Ve skutečnosti se v <abbr>HTML5</abbr> trochu zjednodušila. Nyní vypadá takhle:
<blockquote><p><code><meta charset="utf-8" /></code></blockquote>
<p>Funguje ve všech prohlížečích. Odkud zjednodušená syntaxe pochází? Tady je <a href="http://lists.w3.org/Archives/Public/public-html/2007Jul/0550.html">nejlepší vysvětlení, které jsem našel</a>:
<blockquote cite="http://lists.w3.org/Archives/Public/public-html/2007Jul/0550.html">
<p>Důvodem pro kombinaci atributů <code><meta charset=""></code> je, že ji prohlížeče už implementují, protože lidé mají sklon vynechávat uvozovky, jako:
<p><code><META HTTP-EQUIV=Content-Type CONTENT=text/html; charset=ISO-8859-1></code>
</blockquote>
<p>Existuje dokonce několik <a href="http://simon.html5.org/test/html/parsing/encoding/">testovacích stránek na <code><meta charset></code></a>, pokud nevěříte, že se prohlížeče takto chovají.
<div class=pf>
<h4>Zeptejte se profesora Značky</h4>
<div class=inner>
<blockquote class=note>
<p><span>☞</span>OT: Nikdy nepoužívám legrační znaky. Musím přesto deklarovat své kódování znaků?<br>
<p>OD: Ano! Měli byste <em>vždy</em> specifikovat kódování znaků na každé <abbr>HTML</abbr> stránce, kterou poskytujete. Chybějící specifikace kódování <a href=http://openmya.hacker.jp/hasegawa/security/utf7cs.html>může vést k bezpečnostním rizikům</a>.
</blockquote>
</div>
</div>
<p>Abych to shrnul: kódování znaků je složité a nezjednodušilo se během desítek let mizerně psaných programů používaných autory školenými v kopírování a vkládání. Měli byste <strong>vždy</strong> specifikovat kódování znaků v <strong>každém</strong> <abbr>HTML</abbr> dokumentu, jinak <a href=http://openmya.hacker.jp/hasegawa/security/utf7cs.html>se přihodí ošklivé věci</a>. Můžete to udělat HTTP hlavičkou <code>Content-Type</code>, deklarací <code><meta http-equiv></code> nebo kratší deklarací <code><meta charset></code>, ale udělejte to, prosím. Web vám bude vděčný.
<p class=a>❧
<h2 id=link>Přátelé & vztahy (Link)</h2>
<p>Normální odkazy (<code><a href></code>) jednoduše ukazují na jinou stránku. Vztah odkazu umožňuje vysvětlit, <em>proč</em> na danou stránku odkazujete. Dokončují větu „Na tuto stránku odkazuji, protože…“
<ul>
<li>…je to stylový předpis obsahující CSS pravidla, která by váš prohlížeč měl použít na tento dokument.
<li>…je to webový zdroj, který má stejný obsah jako stránka, ale ve standardním formátu umožňujícím odběr.
<li>…je to překlad této stránky do jiného jazyka.
<li>…má stejný obsah jako tato stránka, ale ve formátu <abbr>PDF</abbr>.
<li>…je to další kapitola on-line knihy, do níž patří i tato stránka.
</ul>
<p>A tak dále. <abbr>HTML5</abbr> rozděluje vztahy odkazů <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#attr-link-rel>do dvou kategorií</a>:
<blockquote cite=http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#attr-link-rel>
<p>Použitím prvku link lze vytvořit dvě kategorie odkazů. <b>Odkazy na vnější zdroje</b> jsou odkazy na zdroje, jež mají být použity k rozšíření aktuálního dokumentu, zatímco <strong>hyperodkazy</strong> jsou odkazy na jiné dokumenty. …
<p>Přesné chování odkazů na externí zdroje závisí na konkrétním vztahu, definovaném pro příslušný typ odkazu.
</blockquote>
<p>V příkladech, které jsem před chvílí uvedl, pouze první (<code>rel="stylesheet"</code>) představuje odkaz na externí zdroj. Ostatní jsou hyperodkazy na jiné dokumenty. Možná je budete chtít následovat a možná ne, ale nejsou potřeba pro zobrazení aktuální stránky.
<p>Vztahy odkazů jsou nejčastěji k vidění u prvků <code><link></code> uvnitř <code><head></code> na začátku stránky. Některé vztahy lze použít také pro prvky <code><a></code>, což je ale dost neobvyklé, i když povolené. <abbr>HTML5</abbr> také připouští určité vztahy pro prvky <code><area></code>, ale to je ještě <em>méně</em> obvyklé. (HTML 4 nepřipouštělo atribut <code>rel</code> u prvků <code><area></code>.) Podívejte se na <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#linkTypes>kompletní tabulku vztahů pro odkazy</a> a ověřte si, kde můžete používat jednotlivé hodnoty <code>rel</code>.
<div class=pf>
<h4>Zeptejte se profesora Značky</h4>
<div class=inner>
<blockquote class=note>
<p><span>☞</span>OT: Mohu vytvářet své vlastní vztahy pro odkazy?<br>
<p>OT: Vypadá to, že zásoba nápadů na nové vztahy odkazů je nevyčerpatelná. WHATWG se snaží zabránit lidem <a href=http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4>udělat v nich naprostý guláš</a>, a proto <a href=http://wiki.whatwg.org/wiki/RelExtensions>spravuje registr navržených hodnot atributu <code>rel</code></a> a <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#other-link-types>definuje proces jejich schvalování</a>.
</blockquote>
</div>
</div>
<h3 id=rel-stylesheet>rel = stylesheet</h3>
<p>Podívejme se na první vztah odkazu na <a href=examples/blog-original.html>naší ukázkové stránce</a>:
<pre><code><link rel="stylesheet" href="style-original.css" type="text/css" /></code></pre>
<p>Jedná se o nejčastěji používaný vztah odkazu na světě (doslova). <code><link rel="stylesheet"></code> slouží pro odkaz na <abbr>CSS</abbr> pravidla uložená v samostatném souboru. V <abbr>HTML5</abbr> jej můžete drobně vylepšit vypuštěním atributu <code>type</code>. Pro web existuje jen jeden stylový jazyk, <abbr>CSS</abbr>, takže je výchozí hodnotou atributu <code>type</code>. Funguje to ve všech prohlížečích. (Předpokládám, že by někdo jednou mohl vymyslet nový stylový jazyk, ale pokud se to stane, jednoduše zase přidáte atribut <code>type</code>.)
<pre><code><link rel="stylesheet" href="style-original.css" /></code></pre>
<h3 id=rel-alternate>rel = alternate</h3>
<p>Pokračujeme s <a href=examples/blog-original.html>naší ukázkovou stránkou</a>:
<pre><code><link rel="alternate"
type="application/atom+xml"
title="My Weblog feed"
href="/feed/" /></code></pre>
<p>Tento vztah odkazu je také poměrně běžný. <code><link rel="alternate"></code> v kombinaci s médii typu <abbr>RSS</abbr> nebo Atom umožňuje tak zvané „automatické objevování kanálů“. Umožňuje čtečkám syndikovaných zdrojů (jako je <a href="http://www.google.com/reader/">Google Reader</a>) zjistit, že tento web obsahuje kanál ohlašující nové příspěvky. Většina prohlížečů také podporuje automatické objevování a zobrazuje speciální ikonu poblíž <abbr>URL</abbr>. (Na rozdíl od <code>rel="stylesheet"</code> zde záleží na atributu <code>type</code>. Nevynechávejte ho!)
<p>Vztah odkazu <code>rel="alternate"</code> vždy býval podivným míšencem různých způsobů použití, <a href=http://www.w3.org/TR/html401/types.html#type-links>i v <abbr>HTML</abbr> 4</a>. V <abbr>HTML5</abbr> došlo k vyjasnění jeho definice a k jejímu rozšíření, aby přesněji popisovala existující webový obsah. Jak jste právě viděli, použití <code>rel="alternate"</code> ve spojení a <code>type=application/atom+xml</code> indikuje Atom kanál pro aktuální stránku. <code>rel="alternate"</code> však můžete použít v kombinaci s jinými hodnotami stributu <code>type</code> k označení stejného obsahu v jiném formátu, například <abbr>PDF</abbr>.
<p><abbr>HTML5</abbr> také ukončilo dlouhodobý zmatek v odkazech na překlady dokumentů. <abbr>HTML</abbr> 4 požaduje, abyste jazyk odkazovaného dokumentu určili atributem <code>lang</code> ve spojení s <code>rel="alternate"</code>, jenže to je špatně. <a href=http://www.w3.org/MarkUp/html4-updates/errata>Seznam chyb v HTML 4</a> uvádí čtyři naprosté chyby ve specifikaci HTML 4. Jednou z nich je definice jazyka dokumentu odkazovaného pomocí <code>link="alternate"</code>. Správný způsob, popsaný v seznamu chyb <abbr>HTML</abbr> 4 a nyní i v <abbr>HTML5</abbr>, je použít atribut <code>hreflang</code>. Naneštěstí nebyly opravy chyb nikdy zpětně začleněny do specifikace <abbr>HTML</abbr> 4, protože na <abbr>HTML</abbr> už nepracuje nikdo z pracovní skupiny W3C pro <abbr>HTML</abbr>.
<h3 id=new-relations>Další vztahy odkazů v HTML5</h3>
<p><code>rel="author"</code> se používá pro odkaz na informace o autorovi stránky. Může se jednat o <code>mailto</code> adresu, ale není to povinné. Může jednoduše odkazovat na kontaktní formulář nebo stránku „o autorovi“.
<p><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#link-type-external>rel="external"</a> „signalizuje, že odkaz vede na dokument, který nepatří do webu, jehož je tato stránka součástí.“ Myslím, že jako první jej zpopularizoval <a href=http://www.wordpress.org/>WordPress</a>, který jej používal u odkazů vložených komentujícími.
<p class=ss style="width:313px"><img src=i/openclipart.org_johnny_automatic_girl_feeding_birds.png width=313 height=384 alt="dívka krmící ptáky">
<p><abbr>HTML</abbr> 4 definoval <a href=http://www.w3.org/TR/html401/types.html#type-links><code>rel="start"</code>, <code>rel="prev"</code> a <code>rel="next"</code></a> určující vztahy mezi stránkami, jež patří do určité posloupnosti (jako kapitoly v knize nebo třeba příspěvky v blogu). Jediný, který kdy byl používán korektně, je <code>rel="next"</code>. Lidé psali <code>rel="previous"</code> místo <code>rel="prev"</code>, používali <code>rel="begin"</code> a <code>rel="first"</code> místo <code>rel="start"</code> a <code>rel="end"</code> místo <code>rel="last"</code>. Ó, a – úplně sami – vytvořili <code>rel="up"</code> pro odkaz na „rodičovskou“ stránku.
<p><abbr>HTML5</abbr> obsahuje <code>rel="first"</code>, což byla nejběžnější variace z různých způsobů, jak říci „první stránka v sérii“. (<code>rel="start"</code> je nevyhovující synonymum poskytnuté pro zpětnou kompatibilitu.) Obsahuje také <code>rel="prev"</code> a <code>rel="next"</code>, stejně jako <abbr>HTML</abbr> 4, a podporuje <code>rel="previous"</code> pro zpětnou kompatibilitu, stejně jako <code>rel="last"</code> (poslední v posloupnosti, opak <code>rel="first"</code>) a <code>rel="up"</code>.
<p>O <code>rel="up"</code> je nejlepší uvažovat jako o drobečkové navigaci (nebo si to alespoň představovat). Vaše domácí stránka je pravděpodobně první stránkou mezi drobečky a aktuální stránka je na jejich konci. <code>rel="up"</code> ukazuje na předposlední stránku v drobečcích.
<p><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#rel-icon>rel="icon"</a> je <a href=http://code.google.com/webstats/2005-12/linkrels.html>druhým nejpopulárnějším vztahem odkazů</a> po <code>rel="stylesheet"</code>. Obvykle je k vidění společně s <code>shortcut</code>, asi takhle:
<pre><code><link rel="shortcut icon" href="/favicon.ico"></code></pre>
<p>Všechny hlavní prohlížeče podporují tohle použití přiřazující malou ikonu ke stránce. Je obvykle zobrazena v adresním řádku prohlížeče vedle URL, v panelu prohlížeče, případně v obou.
<p>V <abbr>HTML5</abbr> máme novinku: atributem <code>sizes</code> lze ve spojení se vztahem <code>icon</code> <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#rel-icon>oznámit velikost odkazované ikony</a>.
<p><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#link-type-license>rel="license"</a> byl <a href=http://microformats.org/wiki/rel-license>vymyšlen komunitou kolem mikroformátů</a>. „Naznačuje, že odkazovaný dokument obsahuje licenci, pod níž je dotyčná stránka poskytována.“
<p><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#link-type-nofollow>rel="nofollow"</a> „indikuje, že autor nebo vydavatel stránky tento odkaz nepodporuje, nebo že odkaz byl vložen především jako důsledek komerčního vztahu mezi osobami spojenými s oběma stránkami.“ Byl <a href=http://googleblog.blogspot.com/2005/01/preventing-comment-spam.html>vynalezen Googlem</a> a <a href=http://microformats.org/wiki/rel-nofollow>standardizován mikroformátovou komunitou</a>. <a href=http://www.wordpress.org>WordPress</a> přidává <code>rel="nofollow"</code> k odkazům vloženým komentujícími. Vychází z úvahy, že pokud odkazy s <code>nofollow</code> nemají vliv na PageRank, spammeři se přestanou snažit vkládat spamové komentáře do blogů. Nestalo se, ale <code>rel="nofollow"</code> zůstává.
<p><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#link-type-noreferrer>rel="noreferrer"</a> „označuje, že při následování odkazu by neměly být vyzrazeny žádné informace o odkazující stránce.“ V současnosti jej nepodporuje žádný dostupný prohlížeč, ale podpora <a href=http://webkit.org/blog/907/webkit-nightlies-support-html5-noreferrer-link-relation/>byla nedávno doplněna do nočních překladů WebKitu</a>, takže se časem objeví v Safari, Google Chrome a dalších klientech založených na WebKitu. [<a href=http://wearehugh.com/public/2009/04/rel-noreferrer.html>testovací stránka rel="noreferrer"</a>]
<p><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#link-type-pingback>rel="pingback"</a> určuje adresu „pingback“ serveru. Jak vysvětluje <a href=http://hixie.ch/specs/pingback/pingback-1.0>specifikace Pingback</a>, „Systém pingback představuje způsob jak automaticky informovat blog, když na něj odkáže jiný webový server. … Umožňuje zpětné odkazy – cestu, jak se vracet řetězcem odkazů, aniž by člověk musel všechny procházet.“ Blogovací systémy, zejména WordPress, implementují mechanismy pingback, aby upozorňovaly autory, že jste na ně odkázali ve svých nových příspěvcích do blogu.
<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="pes na křesle">
<p><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#link-type-prefetch>rel="prefetch"</a> „naznačuje, že předběžné stažení daného zdroje a jeho uložení do vyrovnávací paměti bude nejspíš výhodné, protože je velmi pravděpodobné, že uživatel bude zdroj potřebovat“. Vyhledávače někdy přidávají <code><link rel="prefetch" href="<i>URL nejlepšího výsledku hledání</i>"></code> do stránky s výsledky hledání, pokud mají pocit, že nejlepší nalezená stránka je mnohem populárnější, než ty ostatní. Například: pomocí Firefoxu <a href="http://www.google.com/search?q=cnn">si nechte Googlem vyhledat CNN</a>, podívejte se na zdrojový kód a hledejte slovo <code>prefetch</code>. Mozilla Firefox je jediný současný prohlížeč, který podporuje <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> „signalizuje, že odkazovaný dokument poskytuje rozhraní výlučně pro hledání v dokumentu a s ním spojených zdrojích“. Pokud chcete, aby <code>rel="search"</code> dělalo něco užitečného, mělo by ukazovat na <a href=http://www.opensearch.org/>OpenSearch</a> dokument, který popisuje, jak má prohlížeč sestavit URL k vyhledání určitého slova na aktuálním webu. OpenSearch (a <code>rel="search"</code> odkazy, které vedou na popisné dokumenty ve formátu OpenSearch) je podporován v Microsoft Internet Exploreru od verze 7 a v Mozilla Firefoxu od verze 2.
<p><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#link-type-sidebar>rel="sidebar"</a> „indikuje, že odkazovaný dokument, pokud bude stažen, má být zobrazen ve vedlejším prohlížecím kontextu (pokud je to možné) místo v aktuálním prohlížecím kontextu“. Co to znamená? V Opeře a Mozilla Firefoxu to znamená „pokud na odkaz klikne, vyzvi uživatele k vytvoření záložky, která, když bude vybrána z nabídky záložek, otevře odkazovanou stránku v postranní liště prohlížeče“. (Opera ji vlastně nazývá „panel“ místo „postranní lišta“.) Microsoft Explorer, Safari a Chrome <code>rel="sidebar"</code> ignorují a prostě zacházejí s odkazem úplně normálně. [<a href=http://wearehugh.com/public/2009/04/rel-sidebar.html>testovací stránka rel="sidebar"</a>]
<p><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#link-type-tag>rel="tag"</a> „naznačuje, že štítek reprezentovaný odkazovaným dokumentem platí pro aktuální dokument“. Označování štítky (klíčovými slovy pro kategorie) s atributem <code>rel</code> <a href=http://www.powazek.com/2005/07/000532.html>vymyslelo Technorati</a>, aby si usnadnilo kategorizaci blogových příspěvků. Rané blogy a návody je proto označují za „Technorati štítky“. (Čtete dobře: komerční firma přesvědčila celý svět, aby přidával metadata, která té firmě usnadnila práci. Skvělá práce, když něco takového dokážete!) Syntaxe byla později <a href=http://microformats.org/wiki/rel-tag>standardizována komunitou mikroformátů</a>, kde jí jednoduše říkali <code>rel="tag"</code>. Většina blogovacích systémů, které umožňují příspěvkům přiřazovat kategorie, klíčová slova nebo štítky, je označuje odkazy s <code>rel="tag"</code>. Prohlížeče s nimi nezacházejí nijak speciálně; byly vlastně navrženy, aby napověděly vyhledávacím strojům, čeho se daná stránka týká.
<p class=a>❧
<h2 id=new-elements>Nové sémantické prvky v HTML5</h2>
<p><abbr>HTML5</abbr> se neomezuje na zkracování existujícího kódu (i když v téhle oblasti dělá opravdu dost). Definuje také nové sémantické prvky.
<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>Prvek <code>section</code> představuje obecný úsek dokumentu nebo aplikace. Úsek v tomto kontextu znamená tématické seskupení obsahu, typicky s nadpisem. Za příklady úseků poslouží kapitoly, panely v dialogovém okně uspořádaném do panelů nebo číslované části diplomové práce. Domácí stránka webu může být rozdělena do úseků pro úvod, aktuality a kontaktní informace.
<dt><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-nav-element><code><nav></code></a>
<dd>Prvek <code>nav</code> reprezentuje část stránky, která odkazuje na další stránky, nebo na části aktuální stránky: část obsahující navigační odkazy. Ne všechny skupiny odkazů na stránce musí být uvnitř prvku <code>nav</code> – pouze části tvořící hlavní navigační bloky jsou vhodné pro prvek <code>nav</code>. Například je běžné umisťovat do zápatí stránek krátký seznam odkazů na společné stránky webu, jako jsou podmínky použití, domácí stránka nebo informace o autorských právech. Pro tyto případy stačí samotný prvek <code>footer</code>, bez prvku <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>Prvek <code>article</code> představuje část stránky, která tvoří samostatný celek v dokumentu, stránce, aplikaci nebo webu a která je určena k nezávislé distribuci či opakovanému požití, například k syndikaci. Může se jednat o příspěvek ve fóru, časopisecký nebo novinový článek, záznam v logu webu, uživatelský komentář, interaktivní widget nebo gadget či jakýkoli jiný prvek nebo obsah.
<dt><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-aside-element><code><aside></code></a>
<dd>Prvek <code>aside</code> představuje část stránky tvořenou materiálem, který se dotýká materiálu kolem prvku <code>aside</code>, ale který je považován za oddělený od tohoto obsahu. Tyto části jsou v tištěné typografii často reprezentovány jako postranní pruhy. Prvek lze použít pro typografické efekty, jako jsou citace vytažené z textu, komentáře na okraji, reklamy, skupiny prvků <code>nav</code> a pro další obsah, který je vnímán jako oddělený od vlastního obsahu stránky.
<dt><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-hgroup-element><code><hgroup></code></a>
<dd>Prvek <code>hgroup</code> reprezentuje nadpis části. Prvek se používá k seskupení několika prvků <code>h1</code>–<code>h6</code>, když má nadpis několik úrovní, jako jsou podnadpisy, alternativní titulky nebo slogan.
<dt><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element><code><header></code></a>
<dd>Prvek <code>header</code> představuje skupinu úvodních nebo navigačních prostředků. Smyslem prvku <code>header</code> je obvykle obsahovat nadpis úseku (prvek <code>h1</code>–<code>h6</code> nebo <code>hgroup</code>), ale není to povinné. Lze jej použít také k obalení obsahu úseku, vyhledávacího formuláře nebo souvisejícího loga.
<dt><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-footer-element><code><footer></code></a>
<dd>Prvek <code>footer</code> představuje patičku pro nejbližšího předka představujícího část stránky, nebo pro celou stránku. Patička typicky obsahuje informace o své sekci, jako autora, odkazy na související dokumenty, autorská práva a podobně. Patičky se nemusí nutně vyskytovat na konci části, ale obvykle to tak bývá. Pokud prvek <code>footer</code> obsahuje celé úseky, představuje přílohy, rejstříky, tiráž, kompletní licenční ujednání a podobný materiál.
<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>Prvek <code>time</code> znamená buď čas ve 24hodinovém formátu, nebo konkrétní datum podle gregoriánského kalendáře, případně doplněné o čas a časové pásmo.
<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>Prvek <code>mark</code> představuje část textu v dokumentu, označenou nebo zvýrazněnou ze účelem citace.
</dl>
<p>Vím, že se už nemůžete dočkat, až začnete tyhle nové prvky používat, jinak byste tuhle kapitolu nečetli. Ale nejdřív musíme absolvovat malou okliku.
<p class=a>❧
<h2 id=unknown-elements>Dlouhá odbočka o zacházení s neznámými prvky v prohlížečích</h2>
<p>Každý prohlížeč má základní seznam <abbr>HTML</abbr> prvků, které podporuje. Například Mozilla Firefox má svůj seznam uložen v <a href="http://mxr.mozilla.org/seamonkey/source/parser/htmlparser/src/nsElementTable.cpp">nsElementTable.cpp</a>. Prvky, jež v něm nejsou obsaženy, jsou zpracovány jako „neznámé prvky“. Vztahují se k nim dva základní problémy:
<ol>
<li><b>Jak by měl prvek vypadat?</b> <code><p></code> implicitně vynechává mezeru nad a pod sebou, <code><blockquote></code> má odsazený levý okraj a <code><h1></code> je zobrazen velkým písmem. Ale jaký implicitní vzhled se má použít pro neznámé prvky?
<li><b>Jak má vypadat DOM tohoto prvku?</b> <code>nsElementTable.cpp</code> v Mozille obsahuje informace o tom, co jednotlivé prvky mohou obsahovat. Vložíte-li tento kód <code><p><p></code>, druhý odstavcový prvek implicitně uzavře první, takže oba skončí jako sourozenci, nikoli jako rodič a dítě. Ale pokud napíšete <code><p><span></code>, <code>span</code> neukončí odstavec, protože Firefox ví, že <code><p></code> je blokový prvek, který může obsahovat řádkový prvek <code><span></code>. Proto <code><span></code> skončí v DOMu jako dítě <code><p></code>.
</ol>
<p>Různé prohlížeče zodpovídají tyto otázky odlišně. (Šokující, já vím.) Mezi hlavními prohlížeči odpovídá na obě otázky nejproblematičtěji Microsoft Explorer, ale každý prohlížeč potřebuje trochu pomoci.
<p>Odpověď na první otázku může být celkem jednoduchá: Nepřiřazujte neznámým prvkům žádný speciální vzhled. Prostě je nechte zdědit aktuální hodnoty CSS vlastností, kdekoli se na stránce vyskytnou, a nechte autora stránky určit celý vzhled pomocí CSS. Takhle to v zásadě funguje, ale je tu ukrytý malý háček, o kterém byste měli vědět.
<div class=pf>
<h4>Professor Značka říká</h4>
<div class=inner>
<blockquote>
<p>Všechny prohlížeče zobrazují neznámé prvky jako řádkové, tedy jako by pro ně CSS obsahovalo pravidlo <code>display: inline</code>.
</blockquote>
</div>
</div>
<p><abbr>HTML5</abbr> definuje několik nových prvků, které patří mezi blokové. To znamená, že mohou obsahovat jiné blokové prvky a prohlížeče dodržující <abbr>HTML5</abbr> je implicitně budou zobrazovat jako <code>display: block</code>. Pokud je chcete používat ve starších prohlížečích, musíte jim definovat styl zobrazení sami:
<pre><code>article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}</code></pre>
<p>(Tento kód pochází z <a href=http://html5doctor.com/html-5-reset-stylesheet/>předpisu pro reset <abbr>HTML5</abbr></a> od Riche Clarka, který dělá i řadu dalších věcí přesahujících záběr této kapitoly.)
<p>Ale počkejte, bude hůř! Internet Explorer před verzí 9 nepřiřazoval neznámým prvkům <em>žádný</em> vzhled. Například pokud jste vytvořili tento kód:
<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>Internet Explorer (až po verzi 8 včetně) nezpracoval <code><article></code> jako blokový prvek, ani kolem něj nevytvořil červený rámeček. Všechna stylová pravidla prostě ignoroval. <a href=http://msdn.microsoft.com/en-us/ie/ff468705.aspx#_HTML_Parsing>Internet Explorer 9 tento problém odstranil</a>.
<p>Druhým problémem je DOM, který prohlížeč vytvoří, když narazí na neznámé prvky. Opět jsou nejproblematičtější starší verze Internet Exploreru (před verzí 9, <a href=http://msdn.microsoft.com/en-us/ie/ff468705.aspx#_HTML_Parsing>která opravila i tenhle problém</a>). Pokud IE 8 nezná jméno prvku, vloží jej do DOMu <em>jako prázdný prvek bez dětí</em>. Všechny prvky, které byste očekávali jako děti neznámého prvku, budou ve skutečnosti vloženy jako jeho sourozenci.
<p>Následující kousek poctivého <abbr>ASCII</abbr> umění ilustruje rozdíl. Tento DOM předepisuje <abbr>HTML5</abbr>:
<pre>article
|
+--h1 (dítě article)
| |
| +--textový uzel "Welcome to Initech"
|
+--p (dítě article, sourozenec h1)
|
+--textový uzel "This is your "
|
+--span
| |
| +--textový uzel "first day"
|
+--textový uzel "."</pre>
<p>Ale Internet Explorer ve skutečnosti vytvoří tenhle DOM:
<pre>article (bezdětný)
h1 (sourozenec article)
|
+--textový uzel "Welcome to Initech"
p (sourozenec h1)
|
+--textový uzel "This is your "
|
+--span
| |
| +--textový uzel "first day"
|
+--textový uzel "."</pre>
<p>Tenhle problém se dá úžasně obejít. Když pomocí JavaScriptu <a href=http://xopus.com/devblog/2008/style-unknown-elements.html>vytvoříte fiktivní prvek <code><article></code></a> dříve než jej použijete na stránce, Internet Explorer pak prvek <code><article></code> magicky rozpozná a nechá vás definovat jeho vzhled pomocí CSS. Nemusíte ani vkládat fiktivní prvek do <abbr>DOM</abbr>u. Jen jediné (na stránku) vytvoření prvku stačí k tomu, aby se IE naučil definovat styl prvku, který nezná.
<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>Funguje to ve všech verzích Internet Exploreru až po IE 6! Můžeme tuto techniku rozšířit a vytvořit fiktivní kopie všech nových <abbr>HTML5</abbr> prvků najednou – opět nejsou vloženy do <abbr>DOM</abbr>u, takže je nikdy neuvidíte – a pak je jednoduše používat, aniž bychom se museli starat o prohlížeče nerozumějící <abbr>HTML5</abbr>.
<p>Remy Sharp udělal přesně tohle ve svém příhodně pojmenovaném <a href=http://remysharp.com/2009/01/07/html5-enabling-script/>skriptu zpřístupňujícím <abbr>HTML5</abbr></a>. Skript prošel více než tuctem revizí od doby, kdy jsem začal psát tuhle knížku, nicméně tohle je jeho základní idea:
<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>Kousky <code><!--[if lt IE 9]></code> a <code><![endif]--></code> představují <a href="http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx">podmíněné komentáře</a>. Internet Explorer je interpretuje jako příkaz <code>if</code>: „pokud je aktulním prohlížečem Internet Explorer verze nižší než 9, proveď tento blok.“ Všechny ostatní prohlížeče budou brát celý blok jako <abbr>HTML</abbr> komentář. Ve výsledku Internet Explorer (až po verzi 8 včetně) provede tento skript, zatímco ostatní prohlížeče jej budou zcela ignorovat. Díky tomu se stránka načte rychleji v prohlížečích, které tenhle hack nepotřebují.
<p>Vlastní JavaScriptový kód je celkem přímočarý. Proměnná <var>e</var> se stane polem řetězců <code>"abbr"</code>, <code>"article"</code>, <code>"aside"</code> a tak dál. Následně toto pole procházíme v cyklu a vytváříme každý z vyjmenovaných prvků voláním <code>document.createElement()</code>. Protože ignorujeme návratovou hodnotu, prvky se nikdy nevloží do <abbr>DOM</abbr>u. Ale stačí to k tomu, aby s nimi Internet Explorer začal zacházet způsobem, který chceme, když je později doopravdy použijeme na stránce.
<p>To „později“ je důležité. Skript musí být na začátku vaší stránky, nejlépe uvnitř prvku <code><head></code>, nikoli na konci. Díky tomu Internet Explorer skript provede <em>před</em> analýzou vašich značek a atributů. Kdybyste skript vložili na konec stránky, přišel by moc pozdě. Internet Explorer by už dezinterpretoval váš kód a vytvořil špatný <abbr>DOM</abbr>, nevrátil by se zpět a neupravil jej jen kvůli tomuhle skriptu.
<p>Remy Sharp skript „minifikoval“ a <a href=http://code.google.com/p/html5shiv/>umístil na Google Project Hosting</a>. (Pokud by vás to zajímalo, vlastní skript má otevřený zdrojový kód s licencí MIT, takže jej můžete použít v libovolném projektu.) Chcete-li, můžete skript dokonce vložit přímo a odkázat se na tuto hostovanou verzi, asi takhle:
<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>A teď můžeme začít používat nové sémantické prvky z <abbr>HTML5</abbr>.
<p class=a>❧
<h2 id=header-element>Nadpisy</h2>
<p class=ss style="width:205"><img src=i/openclipart.org_johnny_automatic_newsboy.png alt="kamelot prodávající noviny" width=205 height=335>
<p>Vraťme se k naší <a href=examples/blog-original.html>ukázkové stránce</a>. Konkrétně se teď podívejme jen na její nadpisy:
<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>Na kódu není nic špatného. Pokud se vám líbí, můžete si ho nechat. Je to validní <abbr>HTML5</abbr>. Ale <abbr>HTML5</abbr> přidává pár sémantických prvků pro nadpisy a úseky.
<p>Nejprve se zbavme <code><div id="header"></code>. Je to běžně používaný vzor, ale neznamená nic. Prvek <code>div</code> ani atribut <code>id</code> nemají definován žádný význam. (Uživatelští agenti si nesmí odvozovat žádné významy z hodnot atributu <code>id</code>.) Můžete jej změnit na <code><div id="shazbot"></code> a bude mít stejnou sémantickou hodnotu, tedy žádnou.
<p><abbr>HTML5</abbr> definuje pro tento účel prvek <code><header></code>. Specifikace <abbr>HTML5</abbr> obsahuje <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element>příklady rálného použití prvku <code><header></code></a>. Takhle by to vypadalo na <a href=examples/blog-original.html>naší ukázkové stránce</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>To je dobré. Říká každému, kdo se o to zajímá, že se jedná o nadpis. Ale co ten slogan? Další běžný vzor, který až do teď neměl standardní kód. Je těžké ho označit. Slogan je jako podnadpis, ale je připojen k primárnímu nadpisu. Jedná se vlastně o podnadpis, který nevytváří vlastní sekci.
<p>Hlavičkové prvky jako <code><h1></code> a <code><h2></code> dávají vaší stránce strukturu. Dohromady tvoří osnovu, kterou můžete použít k vizualizaci (nebo navigaci) své stránky. Obrazovkové čtečky využívají osnovu dokumentu, aby usnadnily nevidomým navigaci po vaší stránce. Existují <a href="http://gsnedders.html5.org/outliner/">online nástroje</a> a <a href=http://chrispederick.com/work/web-developer/>rozšíření prohlížečů</a>, které vám pomohou vizualizovat osnovu dokumentu.
<p>V <abbr>HTML</abbr> 4 představovaly prvky <code><h1></code>–<code><h6></code> <em>jediný</em> způsob, jak vytvořit osnovu dokumentu. Osnova ukázkové stránky vypadá asi takto:
<pre>My Weblog (h1)
|
+--Travel day (h2)
|
+--I'm going to Prague! (h2)</pre>
<p>To je fajn, ale znamená to, že nemáme jak označit slogan. „A lot of effort went into making this effortless.“ Pokud bychom jej zkusili označit jako <code><h2></code>, přidal by uzel navíc do osnovy:
<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>Ale to neodpovídá struktuře dokumentu. Slogan nepředstavuje úsek textu, je to jen podnadpis.
<p>Možná bychom mohli označit slogan jako <code><h2></code> a nadpisy všech článků jako <code><h3></code>? Ne, to je ještě horší:
<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>Pořád máme v osnově jeden uzel navíc, navíc však „ukradl“ děti, které právoplatně patří kořenovému uzlu. Problém se nachází zde: <abbr>HTML</abbr> 4 nenabízí žádný způsob, jak označit slogan aniž by byl přidán do osnovy dokumentu. Ať zkoušíme věci uspořádat jak chceme, „A lot of effort went into making this effortless“ skončí v grafu. A proto skončíme u sémanticky bezvýznamného kódu typu <code><p class="tagline"></code>.
<p><abbr>HTML5</abbr> nabízí řešení: prvek <code><hgroup></code>. Funguje jako obal dvou nebo více <em>souvisejících</em> prvků s nadpisy. Co znamená „souvisejících“? To znamená, že dohromady tvoří jen jeden uzel v osnově dokumentu.
<p>Vezměme tenhle kód:
<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>Vytvoří následující osnovu dokumentu:
<pre>My Weblog (h1 z příslušné hgroup)
|
+--Travel day (h2)
|
+--I'm going to Prague! (h2)</pre>
<p>Můžete si otestovat své stránky v <a href="http://gsnedders.html5.org/outliner/"><abbr>HTML5</abbr> Outlineru</a>, abyste si ověřili, že používáte nadpisové prvky správně.
<p class=a>❧
<h2 id=article-element>Články</h2>
<p>Pokračujeme s <a href=examples/blog-original.html>naší ukázkovou stránkou</a> a podíváme se, co se dá udělat s kódem:
<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>Opět se jedná o validní <abbr>HTML5</abbr>. Ale <abbr>HTML5</abbr> nabízí konkrétnější prvek pro běžný případ vyznačení článku na stránce – vhodně pojmenovaný prvek <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>Oh, ale není to až tak jednoduché. Měl bych udělat ještě jednu změnu. Nejdříve vám ji předvedu a potom vysvětlím:
<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>Všimli jste si? Změnil jsem prvek <code><h2></code> na <code><h1></code> a zabalil jej do prvku <code><header></code>. Použití <code><header></code> už jste viděli. Jeho účelem je obalit všechny prvky tvořící nadpis článku (v tomto případě jeho datum vydání a titulek). Ale…ale…ale… neměl by být v každém dokumentu jen jeden <code><h1></code>? Nerozbije to osnovu dokumentu? Ne, ale abychom pochopili proč, musíme se trochu vrátit.
<p>V <abbr>HTML</abbr> 4 byly <em>jedinou</em> cestou k vytvoření osnovy dokumentu prvky <code><h1></code>–<code><h6></code>. Pokud jste chtěli mít v osnově jediný kořen, museli jste se v kódu omezit na jediný <code><h1></code>. Ale specifikace <abbr>HTML5</abbr> <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#headings-and-sections>definuje algoritmus pro vytvoření osnovy dokumentu</a>, který zahrnuje i nové sémantické prvky jazyka. Algoritmus <abbr>HTML5</abbr> říká, že prvek <code><article></code> vytváří novou sekci, která je novým uzlem v osnově dokumentu. A každá sekce může mít v <abbr>HTML5</abbr> svůj vlastní prvek <code><h1></code>.
<p>Jedná se o drastickou změnu proti <abbr>HTML</abbr> 4 a hned si řekneme, proč je k lepšímu. Mnohé webové stránky jsou generovány podle šablon. Z jednoho zdroje se vezme špetka obsahu o vloží sem do stránky, z jiného zdroje se vezme další trocha obsahu a vloží do stránky támhle. I mnohé návody jsou strukturovány stejně. „Tady máte nějaký <abbr>HTML</abbr> kód. Prostě jej zkopírujte do své stránky.“ To je v pořádku pro malé části obsahu, ale co když vkládaný kód tvoří celý úsek? V tom případě návod obvykle obsahuje něco jako „Tady máte nějaký <abbr>HTML</abbr> kód. Zkopírujte jej, vložte do textového editoru a opravte značky nadpisů tak, aby odpovídaly příslušné úrovni vnoření nadpisů na stránce, do níž kód vkládáte.“
<p>Dovolte mi říci to jinak. <abbr>HTML</abbr> 4 nemá žádný <em>obecný</em> prvek pro nadpisy. Má šest přesně číslovaných nadpisových prvků, <code><h1></code>–<code><h6></code>, které musí být vnořeny přesně v uvedeném pořadí. To je průšvih, zejména když je vaše stránka „složena“, nikoli „napsána“. A tento problém řeší <abbr>HTML5</abbr> novými prvky pro členění obsahu a novými pravidly pro stávající nadpisové prvky. Pokud používáte nové prvky pro členění, mohu vám nabídnout tento kód:
<pre><code><article>
<header>
<h1>A syndicated post</h1>
</header>
<p>Lorem ipsum blah blah…</p>
</article></code></pre>
<p>a vy jej můžete zkopírovat a vložit beze změny <em>kamkoli do své stránky</em>. Skutečnost, že obsahuje prvek <code><h1></code>, ničemu nevadí, protože je celý obsažen uvnitř <code><article></code>. Prvek <code><article></code> definuje samostatný uzel v osnově dokumentu, prvek <code><h1></code> poskytuje titulek pro tento uzel a všechny ostatní prvky pro členění dokumentu na stránce zůstanou na stejné úrovni vnoření, na které byly předtím.
<div class=pf>
<h4>Professor Značka říká</h4>
<div class=inner>
<blockquote><p>Jako u všeho na webu je realita trochu složitější, než předstírám. Nové „explicitní“ prvky pro členění dokumentu (jako <code><h1></code> zabalené do <code><article></code>) mohou nečekanými způsoby reagovat se starými „implicitními“ prvky pro členění dokumentu (samotné <code><h1></code>–<code><h6></code>). Váš život bude jednodušší, pokud budete používat jedny nebo druhé, ale nikoli oboje zároveň. Pokud musíte na jedné stránce použít oboje, zkontrolujte si výsledek na <a href=http://gsnedders.html5.org/outliner/>the <abbr>HTML5</abbr> Outlineru</a> a ověřte si, že osnova vašeho dokumentu dává smysl.
</blockquote>
</div>
</div>
<p class=a>❧
<h2 id=time-element>Datum a čas</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="věž s hodinami">
<p>Je to vzrušující, co? Podle mě není vzrušující sjet nahý na lyžích Mount Everest a recitovat při tom americkou hymnu, ale je pořádně vzrušující, jak daleko se dá dotáhnout sémantický kód. Pojďme pokračovat s naší <a href=examples/blog-original.html>ukázkovou stránkou</a>. Další řádek, na který se zaměřím, je tenhle:
<pre><code><div class="entry">
<mark><p class="post-date">October 22, 2009</p></mark>
<h2>Travel day</h2>
</div></code></pre>
<p>Ten samý starý příběh, ne? Běžně používaný vzor – vyznačení data vydání článku –, který není podepřen žádnými sémantickými značkami, takže se autoři uchylují k obecným značkám s vlastními atributy <code>class</code>. Opět se jedná o validní <abbr>HTML5</abbr>. Nikdo po vás <em>nepožaduje</em> jeho změnu. Ale <abbr>HTML5</abbr> poskytuje řešení přímo na míru tomuto případu: prvek <code><time></code>.
<pre><code><time datetime="2009-10-22" pubdate>October 22, 2009</time></code></pre>
<p>Prvek <code><time></code> obsahuje tři části:
<ol>
<li>Strojově čitelnou časovou značku
<li>Textový obsah čitelný pro člověka
<li>Volitelný příznak <code>pubdate</code>
</ol>
<p>V tomto příkladu atribut <code>datetime</code> určuje pouze datum, nikoli čas. Jeho formátem je čtyřciferný rok, dvojciferný měsíc a dvojciferný den, vzájemně oddělené pomlčkami:
<pre><code><time <mark>datetime="2009-10-22"</mark> pubdate>October 22, 2009</time></code></pre>
<p>Pokud chcete zahrnout i čas, přidejte za datum písmeno <code>T</code>, za něj čas ve 24hodinovém formátu a za něj časové pásmo (posun času).
<pre><code><time datetime="<mark>2009-10-22T13:59:47-04:00</mark>" pubdate>
October 22, 2009 1:59pm EDT
</time></code></pre>
<p>(Formát data a času je dost pružný. Specifikace <abbr>HTML5</abbr> <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#valid-global-date-and-time-string>obsahuje příklady validních řetězců pro data a časy</a>.)
<p>Všimněte si, že jsem změnil textový obsah mezi <code><time></code> a <code></time></code>, aby odpovídal strojově čitelné značce. Ve skutečnosti to není povinné. Text může obsahovat cokoli chcete, dokud poskytnete strojově čitelnou značku v atributu <code>datetime</code>. Takže toto je validní <abbr>HTML5</abbr>:
<pre><code><time datetime="2009-10-22"><mark>minulý čtvrtek</mark></time></code></pre>
<p>I tohle je validní <abbr>HTML5</abbr>:
<pre><code><time datetime="2009-10-22"></time></code></pre>
<p>Posledním kouskem skládačky je atribut <code>pubdate</code>. Je to booleovský atribut, takže jej stačí jednoduše přidat, když jej potřebujete. Asi takto:
<pre><code><time datetime="2009-10-22" <mark>pubdate</mark>>October 22, 2009</time></code></pre>
<p>Nemáte-li rádí „holé“ atributy, tento zápis je ekvivalentní:
<pre><code><time datetime="2009-10-22" <mark>pubdate="pubdate"</mark>>October 22, 2009</time></code></pre>
<p>Co atribut <code>pubdate</code> znamená? Jednu ze dvou věcí. Pokud se prvek <code><time></code> vyskytuje uvnitř prvku <code><article></code>, znamená, že tato časová značka představuje datum vydání článku. Pokud se prvek <code><time></code> nachází mimo <code><article></code>, znamená, že časová značka je datem vydání celého dokumentu.
<p>Tady máme celý článek, upravený tak, aby využíval všechny výhody <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>Navigace</h2>
<p class=ss><img src=i/openclipart.org_johnny_automatic_a_pink.png alt="muž řídící plachetnici na vodě" width=345 height=377>
<p>Jednou z nejdůležitějších částí každého webu je navigační lišta. CNN.com má na každé stránce nahoře „záložky“, které odkazují na různé zpravodajské sekce – „Technika“, „Zdraví“, „Sport“ atd. Stránka s výsledky hledání na Google obsahuje nahoře podobný proužek, který vám umožňuje vyhledávat v různých službách Google – „Obrázky“, „Videa“, „Mapy“ atd. A <a href=examples/blog-original.html>naše ukázková stránka</a> má v záhlaví navigační lištu, která obsahuje odkazy na různé části hypotetického webu – „domů“, „blog“, „galerie“ a „o nás“.
<p>Kód této navigační lišty původně vypadal takto:
<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>Zase se jedná o validní <abbr>HTML5</abbr>. Ale i když ji kód definuje jako seznam se čtyřmi položkami, nic v tomto seznamu neříká, že se jedná o součást navigace webu. Vizuálně to můžete odhadnout podle umístění v záhlaví stránky a podle textu odkazů. Ale sémanticky neexistuje nic, co by tento seznam odkazů odlišilo od jakéhokoli jiného.
<p>Koho zajímá sémantika navigace webu? Za prvé <a href=http://diveintoaccessibility.org/>handicapované uživatele</a>. Proč? Zvažte tento scénář: máte omezenou pohyblivost a je pro vás obtížné nebo nemožné používat myš. Abyste ji nahradili, můžete nasadit rozšíření prohlížeče, které vám umožní přeskočit na hlavní navigační odkazy. Nebo uvažte tohle: pokud špatně vidíte, mohli byste používat specializovaný program zvaný „čtečka obrazovky“, který převádí text na mluvené slovo a předčítá webové stránky. Jakmile se dostanete přes nadpis stránky, další zajímavou informací jsou hlavní navigační odkazy. Pokud spěcháte s navigací, nařídíte čtečce obrazovky, aby skočila na hlavní navigační pruh a začala číst. Když chcete co nejdříve procházet obsah, můžete čtečce poručit, aby <em>přeskočila</em> hlavní navigaci a začala číst hlavní text. Ať tak či tak, schopnost programově rozpoznat navigační odkazy je důležitá.
<p>I když na používání <code><div id="nav"></code> k vyznačení navigace není nic špatného, není na tom ani nic mimořádně pěkného. Je to neoptimální z hlediska dopadů na skutečné lidi. <abbr>HTML5</abbr> nabízí sémantický způsob, jak vyznačit navigační části: prvek <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>Zeptejte se profesora Značky</h4>
<div class=inner>
<blockquote class=note>
<p><span>☞</span>OT: Jsou <a href=http://www.webaim.org/techniques/skipnav/>přeskakující odkazy</a> kompatibilní s prvkem <code><nav></code>? Budu v <abbr>HTML5</abbr> ještě potřebovat přeskakování odkazů?
<p>OT: Přeskakující odkazy umožňují čtečkám přeskočit navigační části. Jsou užitečné pro handicapované uživatele, kteří používají software pro hlasové čtení stránek a navigují bez myši. (<a href=http://www.webaim.org/techniques/skipnav/>Naučte se poskytovat přeskakující odkazy</a>.)
<p>Jakmile budou čtečky aktualizovány a naučí se rozpoznávat prvek <code><nav></code>, přeskakující odkazy zastarají, protože čtecí program bude schopen automaticky nabídnout přeskočení navigační sekce označené prvkem <code><nav></code>. Nicméně nějakou dobu potrvá než všichni handicapovaní uživatelé webu přejdou na čtecí programy podporující <abbr>HTML5</abbr>, takže byste zatím měli poskytovat vlastní odkazy pro přeskočení <code><nav></code> sekcí.
</blockquote>
</div>
</div>
<p class=a>❧
<h2 id=footer-element>Patičky</h2>
<p>Konečně jsme dorazili na závěr naší <a href=examples/blog-original.html>ukázkové stránky</a>. Poslední věc, o které chci mluvit, je poslední věc na stránce: patička. Její kód původně vypadal takhle:
<pre><code><div id="footer">
<p>&#167;</p>
<p>&#169; 2001&#8211;9 <a href="#">Mark Pilgrim</a></p>
</div></code></pre>
<p>Je to <abbr>HTML5</abbr>. Pokud se vám líbí, můžete si jej nechat. Ale <abbr>HTML5</abbr> poskytuje specifičtější prvek pro tento účel: prvek <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>Co je vhodné zařadit do prvku <code><footer></code>? Pravděpodobně vše, co dnes vkládáte do <code><div id="footer"></code>. Dobře, je to definice kruhem. Ale právě takhle se věci mají. Specifikace <abbr>HTML5</abbr> říká: „Patička typicky obsahuje informace o daném úseku, jako kdo jej napsal, odkazy na související dokumenty, autorská práva a podobně.“ Na naší ukázkové stránce tam máme krátké vyjádření autorských práv a odkaz na stránku o autorovi. Když se rozhlédnu po pár populárních webech, vidím značný potenciál patiček.
<ul>
<li><a href=http://www.cnn.com/>CNN</a> má patičku obsahující autorská práva, odkazy na překlady a odkazy na podmínky použití, ochranu soukromí, „o nás“, „kontaktujte nás“ a stránky s „nápovědou“. Vše zcela vhodný materiál pro <code><footer></code>.
<li><a href=http://www.google.com/>Google</a> se proslavil úspornou domácí stránkou, ale v její spodní části jsou odkazy „Inzerujte s Googlem“, „Řešení pro podnikatele“ a „Vše o Googlu“, autorská práva a odkaz na pravidla ochrany soukromí. To vše by mohlo být zabaleno do <code><footer></code>.
<li><a href=http://diveintomark.org/>Můj weblog</a> má patičku s odkazy na mé ostatní weby a informacemi o autorských právech. Rozhodně vhodné pro <code><footer></code>. (Všimněte si, že vlastní odkazy by <em>neměly</em> být zabaleny do <code><nav></code>, protože se nejedná o navigaci v rámci webu; je to jen sada odkazů na mé další projekty a jiné weby.)
</ul>
<p>V současnosti se všichni zbláznili do „<a href=http://ui-patterns.com/pattern/FatFooter>tučných patiček</a>“. Podívejte se na patičku <a href=http://www.w3.org/>webu <abbr>W3C</abbr></a>. Obsahuje tři sloupce, nadepsané „Navigace“, „Kontaktujte W3C“ a „W3C aktuality“. Její kód vypadá víceméně takto:
<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>Udělal bych následující změny, abych jej převedl do sémantického <abbr>HTML5</abbr>:
<ul>
<li>Převedl bych obalující <code><div id="w3c_footer"></code> na prvek <code><footer></code>.
<li>Převedl bych první dva výskyty <code><div class="w3c_footer-nav"></code> na prvky <code><nav></code> a třetí výskyt na prvek <code><section></code>.
<li>Převedl bych nadpisy <code><h3></code> na <code><h1></code>, protože se nyní všechny nacházejí uvnitř prvků pro členění dokumentu. Prvek <code><nav></code> vytváří sekci v osnově dokumentu, stejně jako <a href=#article-element>prvek <code><article></code></a>.
</ul>
<p>Výsledný kód by mohl vypadat nějak takhle:
<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>Doplňkové čtivo</h2>
<p>Ukázkové stránky používané v této kapitole:
<ul>
<li><a href=examples/blog-original.html>Původní (<abbr>HTML</abbr> 4)</a>
<li><a href=examples/blog-html5.html>Upravená (<abbr>HTML5</abbr>)</a>
</ul>
<p>O kódování znaků:
<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>, napsal <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>, a <a href="http://www.tbray.org/ongoing/When/200x/2003/04/26/UTF">Characters vs. Bytes</a>, napsal <cite>Tim Bray</cite>
</ul>
<p>O zpřístupnění nového <abbr>HTML5</abbr> v Internet Exploreru:
<ul>
<li><a href=http://xopus.com/devblog/2008/style-unknown-elements.html>How to style unknown elements in IE</a>, napsal <cite>Sjoerd Visscher</cite>
<li><a href=http://ejohn.org/blog/html5-shiv/><abbr>HTML5</abbr> shiv</a>, napsal <cite>John Resig</cite>
<li><a href=http://remysharp.com/2009/01/07/html5-enabling-script/><abbr>HTML5</abbr> enabling script</a>, napsal <cite>Remy Sharp</cite>
</ul>
<p>O standardních režimech a zkoumání typu dokumentu:
<ul>
<li><a href=http://hsivonen.iki.fi/doctype/>Activating Browser Modes with Doctype</a>, napsal <cite>Henri Sivonen</cite>. Jediný článek, který byste si na toto téma měli přečíst. Jakýkoli článek o typech dokumentů, který se neodkazuje na Henriho práci, je zaručeně zastaralý, neúplný nebo špatný.
</ul>
<p>Validátor znalý <abbr>HTML5</abbr>:
<ul>
<li><a href=http://html5.validator.nu/>html5.validator.nu</a>
</ul>
<p class=a>❧
<p>Dočetli jste kapitolu „Co to všechno znamená?“ Pokud chcete pokračovat, přejděte na <a href=table-of-contents.html>celý obsah knihy</a>.
<div class=pf>
<h4>Víte že?</h4>
<div class=moneybags>
<blockquote><p>O’Reilly spolu s Google Press nabízí anglickou verzi této knihy v řadě formátů včetně tištěné pdoby, ePub, Mobi a <abbr>DRM</abbr>-free <abbr>PDF</abbr>. Placená verze se nazývá „HTML5: Up & Running,“ a můžete ji mít ihned. Obsahuje i tuto kapitolu.
<p>Pokud se vám tahle kapitola líbila a chcete autora anglického originálu podpořit, <a href="http://www.amazon.com/HTML5-Up-Running-Mark-Pilgrim/dp/0596806027?ie=UTF8&tag=diveintomark-20&creativeASIN=0596806027">kupte si „HTML5: Up & Running“ skrze tento spřátelený odkaz</a> nebo <a href=http://oreilly.com/catalog/9780596806033>elektronickou verzi přímo od O’Reilly</a>. Vy dostanete knihu, já peníze. V současnosti nepřijímám přímé dary.
</blockquote>
</div>
</div>
<p class=c>Copyright MMIX–MMXI <a href=about.html>Mark Pilgrim</a>, Czech translation <a href="http://www.nti.tul.cz/~satrapa/">Pavel Satrapa</a>
<form action=http://www.google.com/cse><div><input type=hidden name=cx value=013556084273090989037:f1s-wnbz68q><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=Hledat></div></form>
<script src=j/jquery.js></script>
<script src=j/dih5.js></script>
<script type="text/javascript"><!--
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-25728182-1']);
_gaq.push(['_setDomainName', '.html5.cz']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
// --></script>