2 <html xmlns=
"http://www.w3.org/1999/xhtml" xml:
lang=
"en" lang=
"en">
4 <meta charset=
"utf-8" />
5 <meta name=
"generator" content=
"Docutils 0.20: https://docutils.sourceforge.io/" />
6 <meta name=
"viewport" content=
"width=device-width, initial-scale=1" />
7 <title>Additional tests with HTML
5</title>
8 <link rel=
"stylesheet" href=
"../input/data/minimal.css" type=
"text/css" />
9 <link rel=
"stylesheet" href=
"../input/data/responsive.css" type=
"text/css" />
10 <link rel=
"stylesheet" href=
"../input/data/math.css" type=
"text/css" />
12 <body class=
"with-toc">
13 <main id=
"additional-tests-with-html-5">
14 <h1 class=
"title">Additional tests with HTML
5</h1>
16 <nav class=
"contents" id=
"contents" role=
"doc-toc">
17 <p class=
"topic-title">Contents
</p>
19 <li><p><a class=
"reference internal" href=
"#section-heading-levels" id=
"toc-entry-1">Section heading levels
</a></p></li>
20 <li><p><a class=
"reference internal" href=
"#level-1" id=
"toc-entry-2">Level
1</a></p>
22 <li><p><a class=
"reference internal" href=
"#level-2" id=
"toc-entry-3">Level
2</a></p>
24 <li><p><a class=
"reference internal" href=
"#level-3" id=
"toc-entry-4">Level
3</a></p>
26 <li><p><a class=
"reference internal" href=
"#level-4" id=
"toc-entry-5">level
4</a></p>
28 <li><p><a class=
"reference internal" href=
"#level-5" id=
"toc-entry-6">level
5</a></p>
30 <li><p><a class=
"reference internal" href=
"#level-6" id=
"toc-entry-7">level
6</a></p>
32 <li><p><a class=
"reference internal" href=
"#level-7" id=
"toc-entry-8">level
7</a></p>
34 <li><p><a class=
"reference internal" href=
"#level-8" id=
"toc-entry-9">level
8</a></p></li>
49 <li><p><a class=
"reference internal" href=
"#section-titles-with-inline-markup" id=
"toc-entry-10">Section titles with inline markup
</a></p>
51 <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,
<span class=
"formula"><i>x
</i><sup>2</sup></span>, and references
</a></p></li>
52 <li><p><a class=
"reference internal" href=
"#substitutions-fail" id=
"toc-entry-12">Substitutions work
</a></p></li>
55 <li><p><a class=
"reference internal" href=
"#embedded-images" id=
"toc-entry-13">Embedded Images
</a></p></li>
56 <li><p><a class=
"reference internal" href=
"#moving-images-video" id=
"toc-entry-14">Moving images (video)
</a></p></li>
59 <section id=
"section-heading-levels">
60 <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>
62 <section id=
"level-1">
63 <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>
64 <p>Nested sections
</p>
65 <section id=
"level-2">
66 <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>
67 <p>reach at some level
</p>
68 <section id=
"level-3">
69 <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>
70 <p>(depending on the document class and output format)
</p>
71 <section id=
"level-4">
72 <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>
74 <section id=
"level-5">
75 <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>
76 <p>that is not supported by the output format.
</p>
77 <section id=
"level-6">
78 <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>
79 <p>Unsupported in LaTeX and HTML5
80 (HTML5 reserves the
1st level for the document title).
</p>
81 <section id=
"level-7">
82 <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>
83 <p>Unsupported in HTML4.
</p>
84 <section id=
"level-8">
85 <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>
86 <p>Unsupported in ODT.
</p>
95 <section id=
"section-titles-with-inline-markup">
96 <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>
97 <section id=
"emphasized-h2o-x-2-and-references">
98 <h3><em>emphasized
</em>, H
<sub>2</sub>O,
<span class=
"formula"><i>x
</i><sup>2</sup></span>, 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>
100 <section id=
"substitutions-fail">
101 <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>
102 <p>Note, that the “reference name” for this section is derived from the
103 content
<em>before
</em> substitution. This may be exploited to get intelligible
104 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>
107 <section id=
"embedded-images">
108 <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>
109 <p>The “embed” flag tells Docutils that it should
110 try to embed the image in the output document.
</p>
111 <p>If the image can be read from the local file system, it is
<a class=
"reference external" href=
"https://en.wikipedia.org/wiki/Base64">base64
</a>
112 encoded and included as a
<a class=
"reference external" href=
"https://en.wikipedia.org/wiki/Data_URI_scheme">data URI
</a>.
113 In future, SVG images may be directly inserted into HTML5.
</p>
114 <figure class=
"align-center">
115 <img alt=
"biohazard" src=
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABGdBTUEAANkE3LLaAgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAZQTFRF////AAAAVcLTfgAAAAF0Uk5TAEDm2GYAAAA2SURBVHicYmBRYOAQYJCQYJC+wSBjAUL2fxjq6hgueTNM7AQh3g0MzAdAiP0BUBYAAAD//wMA4pkLDrFBDzUAAAAASUVORK5CYII=" />
117 <p>Embedded image in a figure.
</p>
120 <p>Embedded inline image
<img alt=
"inline-embedded" src=
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABGdBTUEAANkE3LLaAgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAZQTFRF////AAAAVcLTfgAAAAF0Uk5TAEDm2GYAAAA2SURBVHicYmBRYOAQYJCQYJC+wSBjAUL2fxjq6hgueTNM7AQh3g0MzAdAiP0BUBYAAAD//wMA4pkLDrFBDzUAAAAASUVORK5CYII=" style=
"height: 0.8em;" /> scaled to a height of
0.8 em.
</p>
122 <section id=
"moving-images-video">
123 <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>
124 <p>If the URL given to
<cite>images and figures
</cite> hints to a video format
125 supported by HTML
5 (MIME types ‘video/mp4’, ‘video/webm’, or
126 ‘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>
127 <video class=
"align-left" src=
"../../../docs/user/rst/images/pens.mp4" title=
"left-aligned test video">
128 <a href=
"../../../docs/user/rst/images/pens.mp4">left-aligned test video
</a>
130 <p>A class option value “controls” tells the browser to display controls
131 for video playback.
</p>
132 <p>It is a good idea to include width and height attributes. If
133 height and width are not set, the page might flicker while the video
134 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
135 specified as pixel values.
</p>
136 <figure class=
"align-center">
137 <video controls=
"controls" src=
"../../../docs/user/rst/images/pens.mp4" title=
"test video in a figure" width=
"200">
138 <a href=
"../../../docs/user/rst/images/pens.mp4">test video in a figure
</a>
141 <p>Simple test video in a centered figure
</p>
144 <p>A video like this
<video src=
"../../../docs/user/rst/images/pens.mp4" title=
"rotating pens video" width=
"60"><a href=
"../../../docs/user/rst/images/pens.mp4">rotating pens video
</a></video> can be included inline via substitution.
</p>