forked from oreillymedia/HTMLBook
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1128 lines (1126 loc) · 55.7 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<title>HTMLBook</title>
<meta charset="utf-8">
<script src="//www.w3.org/Tools/respec/respec-w3c-common" async class="remove"></script>
<script class="remove">
var respecConfig = {
additionalCopyrightHolders: "Copyright © 2014 O’Reilly Media, Inc.",
specStatus: "unofficial",
shortName: "htmlbook",
editors: [
{ name: "Sanders Kleinfeld",
url: "http://oreilly.com",
company: "O’Reilly Media, Inc",
companyURL: "http://oreilly.com" }
],
localBiblio: {
"DITA": {
title: "Darwin Information Typing Architecture (DITA) Version 1.2",
href: "http://docs.oasis-open.org/dita/v1.2/spec/DITA1.2-spec.html",
authors: ["Kristen James Eberlein", "Robert D. Anderson", "Gershon Joseph"]
},
"DOCBOOK": {
title: "The DocBook Document Type",
href: "http://www.docbook.org/specs/docbook-4.5-spec.html",
authors: ["Norman Walsh"],
publisher: "OASIS",
},
"EPUB3": {
title: "EPUB 3 Overview",
href: "http://www.idpf.org/epub/30/spec/",
publisher: "IDPF"
},
"EPUB3SSV" : {
title: "EPUB 3 Structural Semantics Vocabulary",
href: "http://www.idpf.org/epub/vocab/structure/",
publisher: "IDPF",
},
"EPUBINDEX": {
title: "EPUB Indexes 1.0",
href: "http://www.idpf.org/epub/idx/",
publisher: "IDPF"
}
}
};
</script>
<style type="text/css">
span[data-type=footnote] {
background-color: #d3d3d3;
border: solid 1px black;
border-radius: 0.25em;
padding-left: 3px;
padding-right: 3px;
padding-top: 1px;
padding-bottom: 1px;
font-size: smaller;
}
</style>
</head>
<body>
<section id="abstract">
<p>Let’s write books in HTML! HTMLBook is an open, XHTML5-based standard for the authoring and production of both print and digital books. HTMLBook is built on the following premises:</p>
<ul>
<li>Books are timeless. The basic “book” structure has persisted for hundreds of years and will continue to persist for our lifetimes, be it in digital or print form.</li>
<li>HTML is the markup language of the world for the foreseeable future.</li>
<li>Single-source document processing will remain valuable for the foreseeable future.</li>
</ul>
<p>As such, HTMLBook can be characterized in the following ways:</p>
<ul>
<li>HTMLBook is a subset of XHTML5. All HTMLBook is XHTML5, but not all XHTML5 is HTMLBook.</li>
<li>HTMLBook contains no additional elements or attributes outside of the XHTML5 specification.</li>
<li>HTMLBook is semantically tailored to the structure of a book, including more complex content used in technical and reference documents.</li>
<li>HTMLBook is defined with and can be validated against an XML schema.</li>
<li>HTMLBook stylesheets are written in CSS.</li>
</ul>
</section>
<section id="sotd">
</section>
<section>
<h2>Notes on the HTMLBook Specification</h2>
<p>Requirements for HTML5 elements in the HTMLBook specification are below. Special semantic inflections for <code>data-type</code> attributes, unless otherwise noted, come from <a href="http://idpf.org/epub/vocab/structure/">EPUB 3 Structural Semantics Vocabulary</a></p>
<p>Many content models refer to “Block Elements” or “Inline Elements”; please see <a href="#block_elements">Block Elements</a> and <a href="#inline_elements">Inline Elements</a> for the corresponding list of HTML5 elements that belong to each of these categories.</p>
<p>If no content model or attribute requirements are explicitly specified, then HTMLBook adopts the corresponding requirements in the [[!HTML5]] Specification</p>
</section>
<section>
<h2>Revision History and Notes</h2>
<dl>
<dt>16 September 2015</dt>
<dd>Added informative section on reference entries</dd>
<dt>25 February 2015</dt>
<dd>Clarified HTMLBook specifications for inline semantics/tagging</dd>
<dt>8 April 2014</dt>
<dd>Updated specifications for section subtitles to comply with best practices set forth in <a href="http://www.w3.org/TR/html5/common-idioms.html#common-idioms">“Common idioms without dedicated elements”</a> in [[!HTML5]] Specification.</dd>
<dt>29 December 2013</dt>
<dd>Minor revisions for clarity</dd>
<dt>13 August 2013</dt>
<dd>Revised specification for footnote markup</dd>
<dt>3 July 2013</dt>
<dd>Changed spec to use the attribute <code>data-type</code> for specifying book-specific semantics instead of <code>class</code>. The <code>class</code> attribute is
now free to be used for whatever user-defined semantics are desired, and there are no restrictions on <code>class</code> values. Users of the spec may want to replicate <code>data-type</code> values in the <code>class</code> attribute to facilitate CSS styling, but this is completely optional.</dd>
<dt>19 April 2013</dt>
<dd>First release of Working Draft</dd>
</dl>
</section>
<section data-type="sect1" id="_book_component_elements">
<h1>Book Component elements</h1>
<section data-type="sect2" id="_book">
<h2>Book</h2>
<p><strong>HTML element</strong>: <code><body></code></p>
<p><strong>Attribute requirements</strong>: <code>data-type="book"</code> <span data-type="footnote">(Not in [[EPUB3SSV]]; from [[DOCBOOK]])</span></p>
<p><strong>Content model</strong>: Optional <code><h1></code> that contains book title, or <a href="#header_block">Header block</a> that contains book title and optional subtitle content; then one or more <a href="#_book_component_elements">Book Component</a> elements as children (<code><div></code> for <a href="#_part">Part</a> elements, <code><nav></code> for <a href="#_table_of_contents">Table of Contents</a>, and <code><section></code> elements for all other book divisions)</p>
<p>
<strong>Example</strong>
</p>
<pre data-type="programlisting" data-code-language="html"><body data-type="book">
<h1>jQuery Cookbook</h1>
<section data-type="chapter">
<!-- Chapter content here -->
</section>
</body></pre>
<p><strong>Note</strong>: Just as in standard HTML5, <code><body></code> is a child of the root <code><html></code> element.</p>
</section>
<section data-type="sect2" id="_chapter">
<h2>Chapter</h2>
<p><strong>HTML element</strong>: <code><section></code></p>
<p><strong>Attribute requirements</strong>: <code>data-type="chapter"</code></p>
<p><strong>Content model</strong>: First child must be either <code><h1></code> that contains chapter title, or <a href="#header_block">Header block</a> that contains chapter title and optional subtitle content; then zero or more <a href="#block_elements">Block Elements</a>; then zero or more <a href="#_sections">Sect1</a> children (<code><section data-type="sect1"></code>)</p>
<p>
<strong>Example</strong>
</p>
<pre data-type="programlisting"><section data-type="chapter">
<!-- h1 used for all chapter titles -->
<h1>Chapter Title</h1>
<p>Chapter content</p>
<section data-type="sect1">
<!-- Section content here... -->
</section>
</section></pre>
</section>
<section data-type="sect2" id="_appendix">
<h2>Appendix</h2>
<p><strong>HTML element</strong>: <code><section></code></p>
<p><strong>Attribute requirements</strong>: <code>data-type="appendix"</code> or <code>data-type="afterword"</code>, depending on content</p>
<p><strong>Content model</strong>: First child must be either <code><h1></code> that contains appendix title, or <a href="#header_block">Header block</a> that contains appendix title and optional subtitle content; then zero or more <a href="#block_elements">Block Elements</a>; then zero or more <a href="#_sections">Sect1</a> children (<code><section data-type="sect1"></code>)</p>
<p>
<strong>Example</strong>
</p>
<pre data-type="programlisting"><section data-type="appendix">
<h1>Appendix Title</h1>
<p>Appendix content</p>
<section data-type="sect1">
<!-- Section content here... -->
</section>
</section></pre>
</section>
<section data-type="sect2" id="_bibliography">
<h2>Bibliography</h2>
<p><strong>HTML element</strong>: <code><section></code></p>
<p><strong>Attribute requirements</strong>: <code>data-type="bibliography"</code></p>
<p><strong>Content model</strong>: First child must be either <code><h1></code> that contains bibliography title, or <a href="#header_block">Header block</a> that contains bibliography title and optional subtitle content; then zero or more <a href="#block_elements">Block Elements</a>; then zero or more <a href="#_sections">Sect1</a> children (<code><section data-type="sect1"></code>)</p>
<p>
<strong>Example</strong>
</p>
<pre data-type="programlisting"><section data-type="bibliography">
<h1>Bibliography Title</h1>
<p>Bibliography content</p>
<section data-type="sect1">
<!-- Section content here... -->
</section>
</section></pre>
</section>
<section data-type="sect2" id="glossary">
<h2>Glossary</h2>
<p><strong>HTML element</strong>: <code><section></code></p>
<p><strong>Attribute requirements</strong>: <code>data-type="glossary"</code></p>
<p><strong>Content model</strong>: First child must be either <code><h1></code> that contains glossary title, or <a href="#header_block">Header block</a> that contains glossary title and optional subtitle content; then zero or more <a href="#block_elements">Block Elements</a>; then zero or more <a href="#_sections">Sect1</a> children (<code><section data-type="sect1"></code>)</p>
<p><strong>Best practices</strong>: List of glossary terms should be marked up using <code><dl></code> elements with a <code>data-type</code> of <code>"glossary"</code>, with <code><dt></code> children with a <code>data-type</code> of <code>"glossterm"</code> and <code><dd></code> children with a <code>data-type</code> of <code>"glossdef"</code>. Term text should be wrapped in a <code><dfn></code>. However, none of this is formally required by the spec.</p>
<p>
<strong>Example</strong>
</p>
<pre data-type="programlisting"><section data-type="glossary">
<h1>Glossary Title</h1>
<dl data-type="glossary">
<dt data-type="glossterm">
<dfn>jQuery</dfn>
</dt>
<dd data-type="glossdef">
Widely used JavaScript library
</dd>
</dl>
</section></pre>
</section>
<section data-type="sect2" id="_preface">
<h2>Preface</h2>
<p><strong>HTML element</strong>: <code><section></code></p>
<p><strong>Attribute requirements</strong>: <code>data-type="preface"</code>, <code>data-type="foreword"</code>, or <code>data-type="introduction"</code>, depending on content</p>
<p><strong>Content model</strong>: First child must be either <code><h1></code> that contains preface title, or <a href="#header_block">Header block</a> that contains preface title and optional subtitle content; then zero or more <a href="#block_elements">Block Elements</a>; then zero or more <a href="#_sections">Sect1</a> children (<code><section data-type="sect1"></code>)</p>
<p>
<strong>Example</strong>
</p>
<pre data-type="programlisting"><section data-type="preface">
<h1>Preface Title</h1>
<p>Preface content</p>
<section data-type="sect1">
<!-- Section content here... -->
</section>
</section></pre>
</section>
<section data-type="sect2" id="_frontmatter">
<h2>Frontmatter</h2>
<p><strong>HTML element</strong>: <code><section></code></p>
<p><strong>Attribute requirements</strong>: <code>data-type="halftitlepage"</code>, <code>data-type="titlepage"</code>, <code>data-type="copyright-page"</code>, or <code>data-type="dedication"</code>, depending on content</p>
<p><strong>Content model</strong>: First child must be either <code><h1></code> that contains frontmatter section title, or <a href="#header_block">Header block</a> that contains frontmatter title and optional subtitle content; then zero or more <a href="#block_elements">Block Elements</a>; then zero or more <a href="#_sections">Sect1</a> children (<code><section data-type="sect1"></code>)</p>
<p>
<strong>Example</strong>
</p>
<pre data-type="programlisting"><section data-type="titlepage">
<h1>Python in a Nutshell</h1>
<p>By Alex Martelli</p>
</section></pre>
</section>
<section data-type="sect2" id="_backmatter">
<h2>Backmatter</h2>
<p><strong>HTML element</strong>: <code><section></code></p>
<p><strong>Attribute requirements</strong>: <code>data-type="colophon"</code>, <code>data-type="acknowledgments"</code>, <code>data-type="afterword"</code>, or <code>data-type="conclusion"</code>, depending on content</p>
<p><strong>Content model</strong>: First child must be either <code><h1></code> that contains backmatter section title, or <a href="#header_block">Header block</a> that contains backmatter title and optional subtitle content; then zero or more <a href="#block_elements">Block Elements</a>; then zero or more <a href="#_sections">Sect1</a> children (<code><section data-type="sect1"></code>)</p>
<p>
<strong>Example</strong>
</p>
<pre data-type="programlisting"><section data-type="colophon">
<h1>Colophon Title</h1>
<p>Colophon content</p>
<section data-type="sect1">
<!-- Section content here... -->
</section>
</section></pre>
</section>
<section data-type="sect2" id="_part">
<h2>Part</h2>
<p><strong>HTML element</strong>: <code><div></code></p>
<p><strong>Attribute requirements</strong>: <code>data-type="part"</code></p>
<p><strong>Content model</strong>: First child must be either <code><h1></code> that contains part title, or <a href="#header_block">Header block</a> that contains part title and optional subtitle content; then zero or more <a href="#block_elements">Block Elements</a> that compose the optional Part introduction; then one or more <code><section></code> elements representing <a href="#_book_component_elements">Book Component</a> children other than a Part</p>
<p>
<strong>Example</strong>
</p>
<pre data-type="programlisting"><div data-type="part">
<h1>Part One: Introduction to Backbone.js</h1>
<p>Part Introduction...</p>
<section data-type="chapter">
<!-- Chapter content here -->
</section>
</div></pre>
</section>
<section data-type="sect2" id="_table_of_contents">
<h2>Table of Contents</h2>
<p><strong>HTML element</strong>: <code><nav></code></p>
<p><strong>Attribute requirements</strong>: <code>data-type="toc"</code></p>
<p><strong>Content Model</strong>: The TOC must be conformant to the specs for the [[EPUB3]] <a href="http://www.idpf.org/epub/30/spec/epub30-contentdocs-20111011.html#sec-xhtml-nav">Navigation document</a>. First child is zero or more <a href="#_headings">Heading elements</a> (<code><h1>-<h6></code>), followed by an <code><ol></code> (with <code><li></code> children that can contain only a <code><span></code> element or an <code><a></code> element plus an optional <code><ol></code> child)</p>
<p>
<strong>Example</strong>
</p>
<pre data-type="programlisting"><nav data-type="toc">
<h1>Table of Contents</h1>
<ol>
<li><a href="examples_page.html">A Note Regarding Supplemental Files</a></li>
<li><a href="pr02.html">Foreword</a></li>
<li><a href="pr03.html">Contributors</a>
<ol>
<li><a href="pr03.html#I_sect1_d1e154">Chapter Authors</a></li>
<li><a href="pr03.html#I_sect1_d1e260">Tech Editors</a></li>
</ol>
</li>
</ol>
</nav></pre>
</section>
<section data-type="sect2" id="_index">
<h2>Index</h2>
<p><strong>HTML element</strong>: <code><section></code></p>
<p><strong>Attribute requirements</strong>: <code>data-type="index"</code></p>
<p><strong>Content model</strong>: First child must be either <code><h1></code> that contains index title, or <a href="#header_block">Header block</a> that contains index title and optional subtitle content; then zero or more <a href="#block_elements">Block Elements</a>; then zero or more <a href="#_sections">Sect1</a> children (<code><section data-type="sect1"></code>)</p>
<p><strong>Best practices</strong>: HTMLBook recommends following the [[EPUBINDEX]] specification and using <code><ol></code>/<code><li></code> elements for marking up index entries, with <code>data-type</code> attributes used for semantic inflection as appropriate, but none of this is a formal spec requirement</p>
<p>
<strong>Example</strong>
</p>
<pre data-type="programlisting"><section data-type="index">
<h1>Index Title</h1>
<div data-type="index-group">
<h2>A</h2>
<ol>
<li data-type="index-term">AsciiDoc, <a href="ch01#asciidoc" data-type="index-locator">All about AsciiDoc</a>
<ol>
<li data-type="index-term">conversion to HTML,
<a href="ch01#asctohtml" data-type="index-locator">AsciiDoc Output Formats</a>
</li>
</ol>
</li>
<li data-type="index-term">azalea, <a href="ch01#azalea" data-type="index-locator">Shrubbery</a></li>
</ol>
</div>
</section></pre>
</section>
<section data-type="sect2" id="_sections">
<h2>Sections</h2>
<p><strong>HTML element</strong>: <code><section></code></p>
<p><strong>Attribute requirements</strong>: <code>data-type="sect1"</code>, <code>data-type="sect2"</code>, <code>data-type="sect3"</code>, <code>data-type="sect4"</code>, <code>data-type="sect5"</code> <span data-type="footnote">(From [[DOCBOOK]] vocabulary)</span>, depending on hierarchy level. <code>sect1</code> is used for <code><section></code> elements nested directly in main <a href="#_book_component_elements">Book Components</a> (<code>"chapter"</code>, <code>"appendix"</code>, etc.). <code>sect2</code> is used for <code><section></code> elements nested in a <code>sect1</code> <code><section></code>, <code>sect3</code> is used for <code><section></code> elements nested in a <code>sect2</code> <code><section></code>, and so on.</p>
<p><strong>Content model</strong>: The first child must either be a main <a href="#_headings">heading</a> element corresponding to the hierarchy level indicated by <code>data-type</code> value, as follows:</p>
<pre data-type="programlisting">"sect1" -> h1
"sect2" -> h2
"sect3" -> h3
"sect4" -> h4
"sect5" -> h5</pre>
<p>or a <a href="#header_block">Header block</a> that contains section title and optional subtitle content. This is followed by zero or more <a href="#block_elements">Block Elements</a>, followed by zero or more <code><section></code> elements with a <code>data-type</code> value one level lower in the hierarchy, as long as the parent section is a <code>"sect4"</code> or higher (e.g., <code><section data-type="sect4"></code> nested in <code><section data-type="sect3"></code>)</p>
<p><strong>Example</strong>:</p>
<pre data-type="programlisting"><section data-type="sect1">
<h1>A-Head</h1>
<p>If you httpparty, you must party hard</p>
<!-- Some more paragraphs -->
<section data-type="sect2">
<h2>B-Head</h2>
<p>What's the frequency, Kenneth?</p>
<!-- And so on... -->
</section>
</section></pre>
</section>
</section>
<section data-type="sect1" id="_block_elements">
<h1>Block Elements</h1>
<section data-type="sect2" id="_paragraph">
<h2>Paragraph</h2>
<p><strong>HTML element</strong>: <code><p></code></p>
<p><strong>Example</strong>:</p>
<pre data-type="programlisting"><p>This is a standard paragraph with some <em>emphasized text</em></p></pre>
</section>
<section data-type="sect2" id="_sidebar">
<h2>Sidebar</h2>
<p><strong>HTML element</strong>: <code><aside></code></p>
<p><strong>Attribute requirements</strong>: <code>data-type="sidebar"</code></p>
<p><strong>Content model</strong>: Zero or one <code><h5></code> element that contains the sidebar title); then zero or more <a href="#block_elements">Block Elements</a></p>
<p><strong>Example</strong>:</p>
<pre data-type="programlisting"><aside data-type="sidebar">
<h5>Amusing Digression</h5>
<p>Did you know that in Boston, they call it "soda", and in Chicago, they call it "pop"?</p>
</aside></pre>
</section>
<section data-type="sect2" id="_admonitions">
<h2>Admonitions</h2>
<p><strong>HTML element</strong>: <code><div></code></p>
<p><strong>Attribute requirements</strong>: <code>data-type="note"</code>, <code>data-type="warning"</code>, <code>data-type="tip"</code>, <code>data-type="caution"</code>, or <code>data-type="important"</code>, depending on the content within</p>
<p><strong>Content model</strong>: Either of the following content models is acceptable:</p>
<ul>
<li>
<p>Text and/or zero or more <a href="#inline_elements">Inline Elements</a></p>
</li>
<li>
<p>Zero or more <code><h1></code>–<code><h6></code> elements, followed by zero or more <a href="#block_elements">Block Elements</a></p>
</li>
</ul>
<p><strong>Examples</strong>:</p>
<pre data-type="programlisting"><div data-type="note">
<h1>Helpful Info</h1>
<p>Please take note of this important information</p>
</div></pre>
<pre data-type="programlisting"><div data-type="warning">Make sure to get your AsciiDoc markup right!</div></pre>
</section>
<section data-type="sect2" id="_tables">
<h2>Tables</h2>
<p><strong>HTML element</strong>: <code><table></code></p>
<p><strong>Content model</strong>: Zero or one <code><caption></code> elements (for titled/captioned tables); then zero or more <code><colgroup></code> elements; then zero or more <code><thead></code> elements; then a choice between either zero or more <code><tbody></code> elements, or zero or more <code><tr></code> elements; then zero or more <code><tfoot></code> elements</p>
<p><strong>Content model for <code><caption></code></strong>: Either of the following is acceptable:</p>
<ul>
<li>
<p>Zero or more <code><p></code> and/or <code><div></code> elements</p>
</li>
<li>
<p>Text and/or zero or more <a href="#inline_elements">Inline Elements</a></p>
</li>
</ul>
<p><strong>Content model for <code><colgroup></code></strong>: Mirrors [[HTML5]] Specification</p>
<p><strong>Content models for <code><thead></code>, <code><tbody></code>, and <code><tfoot></code></strong>: Mirror [[HTML5]] Specification</p>
<p><strong>Content model for <code><tr></code></strong>: Mirrors [[HTML5]] Specification, but see content model below for rules for child <code><td></code> and <code><th></code> elements</p>
<p><strong>Content model for <code><td></code> and <code><th></code> elements</strong>: Either of the following is acceptable:</p>
<ul>
<li>
<p>Text and/or zero or more <a href="#inline_elements">Inline Elements</a></p>
</li>
<li>
<p>Zero or more <a href="#block_elements">Block Elements</a></p>
</li>
</ul>
<p><strong>Examples</strong>:</p>
<pre data-type="programlisting"><table>
<caption>State capitals</caption>
<tr>
<th>State</th>
<th>Capital</th>
</tr>
<tr>
<td>Massachusetts</td>
<td>Boston</td>
</tr>
<!-- And so on -->
</table></pre>
<pre data-type="programlisting"><table>
<thead>
<tr>
<th>First</th>
<th>Middle Initial</th>
<th>Last</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alfred</td>
<td>E.</td>
<td>Newman</td>
</tr>
<!-- And so on -->
</tbody>
</table></pre>
</section>
<section data-type="sect2" id="_figures">
<h2>Figures</h2>
<p><strong>HTML element</strong>: <code><figure></code></p>
<p><strong>Content model</strong>: Either of the following is acceptable:</p>
<ul>
<li>
<p>A <code><figcaption></code> element followed by zero or more <a href="#block_elements">Block Elements</a> and/or <code><img></code> elements</p>
</li>
<li>
<p>Zero or more <a href="#block_elements">Block Elements</a> and/or <code><img></code> elements, followed by a <code><figcaption></code> element</p>
</li>
</ul>
<p><strong>Example</strong>:</p>
<pre data-type="programlisting"><figure>
<figcaption>Adorable cat</figcaption>
<img src="cute_kitty.gif" alt="Photo of an adorable cat"/>
</figure></pre>
</section>
<section data-type="sect2" id="_examples">
<h2>Examples</h2>
<p><strong>HTML element</strong>: <code><div></code></p>
<p><strong>Attribute requirements</strong>: <code>data-type="example"</code></p>
<p><strong>Content model</strong>: Either of the following content models is acceptable:</p>
<ul>
<li>
<p>Text and/or zero or more <a href="#inline_elements">Inline Elements</a></p>
</li>
<li>
<p>Zero or more <code><h1></code>–<code><h6></code> elements (for title and subtitles), followed by zero or more <a href="#block_elements">Block Elements</a></p>
</li>
</ul>
<p><strong>Example</strong>:</p>
<pre data-type="programlisting"><div data-type="example">
<h5>Hello World in Python</h5>
<pre data-type="programlisting">print "Hello World"</pre>
</div></pre>
</section>
<section data-type="sect2" id="_code_listings">
<h2>Code listings</h2>
<p><strong>HTML element</strong>: <code><pre></code></p>
<p><strong>Attribute requirements:</strong> <code>data-type="programlisting"</code></p>
<p><strong>Optional HTMLBook-specific attribute</strong>: <code>data-code-language</code>, used to indicate language of code listing (e.g., <code>data-code-language="python"</code>)</p>
<p><strong>Example</strong>:</p>
<pre data-type="programlisting"><pre data-type="programlisting">print "<em>Hello World</em>"</pre></pre>
</section>
<section data-type="sect2" id="_ordered_lists">
<h2>Ordered lists</h2>
<p><strong>HTML element</strong>: <code><ol></code></p>
<p><strong>Content model</strong>: Zero or more <code><li></code> children for each list item</p>
<p><strong>Content model for <code><li></code> children</strong>: Either of the following is acceptable:</p>
<ul>
<li>
<p>Text and/or zero or more <a href="#inline_elements">Inline Elements</a></p>
</li>
<li>
<p>Zero or more <a href="#block_elements">Block Elements</a></p>
</li>
</ul>
<p><strong>Example</strong>:</p>
<pre data-type="programlisting"><ol>
<li>Step 1</li>
<li>
<p>Step 2</p>
<p>Step 2 continued</p>
</li>
<!-- And so on -->
</ol></pre>
</section>
<section data-type="sect2" id="_itemized_lists">
<h2>Itemized lists</h2>
<p><strong>HTML element</strong>: <code><ul></code></p>
<p><strong>Content model</strong>: Zero or more <code><li></code> children for each list item</p>
<p><strong>Content model for <code><li></code> children</strong>: Either of the following is acceptable:</p>
<ul>
<li>
<p>Text and/or zero or more <a href="#inline_elements">Inline Elements</a></p>
</li>
<li>
<p>Zero or more <a href="#block_elements">Block Elements</a></p>
</li>
</ul>
<p><strong>Example</strong>:</p>
<pre data-type="programlisting"><ul>
<li>Red</li>
<li>Orange</li>
<!-- And so on -->
</ul></pre>
</section>
<section data-type="sect2" id="_definition_lists">
<h2>Definition lists</h2>
<p><strong>HTML element</strong>: <code><dl></code></p>
<p><strong>Content model</strong>: Mirrors [[HTML5]] Specification</p>
<p><strong>Content model for <code><dt></code> children</strong>: text and/or zero or more <a href="#inline_elements">Inline Elements</a></p>
<p><strong>Content model for <code><dd></code> children</strong>: Either of the following is acceptable:</p>
<ul>
<li>
<p>Text and/or zero or more <a href="#inline_elements">Inline Elements</a></p>
</li>
<li>
<p>Zero or more <a href="#block_elements">Block Elements</a></p>
</li>
</ul>
<p><strong>Example</strong>:</p>
<pre data-type="programlisting"><dl>
<dt>Constant Width Bold font</dt>
<dd>Used to indicate user input</dd>
</dl></pre>
</section>
<section data-type="sect2" id="_blockquote">
<h2>Blockquote</h2>
<p><strong>HTML element</strong>: <code><blockquote></code></p>
<p><strong>Content model</strong>: Either of the following is acceptable:</p>
<ul>
<li>
<p>Text and/or zero or more <a href="#inline_elements">Inline Elements</a></p>
</li>
<li>
<p>Zero or more <a href="#block_elements">Block Elements</a></p>
</li>
</ul>
<p><strong>Example</strong>:</p>
<pre data-type="programlisting"><blockquote>
<p>When in the course of human events...</p>
<p data-type="attribution">U.S. Declaration of Independence</p>
</blockquote></pre>
<p><strong>Note</strong>: If the blockquote is an epigraph, add <code>data-type="epigraph"</code>, e.g.:</p>
<pre data-type="programlisting"><section data-type="chapter">
<h1>Conclusion</h1>
<blockquote data-type="epigraph">
<p>It ain't over till it's over.</p>
<p data-type="attribution">Yogi Berra</p>
</blockquote>
<p>In this final chapter of the book, we will…<p>
</section></pre>
</section>
<section data-type="sect2" id="_equation">
<h2>Equation</h2>
<p><strong>HTML element</strong>: <code><div></code></p>
<p><strong>Attribute requirements</strong>: <code>data-type="equation"</code> <span data-type="footnote">(From [[DOCBOOK]]; no close match in [[EPUB3SSV]])</span></p>
<p><strong>Note:</strong> HTMLBook supports embedded MathML in HTML content documents, which can be used here.</p>
<p><strong>Example</strong>:</p>
<pre data-type="programlisting"><div data-type="equation">
<h5>Pythagorean Theorem</h5>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<msup><mi>a</mi><mn>2</mn></msup>
<mo>+</mo>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>=</mo>
<msup><mi>c</mi><mn>2</mn></msup>
</math>
</div></pre>
</section>
<section data-type="sect2" id="_refentry" class="informative">
<h2>Reference Entries (refentries)</h2>
<p><strong>Suggested HTML element</strong>: <code><div></code></p>
<p><strong>Suggested semantics</strong>: <code>class="refentry"</code></p>
<p><strong>Note:</strong> HTMLBook does not currently normatively specify structural semantics for reference entries as they are conceived in <a href="http://www.docbook.org/tdg/en/html/refentry.html">DocBook</a> ([[DOCBOOK]]) or <a href="http://docs.oasis-open.org/dita/v1.2/os/spec/common/reference2.html#reference2">DITA</a> ([[DITA]]). Use of <code><div class="refentry"></code> is suggested for marking up reference entries. The following example illustrates XHTML5 markup one might use for refentry content, which captures DocBook-style semantics</p>
<p><strong>Example refentry paralleling [[DOCBOOK]]</strong>:</p>
<pre data-type="programlisting"><div class="refentry">
<header>
<p class="refname">print</p>
<p class="refpurpose">Output some text to stdout.</p>
</header>
<div class="refsynopsisdiv">
<pre class="synopsis">print "<em>Hello World</em>"</pre>
</div>
<div class="refsect1">
<h6>Description</h6>
<p>More description would go here</p>
</div>
</div></pre>
</section>
</section>
<section data-type="sect1" id="_inline_elements">
<h1>Inline Elements</h1>
<div class="note">HTMLBook is primarily focused on codifying <em>structural semantics</em> for book authoring, and as such, it does not formally define specifications for phrase-level semantics (such as the DocBook <a href="http://www.docbook.org/tdg/en/html/varname.html"><code>varname</code></a> or <a href="http://www.docbook.org/tdg/en/html/personname.html"><code>personname</code></a> elements) beyond that which is codified in the [[!HTML5]] specification. Nor does it formally define specifications for purely presentational markup (such as underline or strikethrough rendering). HTMLBook users are encouraged to employ the appropriate standard HTML5 phrasing elements for inline semantics when available (e.g., <code><strong></code>, <code><em></code>, <code><s></code>, <code><u></code>) and to use <code><span></code> elements with custom-defined classes in other cases, as illustrated in the following examples.</div>
<section data-type="sect2" id="_emphasis_generally_for_italic">
<h2>Emphasis (generally for italic)</h2>
<p><strong>HTML element</strong>: <code><em></code></p>
<p><strong>Example:</strong></p>
<pre data-type="programlisting"><p>I <em>love</em> HTML!</p></pre>
</section>
<section data-type="sect2" id="_strong_generally_for_bold">
<h2>Strong (generally for bold)</h2>
<p><strong>HTML element</strong>: <code><strong></code></p>
<p><strong>Example:</strong></p>
<pre data-type="programlisting"><p>I <strong>love</strong> HTML!</p></pre>
</section>
<section data-type="sect2" id="_literal_for_inline_code_elements_variables_functions_etc">
<h2>Literal (for inline code elements: variables, functions, etc.)</h2>
<p><strong>HTML element</strong>: <code><code></code></p>
<p><strong>Example:</strong></p>
<pre data-type="programlisting"><p>Enter <code>echo "Hello World"</code> on the command line</p></pre>
</section>
<section data-type="sect2" id="_general_purpose_phrase_markup_for_other_styling_underline_strikethrough_etc">
<h2>General-purpose phrase markup for other styling</h2>
<p><strong>HTML element</strong>: <code><span></code></p>
<p><strong>Example:</strong></p>
<pre data-type="programlisting"><p>Use your own class attributes for custom styling for formatting
like <span class="underline">underlined text</span></p></pre>
</section>
<section data-type="sect2" id="_footnote_endnote">
<h2>Footnote, endnote</h2>
<p><strong>HTML element</strong>: <code><span></code></p>
<p><strong>Attribute requirements</strong>: <code>data-type="footnote"</code></p>
<p><strong>Content model</strong>: text and/or zero or more <a href="#inline_elements">Inline Elements</a></p>
<p><strong>Example</strong>:</p>
<pre data-type="programlisting"><p>Five out of every six people who try AsciiDoc prefer it to
Markdown<span data-type="footnote">Totally made-up statistic</span></p></pre>
<p><strong>Notes</strong>:</p>
<ul>
<li>
<p>The <code><span></code> element does not accept block element children (and as of April 2014, nor does any other HTML5 element that can be used in an inline context and is an acceptable semantic fit for footnotes). If you need to include multiple blocks of content in a footnote, use <code><br/></code> elements to delimit them, e.g.:</p>
<pre data-type="programlisting"><p>This is a really short paragraph.<span data-type="footnote">Largely because I like
to put lots and lots of content in footnotes.<br/><br/>
For example, let me tell you a story about my dog...</span></p></pre></li>
<li>
<p>Desired rendering of footnote content (i.e., floating/moving footnotes to the bottom of a page or end of a section, adding appropriate marker symbols/numeration) should be handled by XSL/CSS stylesheet processing.</p>
</li>
</ul>
</section>
<section data-type="sect2" id="_cross_references">
<h2>Cross-references</h2>
<p><strong>HTML element</strong>: <code><a></code></p>
<p><strong>Attribute requirements</strong>: <code>data-type="xref"</code> <span data-type="footnote">(From [[DOCBOOK]])</span>; an <code>href</code> attribute that should point to the id of a
local HTMLBook resource referenced; <code>data-xrefstyle</code> (optional) for specifying the style of XREF</p>
<p><strong>Example:</strong></p>
<pre data-type="programlisting"><section id="html5" data-type="chapter">
<h1>Intro to HTML5<h1>
<p>As I said at the beginning of <a data-type="xref" href="#html5">Chapter 1</a>, HTML5 is great...</p>
<!-- Blah blah blah -->
</section></pre>
</section>
<section data-type="sect2" id="_index_term">
<h2>Index Term</h2>
<p><strong>HTML element</strong>: <code><a></code></p>
<p><strong>Attribute requirements</strong>: <code>data-type="indexterm"</code>; for primary index entry value, use <code>data-primary</code>; for secondary index entry value, use <code>data-secondary</code>; for tertiary index entry value, use <code>data-tertiary</code>; for a "see" index reference, use <code>data-see</code>; for a "see also" index reference, use <code>data-seealso</code>; for a "sort" value to indicate alphabetization, use <code>data-primary-sortas</code>, <code>data-secondary-sortas</code>, or <code>data-tertiary-sortas</code>; for an "end-of-range" tag that marks the end of an index range, use <code>data-startref="id_of_opening_index_marker"</code> <span data-type="footnote">(Semantics from [[DOCBOOK]])</span></p>
<p><strong>Content model</strong>: Empty</p>
<p><strong>Example</strong>:</p>
<pre data-type="programlisting"><p>The Atlas build system<a data-type="indexterm" data-primary="Atlas" data-secondary="build system"/> lets
you build EPUB, Mobi, PDF, and HTML content</p></pre>
</section>
<section data-type="sect2" id="_superscripts">
<h2>Superscripts</h2>
<p><strong>HTML element</strong>: <code><sup></code></p>
<p><strong>Example</strong>:</p>
<pre data-type="programlisting"><p>The area of a circle is πr<sup>2</sup></p></pre>
</section>
<section data-type="sect2" id="_subscripts">
<h2>Subscripts</h2>
<p><strong>HTML element</strong>: <code><sub></code></p>
<p><strong>Example</strong>:</p>
<pre data-type="programlisting"><p>The formula for water is H<sub>2</sub>O</p></pre>
</section>
</section>
<section data-type="sect1" id="_heading_elements">
<h1>Heading Elements</h1>
<section data-type="sect2" id="_headings">
<h2>Headings</h2>
<p><strong>HTML elements</strong>: <code><h1></code>, <code><h2></code>, <code><h3></code>, <code><h4></code>, <code><h5></code>, or <code><h6></code></p>
<p><strong>Content Model</strong>: text and/or zero or more <a href="#inline_elements">Inline Elements</a></p>
<p><strong>Notes</strong>: Many main book components (e.g., chapters, parts, appendixes) require headings. The appropriate
element from <code><h1></code>–<code><h6></code> is outlined below, as well as in the corresponding documentation for these
components:</p>
<pre data-type="programlisting">book title -> h1
part title -> h1
chapter title -> h1
preface title -> h1
appendix title -> h1
colophon title -> h1
dedication title -> h1
glossary title -> h1
bibliography title -> h1
sect1 title -> h1
sect2 title -> h2
sect3 title -> h3
sect4 title -> h4
sect5 title -> h5
sidebar title -> h5</pre>
</section>
<section data-type="sect2" id="header_block">
<h2>Header</h2>
<p><strong>HTML element</strong>: <code><header></code></p>
<p><strong>Content Model</strong>: A Heading element at the proper level designated (<code>h1</code>–<code>h5</code>)
for the parent Book Component, as outlined in the previous <a href="#_headings">Headings</a> section (e.g., an <code><h1></code> for a chapter <code><header></code>); then zero or more <code><p></code> elements for subtitles or author attributions, each of which must have a <code>data-type</code> of either <code>subtitle</code> or <code>author</code></p>
<p><strong>Example</strong>:</p>
<pre data-type="programlisting"><section data-type="chapter">
<header>
<h1>Chapter title</h1>
<p data-type="subtitle">Chapter subtitle</p>
</header>
<!-- Chapter content here... -->
</section></pre>
</section>
</section>
<section data-type="sect1" id="_interactive_elements">
<h1>Interactive Elements</h1>
<section data-type="sect2" id="_video">
<h2>Video</h2>
<p><strong>HTML element</strong>: <code><video></code></p>
<p><strong>Example</strong>:</p>
<p><strong>Note</strong>: Fallback content is <em>strongly recommended</em> for output formats that do not support HTML5 interactive content</p>
<pre data-type="programlisting"><video id="asteroids_video" width="480" height="270" controls="controls" poster="images/fallback_image.png">
<source src="video/html5_asteroids.mp4" type="video/mp4"/>
<source src="video/html5_asteroids.ogg" type="video/ogg"/>
<em>Sorry, the &lt;video&gt; element not supported in your
reading system. View the video online at http://example.com.</em>
</video></pre>
</section>
<section data-type="sect2" id="_audio">
<h2>Audio</h2>
<p><strong>HTML element</strong>: <code><audio></code></p>
<p><strong>Note</strong>: Fallback content is <em>strongly recommended</em> for output formats that do not support HTML5 interactive content</p>
<p><strong>Example</strong>:</p>
<pre data-type="programlisting"><audio id="new_slang">
<source src="audio/new_slang.wav" type="audio/wav"/>
<source src="audio/new_slang.mp3" type="audio/mp3"/>
<source src="audionew_slang.ogg" type="audio/ogg"/>
<em>Sorry, the &lt;audio&gt; element is not supported in your
reading system. Hear the audio online at http://example.com.</em>
</audio></pre>
</section>
<section data-type="sect2" id="_canvas">
<h2>Canvas</h2>
<p><strong>HTML element</strong>: <code><canvas></code></p>
<p><strong>Notes</strong>: Should include fallbacks for environments that don’t support HTML5 or JavaScript (e.g., link or image).
You may include <code><script></code> elements in your HTMLBook document <code><head></code> elements to include/reference JS code for
Canvas handling.</p>
<p><strong>Examples</strong>:</p>
<pre data-type="programlisting"><canvas id="canvas" width="400" height="400">
Your browser does not support the HTML 5 Canvas. See the interactive example at http://example.com.
</canvas></pre>
</section>
</section>
<section data-type="sect1" id="_comments">
<h1>Comments</h1>
<p>To add comments to an HTMLBook document, either use standard HTML/XML comment syntax:</p>
<pre data-type="programlisting"><!-- This is a comment --></pre>
<p>Or add a <code>data-type="comment"</code> attribute to any HTML element, e.g.:</p>
<pre><div data-type="comment">This is a comment preceding a paragraph of text</div>
<p>This is a paragraph of text <span data-type="comment">Inline comment in paragraph</span></p></pre>
</section>
<section data-type="sect1" id="_metadata">
<h1>Metadata</h1>
<section data-type="sect2" id="_metadata_points">
<h2>Metadata points</h2>
<p><strong>HTML element</strong>: <code><meta></code></p>
<p><strong>Attribute requirements</strong>: <code>name</code> (for name of metadata point); <code>content</code> (for value of metadata point)</p>
<p><strong>Content model</strong>: Empty</p>
<p><strong>Note</strong>: All <code><meta></code> elements must be children of the <code><head></code> element of the HTML file.</p>
<p><strong>Example</strong>:</p>
<pre data-type="programlisting"><head>
<title>Title of the Book</title>
<meta name="isbn-13" content="9781449344856"/>
</head></pre>
</section>
</section>
<section data-type="sect1" id="_element_classification">
<h1>Element Classification</h1>
<section data-type="sect2" id="block_elements">
<h2>Block Elements</h2>
<p>In HTMLBook, the majority of elements classified by the HTML5 specification as <a href="http://www.w3.org/TR/html5/dom.html#flow-content">Flow Content</a> (minus elements also categorized as <a href="http://www.w3.org/TR/html5/dom.html#heading-content">Heading Content</a>, <a href="http://www.w3.org/TR/html5/dom.html#phrasing-content">Phrasing Content</a>, and <a href="http://www.w3.org/TR/html5/dom.html#sectioning-content">Sectioning Content</a>) are considered to be Block Elements. Here is a complete list:</p>
<ul>
<li>
<p>
<code><address></code>
</p>
</li>
<li>
<p>
<code><aside></code>
</p>
</li>
<li>
<p>
<code><audio></code>
</p>
</li>
<li>
<p>
<code><blockquote></code>
</p>
</li>
<li>
<p>
<code><canvas></code>
</p>
</li>
<li>
<p>
<code><dd></code>
</p>
</li>
<li>
<p>
<code><details></code>
</p>
</li>
<li>
<p>
<code><div></code>
</p>
</li>
<li>
<p>
<code><dl></code>
</p>
</li>
<li>
<p>
<code><embed></code>
</p>
</li>
<li>
<p>
<code><fieldset></code>
</p>
</li>
<li>
<p>
<code><figure></code>
</p>
</li>
<li>
<p>
<code><form></code>
</p>
</li>
<li>
<p>
<code><hr></code>
</p>
</li>
<li>
<p>
<code><iframe></code>
</p>
</li>
<li>
<p>
<code><map></code>
</p>
</li>
<li>
<p><code><math></code> (In MathML vocabulary; must be namespaced under <a href="http://www.w3.org/1998/Math/MathML">http://www.w3.org/1998/Math/MathML</a>)</p>
</li>
<li>
<p>
<code><menu></code>
</p>
</li>
<li>
<p>
<code><object></code>
</p>
</li>
<li>
<p>
<code><ol></code>
</p>
</li>
<li>
<p>
<code><p></code>
</p>
</li>
<li>
<p>
<code><pre></code>
</p>
</li>
<li>
<p><code><svg></code> (In SVG vocabulary; must be namespaced under <a href="http://www.w3.org/2000/svg">http://www.w3.org/2000/svg</a>)</p>
</li>
<li>
<p>
<code><table></code>
</p>
</li>
<li>
<p>
<code><ul></code>
</p>
</li>
<li>
<p>
<code><video></code>
</p>
</li>
</ul>
</section>
<section data-type="sect2" id="inline_elements">
<h2>Inline Elements</h2>
<p>In HTMLBook, the majority of elements classified by the HTML5 specification as <a href="http://www.w3.org/TR/html5/dom.html#phrasing-content">Phrasing Content</a> are considered to be Inline Elements. Here is a complete list:</p>
<ul>
<li>
<p>
<code><a></code>
</p>
</li>
<li>
<p>
<code><abbr></code>
</p>
</li>
<li>
<p>
<code><b></code>
</p>
</li>
<li>
<p>
<code><bdi></code>
</p>
</li>
<li>
<p>
<code><bdo></code>
</p>
</li>
<li>
<p>
<code><br></code>
</p>
</li>
<li>
<p>
<code><button></code>
</p>
</li>
<li>
<p>
<code><command></code>
</p>
</li>
<li>
<p>
<code><cite></code>
</p>
</li>
<li>
<p>
<code><code></code>
</p>
</li>
<li>
<p>
<code><datalist></code>
</p>
</li>
<li>
<p>
<code><del></code>
</p>
</li>
<li>
<p>
<code><dfn></code>
</p>
</li>
<li>
<p>
<code><dt></code>
</p>
</li>
<li>
<p>
<code><em></code>
</p>
</li>
<li>
<p>
<code><i></code>
</p>
</li>
<li>
<p>