Abbreviation

Puxl is a CSS tool.
Puxl is a <abbr title="Cascading Style Sheets">CSS</abbr> tool.
abbr tag.

Blockquote

The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect.

Itaque prima illa commendatio, quae a natura nostri facta est nobis, incerta et obscura est, primusque appetitus ille animi tantum agit, ut salvi atque integri esse possimus.

Itaque prima illa commendatio, quae a natura nostri facta est nobis, incerta et obscura est, primusque appetitus ille animi tantum agit, ut salvi atque integri esse possimus.

Itaque prima illa commendatio, quae a natura nostri facta est nobis, incerta et obscura est, primusque appetitus ille animi tantum agit, ut salvi atque integri esse possimus.

Itaque prima illa commendatio, quae a natura nostri facta est nobis, incerta et obscura est, primusque appetitus ille animi tantum agit, ut salvi atque integri esse possimus.

Itaque prima illa commendatio, quae a natura nostri facta est nobis, incerta et obscura est, primusque appetitus ille animi tantum agit, ut salvi atque integri esse possimus.

<blockquote cite="https://www.w3.org/standards/webdesign/accessibility">
  <p>The power of the Web is in its universality.
  <br>
  Access by everyone regardless of disability is an essential aspect.</p>
  <footer>
    <cite>
      <a href="http://webfoundation.org/about/sir-tim-berners-lee/">Tim Berners-Lee</a>, <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium (W3C)">W3C</abbr></a> Director and inventor of the World Wide Web.
    </cite>
  </footer>
</blockquote>

<blockquote>
  Itaque prima illa commendatio, quae a natura nostri facta est nobis, incerta et obscura est, primusque appetitus ille animi tantum agit, ut salvi atque integri esse possimus.
</blockquote>

<blockquote>
  <blockquote>
    <p>Itaque prima illa commendatio, quae a natura nostri facta est nobis, incerta et obscura est, primusque appetitus ille animi tantum agit, ut salvi atque integri esse possimus.</p>
    <p>Itaque prima illa commendatio, quae a natura nostri facta est nobis, incerta et obscura est, primusque appetitus ille animi tantum agit, ut salvi atque integri esse possimus.</p>
    <p>Itaque prima illa commendatio, quae a natura nostri facta est nobis, incerta et obscura est, primusque appetitus ille animi tantum agit, ut salvi atque integri esse possimus.</p>
  </blockquote>
  <p>Itaque prima illa commendatio, quae a natura nostri facta est nobis, incerta et obscura est, primusque appetitus ille animi tantum agit, ut salvi atque integri esse possimus.</p>
</blockquote>
blockquote tag.

Bold

Lorem ipsum dolor sit amet.
Lorem <b>ipsum</b> dolor sit <strong>amet</strong>.
b, strong tags.

Code

<html></html>
Si vero id etiam explanare velles apertiusque diceres nihil eum fecisse nisi voluptatis causa, quo modo eum tandem laturum fuisse existimas? Nam omnia, quae sumenda quaeque legenda aut optanda sunt, inesse debent in summa bonorum, ut is, qui eam adeptus sit, nihil praeterea desideret.
'Hello world!'
<code><html></html></code>

<pre>Si vero id etiam explanare velles apertiusque diceres nihil eum fecisse nisi voluptatis causa, quo modo eum tandem laturum fuisse existimas? Nam omnia, quae sumenda quaeque legenda aut optanda sunt, inesse debent in summa bonorum, ut is, qui eam adeptus sit, nihil praeterea desideret.</pre>

<samp>'Hello world!'</samp>
code, pre, and samp tags.

Definition list

Haeret in salebra.
Non enim iam stirpis bonum quaeret, sed animalis.
Quid de Pythagora?
Vide ne ista sint Manliana vestra aut maiora etiam, si imperes quod facere non possim.
Explanetur igitur.
Addo etiam illud, multa iam mihi dare signa puerum et pudoris et ingenii, sed aetatem vides.
Illa argumenta propria videamus, cur omnia sint paria peccata.
<dl>
  <dt>Haeret in salebra.</dt>
  <dd>Non enim iam stirpis bonum quaeret, sed animalis.</dd>
  <dt>Quid de Pythagora?</dt>
  <dd>Vide ne ista sint Manliana vestra aut maiora etiam, si imperes quod facere non possim.</dd>
  <dt>Explanetur igitur.</dt>
  <dd>Addo etiam illud, multa iam mihi dare signa puerum et pudoris et ingenii, sed aetatem vides.</dd>
  <dd>Illa argumenta propria videamus, cur omnia sint paria peccata.</dd>
</dl>
dl, dt and dd tags.
Horizontal definition list
Haeret in salebra.
Non enim iam stirpis bonum quaeret, sed animalis.
Quid de Pythagora?
Vide ne ista sint Manliana vestra aut maiora etiam, si imperes quod facere non possim.
Explanetur igitur.
Addo etiam illud, multa iam mihi dare signa puerum et pudoris et ingenii, sed aetatem vides.
Illa argumenta propria videamus, cur omnia sint paria peccata.
<dl class="h">
  <dt>...</dt>
  <dd>...</dd>
</dl>
dl with class="h".

Definition

HTML is a markup language for hypertexts.
<dfn>HTML</dfn> is a markup language for hypertexts.
dfn tag.

Heading and small text

h1 Illa videamus. Small text

h2 Illa videamus. Small text

h3 Illa videamus. Small text

h4 Illa videamus. Small text

h5 Illa videamus. Small text
h6 Illa videamus. Small text
<h1><code>h1</code> Illa videamus. <small>Small text</small></h1>
<h2><code>h2</code> Illa videamus. <small>Small text</small></h2>
<h3><code>h3</code> Illa videamus. <small>Small text</small></h3>
<h4><code>h4</code> Illa videamus. <small>Small text</small></h4>
<h5><code>h5</code> Illa videamus. <small>Small text</small></h5>
<h6><code>h6</code> Illa videamus. <small>Small text</small></h6>
h1 to h6 using small tag.

Italic

Lorem ipsum dolor sit amet.
Lorem <i>ipsum</i> dolor sit <em>amet</em>.
i and em tags.

Keyboard

ctrl + s
<kbd><abbr title="Control">ctrl</abbr></kbd> + <kbd>s</kbd>
kbd tag.

List

Ordered list
  1. Bat
  2. Bi
  3. Hiru
  4. Lau
  5. Bost
  6. Sei
    1. Beste bat
    2. Beste bi
    3. Beste hiru
    4. Beste lau
  7. Zazpi
  8. Zortzi
  9. Bederatzi
  10. Hamar
<ol>
  <li>Bat</li>
  <li>Bi</li>
  <li>Hiru</li>
  <li>Lau</li>
  <li>Bost</li>
  <li>Sei
    <ol>
      <li>Beste bat</li>
      <li>Beste bi</li>
      <li>Beste hiru</li>
      <li>Beste lau</li>
    </ol>
  </li>
  <li>Zazpi</li>
  <li>Zortzi</li>
  <li>Bederatzi</li>
  <li>Hamar</li>
</ol>
ol tag with nested ordered list.
Unordered list
  • Quamquam haec quidem praeposita recte et reiecta dicere licebit.
  • Nec enim, omnes avaritias si aeque avaritias esse dixerimus, sequetur ut etiam aequas esse dicamus.
  • Quid enim possumus hoc agere divinius.
    • Quamquam haec quidem praeposita.
    • Nec enim, omnes avaritias.
    • Quid enim possumus hoc agere divinius.
    • Desideraret enim valitudinem.
  • Desideraret enim valitudinem.
<ul>
  <li>Quamquam haec quidem praeposita recte et reiecta dicere licebit.</li>
  <li>Nec enim, omnes avaritias si aeque avaritias esse dixerimus, sequetur ut etiam aequas esse dicamus.</li>
  <li>
    Quid enim possumus hoc agere divinius.
    <ul>
      <li>Quamquam haec quidem praeposita.</li>
      <li>Nec enim, omnes avaritias.</li>
      <li>Quid enim possumus hoc agere divinius.</li>
      <li>Desideraret enim valitudinem.</li>
    </ul>
  </li>
  <li>Desideraret enim valitudinem.</li>
</ul>
ul tag with nested unordered list.
Horizontal list
  1. Bat
  2. Bi
  3. Hiru
  4. Lau
  5. Bost
  6. Sei
  • Quamquam haec.
  • Nec enim.
  • Quid enim.
  • Desideraret.
<ol class="h">
  <li>Bat</li>
  <li>Bi</li>
  <li>Hiru</li>
  <li>Lau</li>
  <li>Bost</li>
  <li>Sei</li>
</ol>

<ul class="h">
  <li>Quamquam haec.</li>
  <li>Nec enim.</li>
  <li>Quid enim.</li>
  <li>Desideraret.</li>
</ul>
ol and ul tag with class="h".
Unlisted list
  1. Bat
  2. Bi
  3. Hiru
  4. Lau
  5. Bost
  6. Sei
  • Quamquam haec quidem praeposita.
  • Nec enim, omnes avaritias.
  • Quid enim possumus hoc.
  • Desideraret enim valitudinem.
<ol class="unlisted">
  <li>Bat</li>
  <li>Bi</li>
  <li>Hiru</li>
  <li>Lau</li>
  <li>Bost</li>
  <li>Sei</li>
</ol>

<ul class="unlisted">
  <li>Quamquam haec quidem praeposita.</li>
  <li>Nec enim, omnes avaritias.</li>
  <li>Quid enim possumus hoc.</li>
  <li>Desideraret enim valitudinem.</li>
</ul>
ol and ul tag with class="unlisted".

Mark

Lorem ipsum dolor sit amet.
Lorem ipsum <mark>dolor sit</mark> amet.
mark tag.

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a dictum nisl. Integer in pulvinar justo. Pellentesque fermentum suscipit consectetur. Pellentesque auctor, turpis ac blandit fermentum, magna felis scelerisque eros, eget porta tellus erat vitae tortor. Sed tellus magna, eleifend at justo vel, pulvinar pellentesque tortor.

Sed eleifend tempor tempor. Aliquam vitae lorem ac lectus imperdiet mollis et in lectus. Sed non nibh a diam euismod consectetur vitae vel leo. Morbi sed turpis vitae enim posuere suscipit.

Aliquam fermentum elementum malesuada. Suspendisse potenti. Maecenas ut augue at eros pulvinar gravida nec sit amet felis. Sed purus leo, cursus vitae luctus non, suscipit et ligula. Sed elementum rutrum nisl, sed sollicitudin nulla. Fusce pulvinar velit a justo varius maximus. Cras eu tempor est. Vestibulum ut turpis eu leo interdum pellentesque id nec risus.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a dictum nisl. Integer in pulvinar justo. Pellentesque fermentum suscipit consectetur. Pellentesque auctor, turpis ac blandit fermentum, magna felis scelerisque eros, eget porta tellus erat vitae tortor. Sed tellus magna, eleifend at justo vel, pulvinar pellentesque tortor.</p>

<p>Sed eleifend tempor tempor. Aliquam vitae lorem ac lectus imperdiet mollis et in lectus. Sed non nibh a diam euismod consectetur vitae vel leo. Morbi sed turpis vitae enim posuere suscipit.</p>

<p>Aliquam fermentum elementum malesuada. Suspendisse potenti. Maecenas ut augue at eros pulvinar gravida nec sit amet felis. Sed purus leo, cursus vitae luctus non, suscipit et ligula. Sed elementum rutrum nisl, sed sollicitudin nulla. Fusce pulvinar velit a justo varius maximus. Cras eu tempor est. Vestibulum ut turpis eu leo interdum pellentesque id nec risus.</p>
p tags.

Preformatted

Si vero id etiam explanare velles apertiusque diceres nihil eum fecisse nisi voluptatis causa, quo modo eum tandem laturum fuisse existimas? Nam omnia, quae sumenda quaeque legenda aut optanda sunt, inesse debent in summa bonorum, ut is, qui eam adeptus sit, nihil praeterea desideret.
Si vero id etiam explanare
    velles apertiusque diceres nihil
 eum fecisse nisi voluptatis causa,
  quo modo eum
  tandem laturum
fuisse existimas
Nam omnia, quae sumenda quaeque legenda.
<pre>Si vero id etiam explanare velles apertiusque diceres nihil eum fecisse nisi voluptatis causa, quo modo eum tandem laturum fuisse existimas? Nam omnia, quae sumenda quaeque legenda aut optanda sunt, inesse debent in summa bonorum, ut is, qui eam adeptus sit, nihil praeterea desideret.</pre>

<pre>Si vero id etiam explanare
    velles apertiusque diceres nihil
 eum fecisse nisi voluptatis causa,
  quo modo eum
  tandem laturum
fuisse existimas
Nam omnia, quae sumenda quaeque legenda.</pre>
pre tags.

Quotation

According to Mozilla's website, Firefox 1.0 was released in 2004 and became a big success.
According to Mozilla's website, <q cite="https://www.mozilla.org/en-US/about/history/details/">Firefox 1.0 was released in 2004 and became a big success.</q>
q tag.

Small

Lorem ipsum dolor sit amet.
Lorem ipsum <small>dolor sit</small> amet.
small tag.

Subscript and superscript

Loremipsum dolor sit amet, consecteturadipiscing elit.
Lorem<sub>ipsum</sub> dolor sit amet, consectetur<sup>adipiscing</sup> elit.
subscript and superscipt tags.

Thematic break

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a dictum nisl. Integer in pulvinar justo. Pellentesque fermentum suscipit consectetur. Pellentesque auctor, turpis ac blandit fermentum, magna felis scelerisque eros, eget porta tellus erat vitae tortor. Sed tellus magna, eleifend at justo vel, pulvinar pellentesque tortor.


Sed eleifend tempor tempor. Aliquam vitae lorem ac lectus imperdiet mollis et in lectus. Sed non nibh a diam euismod consectetur vitae vel leo. Morbi sed turpis vitae enim posuere suscipit.

<p>Lorem ipsum dolor sit...</p>

<hr>

<p>Sed eleifend tempor tempor...</p>
hr tag between two p tags.