Enroll Course

100% Online Study
Web & Video Lectures
Earn Diploma Certificate
Access to Job Openings
Access to CV Builder



Online Certification Courses

HTML - Formatting

HTML Formatting Tutorial. 

What is HTML Formatting?

HTML Formatting are special styling for text in HTML webpages or documents in other to make the documents well structured and pleasing to the eyes

Some of these formatting styles include:

1. Bold Text

2. Italic Text

3. Underlined Text

4. Strike Text

5. Monospaced Font

6. Superscript Text

7. Subscript Text

8. Inserted Text

9. Deleted Text

10. Larget Text

11. Smaller Text

12. Grouping content

Bold Text

Any text that appears in between the <b> </b> tags, will be displayed with a bold style. An example is shown below:

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Bold Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <b>bold</b> typeface.</p>
   </body>
	
</html>

The above code will be displayed as:

Italic Text

Any text that appears in between the <i> </i> tags, will be displayed in an italic style. An example is shown below:

Example

 
<!DOCTYPE html>
<html>
   <head>
      <title>Italic Text Example</title>
   </head>
	
   <body>
      <p>The following word uses an <i>italicized</i> typeface.</p>
   </body>	
</html>

The above code will be displayed as:

Underlined Text

Any text that appears in between the <u> </u> tags, will be displayed with an underline on the text. An example is shown below:

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Underlined Text Example</title>
   </head>
	
   <body>
      <p>The following word uses an <u>underlined</u> typeface.</p>
   </body>
</html>

The above code will be displayed as:

Strike Text

Any text that appears in between the <strike> </strike> tags, will be displayed with a thin line striking through on the text. An example is shown below:

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Strike Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <strike>strikethrough</strike> typeface.</p>
   </body>
	
</html>

The above code will be displayed as:

Monospaced Font

Any text that is written in between a <tt>...</tt> element tag is always displayed with a monospaced font. A high number of the fonts are referred to as variable-width fonts due to them having different letters that are also of different widths (for instance, the alphabet 'm' is much wider than the letter 'l'). But in a monospaced font, however, each of the letters has the same width. An example is displayed below:

Example 

<!DOCTYPE html>
<html>

   <head>
      <title>Monospaced Font Example</title>
   </head>
	
   <body>
      <p>The following word uses a <tt>monospaced</tt> typeface.</p>
   </body>
	
</html>

The above code will be displayed as:

Subscript Text

Any text that is written in between a <sup>...</sup> element tag is always displayed as a superscript; the particular font size that is used is the exact same size as all the characters around it but it is displayed as half of a character's height above the height of the rest of the characters. An example is shown below:

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Superscript Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <sup>superscript</sup> typeface.</p>
   </body>
	
</html>

The above code will be displayed as:

Superscript Text

Any text that is written in between a <sub>...</sub> element tag is always displayed as a superscript; the particular font size that is used is the exact same size as all the characters around it but it is displayed as half of a character's height beneath the height of the rest of the characters. An example is shown below:

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Subscript Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <sub>subscript</sub> typeface.</p>
   </body>
	
</html>

The above code will be displayed as:

Corporate Training for Business Growth and School