HTML <small> Tag
The <small> tag in HTML is used to define smaller text, reducing font size. It decreases the font size by one size (from medium to small, from x-large to large). It has a display property of inline.
The <small>
tag also supports the Global Attributes and Event Attributes in HTML. This tag is not deprecated, but it is possible to achieve better results or nearly the same effect with CSS.
Syntax:
<small> Contents... </small>
Example 1: In this example, we will implement the small tag in an HTML document.
HTML
< html > < body > < h1 > w3wiki </ h1 > < h2 > < small > Tag </ h2 > <!-- html small tag is used here --> < small > Welcome to w3wiki! </ small > </ body > </ html > |
Output:
There are basically two ways in which you could use this <small> tag
1. In a Nested Form
When you use the <small> tag in a nested form then the <small> tag will going to change the font size of the text in between it with respect to the parent element’s font size which means changing text with respect to its surroundings.
Example 1: In this example, we will implement the above form in an HTML document.
HTML
<!DOCTYPE html> < html > < head > < title >w3wiki</ title > </ head > < body > < h2 > Welcome To GFG </ h2 > < p style = "font-size: 18px;" > Beginner For Beginner < small > krlo ho jayega! </ small > </ p > </ body > </ html > |
tag in nested form
Note: But when we increase the font size of the parent element, the <small> tag will automatically increase the font size of its text as well.
Example 2: In this example also, we will implement the small tag in an HTML document.
HTML
<!DOCTYPE html> < html > < head > < title >w3wiki</ title > </ head > < body > < h2 > Welcome To GFG </ h2 > < p style = "font-size: 32px" > Beginner for Beginner < small > krlo ho jayega </ small > </ p > </ body > </ html > |
tag in nested form
Note: It means that the ratio between the font size of the nested <small> tag text and the parent element’s text is same.
2. In a non-nested Form
If the <small> tag is used as a separate element in the HTML document, then changing the font size of any element will not going to affect the font size of the <small>tag text.
Example 1: In this example, we will implement the above form in an HTML document.
HTML
<!DOCTYPE html> < html > < head > < title >w3wiki</ title > </ head > < body > < h2 >Welcome To GFG</ h2 > < p style = "font-size: 18px" > Beginner For Beginner </ p > < small > Krlo ho jayega! </ small > </ body > </ html > |
Output:
tag in a non-nested form
Note : But if we change the font size of the paragraph, it will not affect the font size of the <small> tag text.
Example 2: In this example, we will implement the above form in an HTML document.
HTML
<!DOCTYPE html> < html > < head > < title >w3wiki</ title > </ head > < body > < h2 > Welcome To GFG </ h2 > < p style = "font-size: 32px" > Beginner For Beginner </ p > < small >Krlo ho jayega!</ small > </ body > </ html > |
tag in non-nested form
Example 2: In this example we will use CSS property to set the font size smaller.
HTML
<!DOCTYPE html> < html > < head > < title >small Tag</ title > < style > body { text-align: center; } h1 { color: green; } .gfg { font-size: smaller; } </ style > </ head > < body > < h1 > w3wiki </ h1 > < h2 > font-size: smaller; </ h2 > < div class = "gfg" > Welcome to w3wiki! </ div > </ body > </ html > |
Output:
Supported Browsers:
- Google Chrome 1
- Edge 12
- Firefox 1
- Opera 15
- Safari 4
Contact Us