Formatting with HTML vs CSS

by Manuel Souto Pico

HTML

<section>
  <em>Emphasized with inline HTML tags.</em>
</section>
<section>
  <div class="emphasized">Emphasized with CSS styling.</div>
</section>

<br/>

<section>
  <strong>Bolded with inline HTML tags.</strong>
</section>
<section>
  <div class="bolded">Bolded with CSS styling.</div>
</section>


<br/>


<section>
  <u>Underlined with inline HTML tags.</u>
</section>
<section>
  <div class="underlined">Underlined with CSS styling.</div>
</section>

<br/>

<section>
  <strong><em><u>HTML formatting tags can be embedded to combine formatting styles (not very translation-friendly).</u></em></strong>
</section>
<section>
  <div class="bolded emphasized underlined">Different formatting styles can be combined using CSS without the need for extra HTML tags.</div>
</section>

CSS

.emphasized {
  font-style: italic; 
}

.bolded {
  font-weight: bold; 
}

.underlined {
  text-decoration: underline;
}