HTML #8 - HTML Text Formatting, Uses and How to Use

Hello friends, welcome to the another tutorial of Programming Infinity. In this tutorial, we will know about Text Formatting in HTML. We will know about it by the example code, which will help us to know more of Text Formatting i.e. its uses and it's syntax of using. So friends, lets begin...

HTML Text Formatting

Text Formatting means designing text for specific purposes i.e. making text bold, italic and so on. It also adds some important meaning to the text. In HTML, there are predefined elements for the designing of text i.e. for Text Formatting. These elements are used for adding design to the text, so, it wil contain some text in it as content, hence known as container element. So let's know about these elements.

<b> element :- 

<b> Content ... </b>

Output :-

Content ...

It is used to make the text bold in HTML. The syntax of using this is given above.

<strong> element :- 

<strong> Content ( important ) </strong>

Output :-

Content ( important )

It is used to make the text bold with adding some important meaning to the text. Both the <b> element and <strong> element is rendered in same way with respect to design i.e. in the bold style, but, the <strong> element make the text more important than the others surrounding text. We use <b> element to make a text bold in a single line witH low importance, whereas, use <strong> element within paragraph to give some extra importance to the word, which looks same as of bold for a normal person, but when we read it through screen readers, there is some importance added to it i.e the importance is not noticeable by a normal user, but only by the browsers and the screen readers.  The syntax of using this is given above.

<i> element :- 

<i> Content </i>

Output :-

Content

It is used to make the text italic in HTML. The syntax of using this is given above.

<em> element:-

<em> Content ( important ) </em>

Output :- 

Content ( important )

It is used to make the text italic with adding emphasis on the text i.e. adding importance to the text. Its use is the same as of the <strong> element, but the only difference is that, it makes the text italic instead of making bold. Its syntax is given above.

<mark> element :- 

<mark> Highlighted </mark>

Output :-

Highlighted

It is used to mark/highlight the text in HTML. The syntax of using this is given above.

<del> element :- 

<del> Deleted </del>

Output :-


Deleted

It is used to add deleted text in the HTML i.e. if you are writing in your website, and something is, written wrong, there is 2 options for it, one to delete the text and rewrite it, but if you want the user to notice it, then, you can use tHis element. It cuts the text with a horizontah line from the centre of text. Its syntax is given above.

<ins> element :- 

<ins> Inserted </ins>

Output :-


Inserted

It is used to insert a text in the HTML. i.e. If you want to insert a text in the paragraph or any text element and want the user to notice it, then use tHis element. It adds underline style to the text in HTML, hence we can also use the <u> element instead of this for giving a inserted style. But, this is not considered a inserted text by the screen readers or browsers. It will be only considered as a simple underline style. The syntax of using this is given above.

<sup> element :- 

X²

Output :-

X²

It is used to add superscripted text i.e. It adds text above the middle of the surrounding text. The syntaxnof using this is given above.

<sub> element :- 

H₂

Output :-

H₂

It is used to add subscripted text i.e. It adds text below the middle of the surronding text. The syntax of using this is given above.

So friends, that's all for this tutorial. Hope u enjoyed it. If u have any problem, then ask me in comment box. I will try my best to answer it soon as possible.
Thanks -
Programming Infinity ( Samridh Sharma )