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
|
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="utf-8" />
<meta name="generator" content="Docutils 0.22: https://docutils.sourceforge.io/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Additional tests with HTML 5</title>
<link rel="stylesheet" href="../input/data/minimal.css" type="text/css" />
<link rel="stylesheet" href="../input/data/responsive.css" type="text/css" />
</head>
<body class="with-toc">
<main id="additional-tests-with-html-5">
<h1 class="title">Additional tests with HTML 5</h1>
<nav class="contents" id="contents" role="doc-toc">
<p class="topic-title"><a class="reference internal" href="#top">Contents</a></p>
<ul class="simple">
<li><p><a class="reference internal" href="#section-heading-levels" id="toc-entry-1">Section heading levels</a></p></li>
<li><p><a class="reference internal" href="#level-1" id="toc-entry-2">Level 1</a></p>
<ul>
<li><p><a class="reference internal" href="#level-2" id="toc-entry-3">Level 2</a></p>
<ul>
<li><p><a class="reference internal" href="#level-3" id="toc-entry-4">Level 3</a></p>
<ul>
<li><p><a class="reference internal" href="#level-4" id="toc-entry-5">level 4</a></p>
<ul>
<li><p><a class="reference internal" href="#level-5" id="toc-entry-6">level 5</a></p>
<ul>
<li><p><a class="reference internal" href="#level-6" id="toc-entry-7">level 6</a></p>
<ul>
<li><p><a class="reference internal" href="#level-7" id="toc-entry-8">level 7</a></p>
<ul>
<li><p><a class="reference internal" href="#level-8" id="toc-entry-9">level 8</a></p></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><p><a class="reference internal" href="#section-titles-with-inline-markup" id="toc-entry-10">Section titles with inline markup</a></p>
<ul>
<li><p><a class="reference internal" href="#emphasized-h2o-x-2-and-references" id="toc-entry-11"><em>emphasized</em>, H<sub>2</sub>O, <math xmlns="http://www.w3.org/1998/Math/MathML">
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
</math>, and references</a></p></li>
<li><p><a class="reference internal" href="#substitutions-fail" id="toc-entry-12">Substitutions work</a></p></li>
</ul>
</li>
<li><p><a class="reference internal" href="#embedded-images" id="toc-entry-13">Embedded images</a></p></li>
<li><p><a class="reference internal" href="#moving-images-video" id="toc-entry-14">Moving images (video)</a></p></li>
</ul>
</nav>
<section id="section-heading-levels">
<h2><a class="toc-backref" href="#contents" role="doc-backlink">Section heading levels</a><a class="self-link" title="link to this section" href="#section-heading-levels"></a></h2>
</section>
<section id="level-1">
<h2><a class="toc-backref" href="#contents" role="doc-backlink">Level 1</a><a class="self-link" title="link to this section" href="#level-1"></a></h2>
<p>Nested sections</p>
<section id="level-2">
<h3><a class="toc-backref" href="#contents" role="doc-backlink">Level 2</a><a class="self-link" title="link to this section" href="#level-2"></a></h3>
<p>reach at some level</p>
<section id="level-3">
<h4><a class="toc-backref" href="#contents" role="doc-backlink">Level 3</a><a class="self-link" title="link to this section" href="#level-3"></a></h4>
<p>(depending on the document class and output format)</p>
<section id="level-4">
<h5><a class="toc-backref" href="#contents" role="doc-backlink">level 4</a><a class="self-link" title="link to this section" href="#level-4"></a></h5>
<p>a level</p>
<section id="level-5">
<h6><a class="toc-backref" href="#contents" role="doc-backlink">level 5</a><a class="self-link" title="link to this section" href="#level-5"></a></h6>
<p>that is not supported by the output format.</p>
<section id="level-6">
<h6 aria-level="7"><a class="toc-backref" href="#contents" role="doc-backlink">level 6</a><a class="self-link" title="link to this section" href="#level-6"></a></h6>
<p>Unsupported in LaTeX and HTML5
(HTML5 reserves the 1st level for the document title).</p>
<section id="level-7">
<h6 aria-level="8"><a class="toc-backref" href="#contents" role="doc-backlink">level 7</a><a class="self-link" title="link to this section" href="#level-7"></a></h6>
<p>Unsupported in HTML4.</p>
<section id="level-8">
<h6 aria-level="9"><a class="toc-backref" href="#contents" role="doc-backlink">level 8</a><a class="self-link" title="link to this section" href="#level-8"></a></h6>
<p>Unsupported in ODT.</p>
</section>
</section>
</section>
</section>
</section>
</section>
</section>
</section>
<section id="section-titles-with-inline-markup">
<span id="references"></span><h2><a class="toc-backref" href="#contents" role="doc-backlink">Section titles with inline markup</a><a class="self-link" title="link to this section" href="#section-titles-with-inline-markup"></a></h2>
<section id="emphasized-h2o-x-2-and-references">
<h3><em>emphasized</em>, H<sub>2</sub>O, <math xmlns="http://www.w3.org/1998/Math/MathML">
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
</math>, and <a class="reference internal" href="#references">references</a><a class="self-link" title="link to this section" href="#emphasized-h2o-x-2-and-references"></a></h3>
</section>
<section id="substitutions-fail">
<h3><a class="toc-backref" href="#contents" role="doc-backlink">Substitutions work</a><a class="self-link" title="link to this section" href="#substitutions-fail"></a></h3>
<p>Note, that the “reference name” for this section is derived from the
content <em>before</em> substitution. You can link to it with the <a class="reference external" href="https://docutils.sourceforge.io/docs/ref/rst/restructuredtext.html#hyperlink-references">phrase
reference</a> “<a class="reference internal" href="#substitutions-fail">substitutions fail</a>”.
This behaviour may be exploited to get intelligible IDs after <a class="reference external" href="https://docutils.sourceforge.io/docs/ref/rst/directives.html#identifier-normalization">identifier
normalization</a> of the section’s reference name.</p>
</section>
</section>
<section id="embedded-images">
<h2><a class="toc-backref" href="#contents" role="doc-backlink">Embedded images</a><a class="self-link" title="link to this section" href="#embedded-images"></a></h2>
<p>The <a class="reference external" href="https://docutils.sourceforge.io/docs/user/config.html#image-loading">image_loading</a> setting can be used to tell the “html5” writer
to embed still images in the output document. <a class="brackets" href="#footnote-1" id="footnote-reference-1" role="doc-noteref"><span class="fn-bracket">[</span>1<span class="fn-bracket">]</span></a> SVG images are
directly included, other images are <a class="reference external" href="https://en.wikipedia.org/wiki/Base64">base64</a> encoded and included
as a <a class="reference external" href="https://en.wikipedia.org/wiki/Data_URI_scheme">data URI</a>.</p>
<figure class="align-left" style="width: 45%">
<img alt="biohazard" class="align-center" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABGdBTUEAANkE3LLaAgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAZQTFRF////AAAAVcLTfgAAAAF0Uk5TAEDm2GYAAAA2SURBVHicYmBRYOAQYJCQYJC+wSBjAUL2fxjq6hgueTNM7AQh3g0MzAdAiP0BUBYAAAD//wMA4pkLDrFBDzUAAAAASUVORK5CYII=" style="width: 2em;" />
<figcaption>
<p>Embedded PNG image in a figure.</p>
</figcaption>
</figure>
<figure class="align-right" style="width: 45%">
<svg xmlns="http://www.w3.org/2000/svg" class="caution-mark bw align-center" viewBox="0 0 48 48" style="width: 2em;">
<title>Biohazard</title>
<path d="m23.585 1.3778c-7.3e-5 1.1e-4 6.2e-5 0.0039 0 0.0039 0.0013-3.54e-4 0.0026-0.0032 0.0039-0.0039-4.78e-4 0-0.0034-2.3e-5 -0.0039 0zm-0.29329 0.01173c-0.0027 3.39e-4 -0.0051 0.0032-0.0078 0.0039 0.01047-6.47e-4 0.0208-0.0032 0.0313-0.0039-0.0026 3.1e-5 -0.0053-1.18e-4 -0.0078 0-0.0057 2.6e-4 -0.01016-6.94e-4 -0.01564 0zm1.4234 0.0078c0.02085 0.0016 0.04176 0.0023 0.06257 0.0039-0.02047-0.0016-0.04204-0.0032-0.06257-0.0039zm0.06257 0.0039c5.266 0.41855 9.4125 4.8332 9.4125 10.206 0 5.4708-4.3036 9.9328-9.7057 10.21v2.096c1.4749 0.23317 2.6044 1.514 2.6044 3.0541 0 0.37693-0.06786 0.73739-0.19161 1.0715l1.9161 1.1067c2.9612-4.473 8.9355-5.9326 13.644-3.2144 4.6969 2.7117 6.4311 8.5947 4.063 13.389 3.2501-6.3259 0.99004-14.167-5.2361-17.761-1.5578-0.89938-3.2176-1.4473-4.8959-1.6737 0.64243-1.5663 0.99716-3.2814 0.99716-5.0797 0-7.1369-5.5766-12.98-12.607-13.405zm-1.7167 0.0078c-6.9955 0.46205-12.537 6.2855-12.537 13.397 0 1.7471 0.33392 3.4168 0.94242 4.9467-1.6284 0.2386-3.2426 0.78109-4.7551 1.6543-6.1844 3.5706-8.4499 11.329-5.2947 17.632-2.2781-4.7717-0.53106-10.576 4.1255-13.264 4.7378-2.7354 10.753-1.2393 13.694 3.3004l1.8497-1.0676c-0.11624-0.32496-0.17597-0.67542-0.17597-1.0402 0-1.4747 1.0339-2.7081 2.4167-3.015v-2.139c-5.3544-0.32796-9.6041-4.7699-9.6041-10.206 0-5.3484 4.1065-9.7456 9.3381-10.198zm0.5983 12.858c-2.7025 0.06215-5.1939 0.9822-7.2382 2.4792 0.16332 0.24168 0.3388 0.47558 0.524 0.69997 0.18521 0.22438 0.38102 0.43966 0.58657 0.64522 0.20555 0.20555 0.42084 0.40137 0.64523 0.58656 0.16497 0.13617 0.34173 0.25876 0.51617 0.38323 1.509-0.9908 3.3162-1.572 5.2635-1.572 1.9473-8e-6 3.7505 0.58119 5.2595 1.572 0.17445-0.12446 0.35119-0.24706 0.51618-0.38323 0.22439-0.1852 0.43967-0.38101 0.64522-0.58656 0.20557-0.20556 0.40138-0.42084 0.58658-0.64522 0.1852-0.22439 0.36067-0.45829 0.524-0.69997-2.1182-1.5511-4.7161-2.4792-7.5315-2.4792-0.06599 0-0.13369-7.88e-4 -0.19944 0-0.0321 5.04e-4 -0.06572-7.33e-4 -0.09775 0zm-12.318 11.278c-0.28422 2.61 0.2112 5.324 1.6189 7.7622 1.4077 2.4383 3.5102 4.2281 5.9126 5.2869 0.12765-0.26228 0.24239-0.53297 0.34412-0.80556 0.10173-0.27257 0.19068-0.54821 0.2659-0.829 0.07525-0.2808 0.1395-0.56556 0.1877-0.85248 0.03545-0.21096 0.05374-0.42411 0.07431-0.63742-1.6126-0.81146-3.0189-2.0872-3.9926-3.7736-0.97365-1.6864-1.3744-3.5394-1.2709-5.3417-0.195-0.08884-0.39006-0.17939-0.59048-0.25419-0.27258-0.10171-0.54822-0.19066-0.82901-0.26591-0.28079-0.07523-0.56555-0.13558-0.85247-0.18379-0.28692-0.04821-0.57716-0.08499-0.86812-0.10558zm25.316 0.1525c-0.29098 0.02064-0.5812 0.05743-0.86812 0.10559-0.28692 0.04821-0.57169 0.10855-0.85249 0.1838-0.28078 0.07523-0.56033 0.16419-0.83292 0.26592-0.20042 0.07475-0.39157 0.16924-0.58656 0.25808 0.10353 1.8023-0.29725 3.6553-1.2709 5.3417-0.97364 1.6864-2.38 2.9582-3.9926 3.7697 0.02056 0.2133 0.03885 0.42645 0.07429 0.63741 0.0482 0.28692 0.10854 0.57168 0.18379 0.85249 0.07524 0.28079 0.1642 0.56035 0.26592 0.83291 0.10171 0.2726 0.21648 0.53936 0.34412 0.80165 2.4024-1.0589 4.5049-2.8448 5.9126-5.283 1.4077-2.4383 1.9071-5.1562 1.6228-7.7662zm-14.985 3.3004-1.8614 1.0793c2.3932 4.801 0.67248 10.702-4.0356 13.421-4.6849 2.7048-10.629 1.2814-13.604-3.1401 3.8616 5.9503 11.758 7.9008 17.972 4.3132 1.5053-0.86907 2.7751-1.9894 3.7931-3.273 1.0381 1.3493 2.3519 2.5212 3.9183 3.4255 6.2209 3.5917 14.127 1.6332 17.984-4.3328-2.9704 4.4407-8.9227 5.8772-13.616 3.1675-4.7378-2.7354-6.4495-8.6935-3.9887-13.511l-1.9357-1.1184c-0.56569 0.62984-1.3868 1.0284-2.2993 1.0284-0.92758 0-1.7603-0.41179-2.3267-1.0597z" />
</svg>
<figcaption>
<p>Embedded SVG image in a figure.</p>
</figcaption>
</figure>
<p>Embedded inline PNG image <img alt="inline-embedded" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABGdBTUEAANkE3LLaAgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAZQTFRF////AAAAVcLTfgAAAAF0Uk5TAEDm2GYAAAA2SURBVHicYmBRYOAQYJCQYJC+wSBjAUL2fxjq6hgueTNM7AQh3g0MzAdAiP0BUBYAAAD//wMA4pkLDrFBDzUAAAAASUVORK5CYII=" style="height: 0.8em;" /> and SVG image
<svg xmlns="http://www.w3.org/2000/svg" class="caution-mark bw" viewBox="0 0 48 48" style="height: 0.8em;">
<title>Biohazard</title>
<path d="m23.585 1.3778c-7.3e-5 1.1e-4 6.2e-5 0.0039 0 0.0039 0.0013-3.54e-4 0.0026-0.0032 0.0039-0.0039-4.78e-4 0-0.0034-2.3e-5 -0.0039 0zm-0.29329 0.01173c-0.0027 3.39e-4 -0.0051 0.0032-0.0078 0.0039 0.01047-6.47e-4 0.0208-0.0032 0.0313-0.0039-0.0026 3.1e-5 -0.0053-1.18e-4 -0.0078 0-0.0057 2.6e-4 -0.01016-6.94e-4 -0.01564 0zm1.4234 0.0078c0.02085 0.0016 0.04176 0.0023 0.06257 0.0039-0.02047-0.0016-0.04204-0.0032-0.06257-0.0039zm0.06257 0.0039c5.266 0.41855 9.4125 4.8332 9.4125 10.206 0 5.4708-4.3036 9.9328-9.7057 10.21v2.096c1.4749 0.23317 2.6044 1.514 2.6044 3.0541 0 0.37693-0.06786 0.73739-0.19161 1.0715l1.9161 1.1067c2.9612-4.473 8.9355-5.9326 13.644-3.2144 4.6969 2.7117 6.4311 8.5947 4.063 13.389 3.2501-6.3259 0.99004-14.167-5.2361-17.761-1.5578-0.89938-3.2176-1.4473-4.8959-1.6737 0.64243-1.5663 0.99716-3.2814 0.99716-5.0797 0-7.1369-5.5766-12.98-12.607-13.405zm-1.7167 0.0078c-6.9955 0.46205-12.537 6.2855-12.537 13.397 0 1.7471 0.33392 3.4168 0.94242 4.9467-1.6284 0.2386-3.2426 0.78109-4.7551 1.6543-6.1844 3.5706-8.4499 11.329-5.2947 17.632-2.2781-4.7717-0.53106-10.576 4.1255-13.264 4.7378-2.7354 10.753-1.2393 13.694 3.3004l1.8497-1.0676c-0.11624-0.32496-0.17597-0.67542-0.17597-1.0402 0-1.4747 1.0339-2.7081 2.4167-3.015v-2.139c-5.3544-0.32796-9.6041-4.7699-9.6041-10.206 0-5.3484 4.1065-9.7456 9.3381-10.198zm0.5983 12.858c-2.7025 0.06215-5.1939 0.9822-7.2382 2.4792 0.16332 0.24168 0.3388 0.47558 0.524 0.69997 0.18521 0.22438 0.38102 0.43966 0.58657 0.64522 0.20555 0.20555 0.42084 0.40137 0.64523 0.58656 0.16497 0.13617 0.34173 0.25876 0.51617 0.38323 1.509-0.9908 3.3162-1.572 5.2635-1.572 1.9473-8e-6 3.7505 0.58119 5.2595 1.572 0.17445-0.12446 0.35119-0.24706 0.51618-0.38323 0.22439-0.1852 0.43967-0.38101 0.64522-0.58656 0.20557-0.20556 0.40138-0.42084 0.58658-0.64522 0.1852-0.22439 0.36067-0.45829 0.524-0.69997-2.1182-1.5511-4.7161-2.4792-7.5315-2.4792-0.06599 0-0.13369-7.88e-4 -0.19944 0-0.0321 5.04e-4 -0.06572-7.33e-4 -0.09775 0zm-12.318 11.278c-0.28422 2.61 0.2112 5.324 1.6189 7.7622 1.4077 2.4383 3.5102 4.2281 5.9126 5.2869 0.12765-0.26228 0.24239-0.53297 0.34412-0.80556 0.10173-0.27257 0.19068-0.54821 0.2659-0.829 0.07525-0.2808 0.1395-0.56556 0.1877-0.85248 0.03545-0.21096 0.05374-0.42411 0.07431-0.63742-1.6126-0.81146-3.0189-2.0872-3.9926-3.7736-0.97365-1.6864-1.3744-3.5394-1.2709-5.3417-0.195-0.08884-0.39006-0.17939-0.59048-0.25419-0.27258-0.10171-0.54822-0.19066-0.82901-0.26591-0.28079-0.07523-0.56555-0.13558-0.85247-0.18379-0.28692-0.04821-0.57716-0.08499-0.86812-0.10558zm25.316 0.1525c-0.29098 0.02064-0.5812 0.05743-0.86812 0.10559-0.28692 0.04821-0.57169 0.10855-0.85249 0.1838-0.28078 0.07523-0.56033 0.16419-0.83292 0.26592-0.20042 0.07475-0.39157 0.16924-0.58656 0.25808 0.10353 1.8023-0.29725 3.6553-1.2709 5.3417-0.97364 1.6864-2.38 2.9582-3.9926 3.7697 0.02056 0.2133 0.03885 0.42645 0.07429 0.63741 0.0482 0.28692 0.10854 0.57168 0.18379 0.85249 0.07524 0.28079 0.1642 0.56035 0.26592 0.83291 0.10171 0.2726 0.21648 0.53936 0.34412 0.80165 2.4024-1.0589 4.5049-2.8448 5.9126-5.283 1.4077-2.4383 1.9071-5.1562 1.6228-7.7662zm-14.985 3.3004-1.8614 1.0793c2.3932 4.801 0.67248 10.702-4.0356 13.421-4.6849 2.7048-10.629 1.2814-13.604-3.1401 3.8616 5.9503 11.758 7.9008 17.972 4.3132 1.5053-0.86907 2.7751-1.9894 3.7931-3.273 1.0381 1.3493 2.3519 2.5212 3.9183 3.4255 6.2209 3.5917 14.127 1.6332 17.984-4.3328-2.9704 4.4407-8.9227 5.8772-13.616 3.1675-4.7378-2.7354-6.4495-8.6935-3.9887-13.511l-1.9357-1.1184c-0.56569 0.62984-1.3868 1.0284-2.2993 1.0284-0.92758 0-1.7603-0.41179-2.3267-1.0597z" />
</svg> scaled to a height of 0.8 em.</p>
<img alt="../../../docs/user/rst/images/biohazard.svg" class="align-left" loading="lazy" src="../../../docs/user/rst/images/biohazard.svg" style="width: 1.5em; height: 1.5em;" />
<p>The <span class="docutils literal">:loading:</span> option of <a class="reference external" href="../../../docs/ref/rst/directives.html#images">“image” and “figure” directives</a> overrides the
<a class="reference external" href="https://docutils.sourceforge.io/docs/user/config.html#image-loading">image_loading</a> setting for the respective image.</p>
<aside class="footnote-list brackets">
<aside class="footnote brackets" id="footnote-1" role="doc-footnote">
<span class="label"><span class="fn-bracket">[</span><a role="doc-backlink" href="#footnote-reference-1">1</a><span class="fn-bracket">]</span></span>
<p>Videos are only embedded if indicated in the
<a class="reference external" href="../../../docs/ref/rst/directives.html#images">“image” directive</a>’s “loading” option.</p>
</aside>
</aside>
</section>
<section id="moving-images-video">
<h2><a class="toc-backref" href="#contents" role="doc-backlink">Moving images (video)</a><a class="self-link" title="link to this section" href="#moving-images-video"></a></h2>
<p>If the URL given to <cite>images and figures</cite> hints to a video format
supported by HTML 5 (MIME types ‘video/mp4’, ‘video/webm’, or
‘video/ogg’), the HTML5 writer will place it in a <a class="reference external" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video">video element</a>.</p>
<video class="align-left" src="../../../docs/user/rst/images/pens.mp4" title="left-aligned test video">
<a href="../../../docs/user/rst/images/pens.mp4">left-aligned test video</a>
</video>
<p>A class option value “controls” tells the browser to display controls
for video playback.</p>
<p>It is a good idea to include width and height attributes. If
height and width are not set, the page might flicker while the video
loads. According to the <a class="reference external" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video">HTML5 spec</a>, hight and width must be
specified as pixel values.</p>
<figure class="align-center">
<video controls="controls" src="../../../docs/user/rst/images/pens.mp4" style="width: 200px;" title="test video in a figure">
<a href="../../../docs/user/rst/images/pens.mp4">test video in a figure</a>
</video>
<figcaption>
<p>Simple test video in a centered figure</p>
</figcaption>
</figure>
<p>A video like this <video src="../../../docs/user/rst/images/pens.mp4" style="width: 60px;" title="rotating pens video"><a href="../../../docs/user/rst/images/pens.mp4">rotating pens video</a></video> can be included inline via substitution.</p>
</section>
</main>
</body>
</html>
|
