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="generator" content="Docutils 0.21b.dev: 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" />
  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. You can link to it with the <a class="reference external" href="https://docutils.sourceforge.io/docs/ref/rst/restructuredtext.html#hyperlink-references">phrase
 104 reference</a> “<a class="reference internal" href="#substitutions-fail">substitutions fail</a>”.
 105 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
 106 normalization</a> of the section’s reference name.</p>
 107 </section>
 108 </section>
 109 <section id="embedded-images">
 110 <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>
 111 <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
 112 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
 113 directly included, other images are <a class="reference external" href="https://en.wikipedia.org/wiki/Base64">base64</a> encoded and included
 114 as a <a class="reference external" href="https://en.wikipedia.org/wiki/Data_URI_scheme">data URI</a>.</p>
 115 <figure class="align-left" style="width: 45%">
 116 <img alt="biohazard" class="align-center" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABGdBTUEAANkE3LLaAgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAZQTFRF////AAAAVcLTfgAAAAF0Uk5TAEDm2GYAAAA2SURBVHicYmBRYOAQYJCQYJC+wSBjAUL2fxjq6hgueTNM7AQh3g0MzAdAiP0BUBYAAAD//wMA4pkLDrFBDzUAAAAASUVORK5CYII=" style="width: 2em;" />
 117 <figcaption>
 118 <p>Embedded PNG image in a figure.</p>
 119 </figcaption>
 120 </figure>
 121 <figure class="align-right" style="width: 45%">
 122 <svg xmlns="http://www.w3.org/2000/svg" class="caution-mark bw align-center" viewBox="0 0 48 48" style="width: 2em;">
 123  <title>Biohazard</title>
 124  <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" />
 125 </svg>
 126 <figcaption>
 127 <p>Embedded SVG image in a figure.</p>
 128 </figcaption>
 129 </figure>
 130 <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
 131 <svg xmlns="http://www.w3.org/2000/svg" class="caution-mark bw" viewBox="0 0 48 48" style="height: 0.8em;">
 132  <title>Biohazard</title>
 133  <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" />
 134 </svg> scaled to a height of 0.8 em.</p>
 135 <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;" />
 136 <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
 137 <a class="reference external" href="https://docutils.sourceforge.io/docs/user/config.html#image-loading">image_loading</a> setting for the respective image.</p>
 138 <aside class="footnote-list brackets">
 139 <aside class="footnote brackets" id="footnote-1" role="doc-footnote">
 140 <span class="label"><span class="fn-bracket">[</span><a role="doc-backlink" href="#footnote-reference-1">1</a><span class="fn-bracket">]</span></span>
 141 <p>Videos are only embedded if indicated in the
 142 <a class="reference external" href="../../../docs/ref/rst/directives.html#images">“image” directive</a>’s “loading” option.</p>
 143 </aside>
 144 </aside>
 145 </section>
 146 <section id="moving-images-video">
 147 <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>
 148 <p>If the URL given to <cite>images and figures</cite> hints to a video format
 149 supported by HTML 5 (MIME types ‘video/mp4’, ‘video/webm’, or
 150 ‘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>
 151 <video class="align-left" src="../../../docs/user/rst/images/pens.mp4" title="left-aligned test video">
 152 <a href="../../../docs/user/rst/images/pens.mp4">left-aligned test video</a>
 153 </video>
 154 <p>A class option value “controls” tells the browser to display controls
 155 for video playback.</p>
 156 <p>It is a good idea to include width and height attributes. If
 157 height and width are not set, the page might flicker while the video
 158 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
 159 specified as pixel values.</p>
 160 <figure class="align-center">
 161 <video controls="controls" src="../../../docs/user/rst/images/pens.mp4" style="width: 200px;" title="test video in a figure">
 162 <a href="../../../docs/user/rst/images/pens.mp4">test video in a figure</a>
 163 </video>
 164 <figcaption>
 165 <p>Simple test video in a centered figure</p>
 166 </figcaption>
 167 </figure>
 168 <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>
 169 </section>
 170 </main>
 171 </body>
 172 </html>