Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create small text in HTML
If we want to set a small font size in HTML document use <small> tag. This tag is used to decrease the font size by one that is from medium size to small size or extra-large to large size. There are two ways, we can use this <small> tag in HTML:
In a nested form
In a non-nested form
Syntax
Following is the usage of small font tag in HTML -
<small>text… </small>
It has opening and closing tags. It supports global as well as event attributes.
Example
Following example demonstrates the usage of small tag −
<!DOCTYPE html> <html> <head> <title>HTML small Tag</title> </head> <body> <h2>Tutorialspoint</h2> <p><small> Simply Easy Learning</small></p> </body> </html>
Nested form
If we use small tag in nested form, it changes the font size that present in between with respect to parent’s font size. Suppose, if we increase the font size of parent text automatically small tag font size also increases.
Example
Following example demonstrates how to add headings, body and other structure of the HTML.
<!DOCTYPE html> <html> <head> <title>TutorialsPoint</title> </head> <body> <h2>HTML Tutorial</h2> <p style="font-size: 15px;">HTML means <small>Hyper Text Markup Language</small></p> </body> </html>
Example
Following example, we are trying to increase font size of parent element of the <small> tag.
<!DOCTYPE html> <html> <head> <title>TutorialsPoint</title> </head> <body> <h2>HTML Tutorial</h2> <p style="font-size: 40px;">HTML means <small>Hyper Text Markup Language</small></p> </body> </html>
Note − Ratio between font size of nested small text and parent element text is same.
What is non-nested form?
Non-nested form means, we can use small tag as separate element in HTML, so that the font size of parent’s element does not affect the small tag text.
Example
Following is the example, of the non-nested small tag –
<!DOCTYPE html> <html> <head> <title>TutorialsPoint</title> </head> <body> <h2>HTML Tutorial</h2> <p style="font-size: 15px;">HTML means </p> <small>Hyper Text Markup Language</small> </body> </html>
Example
Now consider another example, try to change the font size of paragraph, and check what happened to the font size of <small> tag.
<!DOCTYPE html> <html> <head> <title>TutorialsPoint</title> </head> <body> <h2>HTML Tutorial</h2> <p style="font-size: 30px;">HTML means </p> <small>Hyper Text Markup Language</small> </body> </html>
CSS Settings to <small> tag
Now, we are trying to apply CSS property to set the font size to a text by using small tag.
<!DOCTYPE html>
<html>
<head>
<style>
span.small {
font-size: smaller;
color: blue;
}
</style>
</head>
<body>
<h2>Demonstrating smaller text by applying CSS</h2>
<p>HTML Means,</p>
<p>
<span class="small">Hyper Text Markup Language.</span>
</p>
</body>
</html>
337 Views
