HTML Formatting

Formatting in HTML

Formatting means to organize things for better presentation.

Formatting tags in html

<b> Bold text </b>

<strong> Strong text </strong>

<i> Italic text </i>

<em> empasize text </em>

<u> underline text </u>

<ins> Insert text </ins>

<strike> Strike through </strike>

<del> Deleted text </del>

<sup> Superscript </sup>

<sub> Subscript </sub>

<small> Small text </small>

<center> Centered text (Deprecated in HTML5) </center>

<font> Specity Font style </font>

<mark> Highlight / mark text </mark>

<pre>  Preformatted text </pre>

<br> break row

<hr> Horizontal ruler

bold v/s strong tag

<b> Bold Text</b>
<strong> Strong Text</strong>

bold-vs-strong-text-sample-output

Note:

  1. Both generate the same result but are semantically different.
  2. Strong is used to mark the important text.

Italic <i> v/s Emphasize <em> tag

<i> Italic Text </i>
<em> Emphasized Text </em>

italic-vs-em-tag-sample-output


Underline <u> v/s Insert <ins>

<u> Underline Text </u>
<ins> Insert Text </ins>

Note:

  1. As shown in the following figure both tags have the same output.
  2. The only difference is that both are syntactically different. <u> tag is used for the underline text whereas <ins> tag is used to mark the inserted text.

underline-vs-ins-tag-sample-output

<strike> v/s <del> tag

<strike> Strike through text</strike>
<del> Deleted text </del>

Note:

  1. As shown in the following figure <strike> and <del> both tag have the same output but both tags are syntactically different <strike> tag is used to mark the strike-through text whereas <del> tag is used to mark the deleted text.

strike-vs-del-tag-sample-output

superscript <sup> v/s subscript <sub> tag

5 <sup>2</sup>
H <sub>2</sub>O

sup-vs-sub-tag-example

<center> tag

<center>Center aligned text</center>
center-tag-sample-output

Font tag in html

<font  

    face = "arial"  

    color = "red"  

    size = "24px" >

      This is customized font text

</font>

font-tag-sample-output

<pre> tag in html

It is used to print the pre-formatted text.

Example-1:

<p>

    This
        is
           my
              style.
</p>
Note:
  • As shown in the following figure, HTML automatically ignores extra spaces and newlines. if you want to preserve the spaces and lines you have to use <pre> tag for pre-formatted text.
why-pre-tag

Example-2

<pre>

This

is

   my

  style.

</pre>

pre-tag-sample-output

<br>(break row) Tag

  1. By default, a line is changed when one line is completely filled, this is called word wrapping.
  2. Before ending the line if you want to change the line then <br> tag can be used.
  3. <br> is an empty tag so no need to close explicitly.
<p>
  First line <br>
  Second line 
</p>
br-sample-output

Horizontal Ruler <hr> Tag

It generates a horizontal line.

<p>
      First line <hr>
      Second line
</p>

hr-sample-output

Formatting in HTML Video Tutorial