how to format the HTML text with predefined HTML formatting elements. I used word 'predefined' just because of these HTML special elements not only give a new shape to the text but it changes the meaning of presence of the text on the web page. tags are used to look text in bold style. It has no extra importance over the web page but using in place of is little different. tags defines the text added with semantic (meaningful) strong importance. In the paragraph we try to pull the attention of reader and users by making text bold, having importance of that bold text over the web page

HTML Text Formatting


In previous chapter we learnt about HTML file path which very important. Now we will learn how to format the HTML text with predefined HTML formatting elements. I used word 'predefined' just because of these HTML special elements not only give a new shape to the text but it changes the meaning of presence of the text on the web page.

Before we continue take a deep look on below examples:

Example - 1

Tag Uses Displayed on web page Description
<b> <b>Good</b> Good Defines bold text
<i> <i>Good</i> Good Defines Italic Text
<strong> <strong>Good</strong> Good Defines bold and Important text
<em> <em>Good</em> Good Defines Italic and Important text
<big> <big>Progrramers</big> Progrramers Defines bigger text
<small> <small>Progrramer</small> Progrramers Defines smaller text
<ins> This is <ins>inserted</ins> text This is inserted text Defines inserted text with underline
<del> This is <del>deleted</del> text This is deleted text Defines deleted text
<sup> 10<sup>4</sup> 104 Defines the superscripted text
<sub> CO<sub>2</sub> CO2 Defines the subscripted text
<mark> This is <mark>Marked</mark> text Marked Defines the highlighted text with Yellow color



Now let’s understand above mentioned tag with description.

Difference between <b> and <strong>


<b> tags are used to look text in bold style. It has no extra importance over the web page but using <strong> in place of <b> is little different. <strong> tags defines the text added with semantic (meaningful) strong importance. In the paragraph we try to pull the attention of reader and users by making text bold, having importance of that bold text over the web page.

Example - 2


This is <b>red apple</b>.

This is red apple.


This is <strong>red apple</strong>.

This is red apple.




Difference between <i> and <em>


<i> tags used to look text in italic style without extra importance while <em> tags used to make text emphasized with extra importance.

Example - 3



This is <i>red apple</i>.

This is red apple.


This is <em>red apple.</em>

This is red apple.



Use of <small> and <big>


<small> tags define smaller text on the web page. <big> tags define bigger text on web page. See below examples:

Example - 4



This is <small>smaller text</small> in the paragraph.

This is smaller text in the paragraph.


This is <big>bigger text</big> in the paragraph. This is bigger text in the paragraph.



Use of <ins> and <del>


<ins> element defines the added or inserted text on HTML document. <del> element defines that text is removed or deleted. See below examples:

Example - 5



I like <ins>apple</ins> banana.

I like apple banana.


I like to program in <del>Python</del> HTML I like to program in Python HTML



Use of <sup> and <sub>


<sup> element is used to define superscripts on the web page and <sub>  element is used to define subscript on the web page. See below examples:

Example - 6



This is a mathematical formula  10<sup>4</sup>.


This is a mathematical formula  104. 




The chemical formula of water is H<sub>2</sub>O. The chemical formula of water is H2O.



Use of <mark>


<mark> element is used to define marked or highlighted text on web page. See below examples:

Example - 7



The <mark>Tajmahal</mark> is one of the seven wonders.

The Tajmahal is one of the seven wonders.


HTML 5 Tutorial HTML text formatting

Related Topics

progrramers-logo

progrramers

Hello friends! Progrramers is a tutorial site of w3 programming. If you like this tutorial site please encourages us by sharing this site links with your friends and nears & dears who want to learn web development and give us like on our Facebook page. If have any question please type in to comment box or send us message on social media sites via below given social links. Thank you, have a nice learning.

Post A Comment:

0 comments: