<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.