Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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
HTML <small> Tag
To set a smaller font size in an HTML document, use the <small> tag. This tag decreases the font size by one level, from medium to small or extra-large to large. There are two ways to use the <small> tag in HTML. 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.
The <small> tag supports both Event Attributes and Global Attributes in HTML. Although not deprecated, similar or better results can be achieved using CSS.
Syntax
Following is the usage of small font tags in HTML -
<small>text? </small>
It has both opening and closing tags and supports global and event attributes.
Example
This example demonstrates the usage of the <small> tag. The HTML code creates a webpage titled "HTML small Tag," displaying "Tutorialspoint" as a heading and simply Easy Learning" in smaller text within a paragraph.
<!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
When the <small> tag is used in a nested form, it adjusts the font size relative to the parent element's font size within the <small> tag will also increase accordingly.
Example
The following example demonstrates adding headings, body, and other HTML structures. The code creates a webpage titled "TutorialsPoint," displaying "HTML Tutorial" as a heading and "HTML means Hyper Text Markup Language" in smaller text within a paragraph.
<!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
In the example below, the HTML code creates a webpage titled "TutorialsPoint." It displays a heading "HTML Tutorial" and a paragraph with large text, defining HTML as "Hyper Text Markup Language."
<!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 ? The ratio between the font size of nested small text and parent element text is the same.
Non-Nested Form
Non-nested form means, we can use the <small> tag as a separate element in HTML, so the font size of the parent element does not affect the <small> tag text.
Example
The following example demonstrates the non-nested <small> tag. This HTML code creates a webpage titled "TutorialsPoint", displaying a heading "HTML Tutorial" and a paragraph defining HTML as "Hyper Text Markup Language" in smaller text.
<!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
Consider another example where you change the font size of the paragraph and observe the effect on the <small> tag. This HTML code creates a webpage titled "TutorialsPoint," displaying a heading "HTML Tutorial" and a paragraph defining HTML as "Hyper Text Markup language" in smaller text.
<!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
We are now applying a CSS property to set the font size of text using the <small> tag. This HTML code creates a webpage demonstrating smaller text with CSS. It displays a heading, a paragraph, and a span element with smaller, blue text defining "Hyper Text Markup Language."
<!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>
746 Views
