docutils/test/functional/expected/misc_rst_html5.html

   1 <!DOCTYPE html>
   2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   3 <head>
   4 <meta charset="utf-8"/>
   5 <meta name="viewport" content="width=device-width, initial-scale=1" />
   6 <meta name="generator" content="Docutils 0.18.1: http://docutils.sourceforge.net/" />
   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" />
  11 </head>
  12 <body class="with-toc">
  13 <main id="additional-tests-with-html-5">
  14 <h1 class="title">Additional tests with HTML 5</h1>
  15
  16 <nav class="contents" id="contents" role="doc-toc">
  17 <p class="topic-title">Contents</p>
  18 <ul class="simple">
  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>
  21 <ul>
  22 <li><p><a class="reference internal" href="#level-2" id="toc-entry-3">Level 2</a></p>
  23 <ul>
  24 <li><p><a class="reference internal" href="#level-3" id="toc-entry-4">Level 3</a></p>
  25 <ul>
  26 <li><p><a class="reference internal" href="#level-4" id="toc-entry-5">level 4</a></p>
  27 <ul>
  28 <li><p><a class="reference internal" href="#level-5" id="toc-entry-6">level 5</a></p>
  29 <ul>
  30 <li><p><a class="reference internal" href="#level-6" id="toc-entry-7">level 6</a></p>
  31 <ul>
  32 <li><p><a class="reference internal" href="#level-7" id="toc-entry-8">level 7</a></p>
  33 <ul>
  34 <li><p><a class="reference internal" href="#level-8" id="toc-entry-9">level 8</a></p></li>
  35 </ul>
  36 </li>
  37 </ul>
  38 </li>
  39 </ul>
  40 </li>
  41 </ul>
  42 </li>
  43 </ul>
  44 </li>
  45 </ul>
  46 </li>
  47 </ul>
  48 </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>
  50 <ul>
  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>
  53 </ul>
  54 </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>
  57 </ul>
  58 </nav>
  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>
  61 </section>
  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>
  73 <p>a level</p>
  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>
  87 </section>
  88 </section>
  89 </section>
  90 </section>
  91 </section>
  92 </section>
  93 </section>
  94 </section>
  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>
  99 </section>
 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>
 105 </section>
 106 </section>
 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=" />
 116 <figcaption>
 117 <p>Embedded image in a figure.</p>
 118 </figcaption>
 119 </figure>
 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>
 121 </section>
 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>
 129 </video>
 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 class="controls" 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>
 139 </video>
 140 <figcaption>
 141 <p>Simple test video in a centered figure</p>
 142 </figcaption>
 143 </figure>
 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>
 145 </section>
 146 </main>
 147 </body>
 148 </html>