Back to HTML Course

Here with the Text Formatting Tags.

HTML

<hr />
<h2>Bold Text</h2>
<hr />
<div>
  <p>
    <b>Lorem</b> ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et.
  </p>
</div>
<div>
  <p>
    <strong>Lorem</strong> ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et.
  </p>
</div>
<hr />
<h2>Italic Text</h2>
<hr />
<div>
  <p>
    <i>Lorem</i> ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et.
  </p>
</div>
<div>
  <p>
    <em>Lorem</em> ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et.
  </p>
</div>
<hr />
<h2>Underline Text</h2>
<hr />
<div>
  <p>
    <u>Lorem</u> ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et.
  </p>
</div>
<div>
  <p>
    <ins>Lorem</ins> ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et.
  </p>
</div>
<hr />
<h2>Strikeout Text</h2>
<hr />
<div>
  <p>
    <s>Lorem</s> ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et.
  </p>
</div>
<div>
  <p>
    <del>Lorem</del> ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et.
  </p>
</div>
<hr />
<h2>Small Text</h2>
<hr />
<div>
  <h2>This is <small>Small</small> Text</h2>
</div>
<hr />
<h2>Mark Text</h2>
<hr />
<div>
  <h2>This is <mark>Mark</mark> Text</h2>
</div>
<hr />
<h2>Super Script Text</h2>
<hr />
<div>
  <h2>2<sup>2</sup> => 4</h2>
</div>
<hr />
<h2>Sub Script Text</h2>
<hr />
<div>
  <h2>H<sub>2</sub>O</h2>
</div>
<hr />
<h2>Combination of all Text Formatting Tags</h2>
<hr />
<div>
  This is a <strong>bold</strong> and <em>italic</em> and
  <mark>marked</mark> with <small>small</small> text with
  <ins>underline</ins> with <sup>superscript</sup> with
  <sub>subscript</sub> text with <del>strikeout</del>.
</div>

CSS

div {
  background-color: lightgray;
  padding: 15px;
  margin: 10px;
  width: 300px;
  font-family: "Courier New", Courier, monospace;
  display: inline-block;
  border-radius: 10px;
  box-shadow: 0 0 10px black;
}

hr {
  border: 10px solid black;
  border-radius: 5px;
}

h2 {
  text-align: center;
}

You can check out the Demo.