HTML Text 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:
- Physical tag:
These tags are used to provide the visual appearance to the text.
- 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.
|
Sr.No |
Element name |
Description |
|
1 |
<b> |
This is a physical tag, which
is used to bold the text written between it. |
|
2 |
<strong> |
This is a logical tag, which
tells the browser that the text is important. |
|
3 |
<i> |
This is a physical tag which
is used to make text italic. |
|
4 |
<em> |
This is a logical tag which is
used to display content in italic. |
|
5 |
<mark> |
This tag is used to highlight
text. |
|
6 |
<u> |
This tag is used to underline
text written between it. |
|
7 |
<tt> |
This tag is used to appear a
text in teletype. (not supported in HTML5) |
|
8 |
<strike> |
This tag is used to draw a
strikethrough on a section of text. (Not supported in HTML5) |
|
9 |
<sup> |
It displays the content
slightly above the normal line. |
|
10 |
<sub> |
It displays the content
slightly below the normal line. |
|
11 |
<del> |
This tag is used to display
the deleted content. |
|
12 |
<ins> |
This tag displays the content
which is added |
|
13 |
<big> |
This tag is used to increase
the font size by one conventional unit. |
|
14 |
<small> |
This tag is used to decrease
the font size by one unit from base font size. |
See this example:
<p> <b>First Paragraph in bold text.</b></p>
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> Type here text . </strong>, is shown important text.
See this example:
<p><strong>This is an important Word</strong>, and this is normal Word</p>
------------------------------------------------------------------------------------------------------------
Italic Text
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:
<p> <i>Write Your First Paragraph in italic text.</i></p>
See this example:
<p><em>This is an important content</em>, which displayed in italic font.</p>
See this example:
See this example:
<h2> I want to put a <mark> Mark</mark> on your face</h2>
See this example:
<p> <u>Write Your First Paragraph in underlined text.</u></p>
--------------------------------------------------------------------------------------------------------------
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:
<p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>
--------------------------------------------------------------------------------------------------------------
Strike Text
Anything written within
<strike>Type Here ........</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>
---------------------------------------------------------------------------------------------------------------
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:
<p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>
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:
<p>Hello <sub>Write Your First Paragraph in subscript.</sub></p>
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>
Deleted 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>
------------------------------------------------------------------------------------------------------
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:
<p>Hello <big>Write the paragraph in larger font.</big></p>
---------------------------------------------------------------------------------------------------------------
See this example:
<p>Hello <small>Write the paragraph in smaller font.</small></p>
---------------------------------------------------------------------------------------------------------------
No comments:
Post a Comment