HTML Text Formatting

HTML Formatting is a way to change the way text looks and feels. HTML lets us format text without having to use CSS. HTML has many tags for formatting. Text can be made bold, italic, or underlined by using these tags. In HTML and XHTML, there are almost 14 different ways to show text.

In HTML, there are two types of tags for formatting:

Tags that describe how the text looks are called “physical tags.”
Logical tag: These tags are used to give the text more meaning or logic.

NOTE: Some physical and logical tags may look the same, but their meanings are different.

Here, we’ll learn 14 HTML tags for formatting. Here is a list of HTML text formatting.

HTML Text FormattingElements

<b>

This is a tag that makes the text between it stand out in bold.

<strong>

This is a logical tag that tells the browser to pay attention to the text.

<i>

This is a physical tag that makes text look italic.

<em>

This is a logical tag that makes text appear in italics.

<mark>

This tag is used to make some text stand out.

<u>

This tag is used to make text between it stand out.

<tt>

This tag is used to make teletype show text. (not possible with HTML5)

<strike>

This tag is used to make a line of text look like it has been crossed out. (HTML5 doesn’t allow this)

<sup>

It shows the content a little bit above the line.

<sub>

It shows the content a little bit below the line.

<del>

This tag is used to show the content that has been deleted.

<ins>

This tag shows the information that has been added.

<big>

This tag is used to make the font one standard unit bigger.

<small>

This tag is used to make the font size one unit smaller than its base size.

1) HTML <b> and <strong> Elements

HTML and elements for formatting

The HTML <b> element is a physical tag that makes text appear in bold, but it has no logical meaning. Anything you write inside the <b>…</b> element will be shown in bold letters.

Check out this:

<p> <b>

Put your first sentence in bold.

</b></p>

Output:

Put your first sentence in bold.

The HTML strong> tag is a logical tag that shows the text in bold and tells the browser how important it is from a logical point of view. If you write anything between <strong>text</strong>, important text will be shown.

Check out this:

<p><strong>

This is strong text.</strong></p>

Output:

This is strong text.

2) HTML <i> and <em> Elements

HTML I and <em> formatting elements

The HTML I element is a physical element that shows the content inside it in italic font, but it doesn’t add any extra meaning. Anything you write inside an <i>………..</i> element shows up in italics.

Check out this:

<p> I

<i>Italicize text example

</i></p>

Output:

Italicize text example

The HTML <em> tag is a logical element that will show the content inside it in italics and give it more meaning.

Check out this:

<p><em>

Italicize text example</em></p>

Output:

Italicize text example

3) HTML <mark> Element

If you want to mark or highlight a piece of text, you should put the text between mark>…/mark>.

Check out this:

 <p>this example is for <mark>mark</mark> today.</p>

Output

this example is for mark today.

4) HTML <u> Element

Anything you write inside the <u>…</u> element will show up as underlined text.

Check out this:

<p> <u>

Text example of underlined.

</u></p>

Output:

Text example of underlined.

5) HTML <strike> Element

Anything written between the <strike>………..</strike> tags will be shown with a strikethrough. It’s a fine line that goes through the statement.

Check out this:

<p> <strike>

Write your first paragraph with a line through it.</strike>

</p>

Output:

Put a line through your first paragraph.

6) HTML <tt> Element (Monospaced Font)

If you want each letter to be the same width, write the content inside the <tt>………….</tt> element.

Nota: We know that most fonts are called “variable-width fonts” because the width of each letter varies. (For instance, “w” is bigger than I Every letter in a monospaced font has the same amount of space between them.

Check out this:

<p>Hello <tt>

this is a single-spaced font example

</tt></p>

Output:

Hello this  is  a  single-spaced  font  example

7) HTML <sup> Element

If you put text inside the ^{…………..} element, it will be shown in superscript, which means it will be half a character taller than the other text.

Check out this:

<p>Hello <sup>

superscript example here

</sup></p>

Output:

Hello ^{superscript example here}

8) HTML <sub> Element

If you put text inside the _{…………..} element, it will be shown in subscript, which means that it will be shown half a character’s height below the other text.

Check out this:

<p>Hello <sub>

your subscript text here.

</sub></p>

Output:

Hello _{your subscript text here.}

9) HTML <del> Element

Anything you put between <del>…</del> will be shown as deleted text.

Check out this:

<p>

Hello <del>

delete this sentence.

</del></p>

Output:

Hello

10) HTML <ins> Element

Anything you put between <ins>…</ins> will be shown as inserted text.

Check out this:

<p> <del>

delete this text

</del><ins>insert this text.

</ins></p>

Output:

delete this text insert this text.

11) HTML <big> Element

If you want your text to be bigger than the rest of the text, put it between <big>…</big> tags. It goes up one font size from what it was before.

Check out this:

<p>Hello <big>

Bigger text eample

</big>

</p>

Output:

Hello

Bigger text eample

 

12) HTML <small> Element

If you want your font size to be smaller than the rest of the text, use the <small>………</small> tag. It makes the font size one point smaller than it was before.

Check out this:

<p>

Hello <small>

your small text example

</small>

</p>

Output:

Hello your small text example