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, italic and underlined. There are almost 14 options available that how text appears in HTML.
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.
Following is the list of HTML formatting text:
<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 html 5)
<strike> This tag is used to draw a strikethrough on a section of text. (Not supported in html 5)
<sup> It displays the content slightly below the normal line.
<sub> It display 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> Tis 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.
Example:
<p> <b> Write your first paragraph in bold text.</b> </p>
Output:
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.
Example:
<p> <strong>This is an important content</strong> and this is normal content</p>
Output:
<!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>
Output:
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.
Example:
<p><i> Write your first paragraph in italic text.</i></p>
Output:
The HTML <em> tag is a logical element which will display the enclosed content in italic font, with added semantics importance.
Example:
<p><em> This is an important content</em> which displayed in italic font.</p>
Output:
Example:
<!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 MARK FORMATTING:
If you want to mark or highlight a text you should write the content within <mark>......</mark>.
Example:
<h2> I want to put a<mark>Mark</mark>on your face</h2>
Output:
4. UNDERLINE TEXT:
Example:
<p> <u> Write your first paragraph in underlined text.</u> </p>
Output:
5. STRIKE TEXT:
Anything written within <strike>-------------------</strike> element is displayed with strike through. It is a thin line which cross the statement.
Example:
<p> <strike>Write your first paragraph with strikethrough</strike> </p>
Output:
6. MONOSPACED FONT:
If you want that each letter has the same width then you should write the content within <tt> -----</tt> element.
We know that most of the fonts are known as variable -width fonts because different letters have different width. (example 'w' is wider than 'i' ), Monospaced font provides similar space among every letter.
Example:
<p> Hello<tt> Write your first paragraph in monospaced font.</tt> <p>
Output:
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..
Example:
<p> Hello<sup> Write your first paragraph in superscript. </sup> </p>
Output:
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.
Example:
<p> Hello<sub>Write your first paragraph in subscript.</sub> </p>
Output:
9. DELETED TEXT:
Anything that puts within <del>---------------</del> is displayed as deleted text.
Example:
<p> Hello<del>Delete your first paragraph. </del> </p>
Output:
10. INSERTED TEXT:
Anything that puts within <ins>---------</ins> is displayed as inserted text.
Example:
<p> <del>Delete your first paragraph.</del> <ins>Write another paragraph</ins> </p>
Output:
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.
Example:
<p>Hello> <big>Write the paragraph in larger font.</big></p>
Output:
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.
Example:
<p>Hello<small>Write the paragraph in smaller font.</small> </p>
Output:
0 comments:
Post a Comment