In HTML, there are various ways through which we can format the text.

The formatting that we can do is as follows:

Bold
Italics
Strong
Strikethrough
Underline and so on, which are to be discussed in this blog.

Types of formatting:

Bold:

Represented by .
It is a physical tag.
In this formatting, the content becomes bold, like this one.

      <p> 
          <b>Subscribe to my Page.</b>
      </p>

Italics:

Represented by .
It is also a physical tag.
In this formatting, the content becomes italics, like this one.
Text with a different voice or mood is represented by the element.
The element is regarded as a "phrasing content" element in HTML5, and its usage is largely discouraged. For emphasis, it is advised to use**or instead.

      <p> 
          <i>Subscribe to my Page.</i>
      </p>

Cite tag:

Represented by <site>.
The title of a creative work, such as a book, movie, music, etc., is cited using the element.
Used to show where a quote or reference originated.

              <p>
                  Lets learn <cite>HTML</cite>.
              </p>

Embedded tag:

Represented by .
Text can be emphasized by using the element.
The main intention is not to change the style but to convey the importance of the text.

      <p>
          HTLM is <em>easy</em>.
      </p>

What is the difference between italics, cite tags, and embedded tags?

Italics indicate a citation or reference; it shows a change in tone, while site tags are used to show creative work like the names of the book, movie, article, etc., while EM tags primary purpose is to convey emphasis rather than just styling.

Mark:

Represented by .
The main purpose is to highlight the text.

      <p>
          <mark>Subscribe to my Page.</mark>
      </p>

Underlined Text:

Represented by .
The main purpose is to underline the important text.

      <p>
          <u>Subscribe to my Page.</u>
      <p>

Inserted Text:

Represented by <ins>.
With this tag, we can see the text that has been inserted, which the writer wants us to notice.

      <p> 
          <del>HTML is very difficult.</del><ins>You will learn from this page.</ins>
      </p>

Output

Difference between underline and inserted tag in html

<ins>tag is used to mark inserted text, indicating content that has been added to the document after the initial creation. The default rendering for inserted text often includes underlining, but it's not the primary purpose of the <ins>tag. while tag was historically used for underlining text, but it is not recommended in modern HTML because it doesn't adhere to the separation of concerns principle.

Monospaced Font:

Represented by <t>.
The number t represents the time to leave while printing.

      <p>
          Come <tt>Lets learn more things.</tt>
      </p>

Pre

Represented by <pre>.
It is used to give indent as per our wish.

      <p>
          Hello<pre> Welcome     to      my      page.</pre>
      </p>

Difference between pre and monospace tag?

<pre>tag is used to define preformatted text. Text inside the <pre> element is typically displayed in a fixed-width font (like monospace), and it also preserves both spaces and line breaks. Applying a monospaced font to an element can be done using CSS by setting the font family property to a monospaced font family. Additionally, the <code> and <tt> tags can be used to represent text as code in a monospaced font.

Superscript Text:

Represented by .
The content in it is displayed half a character's height above the other characters.

      <p>
          Hello <sup>We have learnt many new things till now.</sup>
      </p>

Subscript Text:

Represented by .
Content is displayed half a character's height below the other characters.

      <p>
          Hello <sub>We have learnt many new things till now.</sub>
      </p>

Deleted Text:

Represented by <del>.
One of my favorite formats is that here we can make a cut on the text as if it were supposed to be deleted, but we didn't delete it; we simply cut it.

      <p>Hey 
          <del>HTML is very difficult.</del>
      </p>

Strike Text:

Represented by <strike>.
Make a cut in the text.
Example: To show discounts on sites.

      <p> 
          HTML is <strike>Hard</strike> easy with JALAJ.
      </p>

Difference between delete and strike tag in html?

<del> tag is specifically designed to represent content that has been deleted or removed from a document. The<del> tag is more semantically meaningful, as it conveys the idea that the content has been deleted or marked for removal. The<s> tag is a generic tag for text that is no longer accurate or relevant but doesn't necessarily imply deletion. It is often used to indicate that the content is no longer valid or should be ignored It is now more commonly used for semantic strikethrough than just for styling purposes.

Larger Text:

Represented by <big>.
Make the word big in size.

      <p> 
          <big>Welcome</big> Welcome.
      </p>

Smaller text:

Represented by .
Make the word small in size.

      <p> 
          <small>Welcome</small> Welcome.
      </p>

Abbreviation:

Represented by <abbr>.
Used for short forms.

      <abbr title="Jalaj Singhal">JS</abbr>

Code:

Represented by <code>.
Old-school format.

      <p>
          The HTML <code>button</code> tag defines a clickable button.
      </p>

Font:

This command is represented by .
It is used for the inline styling of the text.

<font size="10"> Content </font>

<font size="5"> Content </font>

Break:

Represented by .
Make the text go in the new line.

      <p>
          Hiii<br>Learn new things from here.
      </p>

Thematic Break

Represented by <hr>.
Divider in the page.

      <p>
          Welcome to learn new things.
          <hr>Begin with HTML and CSS.
      </p>

What is the difference between a break and a thematic break?

In the break tag, a simple line gets changed, and no change appears. but in thematic break a line appears which shows that a line is break.

Text Formatting in HTML

Table of contents