Formatting Tags In Html

formatting-tags-in-html

HTML Formatting

HTML Formatting is a cycle of arranging text for better look and feel. HTML gives us capacity to design text without utilizing CSS. There are many arranging labels in HTML. These labels are utilized to make text striking, emphasized, or underlined. There are just about 14 alternatives accessible that how text shows up in HTML and XHTML.

In HTML the arranging labels are isolated into two classifications:

  • Actual tag: These labels are utilized to give the visual appearance to the content.
  • Legitimate tag: These labels are utilized to increase the value of the content.

NOTE: There are some physical and logical tags which may give same visual appearance, but they will be different in semantics.

Here, we are going to learn 14 HTML formatting tags. Following is the list of HTML formatting text.

Element nameDescription
<b>This is a physical tag, which is used to bold the text written between it.
<strong>This is a logical tag, which tells the browser that the text is important.
<i>This is a physical tag which is used to make text italic.
<em>This is a logical tag which is used to display content in italic.
<mark>This tag is used to highlight text.
<u>This tag is used to underline text written between it.
<tt>This tag is used to appear a text in teletype. (not supported in HTML5)
<strike>This tag is used to draw a strikethrough on a section of text. (Not supported in HTML5)
<sup>It displays the content slightly above the normal line.
<sub>It displays the content slightly below the normal line.
<del>This tag is used to display the deleted content.
<ins>This tag displays the content which is added
<big>This tag is used to increase the font size by one conventional unit.
<small>This tag is used to decrease the font size by one unit from base font size.

1) Bold Text

HTML<b> and <strong> formatting elements

The HTML <b> element is a physical tag which display text in bold font, without any logical importance. If you write anything within <b>…………</b> element, is shown in bold letters.

See this example:

<p> <b>Write Your First Paragraph in bold text.</b></p>

Output:

Write Your First Paragraph in bold text.

The HTML <strong> tag is a legitimate tag, which shows the substance in strong text style and educates the program about its intelligent significance. On the off chance that you compose anything between <strong>???????. </strong>, is indicated significant content.

See this example:

<p><strong>This is an important content</strong>, and this is normal content</p>

Output:

This is an important content, and this is normal content

Example

<!DOCTYPE html>

<html>

<head>

<title>formatting elements</title>

</head>

<body>

<h1>Explanation of formatting element</h1>

<p><strong>This is an important content</strong>, and this is normal content</p>

</body>

</html>


2) Italic Text

HTML <i> and <em> formatting elements

The HTML <i> component is actual component, which show the encased substance in italic text style, with no additional significance. In the event that you compose anything inside <i>…………</i> component, is appeared in italic letters.

See this example:

<p> <i>Write Your First Paragraph in italic text.</i></p>

Output:

Write Your First Paragraph in italic text.

The HTML <em> tag is a logical element, which will display the enclosed content in italic font, with added semantics importance.

See this example:

<p><em>This is an important content</em>, which displayed in italic font.</p>

Output:

This is an important content, which displayed in italic font.

<!DOCTYPE html>

<html>

<head>

<title>formatting elements</title>

</head>

<body>

<h1>Explanation of italic formatting element</h1>

<p><em>This is an important content</em>, which displayed in italic font.</p>

</body>

</html>

3) HTML Marked formatting

If you want to mark or highlight a text, you should write the content within <mark>………</mark>.

See this example:

<h2>  I want to put a <mark> Mark</mark> on your face</h2>

Output:

I want to put a Mark on your face


4) Underlined Text

If you write anything within <u>………</u> element, is shown in underlined text.

See this example:

<p> <u>Write Your First Paragraph in underlined text.</u></p>

Output:

Write Your First Paragraph in underlined text.


5) Strike Text

Anything written within <strike>…………………..</strike> element is displayed with strikethrough. It is a thin line which cross the statement.

See this example:

<p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>

Output:

Write Your First Paragraph with strikethrough.


6) Monospaced Font

On the off chance that you need that each letter has a similar width, at that point you ought to compose the substance inside <tt>………….</tt> component.

Note: We realize that the majority of the textual styles are known as factor width textual styles on the grounds that various letters have distinctive width. (for instance: ‘w’ is more extensive than ‘I’). Monospaced Font gives comparative space among each letter.

See this example:

<p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>

Output:

Hello Write Your First Paragraph in monospaced font.


7) Superscript Text

In the event that you put the substance inside <sup>…………..</sup> component, is appeared in superscript; implies it is shown a large portion of a character’s stature over different characters.

See this example:

<p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>

Output:

Hello Write Your First Paragraph in superscript.


8) Subscript Text

In the event that you put the substance inside <sub>…………..</sub> component, is appeared in addendum ; implies it is shown a large portion of a character’s stature underneath different characters.

See this example:

<p>Hello <sub>Write Your First Paragraph in subscript.</sub></p>

Output:

Hello Write Your First Paragraph in subscript.


9) Deleted Text

Anything that puts within <del>……….</del> is displayed as deleted text.

See this example:

<p>Hello <del>Delete your first paragraph.</del></p>

Output:

Hello

10) Inserted Text

Anything that puts within <ins>……….</ins> is displayed as inserted text.

See this example:

<p> <del>Delete your first paragraph.</del><ins>Write another paragraph.</ins></p>

Output:

Delete your first paragraph.Write another paragraph.


11) Larger Text

On the off chance that you need to put your text dimension bigger than the remainder of the content at that point put the substance inside <big>………</big>. It increment one text dimension bigger than the past one.

See this example:

<p>Hello <big>Write the paragraph in larger font.</big></p>

Output:

Hello Write the paragraph in larger font.


12) Smaller Text

In the event that you need to put your text dimension more modest than the remainder of the content at that point put the substance inside <small>………</small>tag. It decreases one text dimension than the past one.

See this example:

<p>Hello <small>Write the paragraph in smaller font.</small></p>

Output:

Hello Write the paragraph in smaller font.