Start Learning Free
Previous Tutorial
07
DecFormatting in HTML
14 May 2024
Beginner
1.9K Views
13 min read
Learn with an interactive course and practical hands-on labs
Free HTML Foundation Course: Learn HTML In 21 Days
HTML Formatting
HTML Formatting means that the text elements present in an HTML program can be modified such as bold, italic, underline, etc. Text formatting tags in HTML. It helps in making the content more attractive. The use of HTML formatting tags is to tell the browser how the content should be displayed. And there are many more options which we are going to see in this article. Through HTML Online Training, we will delve into these formatting options and learn how to leverage them effectively.
There are two types of formatting tags in HTML
- Physical tag: These tags are used to provide a physical appearance to the text,<b>, <i>, <mark>. These are some physical tags.
- Logical tag: These tags are used to add some logical value to the text,<strong>, <em>. These are some Logical Tags.
Let us understand more about Formatting tags in HTML.
| Read More:- HTML Interview Questions and Answers |
HTML Bold Tag
In HTML Bold tags are denoted as HTML<b> and are used to bold important words. It is also used in the writing of titles and headings in articles. The <strong> tag is used to define text with strong importance. HTML<b> and HTML<strong> both work to make bold fonts.
HTML<b> and HTML<strong> both are non-empty text therefore they have closing tags which are </b> and </strong>.
Example:
<html>
<body>
<p>Bold text = <b>HTML Formatting </b> is very <strong>Helpful</strong></p>
</body>
</html>
Output:
HTML Italic Tag
Italic font is used to change the font style of articles, stories, poems, etc. It is denoted by HTML <i>. With the help of <i> and <em> tags in HTML, we can change our text in italic font.
HTML <i> tag – it is used to write the text in italic font.
HTML<em> tag – HTML <em> tag is a semantic tag used to define emphasized text. The content inside the tag will be displayed in italic.
<i> and <em> both tags are non-empty elements therefore they have closing tags which are </i> and </em>.
For Example:
<html>
<body>
<p>Italic text = <i> HTML Formatting tags</i> are <em>BEST!</em></p>
</body>
</html>
Output:
HTML Underline Tag
Underline tag is used to underline important words which require the attention of users or can be used to make headings or subheadings more attractive. It is denoted by HTML <u> tag.
HTML<u> tag is a non-empty element therefore it has a closing tag which is </u>.
For Example:
<html>
<body>
<p>Underlined text = <u>HTML Underlined tags</u></p>
</body>
</html>
Output:
HTML Mark Tag
This is a new tag that was introduced in the latest version of HTML (HTML5). It is used to highlight the selected word in a sentence. By Default, the Mark tag highlights the selected words with a yellow background. It is denoted by HTML<mark>tag.
The HTML<mark> tag is a non-empty element therefore it has a closing tag i.e., </mark>.
For Example:
<html>
<body>
<p>Highlighted text = <mark> HTML Formatting </mark></p>
</body>
</html>
Output:
Sub Tag in HTML
Sub tag in HTML denoted as <sub>. A Subscript is a letter, symbol, or number which is usually in smaller font size and half a character below the standard line. Subscript tags are denoted as <sub> and are used to write chemical formulas like H2O, O2, etc. Here 2 is a subscript.
<sub> tag in HTML is a non-empty element therefore it has a closing tag which is </sub>.
For Example:
<html>
<body>
<p>Simple text = H2O, O3</p>
<p>Subscript text=H<sub>2</sub>O, O<sub>3</sub></p>
</body>
</html>
Output:
Sup Tag in HTML
Sup Tag in HTML is known as Superscript Tags which is denoted as <sup>. A Superscript is a number, letter, or symbol which is usually in smaller font size and half a character above the standard line. Superscript tags are used to write mathematical equations like a2+b2. Here 2 is a superscript.
<sup> tag in HTML is a non-empty element therefore it has a closing tag which is </sup>.
For Example:
<html>
<body>
<p>Simple text = a2+b2</p>
<p>Superscript text=a<sup>2</sup>+ b<sup>2</sup></p>
</body>
</html>
Output:
Deleted and Inserted Tag in HTML
When we have to edit or modify something, we use delete and insert tags. Delete tag is denoted <del> as Delete tag is used for text which is not required or has to be deleted. Text enclosed by HTML<del> tag is texted as strike-through text. While <ins> tag is used to insert updated or new text in the content. Text enclosed by HTML<ins> tag is texted as underlined.
HTML<del> and HTML <ins> tags are non-empty elements therefore they have a closing tag which is </del>tag and </ins>.tag
For Example:
<html>
<body>
<p><del>HTML4</del> <ins>HTML5</ins> is the latest version of HTML!</p>
</body>
</html>
Output:
Big and Small Texts
A big tag in HTML denoted as <big> is used to make the font size of the text one size bigger than the other texts.
A small tag in HTML is denoted as <small>tag which is used to make the font size of the text one size smaller than the other texts.
Note- Big tag in HTML is not supported in HTML5 while the small tag is supported in HTML5. However, we can also change the font size using CSS.
<big> and <small> tags are non-empty elements therefore they have a closing tag which is </big>tag and </small>tag.
For Example:
<html>
<body>
<p>This is <small>small tag in HTML</small> and<big> big tag in HTML</big></p>
</body>
</html>
Output:
Summary
HTML is all about making structures of webpages/websites and for doing so, HTML formatting is a must. To apply Formatting in HTML , there are many tags such as HTML<b> to Bold the text, HTML<u> to Underline the text, HTML<ins> to insert an element, and many more. Mastering these formatting tags in HTML is an essential part of achieving HTML Certification. With help of these Formatting tags in HTML, we can make the content more attractive for the users. After learning about Formatting tags in HTML, you will also increase your skill to provide user satisfaction.
Take our Html skill challenge to evaluate yourself!
In less than 5 minutes, with our skill challenge, you can identify your knowledge gaps and strengths in a given skill.