Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Last Updated: Mar 27, 2024

Text Formatting in HTML

Author Hari Sapna Nair
3 upvotes
gp-icon
Basics of javascript
Free guided path
10 chapters
68+ problems
gp-badge
Earn badges and level up

Introduction 

How would this page look if all were normal text? Boring, right? 
 

To make this page look exciting and attractive, we use something called Text Formatting in HTML (HyperText Markup Language). Text Formatting in HTML helps us have bold text, italic text, etc. To have text formatting on our page, we use the HTML formatting elements. 
 

In this blog, we will deep dive into the concept of Text Formatting in HTML along with various HTML formatting elements.

Text Formatting in HTML

Text Formatting in HTML is a process of formatting text to enhance the look of the text and increase the visual appeal. It gives a better look and feels to the page. HTML provides us the ability to format text without using CSS (Cascading Style Sheets)

 

HTML provides a range of formatting elements that are used to make the text attractive to the users. It offers various options, just like any other text editor.

 

Text Formatting in HTML can be broadly classified into two types:-

1. Physical Tag: They provide a visual appearance to the text. 

For example: <b>, <i>, etc.

 

2. Logical Tag: They add some logical or semantic value to the text.

For example: <strong>, <em>, etc.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

HTML Text Formatting Elements

Now let's explore the various types of text formatting elements available in HTML.

 

Element

Description

<b> It is used to make the text bold.
<i> It is used to make the text italic.
<strong> It is used to make the text bold along with semantic importance.
<em> It is used to make the text italic along with semantic importance.
<u> It is used to underline text.
<mark> It is used to highlight text.
<strike> It is used to draw a strikethrough on a section of text.
<tt> It is used to display a text in teletype.
<sub> It is used to display the content slightly below the normal line.
<sup> It is used to display the content slightly above the normal line.
<del> It is used to display the deleted content.
<ins> It displays an inserted text.
<small> It is used to decrease the font size by one unit than the rest of the surrounding text.
<big> It is used to increase the font size by one unit than the rest of the surrounding text.

 

Now let's see how each of these elements work.

 

Code

 

<body>
   <!-- HTML Formatting Elements -->
   <p><b>Bold</b> Text</p>
   <p><b>Italic</b> Text</p>
   <p><strong>Bold Important </strong> Text</p> 
   <p><strong>Italic Important </strong> Text</p>
   <p><u>Underlined</u> Text</p>
   <p><mark>Highlight</mark> Text</p>
   <p><strike>Striked</strike> Text</p>
   <p><tt>Teletype</tt> Text</p>
   <p><sup>Superscript</sup> Text</p>
   <p><sub>Subcript</sub> Text</p>
   <p><del>Deleted</del> Text</p>
   <p><ins>Inserted</ins> Text</p>
   <p><small>Small</small> Text</p>
   <p><big>Big </big> Text</p>
</body>

 

Note: <strike>, <tt> and <big> are not supported in HTML5.

 

Output

Frequently Asked Questions

1. What is the difference between <b> and <strong>

Ans:- The <b> tag is a physical tag that displays text in bold without any logical importance. 

The <strong> tag is a logical tag that displays the content in bold font and informs the browser about its logical importance. 

 

2.  Explain the <pre> tag in HTML?

Ans:- The <pre> tag in HTML displays the text in the same format as written in the code. The browser renders the text in a fixed-pitched font, with whitespace intact and without word wrap.

 

3. What is the use of heading tags?

Ans:- HTML headings can also be used to achieve Text Formatting in HTML. It has a range from 1 to 6. The heading defined within <h1> with the largest font size is the more important, whereas <h6> with the least font size is the least important  

 

4. Explain the <dfn> tag?

Ans:- The <dfn> tag (definition tag) in HTML represents the term that is defined within the context of the definition sentence in an HTML document. The text is displayed in italics in this case.

 

5. How is <em> more beneficial than <i>?

Ans:- The visual result of using <i> and <em> is the same. However, their semantic meaning is different. 

 

The <em> tag semantically emphasizes the important section of words, while <i> tag simply styles the text in italics.  This is helpful in cases where a screen reader is used, as it will pronounce the words in <em> tag with an emphasis, using verbal stress.

Key Takeaways

In this blog, we covered the concept of Text Formatting in HTML along with various HTML formatting elements. Through this blog, we learned how to use tags like <b>, <i>, <strong>, <em>, <u>, <mark>, <strike>, <tt>, <sub>, <sup>, <del>, <ins>, <small>, <big>, <pre>, <dfn>, heading tags, etc.
 

Don't stop here. Check out the 10 Best HTML & CSS books for developers in 2021. If you are new to HTML, check out our blogs on HTML and learn HTML from scratch.

 

We hope you found this blog useful. Liked the blog? Then feel free to upvote and share it.

Guided path
Free
gridgp-icon
Basics of javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass