HTML Page Structure

HTML Elements
HTML Attributes


HTML Text Formatting

In web world, formatting the appearance of the text on your web page is a technique which manages look and feel, appearance, and structure of your web page. When you visit any web site you can observe that how things are divided in different sections using appropriate heading, boundary, font, text alignment etc. In HTML Text Formatting, there are fair few tags which can be used to format web document.

HTML Text Formatting Tags List

The below table contains complete text formatting tag list and their description which is supported by HTML version.

Tag NameHTML TagTag Description
Bold<b></b>Text between <b></b> tag gives bold effect.
Italic<i></i>Text between <i></i> tag gives italicized effect.
Underline<u></u>Text between <u></u> tag display underline below the text.
Font<font></font>Text between <font></font> tag represent text in specific font.
Center<center></center>Text between <center></center> tag represent text in center of document.
Strike<strike></strike>Text between <strike></strike> tag represent text as strikeout.
HR<hr></hr>Text between <hr></hr> tag represent horizontal line.
H1, H2, H3, H4, H5, H6<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
Text between <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6> tag represent page heading from larger to smaller.
Superscript Text<sup></sup>Text between <sup></sup> tag represent half a character's height above the other characters.
Subscript Text<sub></sub>Text between <sub></sub> tag represent half a character's height beneath the other characters.
Deleted Text<del></del>Text between <del></del> tag represent text as deleted text.
Inserted Text<ins></ins>Text between <ins></ins> tag represent text as inserted text.
Larger Text<big></big>Text between <big></big> tag represent text one font size larger.
Small Text<small></small>Text between <small></small> tag represent text one font size smaller.

Bold Text

This tag is used to display bold look of text in web page. Text in between <b>...</b> tags will be display bold.

Example

<p>The appearance of word in <b>bold</b>.</p>

Italic Text

This tag is used to display italic look of text in web page. Text in between <i>...</i> tags will be display italic.

Example

<p>The appearance of word in <i>italic</i>.</p>

Underline Text

This tag is used to display underline effect of text in web page. Text in between <u>...</u> tags will be display underlined.

Example

<p>The appearance of word in <u>underlined</u>.</p>

Font

Change the colour of a few words or a section of text. This tag is used to change the font face, size and color of few words or a section of text in web page. Text in between <font face="Arial" size="2">...</font> tags will be change.

Example

<font face="Arial" size="10">This text using arial font with font size 10.</p>

Center Text

This tag is used to set center alignment of text in web page. Text in between <center>...</center> tags will be display in center.

Example

<p> This text will be left align but 
</br> <center> this will display in center</center> of web page.
</p>

Strike Text

This tag is used to put a line right through the centre of the text and often used to show that text is old in the web page. Text in between <strike>...</strike> tags will be display text strikethrough.

Example

<p> This text will be display 
<strike> striketout </strike> in the web page.
</p>

Headers

This tag is used to display page header with different size. There are 6 levels of headings available, from h1 for the largest and most important heading, down to h6 for the smallest heading. Text in between <h1>...</h1> tags will be displayed large.

Example

<h1>Header1 Text</h1>
<h2>Header2 Text</h2>
<h3>Header3 Text</h3>
<h4>Header4 Text</h4>
<h5>Header5 Text</h5>
<h6>Header6 Text</h6>

Larger Text

This tag is used to display text one font size large in web page. Text in between <big>...</big> tags will be displayed one font size large.

Example

<p> This text will be display 
<big> large </big> in the web page.
</p>

Small Text

This tag is used to display text one font size small in web page. Text in between <small>...</small> tags will be displayed one font size small.

Example

<p> This text will be display <small> small </small> in the web page.
</p>

Complete Example

<!DOCTYPE html>
<html>
<TITLE>HTML Text Formating Example Code</TITLE>
<HEAD>
<!-- www.techstrikers.com -->
</HEAD>
<body>

<p>Showing Bold Text</p>
<p>The appearance of word in <b>bold</b>.</p> 
<hr>
<p>Showing Italic Text</p>
<p>The appearance of word in <i>italic</i>.</p>  
<hr>
<p>Showing Underline Text</p>
<p>The appearance of word in <u>underlined</u>.</p> 
<hr>
<p>Showing Font and Size of Text</p>
<font face="Arial" size="10">This text using arial font with font size 10.</font>
<hr>
<p>Showing Center Text</p>
<p> This text will be left algn but </br> 
<center> this will displayed in center</center> of web page.</p>  
<hr>
<p>Showing Strikeout Text</p>
<p> This text will be displayed <strike> striketout </strike> 
in the web page.</p>
<hr>
<p>Showing Different Header Text</p>
<h1>Header1 Text</h1>  
<h2>Header2 Text</h2>  
<h3>Header3 Text</h3>  
<h4>Header4 Text</h4>  
<h5>Header5 Text</h5>  
<h6>Header6 Text</h6> 
<hr>
<p>Showing Big Text</p>
<p> This text will be displayed <big> large 
</big> in the web page.</p>  
<hr>
<p>Showing Small Text</p>
<p> This text will be displayed <small> small 
</small> in the web page.</p> 

</body>
</html>
See Live Example