Scribd
Upload
3 views6 pages

HTML Formatting

The document explains HTML formatting, detailing how to enhance text appearance using various tags. It categorizes formatting tags into physical and logical types, providing examples for each of the 14 tags including <b>, <strong>, <i>, <em>, <mark>, <u>, <tt>, <strike>, <sup>, <sub>, <del>, <ins>, <big>, and <small>. Each tag serves a specific purpose, such as making text bold, italic, or underlined, and the document includes code snippets to illustrate their usage.

Uploaded by

DURGESH SHARMA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views6 pages

HTML Formatting

The document explains HTML formatting, detailing how to enhance text appearance using various tags. It categorizes formatting tags into physical and logical types, providing examples for each of the 14 tags including <b>, <strong>, <i>, <em>, <mark>, <u>, <tt>, <strike>, <sup>, <sub>, <del>, <ins>, <big>, and <small>. Each tag serves a specific purpose, such as making text bold, italic, or underlined, and the document includes code snippets to illustrate their usage.

Uploaded by

DURGESH SHARMA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

HTML Formatting

HTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to format text
without using CSS. There are many formatting tags in HTML. These tags are used to make text bold, italicized, or
underlined. There are almost 14 options available that how text appears in HTML and XHTML.

In HTML the formatting tags are divided into two categories:

o Physical tag: These tags are used to provide the visual appearance to the text.
o Logical tag: These tags are used to add some logical or semantic value to the text.
Here, we are going to learn 14 HTML formatting tags. Following is the list of HTML formatting text.

This is a physical tag, which is used to


<b>
bold the text written between it.

This is a logical tag, which tells the


<strong>
browser that the text is important.

This is a physical tag which is used to


<i>
make text italic.

This is a logical tag which is used to


<em>
display content in italic.

<mark> This tag is used to highlight text.

This tag is used to underline text


<u>
written between it.

This tag is used to appear a text in


<tt>
teletype. (not supported in HTML5)

This tag is used to draw a


<strike> strikethrough on a section of text. (Not
supported in HTML5)

It displays the content slightly above


<sup>
the normal line.

It displays the content slightly below


<sub>
the normal line.

This tag is used to display the deleted


<del>
content.
This tag displays the content which is
<ins>
added

This tag is used to increase the font


<big>
size by one conventional unit.

This tag is used to decrease the font


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

1. <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 logical tag, which displays the content in bold font and informs the browser about its
logical importance. If you write anything between <strong>???????. </strong>, is shown important text.

See this example:

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

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>formatting elements</title>
5. </head>
6. <body>
7. <h1>Explanation of formatting element</h1>
8. <p><strong>This is an important content</strong>, and this is normal content</p>
9. </body>
10. </html>
2) Italic Text
HTML <i> and <em> formatting elements

The HTML <i> element is physical element, which display the enclosed content in italic font, without any added
importance. If you write anything within <i>............</i> element, is shown in italic letters.

See this example:

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

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

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>formatting elements</title>
5. </head>
6. <body>
7. <h1>Explanation of italic formatting element</h1>
8. <p><em>This is an important content</em>, which displayed in italic font.</p>
9. </body>
10. </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:

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

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

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


Output:

Write Your First Paragraph with strikethrough.

6) Monospaced Font
If you want that each letter has the same width then you should write the content within <tt>.............</tt> element.

Note: We know that most of the fonts are known as variable-width fonts because different letters have different width.
(for example: 'w' is wider than 'i'). Monospaced Font provides similar space among every letter.

See this example:

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

Output:

Hello Write Your First Paragraph in monospaced font.

7) Superscript Text
If you put the content within <sup>..............</sup> element, is shown in superscript; means it is displayed half a
character's height above the other characters.

See this example:

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


Output:

Hello Write Your First Paragraph in superscript.

8) Subscript Text
If you put the content within <sub>..............</sub> element, is shown in subscript ; means it is displayed half a
character's height below the other characters.

See this example:

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

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

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


Output:

Delete your first paragraph.Write another paragraph.

11) Larger Text


If you want to put your font size larger than the rest of the text then put the content within <big>.........</big>. It
increase one font size larger than the previous one.
See this example:

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


Output:

Hello Write the paragraph in larger font.

12) Smaller Text


If you want to put your font size smaller than the rest of the text then put the content within <small>.........</small>tag.
It reduces one font size than the previous one.

See this example:

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

Output:

Hello Write the paragraph in smaller font.

You might also like