HTML text Formatting is a process of formatting text for better look and feel. HTML gives us capacity to format text without utilizing CSS. There are many text formatting tags in HTML. These tags are utilized to make text bold, italicized, or underlined. There are just about 14 choices accessible that how text shows up in HTML and XHTML.

HTML text Formating


In HTML the formatting tags are separated into two classifications:

  • Physical tag: These tags are utilized to give the visual appearance to the text.
  • Logical tag: These tags are utilized to enhance the text.

NOTE: There are a few physical and logical tags which might give same visual appearance, yet they will be different in semantics.

Here, we will learn 14 HTML text formatting tags. Following is the list of HTML text formatting tags.


Element name Description
<b> This is a actual tag, which is utilized to bold the text written between it.
<strong> This is a logical tag, which tells the browser that the text is important.
<i> This is a physical tag which is utilized to make text italic.
<em> This is a logical tag which is utilized to show content in italic.
<mark> This tag is utilized to highlight text.
<u> This tag is utilized to underline text written between it.
<tt> This tag is used to appear a text in teletype. (not supported in HTML5)
<strike> This tag is utilized to draw a strikethrough on a section of text. (Not supported in HTML5)
<sup> It shown the content slightly above the normal line.
<sub> It shown the content slightly underneath the normal line.
<del> This tag is utilized to show the deleted content.
<ins> This tag shown the content which is added
<big> This tag is utilized to increase the font size by one conventional unit.
<small> This tag is utilized to decrease the font size by one unit from base font size.


1) Bold Text Formating Tags in HTML

HTML<b> and <strong> text formatting elements

The HTML <b> element is a actual tag which show text in bold font, without any logical importance. In the event that you write anything inside <b>............</b> element, is shown in bold letters.

Example:


<p>
<b>
Write Your First Paragraph in bold text.
</b>
</p>  

Output:


Write Your First Paragraph in bold text.


The HTML <strong> tag is a logical tag, which shows the substance in bold font and informs the browser about its sensible importance. Assuming you compise anything between <strong>???????. </strong>, is shown significant text.

Example


<p>
<strong>
This is an important content
</strong>,and this is normal content
</p>


Output:


This is an important content,and this is normal content


2) HTML Italic Text Formating

HTML <i> and <em> formatting elements

The HTML <i> element is actual element, which show the enclosed substance in italic font, without any added importance. Assuming you compose anything inside <i>............</i> element, is shown in italic letters.


<p> 
<i>
Write Your First Paragraph in italic text.
</i>
</p>

Output:


Write Your First Paragraph in Italic Text


The HTML <em> tag is a sensible element, which will show the enclosed substance in italic font, with added semantics importance.

Example:-


<!DOCTYPE html>
<html>
<head>
	<title>formatting elements</title>
</head>
<body>
<h1>
Explanation of italic formatting element
</h1>
<p>
<em>This is an important content
</em>, which displayed in italic font.
</p>
</body>
</html>


Output:


Explanation of Italic formating element

This is an important content , which displayed in Italic font


3) HTML Marked Formatting Tags

In the event that you want to mark or highlight a text, you should compose the content inside <mark>.........</mark>.

Example:


<h2>  
I want to put a <mark> Mark</mark> 
on your face
</h2>


Output:-


I want to put aMark on your face


4) Underlined Text Formating in HTML

Assuming you write anything inside <u>.........</u> element, is shown in underlined text.

Example:


<p> 
<u>
Write Your First Paragraph in 
underlined text.
</u>
</p>


Output:


Write Your First Paragraph in Underline text


5) Strike Text Formating Tags in HTML

Anything composed inside <strike>.......................</strike> element is shown with strikethrough. It is a slim line which cross the statement.

Example:


<p> 
<strike>
Write Your First Paragraph with 
strikethrough
</strike>
</p>


Output:


Write Your First Paragraph with strikethrough


6) Monospaced Font Tags

Assuming you need that each letter has a similar width  you ought to write the content inside <tt>.............</tt> element.

Example:


<p>
Hello 
<tt>
Write Your First Paragraph in 
monospaced font.
</tt>
</p>


Output:


Hello Write Your First Paragraph in monospaced font


7) HTML Superscript Text Formating

In the event that you put the substance inside <sup>..............</sup> element, is displayed in superscript; means it is shown half a character's height above the other characters.

Example:


<p>
Hello 
<sup>
Write Your First Paragraph in superscript.
</sup>
</p>


Output:


Hello Write Your First Paragraph in superscript.


8) Subscript Text Formating in HTML

On the off chance that you put the substance inside <sub>..............</sub> component , is displayed in subscript ; implies it is shown half a character's height underneath different characters.

Example:


<p>
Hello 
<sub>
Write Your First Paragraph in subscript.
</sub>
</p>


Output:


Hello Write Your First Paragraph in subscript


9) Deleted Text Formating

Anything that puts inside <del>..........</del> is shown as deleted text.

Example:


<p>
Hello 
<del>Delete your first paragraph.</del>
</p>


Output:


Hello Delete your first paragraph.


10) HTML Inserted Text Formating

Anything that puts inside <ins>..........</ins> is shown as inserted text.

Example:


<p> 
<del>Delete your first paragraph.</del>
<ins>Write another paragraph.</ins>
</p>


Output:


Delete your first paragraph. Write another paragraph.


11) Larger Text Formating in HTML

On the off chance that you need to put your font size larger than the rest of the text then put the substance inside <big>.........</big>. It increase one font size larger than the previous one.

Example:


<p>
Hello 
<big>
Write the paragraph in larger font.
</big>
</p>


Output:


Hello Write the paragraph in larger font.


12) Smaller Text Formating Tags

In the event that you need to put your font size smaller than the rest of the text then put the substance inside <small>.........</small>tag. It reduces one font size than the previous one.

Example:


<p>
Hello 
<small>
Write the paragraph in smaller font.
</small>
</p>


Output:


Hello Write the paragraph in smaller font.



Previous                                                                                          Next