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.
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.
117+ registered 