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.

Example:

This is a BOLD Text.

This is an Italic Text.

And this is subscript and superscript

Table Of Content-

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.

Example

<!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.

Example

<!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:

Example

<!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:

Example

<!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

Example: 

<!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

Example: 

<!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:

Example

<!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.

Example

<!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.

Example

<!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:

Example

<!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

Example

<!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]:

Example

<!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:

Example: 

<!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.

Example: 

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

HTML Text Formatting Elements

TagsOverview
<b>

Makes text bold

<em>

Indicates which text should be highlighted

<i>

Describes the voice or mood of a text

<small>

Smaller text is defined by this property

<strong>

Identifies important text

<sub>

Subscripts are defined here

<sup>

Describes superscripted text

<ins>

Inserted text is defined

<del>

Text that has been deleted

<mark>

Text that has been marked or highlighted

<big>

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

<strike>

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

<tt>

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

<u>

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>.

Conclusion

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.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!
icon
By subscribing, you agree with our privacy policy and our terms of service.

Leave a Reply

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