HTML small Tag
The <small> tag in HTML is used to set small 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.
Syntax:
<small> Contents... </small>
Example 1:
HTML
<html> <body> <h1>GeeksforGeeks</h1> <h2><small> Tag</h2> <!-- html small tag is used here --> <small>Welcome to GeeksforGeeks!</small> </body> </html> |
Output:
There are basically two ways in which you could use this <small> tag.
i) 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:
HTML
<!DOCTYPE html><html><head><title>GeeksForGeeks</title></head><body><h2>Welcome To GFG</h2><p style="font-size: 18px;">Geeks For Geeks <small>krlo ho jayega!</small></p></body></html> |
<small> tag in nested form
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.
HTML
<!DOCTYPE html><html><head><title>GeeksForGeeks</title></head><body><h2>Welcome To GFG</h2><p style="font-size: 32px">Geeks for Geeks <small>krlo ho jayega</small></p></body></html> |
<small> tag in nested form
It means that the ratio between the font size of the nested <small> tag text and the parent element's text is same.
ii) 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.
HTML
<!DOCTYPE html><html><head><title>GeeksForGeeks</title></head><body><h2>Welcome To GFG</h2><p style="font-size: 18px">Geeks For Geeks</p><small>Krlo ho jayega!</small></body></html> |
<small> tag in a non-nested form
But if we change the font size of the paragraph, it will not affect the font size of the <small> tag text.
HTML
<!DOCTYPE html><html><head><title>GeeksForGeeks</title></head><body><h2>Welcome To GFG</h2><p style="font-size: 32px">Geeks For Geeks</p><small>Krlo ho jayega!</small></body></html> |
<small> tag in non-nested form
Example 2: 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>GeeksforGeeks</h1> <h2>font-size: smaller;</h2> <div class = "gfg">Welcome to GeeksforGeeks!</div> </body></html> |
Output:
Supported Browsers:
- Google Chrome
- Edge 12 and above
- Internet Explorer
- Firefox 1 and above
- Safari
- Opera
Please Login to comment...