<section>
  <header>
    
    <h3>Tales of the last Lorekeeper</h3>
  </header>
  <p>
    The paintings that cover the walls of this tower... These are the history of humanity and of nature itself. They're the tales that have been passed down by my ancestors for thousands of years.
  </p>
  <aside>
    
    <p>
      The people had a wish—a memory from a thousand years before...
    </p>
  </aside>
  <p>
    Thousands of years ago, in the primal age long lost, the world was overflowing with natural energy. People could do nothing. The only choice was to watch as disaster upon disaster swept over
    them.
  </p>
  <p>
    It was in such a time that a great many meteoroids poured from the darkness of space, from a place higher even than the heavens.
  </p>
  <footer>
    
    <i class="muted">— Zinnia</i>
  </footer>
</section>

<article>
  <header>
    <h1>
      <img src="https://www.pokepedia.fr/images/c/c0/Miniature_0252_RS.gif" alt>
      Treecko
    </h1>
  </header>
  <p>
    Treecko has small hooks on the bottom of its feet that enable it to scale vertical walls. This Pokémon attacks by slamming foes with its thick tail.
  </p>
  <footer class="muted">
    #0252
  </footer>
</article>
<article>
  <header>
    <h1>
      <img src="https://www.pokepedia.fr/images/5/55/Miniature_0255_RS.gif" alt>
      Torchic
    </h1>
  </header>
  <p>
    Torchic sticks with its Trainer, following behind with unsteady steps. This Pokémon breathes fire of over 1,800 degrees F, including fireballs that leave the foe scorched black.
  </p>
  <footer class="muted">
    #0255
  </footer>
</article>
<article>
  <header>
    <h1>
      <img src="https://www.pokepedia.fr/images/5/56/Miniature_0258_RS.gif" alt>
      Mudkip
    </h1>
  </header>
  <p>
    The fin on Mudkip's head acts as highly sensitive radar. Using this fin to sense movements of water and air, this Pokémon can determine what is taking place around it without using its eyes.
  </p>
  <footer class="muted">
    #0258
  </footer>
</article>

<hr>

<menu>
  <li>
    Viennoiseries
    <menu>
      <li>Croissant</li>
      <li>Éclair</li>
      <li>
        Tartelettes
        <menu>
          <li>Aux mûres</li>
          <li>Aux framboises</li>
          <li class="disabled">Aux fraises</li>
        </menu>
      </li>
      <li>Pain au chocolat</li>
    </menu>
  </li>
  <li class="selected">Macarons</li>
  <li class="disabled">Pain perdu</li>
</menu>

<hgroup>
  <h1 id="hgroup-example"><a href="#">Edge of the abyss</a></h1>
  <p>The 1<sup>st</sup> layer is the most shallow section of the Abyss, right below the town of Orth.</p>
</hgroup>

<h1 id="h1-example"><a href="#">Forest of Temptation</a></h1>
<h2 id="h2-example"><a href="#">Great Fault</a></h2>
<h3 id="h3-example"><a href="#">The Goblets of Giants</a></h3>
<h4 id="h4-example"><a href="#">Sea of Corpses</a></h4>
<h5 id="h5-example"><a href="#">The Capital of the Unreturned</a></h5>
<h6 id="h6-example"><a href="#">The Final Maelstrom</a></h6>

<p>
  All creatures want to believe in something bigger than themselves. They cannot live without blind obedience. And to escape the pressure of that trust, those in whom faith is placed in turn look
  for someone higher than themselves. And then those people in turn look for someone even stronger.
</p>
<p>
  That is how all Kings are born.
</p>
<p>
  That is how all Gods are born.
</p>

<blockquote>
  <h3>Serial Experiments Lain</h3>
  <p>
    I think that my little girl has, perhaps, become obsessed with the Wired. It's just an advanced medium for communication. Don't get it confused with the real world.
  </p>
  <cite>Mr. Iwakura</cite>
</blockquote>

<pre><!--
   --><code>(<span class="hljs-name">defun</span> print-world (<span class="hljs-name">world</span> generations)
  (<span class="hljs-name">let</span> ((<span class="hljs-name">lim</span> (<span class="hljs-name">world-size</span> world))
    (<span class="hljs-name">current</span> (<span class="hljs-name">world-current</span> world)))
(<span class="hljs-name">dotimes</span> (<span class="hljs-name">y</span> lim)
  (<span class="hljs-name">dotimes</span> (<span class="hljs-name">x</span> lim)
    (<span class="hljs-name">if</span> (<span class="hljs-name">zerop</span> (<span class="hljs-name">bit</span> current y x))
        (<span class="hljs-name">princ</span> <span class="hljs-string">" "</span>)
        (<span class="hljs-name">princ</span> <span class="hljs-string">"*"</span>)))
  (<span class="hljs-name">terpri</span>))
(<span class="hljs-name">format</span> <span class="hljs-literal">t</span> <span class="hljs-string">"~&amp;~d Generations, ~d Organisms."</span>
        generations (<span class="hljs-name">world-numdots</span> world))))</code><!--
 --></pre>

<figure>
  <figcaption>
    Éternara's <a href="https://www.pokepedia.fr/Conseil_4#Conseil_4_d'%C3%89ternara" target="_blank">Elite Four</a>
  </figcaption>
  <img loading="lazy" src="https://www.pokepedia.fr/images/2/2c/Damien-ROSA.png" height="150" alt="Damien">
  <img loading="lazy" src="https://www.pokepedia.fr/images/f/fc/Spectra-ROSA.png" height="150" alt="Spectra">
  <img loading="lazy" src="https://www.pokepedia.fr/images/7/75/Glacia-ROSA.png" height="150" alt="Glacia">
  <img loading="lazy" src="https://www.pokepedia.fr/images/f/f9/Aragon-ROSA.png" height="150" alt="Aragon">
</figure>

<details open>
  <summary>Death Note — How to use it</summary>
  <ol>
    <li>The human whose name is written in this note shall die.</li>
    <li>This note will not take effect unless the writer has the person's face in their mind when writing his/her name. Therefore, people sharing the same name will not be affected.</li>
    <li>If the cause of death is written within the next 40 seconds of writing the person's name, it will happen.</li>
    <li>If the cause of death is not specified, the person will simply die of a heart attack.</li>
    <li>After writing the cause of death, details of the death should be written in the next 6 minutes and 40 seconds.</li>
  </ol>
</details>

<dialog open>
  <header>
    <h2>WANTED — Dead or Alive</h2>
  </header>
  <p>
    <b><strong>Gol D. Roger</strong></b>
    <br>
    <b>฿5,564,800,000</b>
  </p>
  <p>
    Kono sakuhin ha fiction dethunode jitsuzaisuru jinbutsu dantai sonota no soshiki to doitsu no meishou ga gekichu ni toujyou shitatoshitemo jitsuzai na monotoha issai mukankeideth.
  </p>
  <footer>
    <form method="dialog">
      <button type="button">Fullscreen</button>
      <button type="submit">Close</button>
    </form>
  </footer>
</dialog>

List of <a href="https://en.wikipedia.org/wiki/Communes_of_the_Somme_department" target="_blank">Communes of the Somme department</a>.

<p>
  Bay of the <abbr>Authie</abbr>.
</p>
<p>
  Bay of the <abbr data-title="The Somme is a river in Picardy, France">Somme</abbr>.
</p>

<b>Fort-Mahon-Plage</b>

<i>Crécy-en-Ponthieu</i>

<p>
  <u>Saint-Valery-sur-Somme</u>
</p>
<p>
  <u><u>Fontaine-sur-Somme</u></u>
</p>

<p>
  <s>Le Crotoy</s>
</p>
<p>
  <s><s>Estrées-sur-Noye</s></s>
</p>

<q>Noyelles-sur-Mer</q>

<cite>Ribemont-sur-Ancre</cite>

<dfn>Rosières-en-Santerre</dfn>

<em>Neuville-au-Bois</em>

<strong>Montauban-de-Picardie</strong>

<small>Mers-les-Bains</small>

<ruby>亚眠<rp>(</rp><rt>Amiens</rt><rp>)</rp> </ruby>

Cayeux <sup>sur-Mer</sup>

Saulchoy <sub>sous-Poix</sub>

<mark>Saint-Aubin-Rivière</mark>

<ins>Longpré-les-Corps-Saints</ins>

<del>Montigny-sur-l'Hallue</del>

<code>Le Plessier-Rozainvillers</code>

<var>Fort-de-France</var>

<kbd>Port-le-Grand</kbd>

<samp>Regnière-Écluse</samp>

<output>Hardecour-aux-Bois</output>

<form method="get" onsubmit="event.preventDefault()">
  <label>
    Remove OS chip ?
    <small>
      Caution: Handle with Care !<br>
      Removal of OS chip will result in death.
    </small>
    <button type="reset">Confirm</button>
  </label>
</form>

<form method="get" onsubmit="event.preventDefault()">
  <button type="button">Button</button>
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
  <button type="button" disabled>Disabled</button>
</form>

<form method="get" onsubmit="event.preventDefault()">
  <label>
    Why did humans disappear from the world ?
    <small>To whom does the true voice speak, I ask.</small>
    <select>
      <option>Because of a black disease.</option>
      <option>Because their lives are short.</option>
    </select>
  </label>
  <label>
    How can humans extends their lives ?
    <small>To whom does the true form show itself, I ask.</small>
    <select disabled>
      <option>By separating body from soul.</option>
      <option>By acquiring leaves of the sacred tree.</option>
    </select>
  </label>
  <label>
    What is the destination of souls ?
    <small>I ask.</small>
    <select required>
      <option>They are placed in their corresponding shells.</option>
      <option>They are in the promised land, bursting with light.</option>
    </select>
  </label>
</form>

<form method="get" onsubmit="event.preventDefault()">
  <fieldset>
    <legend>Character selection</legend>
    <label>
      <input type="radio" name="fieldset-example" value="2B">
      2B
    </label>
    <label>
      <input type="radio" name="fieldset-example" value="9S">
      9S
    </label>
    <label>
      <input type="radio" name="fieldset-example" value="A2">
      A2
    </label>
  </fieldset>
</form>

<form method="get" onsubmit="event.preventDefault()">
  <fieldset>
    <legend>Textual</legend>
    <label>
      Text:
      <input type="text" placeholder="Operator 6O">
    </label>
    <label>
      Number:
      <input type="number" placeholder="1.22474487139">
    </label>
    <label>
      Password:
      <input type="password" placeholder="●●●●●●●●">
    </label>
    <label>
      Email:
      <input type="email" placeholder="no-reply@yorha.org">
    </label>
    <label>
      URL:
      <input type="url" placeholder="https://yorha.org">
    </label>
    <label>
      Telephone:
      <input type="tel" placeholder="167-82-57-83">
    </label>
  </fieldset>
  <fieldset>
    <legend>Temporal</legend>
    <label>
      Datetime local:
      <input type="datetime-local">
    </label>
    <label>
      Date:
      <input type="date">
    </label>
    <label>
      Month:
      <input type="month">
    </label>
    <label>
      Week:
      <input type="week">
    </label>
    <label>
      Time:
      <input type="time">
    </label>
  </fieldset>
  <fieldset>
    <legend>Special</legend>
    <label>
      Range:
      <input type="range">
    </label>
    <label>
      Search:
      <input type="search" placeholder="Lunar tear">
    </label>
    <label>
      Color:
      <input type="color">
    </label>
    <label>
      File:
      <input type="file">
    </label>
  </fieldset>
  <fieldset>
    <legend>Radio &amp; Checkbox</legend>
    <div>
      <label>
        <input type="radio" name="input-radio-example" value="2B">
        2B
      </label>
      <label>
        <input type="radio" name="input-radio-example" value="9S">
        9S
      </label>
      <label>
        <input type="radio" name="input-radio-example" value="A2" checked>
        A2
      </label>
      <label>
        <input type="radio" name="input-radio-example" value="2P" disabled>
        2P
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox" name="input-checkbox-example" value="Nier" checked>
        Nier
      </label>
      <label>
        <input type="checkbox" name="input-checkbox-example" value="Emil">
        Emil
      </label>
      <label>
        <input type="checkbox" name="input-checkbox-example" value="Kainé">
        Kainé
      </label>
      <label>
        <input type="checkbox" name="input-checkbox-example" value="Weiss" disabled>
        Weiss
      </label>
    </div>
  </fieldset>
  <fieldset>
    <legend>Button</legend>
    <label>
      <input type="image" src="https://upload.wikimedia.org/wikipedia/commons/b/b4/Yoko_Taro_cropped.jpg" alt="(Image)">
    </label>
    <label>
      <input type="button" value="Button">
    </label>
    <label>
      <input type="reset" value="Reset">
    </label>
    <label>
      <input type="submit" value="Submit">
    </label>
  </fieldset>
</form>

<form method="get" onsubmit="event.preventDefault()">
  <label>
    Select a location:
    <select>
      <optgroup label="Earth">
        <option>City ruins</option>
        <option>Desert</option>
        <option>Forest</option>
        <option disabled>Amusement park</option>
        <option>Alien Mothership</option>
      </optgroup>
      <optgroup label="Moon" disabled>
        <option>Bunker</option>
      </optgroup>
    </select>
  </label>
</form>

<form method="get" onsubmit="event.preventDefault()">
  <label>
    Remembrance:
    <small>Look at my memory.</small>
    <textarea rows="4">The tree did not feel sadness at this; grief was an emotion beyond its comprehension.
It did, however, have the distinct feeling that something was missing.
    </textarea>
  </label>
</form>

<progress max="100" value="50"></progress>

<meter min="0" max="100" low="40" high="70" optimum="99" value="33"></meter>
<meter min="0" max="100" low="40" high="70" optimum="99" value="66"></meter>
<meter min="0" max="100" low="40" high="70" optimum="99" value="100"></meter>

<dl>
  <dt>The Wired</dt>
  <dd>
    An ever developing, evolving virtual world similar to the real world's current internet of the early 2000s. It can be accessed through a Navi. It is an interconnected network, similar to
    Internet/World Wide Web.
  </dd>
</dl>

<ul>
  <li>EVA-00: Rei Ayanami</li>
  <li>EVA-01: Shinji Ikari</li>
  <li>EVA-02: Asuka Langley Sohryu</li>
  <li>EVA-03: Tōji Suzuhara</li>
</ul>

<ol>
  <li>Adam</li>
  <li>Lilith</li>
  <li>Tabris</li>
  <li>Lilin</li>
</ol>

<div class="table-responsive">
  <table class="center">
    <caption>Table of type effectiveness</caption>
    <thead>
      <tr>
        <th colspan="2" rowspan="2">×</th>
        <th colspan="4">Defending type</th>
      </tr>
      <tr>
        <th>🍃</th>
        <th>🔥</th>
        <th>💧</th>
        <th>⚡</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th rowspan="4"><div>Attacking type</div></th>
        <th>🍃</th>
        <td>½</td>
        <td>½</td>
        <td>2</td>
        <td>1</td>
      </tr>
      <tr>
        <th>🔥</th>
        <td>2</td>
        <td>½</td>
        <td>½</td>
        <td>1</td>
      </tr>
      <tr>
        <th>💧</th>
        <td>½</td>
        <td>2</td>
        <td>½</td>
        <td>1</td>
      </tr>
      <tr>
        <th>⚡</th>
        <td>½</td>
        <td>1</td>
        <td>2</td>
        <td>½</td>
      </tr>
    </tbody>
  </table>
</div>

<img loading="lazy" src="https://upload.wikimedia.org/wikipedia/commons/d/d6/Lulu_-_Samoyed_in_Snow.jpg" alt="Samoyed in Snow">

<video loading="lazy" controls muted poster="//upload.wikimedia.org/wikipedia/commons/thumb/d/da/Paris_lockdown_-_Vimeo.webm/800px--Paris_lockdown_-_Vimeo.webm.jpg">
  <source src="https://upload.wikimedia.org/wikipedia/commons/d/da/Paris_lockdown_-_Vimeo.webm" type="video/mp4">
</video>

<iframe loading="lazy" title="example.com" height="420" src="https://example.com" sandbox></iframe>

<form method="get" onsubmit="event.preventDefault()">
  <label>
    URL:
    <small>Type an URL below. If it is valid, it'll appear in <code><span class="success">◉</span> --success</code> while it'll appear in <code><span class="danger">◉</span> --danger</code> if
      not.</small>
    <input required type="url" placeholder="https://example.com">
  </label>
</form>

<div class="example-shadow-root" data-color-scheme="light">
  <template shadowrootmode="open">
    <section class="example-shadow-root-content">
      <img src="https://i.scdn.co/image/ab67616d0000b2739e74a476f1e5ad65918341cc" alt>
      <aside>
        <b>Shadowlord</b>
        <br>
        <small>岡部啓一 (Keiichi Okabe) · NieR Gestalt &amp; Replicant Original Soundtrack · 2010</small>
        <audio src controls></audio>
      </aside>
    </section>
    <style>
      @import "/matcha.css";
    </style>
    <style>
      @import "/examples/shadow-root/styles.css";
    </style>
  </template>
</div>