<h1>Showcasing HTML text elements</h1>

<h2>Using <code>ins</code>, <code>del</code> and <code>s</code></h2>
  
<p>“I choose you, ”</p>
<del><p>“Pikachu!”</p></del>
<ins cite="../mostEffectiveElement.html" datetime="2024-01"><p>“Charmander!”</p></ins>
<p> I am so <s>lame</s> cool.</p>

<h2>Using <code>b</code> and <code>strong</code></h2>

<p>
  <strong>Charmander (Japanese: Hitokage)</strong> is a Fire-type Pokémon introduced in Generation I.

It evolves into Charmeleon starting at level 16, which evolves into Charizard starting at level 36.

  Along with <b>Bulbasaur</b> and <b>Squirtle</b>, <b>Charmander</b> is one of the <strong>three starter Pokémon of Kanto</strong> available at the beginning of Pokémon Red, Green, Blue, FireRed, and LeafGreen. 
</p>

<h2>Using <code>i</code>, <code>em</code> and <code>dfn</code></h2>

<p><dfn title="(Japanese: Lizardon)">Charizard</dfn> is a dual-type Fire/Flying Pokémon introduced in Generation I.

  It evolves from <i>Charmeleon</i> starting at level 36. It is the <em>final form of Charmander</em>. </p>

<h2>Using <code>code</code>, <code>kbd</code> and <code>samp</code></h2>

<p>The <code style="background: lightgrey;">push()</code> method adds one or more elements to the end of an array and returns the new length of the array.</p>
<p>Please press <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>A</kbd> to mark text.</p>
<p><samp>Keyboard not found <br />Press F1 to continue</samp>
</p>

<h2>Using <code>sub</code>, <code>sup</code> and <code>small</code></h2>

<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>

<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>

<p>These example are for learning purposes getting to know various HTML elements regarding text and its implemented visual represenation.</p>

<hr />

<p><small>The content is licensed under my brain 2.5 DotDot License.</small></p>
body {
    font-family: sans-serif;
}

del,
ins {
  display: block;
  margin: 1em;
  position: relative;
  text-decoration: none;
  width: fit-content;
}

del {
  background-color: #fbb;
}

ins {
  background-color: #d4fcbc;
}

del::before,
ins::before {
  font-family: monospace;
  left: 0.5rem;
  top: 0.5rem;
  position: absolute;
}

del::before {
  content: '−';
}

ins::before {
  content: '+';
}

del > p, ins > p {
  font-size: 2rem;
  margin: 0 1.5rem;
}

kbd {
  background-color: #eee;
  border-radius: 3px;
  border: 1px solid #b4b4b4;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.2),
    0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
  color: #333;
  display: inline-block;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  white-space: nowrap;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.