Lesson 5 – HTML Formatting

admin

If you are familiar with MS word than you must have used text formatting options like Bold/Italics/underline to systematically arrange your content. Similarly, you can also arrange your content systematically in HTML using html formatting tags. Let’s find out how

  • HTML Bold Text Tag:-

Any text that is inserted between <b>…..</b> will appear as bold text. Example is shown below

<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>This is a <b>Bold</b> text example</p>
</body>
</html>

The result will be displayed as:

  Bold Example

This is a Bold text example.

 

  • HTML Strong Text Tag:-

Any text that is inserted between <strong>…..</strong> will appear as strong text. Example is shown below:

<!DOCTYPE html>
<html>
<head>
<title>Strong Text Example</title>
</head>
<body>
<p> <strong>This is a strong text example </strong></p>
</body>
</html>

The result will be displayed as:

  Strong Text Example

This is a strong text example

 

  • HTML Italic Text Tag:

 Any text that is inserted between <i>…..</i> will appear as italics. Example is shown below:

<!DOCTYPE html>
<html>
<head>
<title>Italic Example</title>
</head>
<body>
<p>This is a  <i>italics</i> text example</p>
</body>
</html>

The result will be displayed as:

  Example

This is a italics text example

 

  • HTML Underlined Text Tag:

Any text that is inserted between <u>…..</u> will appear as underlined text. Example is shown below:-

<!DOCTYPE html>
<html>
<head>
<title>Underlined Example</title>
</head>
<body>
<p>This is a <u> underlined</u> example.</p>
</body>
</html>

The result will be displayed as:

  Underlined Example

This is a underline example

 

  • HTML Inserted/Deleted Text Tag:

Any text that is inserted between <ins>…..</ins> or <del>….</del> will appear as inserted/deleted text. Example is shown below:-

<!DOCTYPE html>
<html>
<head>
<title>Inserted/Deleted Example</title>
</head>
<body>
<p>I want to drink <del> tea </del>  <ins> coffee </ins>  </p>
</body>
</html>

The result will be displayed as:

  Inserted Example

I want to drink tea coffee

 

  • HTML Subscript Text Tag:

Any text that is inserted between <sub>…..</sub> will appear as subscript text. Example is shown below:-

<!DOCTYPE html>
<html>
<head>
<title>Subscript Example</title>
</head>
<body>
<p>This is a <sub>subscript</sub> example</p>
</body>
</html>

The result will be displayed as:

  Subscript Example

This is a subscript example

 

  • HTML Superscript Text Tag:

Any text that is inserted between <sup>…..</sup> will appear as superscript text. Example is shown below:-

<!DOCTYPE html>
<html>
<head>
<title>Superscript  Example</title>
</head>
<body>
<p>This is a <sup>superscript</sup> example </p>
</body>
</html>

The result will be displayed as:

  Superscript Example

This is a superscript example

 

  • HTML Small Text Tag:

Any text that is inserted between <small>…..</small> will appear as small text. Example is shown below:-

<!DOCTYPE html>
<html>
<head>
<title>Small text  Example</title>
</head>
<body>
<p>This is a <small>small</small> text example </p>
</body>
</html>

The result will be displayed as:

  Small text Example

This is a small text example

 

  • HTML Bigger Text Tag:

Any text that is inserted between <big>…..</big> will appear as bigger text. Example is shown below:-

<!DOCTYPE html>
<html>
<head>
<title>Big text example</title>
</head>
<body>
<p>This is a <big>Bigger </big>  text example </p>
</body>
</html>

The result will be displayed as:

  :argeExample

This is a Bigger text example

 

Chapter Summery:

  • html <b> tag  represent Bold text.
  • html <strong> tag represent Strong text.
  • html <i> tag represent italics text.
  • html <u> tag represent underlines text.
  • html <ins> tag represent inserted text.
  • html <del> tag represent deleted text.
  • html <sub> tag represent subscript text.
  • html <sup> tag represent superscript text.
  • html <small> tag represent small text.
  • html <big> tag represent bigger text.

 

Interview Questions:

  • How to superscript a text in html?

   We can superscript a text using html syntax <sup>….</sup>.

  • What is the syntax for subscript text in html?

    Syntax for subscript text: <sub>…</sub>.

Practice Exercise:

<!DOCTYPE html>
<html>
<head >
<title>Practice Exercise</title>
</head>
<body>
<p Html stands for Hyper Text Markup Language, which is used to create web pages on internet.  Html is easy to learn and can be understood by a non IT personnel also.  At www.freetutorialpoint.com, we offer free html courses to everyone, so that you don’t have spent huge money at coaching institutes or buying e-books.  Courses are so designed, that you don’t have to go anywhere and a beginner can easily learn it and create his own html website. </p>
</body>
</html>

Create a web page using above html code and apply following formatting tags into it:

  • Apply Bold formatting to text “Hyper Text Markup Language”.
  • Apply underline formatting to text “easy to learn”.
  • Convert “www.freetutorialpoint.com” into a link.
  • Apply italics formatting to text “huge money”.
  • Apply Bigger formatting to text “Beginners”.
Click here to practice above exercise in real time HTML code editor

3 thoughts on “Lesson 5 – HTML Formatting”

  2. Today I am on chapter 5 of learning html from this website and I must appreciate the simple and easy to read content along with comprehensive practice exercises.

Comments are closed.