HTML Formatting

Note/Suggestion:
HTML formatting is very important. A website Designer should know how to format HTML texts.

For Example:

You must know how to make a text bold, strong, italicize, emphasize, underline, marking of text, inserting a new text/s, deleting an old text by removing it, adding a subscript and superscript, making a text small and so on.

HTML Formatting for text

Example for HTML Formatting, list of all HTML Formatting for text.

Tag Description
<strong> Strong text - Texts which are important
<b> Bold text
<em> Emphasized text
<i> Italic text
<small> Small text
<sub> Subscript text
<sup> Superscripted text
<ins> Inserted text
<del> Deleted text
<mark> Marked text
<samp> sample output of a computer program
<code> To show the computer code - Like a programming code
<kbd> keyboard input text
<var> To display the text as a variable - Like Programming variable
HTML formatting tags

HTML <b> Tag

The <b> tag specifies a bold text. We do not use bold for marking our text as an important text. For marking your text as an important text, use <strong> tag 

Example


<p>Normal text</p>

<p><b>Bold text</b></p>

HTML <em> Tag

The tag emphasizes the text. It provides more emphasis on a particular text and makes that text an important text.

Example for emphasized text


<p>Normal text.</p>
<p><em>emphasized text.</em></p>

HTML <i> Tag

The tag specifies text in italic form. We use this tag to make our text stand out different from surrounding texts.

Example


<p>Normal text.</p>
<p><i>italic text</i></p>

HTML <small> Tag

The <small> tag reduce the size of font.

Example

<small>Small tag makes text smaller than the default size. </small>

HTML <strong> Tag

The <strong> tag specifies important text.

Example

    
<p>Normal text.</p>
<p><strong>Strong text</strong></p>

HTML <sub> Tag

The <sub> tag defines subscript text.

subscript tag in html

Example


<h4>Example for <sub>subscripted</sub> text.</h4>
<p> The 'sub' tag renders text into a small size and starts the text half below the normal text </p>

HTML <sup> Tag

The <sup> tag defines superscripted text.

superscript tag in html

Example


<p>Example for <sup>superscripted</sup> text.</p>
<p>The 'sup' tag renders text into a small size and starts the text half above the normal text</p>

HTML <ins> Tag

The <ins> tag defines inserted text in HTML document.

Example


<p>The ins tag is used to insert the text and inserted text will be underlined.</p>
<p>Welcome <ins>to</ins> Bangalore</p>

HTML <del> Tag

It defines deleted text in HTML document.

This is used when you want to correct text/s but wish to show the previous value which must  strike out.

In a way, this is used to correct a value by striking out the old value which is removed and replacing it with a new value.

Example


<p>Using del element we can delete text and del tag strike-through the deleted word to  define it is deleted.</p>
<p>what is <del>my</del> your name?</p>

HTML <mark> Tag

The HTML <mark> tag describes the marked text.

This was added as part of HTML5.

Example


<h2>This is <mark>Marked</mark> text</h2>
<p> Mark tag marks the text in yellow ink and to highlight that it is marked.</p>

HTML <u> Tag

The <u> tag underlines specified text.

Example


<h2>This is <u>underlined text</u> text</h2>
<p>It underlines the given text.</p>

HTML <samp> Tag

The <samp> tag is rarely used in HTML. This is used in a case, you want to show the sample output of the computer program.

Example


<h2>This is used to show the <samp>sample output of the computer program</samp> </h2>
<p>To show the sample output of the computer program.</p>

HTML <code> Tag

The <code> tag is rarely used in HTML. This is used in a case, you want to show the computer code.

Example


<p>This is used to show <code>the computer code</code></p>
<p>In HTML <code>code tag represents text in form of </code> computer code.</p>

HTML <kbd> Tag

This is the HTML keyboard formatting <kbd>tag. It is used less in HTML. This is used in a case, you want to show the input keyboard text format.

Example


<p>This is used to show <code>the input keyboard text</code></p>
<p>Hello <kbd>The text given inside kbd tag represents keyboard text.</kbd> Thank you.</p>

HTML <var> Tag

The <var> tag is rarely used in HTML. This is used in a case, you want to define a text as a variable. And when you want to store a value in a variable and use that value in any mathematical calculation or an arithmetic operation. You can use this in case of programming variable as well.

Example


<p>Find the value of y in <var>11y</var> - <var>10</var> = <var>12</var> + <var>13y</var></p>

Interview Questions & Answer

There are many Formatting Tags in HTML like, <b>, <i>, <mark>, etc. It is used for formatting text and HTML elements for better look and appearance.
<b> tag is used to bold the text.
<i> tag is used for italic text.
<mark> tag is used to mark the text.

The <pre> tag describes preformatted text in HTML page. Browsers usually render <pre> text into a fixed-pitched font. It contains line breaks and spaces. And font face is displayed in courier by default.
For Example,

<pre>
The pre tag describes preformatted 
text in HTML page.
It contains line breaks and spaces
</pre> 	

Difference between <b> and <strong> tag:-

  • If you want to show that a particular text has more importance than the normal text, then use a <strong> tag.
  • If you want to make your text appear heavier as compared to the normal text, then use the <b> tag. This does not make the text important rather makes it heavier and shows that this text has a higher priority while reading to grab the attention of the user.

Difference between <i> and <em> tag:-

  • If you want to emphasize on a particular text, then use <em> tag. This makes the text as an important text and the text appears like an italic text.
  • If you want to italicize a particular text, then use <i> tag. This does not mark the text as an important text rather italicize the text only.

Tutorials for all brains!