Adapt Example HTML

adapt-examples.html

<h1>Text Content Elements</h1>

<!-- blockquote p -->
<blockquote cite="https://www.huxley.net/bnw/four.html">
  <p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
  <footer>—Aldous Huxley, <cite>Brave New World</cite></footer>
</blockquote>

<!-- dd dt dl -->
<p>Cryptids of Cornwall:</p>
<dl>
  <dt>Beast of Bodmin</dt>
  <dd>A large feline inhabiting Bodmin Moor.</dd>

  <dt>Morgawr</dt>
  <dd>A sea serpent.</dd>

  <dt>Owlman</dt>
  <dd>A giant owl-like creature.</dd>
</dl>

<!-- div -->
<div class="example-html">
  Lorem ipsum dolor sit amet.
</div>

<!-- figcaptio figure -->
<figure>
  <img src="/media/cc0-images/elephant-660-480.jpg" alt="Elephant at sunset" />
  <figcaption>An elephant at sunset</figcaption>
</figure>

<!-- hr -->
<p>§1: The first rule of Fight Club is: You do not talk about Fight Club.</p>
<hr />
<p>§2: The second rule of Fight Club is: Always bring cupcakes.</p>

<!-- li ul -->
<p>Apollo astronauts:</p>
<ul>
  <li>Neil Armstrong</li>
  <li>Alan Bean</li>
  <li>Peter Conrad</li>
  <li>Edgar Mitchell</li>
  <li>Alan Shepard</li>
</ul>

<!-- ol -->
<ol>
  <li>Mix flour, baking powder, sugar, and salt.</li>
  <li>In another bowl, mix eggs, milk, and oil.</li>
  <li>Stir both mixtures together.</li>
  <li>Fill muffin tray 3/4 full.</li>
  <li>Bake for 20 minutes.</li>
</ol>

<!-- menu -->
<div class="news">
  <a href="#">NASA’s Webb Delivers Deepest Infrared Image of Universe Yet</a>
  <menu>
    <li><button id="save">Save for later</button></li>
    <li><button id="share">Share this news</button></li>
  </menu>
</div>

<!-- pre -->
<pre>
  L          TE
    A       A
      C    V
       R A
       DOU
       LOU
      REUSE
      QUE TU
      PORTES
    ET QUI T'
    ORNE O CI
     VILISÉ
    OTE-  TU VEUX
     LA    BIEN
    SI      RESPI
            RER       - Apollinaire
</pre>

<h1>Inline Text Elements</h1>

<!-- a -->
<p>You can reach Michael at:</p>
<ul>
  <li><a href="https://example.com">Website</a></li>
  <li><a href="mailto:m.bluth@example.com">Email</a></li>
  <li><a href="tel:+123456789">Phone</a></li>
</ul>

<!-- abbr -->
<p>
  You can use <abbr>CSS</abbr> (Cascading Style Sheets) to style your <abbr>HTML</abbr> (HyperText Markup Language).
  Using style sheets, you can keep your <abbr>CSS</abbr> presentation layer and <abbr>HTML</abbr> content layer
  separate. This is called "separation of concerns."
</p>

<!-- b -->
<p>
  The two most popular science courses offered by the school are <b class="term">chemistry</b> (the study of chemicals
  and the composition of substances) and <b class="term">physics</b> (the study of the nature and properties of matter
  and energy).
</p>

<!-- dbi -->
<h1>World wrestling championships</h1>
<ul>
  <li><bdi class="name">Evil Steven</bdi>: 1st place</li>
  <li><bdi class="name">François fatale</bdi>: 2nd place</li>
  <li><span class="name">سما</span>: 3rd place</li>
  <li><bdi class="name">الرجل القوي إيان</bdi>: 4th place</li>
  <li><span class="name" dir="auto">سما</span>: 5th place</li>
</ul>

<!-- dbo -->
<h1>Famous seaside songs</h1>
<p>The English song "Oh I do like to be beside the seaside"</p>
<p>Looks like this in Hebrew: <span dir="rtl">אה, אני אוהב להיות ליד חוף הים</span></p>
<p>In the computer's memory, this is stored as <bdo dir="ltr">אה, אני אוהב להיות ליד חוף הים</bdo></p>

<!-- br -->
<p>
  O’er all the hilltops<br />
  Is quiet now,<br />
  In all the treetops<br />
  Hearest thou<br />
  Hardly a breath;<br />
  The birds are asleep in the trees:<br />
  Wait, soon like these<br />
  Thou too shalt rest.
</p>

<!-- cite -->
<figure>
  <blockquote>
    <p>It was a bright cold day in April, and the clocks were striking thirteen.</p>
  </blockquote>
  <figcaption>
    First sentence in <cite><a href="http://www.george-orwell.org/1984/0.html">Nineteen Eighty-Four</a></cite> by George
    Orwell (Part 1, Chapter 1).
  </figcaption>
</figure>

<!-- code -->
<p>
  The <code>push()</code> method adds one or more elements to the end of an array and returns the new length of the
  array.
</p>


<!-- data -->
<p>New Products:</p>
<ul>
  <li><data value="398">Mini Ketchup</data></li>
  <li><data value="399">Jumbo Ketchup</data></li>
  <li><data value="400">Mega Jumbo Ketchup</data></li>
</ul>

<!-- dfn -->
<p>A <dfn id="def-validator">validator</dfn> is a program that checks for syntax errors in code or documents.</p>

<!-- em -->
<p>Get out of bed <em>now</em>!</p>
<p>We <em>had</em> to do something about it.</p>
<p>This is <em>not</em> a drill!</p>

<!-- aside -->
<p>I looked at it and thought <i>This can't be real!</i></p>
<p><i>Musa</i> is one of two or three genera in the family <i>Musaceae</i>; it includes bananas and plantains.</p>
<p>
  The term <i>bandwidth</i> describes the measure of how much information can pass through a data connection in a given
  amount of time.
</p>

<!-- kbd -->
<p>Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to re-render an MDN page.</p>

<!-- mark -->
<p>Search results for "salamander":</p>
<hr />
<p>Several species of <mark>salamander</mark> inhabit the temperate rainforest of the Pacific Northwest.</p>
<p>Most <mark>salamander</mark>s are nocturnal, and hunt for insects, worms, and other small creatures.</p>

<!-- q -->
<p>
  When Dave asks HAL to open the pod bay door, HAL answers:
  <q cite="https://www.imdb.com/title/tt0062622/quotes/?item=qt0396921&ref_=ext_shr_lnk">
    I'm sorry, Dave. I'm afraid I can't do that.
  </q>
</p>

<!-- rp rt ruby -->
<ruby> 漢 <rp>(</rp><rt>kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp> </ruby>

<!-- s -->
<p><s>There will be a few tickets available at the box office tonight.</s></p>
<p>SOLD OUT!</p>

<!-- samp -->
<p>I was trying to boot my computer, but I got this hilarious message:</p>
<p>
  <samp>Keyboard not found <br />Press F1 to continue</samp>
</p>

<!-- small -->
<p>MDN Web Docs is a learning platform for Web technologies and the software that powers the Web.</p>
<hr />
<p><small>The content is licensed under a Creative Commons Attribution-ShareAlike 2.5 Generic License.</small></p>

<!-- span -->
<p>
  Add the <span class="ingredient">basil</span>, <span class="ingredient">pine nuts</span> and
  <span class="ingredient">garlic</span> to a blender and blend into a paste.
</p>
<p>Gradually add the <span class="ingredient">olive oil</span> while running the blender slowly.</p>

<!-- strong -->
<p>
  ... the most important rule, the rule you can never forget, no matter how much he cries, no matter how much he begs:
  <strong>never feed him after midnight</strong>.
</p>

<!-- sub -->
<p>
  Almost every developer's favorite molecule is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>, also known as
  "caffeine."
</p>

<!-- sup -->
<p>The <em>Pythagorean theorem</em> is often expressed as the following equation:</p>
<p>
  <var>a<sup>2</sup></var> + <var>b<sup>2</sup></var> = <var>c<sup>2</sup></var>
</p>

<!-- time -->
<p>
  The Cure will be celebrating their 40th anniversary on <time datetime="2018-07-07">July 7</time> in London's Hyde
  Park.
</p>
<p>
  The concert starts at <time datetime="20:00">20:00</time> and you'll be able to enjoy the band for at least
  <time datetime="PT2H30M">2h 30m</time>.
</p>

<!-- u -->
<p>You could use this element to highlight <u>speling</u> mistakes, so the writer can <u>corect</u> them.</p>

<!-- var -->
<p>
  The volume of a box is <var>l</var> × <var>w</var> × <var>h</var>, where <var>l</var> represents the length,
  <var>w</var> the width and <var>h</var> the height of the box.
</p>


<!-- wbr -->
<div id="example-paragraphs">
  <p>Fernstraßenbauprivatfinanzierungsgesetz</p>
  <p>Fernstraßen<wbr />bau<wbr />privat<wbr />finanzierungs<wbr />gesetz</p>
  <p>Fernstraßen&shy;bau&shy;privat&shy;finanzierungs&shy;gesetz</p>
</div>

<h1>Miscellaneous Elements</h1>

<!-- aside -->
<aside class="aside-pull-quote" role="doc-pullquote presentation" aria-hidden="true">
  Lorem ipsum dolor sit amet.
</aside>