HTML Formatting For Text

The purpose of this article is to explore how text can be formatted in HTML and the tags that can be used to achieve a variety of effects. The ability to format HTML text is essential for creating visually stunning, user-friendly web pages, regardless of your level of experience.

It’s all about HTML formatting. There are several elements in HTML that can be used to specify text with a special significance to it.


This is a BOLD Text.

This is an Italic Text.

And this is subscript and superscript

HTML Formatting Elements

The following formatting elements were specifically created to present special types of text when we talk about HTML formatting:

  • <i> – Italic text.
  • <b> – Bold text.
  • <strong> – Important text.
  • <em> – Emphasized text.
  • <mark> – Marked text.
  • <small> – Smaller text.
  • <del> – Deleted text.
  • <ins> – Inserted text.
  • <sub> – Subscript text.
  • <sup> – Superscript text.

HTML <b> and <strong> Elements

In HTML, the <b> element represents bold text, without any additional significance.


<!DOCTYPE html> <html> <body><b>As you can see this text is bold</b></body> </html>

The HTML <strong> element specifies text with a high level of importance. Bold text is typically used to indicate the content inside.


<!DOCTYPE html> <html> <body><strong>This text is strong and important!</strong></body> </html>

Element <small>

Smaller text can be specified by the HTML <small> element:


<!DOCTYPE html> <html> <body><small>Here text is smaller.</small></body> </html>

HTML <mark> Element

Marked or highlighted text is described by the HTML <mark> element when it comes to HTML formatting:


<!DOCTYPE html> <html> <body><p>Learn HTML Formatting with <mark>Mr Examples</mark> with ease.</p></body> </html>

HTML <big> Element

In HTML to make your font much larger than other text, put the content within <big>..</big>. There is a one-size-up increase in font size in HTML formatting. See example below


<!DOCTYPE html> <html> <body> <p>This is a paragraph with the <big> big text</big> in it .</p> </body> </html>

HTML <u> Element

When we talk about HTML formatting in HTML to make your font underline than the other text, put the content within <u>..</u>. The text between it will be underlined. See example below


<!DOCTYPE html> <html> <body> <p>This is a paragraph with the <u> underlined text</u> in it .</p> </body> </html>

HTML <del> Element

Documents with the <del> element indicate that text has been deleted. When text is deleted from a browser, a line is usually drawn across it:


<!DOCTYPE html> <html> <body><p>How to format <del>HTML</del> ?</p></body> </html>

HTML <i> and <em> Elements

An HTML <i> element indicates a part of text in an alternative tone or mood. Italics are normally used to display the content inside.

Tip: Use the <i> tag for technical terminology, quotations from other languages, thoughts, ship names, etc.


<!DOCTYPE html> <html> <body><i>Text is italic because of i tag</i></body> </html>

Emphasised text is defined by the HTML element <em>. Italics are usually used to show the content within.

You can pronounce the words in <em> with emphasis by stressing them verbally.


<!DOCTYPE html> <html> <body><em>Emphasized text looks like this.</em></body> </html>

HTML Formatting: HTML <ins> Element

An HTML element specified by the <ins> tag – indicates that some text has been added to a document. In most cases, the added text will be underlined by the browser when it comes to HTML formatting:


<!DOCTYPE html> <html> <body><p>Who is better <del>Jeff Bezos</del> or <ins>Elon Musk</ins>.</p></body> </html>

HTML <sub> Element

Subscript text is defined by the HTML <sub> element. There is a gap between the normal line and subscript text, and the font may appear smaller when it appears below it.

Formulas like H2O:a can be represented with subscript text


<!DOCTYPE html> <html> <body><p>Here text is <sub>subscripted</sub> text.</p></body> </html>

HTML <sup> Element

In HTML,the <sup> element defines superscript text. There is usually a half-character space above the normal line and sometimes a smaller font is used for superscript text as it comes to HTML formatting.

Footnotes can be made using superscript text, such as WWW[1]:


<!DOCTYPE html> <html> <body><p>Here text is <sup>superscripted</sup> text.</p></body> </html>

HTML <strike> Element

Any text contained within <strike>..</strike> element is highlighted with a strikethrough. There is a thin line that crosses the statement. See the example below:


<!DOCTYPE html> <html> <body> <p>This is a paragraph with the <strike> strikethrough text</strike> in it .</p> </body> </html>

HTML <tt> Element

For each letter to have the same width, write the content within the <tt>..</tt> element.

IMPORTANT: Variable-width fonts are known because each letter has a different width. (Ex. : ‘w’ is wider than ‘i’). Monospaced fonts provide similar spacing between every letter.


<!DOCTYPE html> <html> <body> <p>This is a paragraph with the <tt> monospaced text</tt> in it .</p> </body> </html>

HTML Text Formatting Elements


Makes text bold


Indicates which text should be highlighted


Describes the voice or mood of a text


Smaller text is defined by this property


Identifies important text


Subscripts are defined here


Describes superscripted text


Inserted text is defined


Text that has been deleted


Text that has been marked or highlighted


One conventional unit is added to the font size with this tag.


Strikethroughs can be drawn using this tag. (HTML5-incompatible)


A text is displayed in teletype with this tag. It is not compatible with HTML5.


Text written between this tag is underlined.

HTML Formatting For Text Uses

Following are five essential HTML formatting options for text:

  1. Headings:
    • Use <h1> to <h6> tags to create headings of different levels, with <h1> being the highest level.
  2. Bold and Italic:
    • Use <b> or <strong> tags to render text in bold.
    • Use <i> or <em> tags to render text in italics.
  3. Underline and Strikethrough:
    • Use the <u> tag to render text with an underline.
    • Use the <s> tag to render text with a strikethrough line.
  4. Superscript and Subscript:
    • Use the <sup> tag to format text as superscript (above the normal line).
    • Use the <sub> tag to format text as subscript (below the normal line).
  5. Lists:
    • Use <ul> to create an unordered (bulleted) list.
    • Use <ol> to create an ordered (numbered) list.
    • Use <li> to define a list item within <ul> or <ol>.


As we are discussing HTML formatting, the HTML text format provides a versatile and effective way of presenting text in a visually appealing and user-friendly manner. A variety of text formatting elements and tags are available in HTML to help you structure, emphasize, and clear your web content.

A web developer must master HTML text formatting regardless of whether they are creating a personal blog or a professional website. You can create web pages that are attractive, informative, and visually stunning using HTML text formatting with a bit of practice and experimentation.

You can leave your reviews and feedback as reactions below to let us know what you think about our services.

We value your feedback.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

Leave a Reply

Your email address will not be published. Required fields are marked *