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.
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.
Following is the list of HTML formatting text.
Example
<!DOCTYPE>
<html>
<title>HTML Tutorials</title>
<body>
<p><strong>This is an important content</strong>, and this is normal content</p>
</body>
</html>
Output
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.
<!DOCTYPE>
<html>
<title>HTML Tutorials</title>
<body>
<p> <i>Write Your First Paragraph in italic text.</i></p>
</body>
</html>
Output
The HTML <em> tag is a logical element, which will display the enclosed content in italic font, with added semantics importance.
Example
<!DOCTYPE>
<html>
<title>HTML Tutorials</title>
<body>
<p><em>This is an important content</em>, which displayed in italic font.</p>
</body>
</html>
Output
If you want to mark or highlight a text, you should write the content within <mark>.........</mark>.
Example
<!DOCTYPE>
<html>
<title>HTML Tutorials</title>
<body>
<h2> Listen <mark> Carefully</mark> everyone.</h2>
</body>
</html>
Output
If you write anything within <u>.........</u> element, is shown in underlined text.
Example
<!DOCTYPE>
<html>
<title>HTML Tutorials</title>
<body>
<p> <u>Write Your First Paragraph in underlined text.</u></p>
</body>
</html>
Output
Anything written within <strike>.......................</strike> element is displayed with strikethrough. It is a thin line which cross the statement.
Example
<!DOCTYPE>
<html>
<title>HTML Tutorials</title>
<body>
<p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>
</body>
</html>
Output
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.
Example
<!DOCTYPE>
<html>
<title>HTML Tutorials</title>
<body>
<p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>
</body>
</html>
Output
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
<!DOCTYPE>
<html>
<title>HTML Tutorials</title>
<body>
<p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>
<p>X <sup>2</sup> + 2X + 5 = 0</p>
</body>
</html>
Output
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
<!DOCTYPE>
<html>
<title>HTML Tutorials</title>
<body>
<p>Hello <sub>Write Your First Paragraph in subscript.</sub></p>
<p>2H20 = 2H <sub>2</sub> + O <sub>2</sub></p>
</body>
</html>
Output
Anything that puts within <del>..........</del> is displayed as deleted text.
Example
<!DOCTYPE>
<html>
<title>HTML Tutorials</title>
<body>
<p>Hello <del>Delete your first paragraph.</del></p>
</body>
</html>
Output
Anything that puts within <ins>..........</ins> is displayed as inserted text.
Example
<!DOCTYPE>
<html>
<title>HTML Tutorials</title>
<body>
<p> <del>Delete your first paragraph.</del><ins>Write another paragraph.</ins></p>
</body>
</html>
Output
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
<!DOCTYPE>
<html>
<title>HTML Tutorials</title>
<body>
<p>Hello <big>Write the paragraph in larger font.</big></p>
</body>
</html>
Output
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
<!DOCTYPE>
<html>
<title>HTML Tutorials</title>
<body>
<p>Hello <small>Write the paragraph in smaller font.</small></p>
</body>
</html>
Output
No comments:
Post a Comment