HTML: <small> tag
In this series of learning HTML, we will teach you how to use HTML small tag with proper syntax and lots of examples. Let’s start on the HTML small tag.
Description for HTML small tag
The HTML <small>
tag is used to indicate small print or fine print, which is text that is smaller than the surrounding text and is typically used to provide additional information or legal disclaimers.
The <small>
tag can be used to change the size of text to make it smaller and less prominent than the surrounding text. It is a inline element and can be used within other block-level elements such as <p>
, <div>
, or <li>
, as well as within other inline elements.
Here is an example of how the <small>
tag can be used in HTML:
<p>This is a paragraph of text, and <small>this is small print</small> that provides additional information.</p>
In this example, the <small>
tag is used to indicate small print within a paragraph of text. The text within the <small>
element is rendered in a smaller font size than the surrounding text, making it stand out as separate and less prominent.
It is important to note that the use of the <small>
tag is for visual presentation purposes only and does not provide any semantic meaning to the content. If the content requires semantic meaning, it is recommended to use more specific tags such as <cite>
, <code>
, <time>
, or <abbr>
.
Syntax for HTML small tag
The HTML <small>
tag is used to indicate that the text it contains should be rendered in a smaller font size than the surrounding text. The syntax of the <small>
tag is as follows:
<p>This is some normal text. <small>This text is smaller.</small></p>
In this example, the <small>
tag is used to make the text it contains smaller than the text in the surrounding paragraph. The <small>
tag can be used to indicate that the text it contains is less important or of secondary importance to the surrounding text.
Note that the <small>
tag should not be used to indicate that the text it contains is difficult to read, as this can make the text inaccessible to users with visual impairments. Instead, the size of the text should be controlled using CSS, and the text should be made accessible using appropriate HTML attributes and techniques.
Global Attributes
The <small>
tag in HTML is used to indicate that the enclosed text is smaller in size than the surrounding text. However, it is important to note that the <small>
tag should not be used to indicate text that is less important or of lesser significance than the surrounding text.
There are a few global attributes that can be used with the <small>
tag or any other HTML tag, including:
class
– Specifies one or more class names for an element, which can be used to apply CSS styles to the element.id
– Specifies a unique identifier for an element, which can be used with CSS or JavaScript to reference the element.style
– Specifies inline CSS styles for an element, which can be used to override styles defined in an external stylesheet.title
– Specifies a title or tooltip for an element, which is displayed when the user hovers over the element.
Here’s an example of how the <small>
tag can be used with the class
attribute:
<p>This is some text, and <small class="subtext">this is smaller text</small> that provides additional information.</p>
<style>
.subtext {
font-size: smaller;
color: gray;
}
</style>
In this example, the class
attribute is used to apply a smaller font size and gray color to the enclosed text.
Event Attributes
Event attributes in HTML allow you to specify JavaScript code that should be executed in response to certain user actions or events, such as when a user clicks on an element or hovers over it. However, the <small>
tag in HTML does not have any event attributes associated with it.
Event attributes are typically used with interactive elements such as buttons, links, and form elements, and can be added to the element using the on
prefix followed by the name of the event. For example, you might use the onclick
attribute to specify a JavaScript function that should be executed when a user clicks on a button:
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
alert("Hello!");
}
</script>
In this example, the onclick
attribute is used to specify a JavaScript function called myFunction()
that should be executed when the button is clicked. When the button is clicked, an alert box will be displayed with the message “Hello!”.
However, as I mentioned earlier, the <small>
tag does not have any associated event attributes, as it is typically used to indicate that the enclosed text is smaller in size than the surrounding text. If you need to add interactivity to your HTML document, you should use other elements such as buttons, links, or form elements, and apply event attributes to those elements instead.
Other Attributes
In addition to global and event attributes, HTML elements can also have specific attributes that are unique to that element. However, the <small>
tag in HTML does not have any specific attributes that are unique to it.
Some HTML elements have specific attributes that can be used to provide additional information or functionality. For example, the <img>
tag has attributes such as src
to specify the URL of the image, alt
to provide a text description of the image, and width
and height
to specify the dimensions of the image.
However, the <small>
tag does not have any specific attributes that are unique to it. The main purpose of the <small>
tag is to indicate that the enclosed text is smaller in size than the surrounding text.
That being said, you can still use global attributes such as class
, id
, style
, and title
with the <small>
tag to apply styles or provide additional information. For example, you might use the class
attribute to apply a specific CSS style to the enclosed text:
<p>This is some text, and <small class="subtext">this is smaller text</small> that provides additional information.</p>
<style>
.subtext {
font-size: smaller;
color: gray;
}
</style>
In this example, the class
attribute is used to apply a smaller font size and gray color to the enclosed text.
Note
Here are some important notes on using the <small>
tag in HTML:
- The
<small>
tag should be used to indicate that the enclosed text is smaller in size than the surrounding text. However, it is important to note that the<small>
tag should not be used to indicate text that is less important or of lesser significance than the surrounding text. - The
<small>
tag does not have any specific attributes that are unique to it. However, you can still use global attributes such asclass
,id
,style
, andtitle
with the<small>
tag to apply styles or provide additional information. - The use of the
<small>
tag should be limited to cases where it is appropriate to make text smaller. It is important to ensure that the text remains legible and readable, even when it is smaller in size. - When using the
<small>
tag, it is a good practice to use CSS to control the font size and other styles of the enclosed text, rather than relying on the default browser styles. - The
<small>
tag is a semantic tag, which means that it is used to provide meaning and structure to the content of the web page. Using semantic tags can improve the accessibility and SEO of your web pages.
Browser Compatibility
The HTML small tag has essential support with the following browsers:
- Chrome
- Internet Explorer (IE)
- Opera
- Safari (WebKit)
- Firefox (Gecko)
- Android
- Firefox Mobile (Gecko)
- Edge Mobile
- Opera Mobile
- Safari Mobile
Examples for HTML small tag
HTML 4.01 Transitional Document
here’s an example of an HTML 4.01 Transitional document that uses the <small>
tag:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Example Document with Small Tag</title>
<style>
body {
font-family: Arial, sans-serif;
}
.small-text {
font-size: smaller;
color: gray;
}
</style>
</head>
<body>
<h1>Example Document with Small Tag</h1>
<p>This is some regular text, and <small class="small-text">this is smaller text</small> that provides additional information.</p>
<p>This is some more regular text, and <small class="small-text">this is even smaller text</small> that provides more additional information.</p>
</body>
</html>
In this example, we have an HTML 4.01 Transitional document that includes a <head>
section and a <body>
section. The <head>
section includes a <title>
tag to specify the title of the document, and a <style>
tag to define a CSS style for the .small-text
class.
In the <body>
section, we have two paragraphs of text. The first paragraph includes some regular text, followed by a <small>
tag with the class
attribute set to small-text
. This causes the enclosed text to be smaller in size than the surrounding text, and the CSS style defined in the <head>
section is applied to the enclosed text.
The second paragraph is similar to the first, but includes even smaller text enclosed in a <small>
tag with the class
attribute set to small-text
.
When we view this HTML document in a web browser, we will see two paragraphs of text, with the enclosed small text appearing smaller and in gray color, as defined by the CSS style. However, it’s worth noting that HTML 4.01 is an older version of HTML and does not support all of the features and functionality of HTML5.
XHTML 1.0 Transitional Document
here’s an example of an XHTML 1.0 Transitional document that uses the <small>
tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example Document with Small Tag</title>
<style type="text/css">
body {
font-family: Arial, sans-serif;
}
.small-text {
font-size: smaller;
color: gray;
}
</style>
</head>
<body>
<h1>Example Document with Small Tag</h1>
<p>This is some regular text, and <small class="small-text">this is smaller text</small> that provides additional information.</p>
<p>This is some more regular text, and <small class="small-text">this is even smaller text</small> that provides more additional information.</p>
</body>
</html>
In this example, we have an XHTML 1.0 Transitional document that includes a <head>
section and a <body>
section. The <head>
section includes a <title>
tag to specify the title of the document, and a <style>
tag to define a CSS style for the .small-text
class.
In the <body>
section, we have two paragraphs of text. The first paragraph includes some regular text, followed by a <small>
tag with the class
attribute set to small-text
. This causes the enclosed text to be smaller in size than the surrounding text, and the CSS style defined in the <head>
section is applied to the enclosed text.
The second paragraph is similar to the first, but includes even smaller text enclosed in a <small>
tag with the class
attribute set to small-text
.
When we view this XHTML document in a web browser, we will see two paragraphs of text, with the enclosed small text appearing smaller and in gray color, as defined by the CSS style. It’s worth noting that XHTML is a stricter, XML-based version of HTML, and requires well-formed, valid XML syntax. Therefore, the syntax used in this example, such as closing all tags and using lowercase attribute names, is necessary for the document to be valid XHTML.
XHTML 1.0 Strict Document
here’s an example of an XHTML 1.0 Strict document that uses the <small>
tag:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example Document with Small Tag</title>
<style type="text/css">
body {
font-family: Arial, sans-serif;
}
.small-text {
font-size: smaller;
color: gray;
}
</style>
</head>
<body>
<h1>Example Document with Small Tag</h1>
<p>This is some regular text, and <small class="small-text">this is smaller text</small> that provides additional information.</p>
<p>This is some more regular text, and <small class="small-text">this is even smaller text</small> that provides more additional information.</p>
</body>
</html>
In this example, we have an XHTML 1.0 Strict document that includes a <head>
section and a <body>
section. The <head>
section includes a <title>
tag to specify the title of the document, and a <style>
tag to define a CSS style for the .small-text
class.
In the <body>
section, we have two paragraphs of text. The first paragraph includes some regular text, followed by a <small>
tag with the class
attribute set to small-text
. This causes the enclosed text to be smaller in size than the surrounding text, and the CSS style defined in the <head>
section is applied to the enclosed text.
The second paragraph is similar to the first, but includes even smaller text enclosed in a <small>
tag with the class
attribute set to small-text
.
When we view this XHTML document in a web browser, we will see two paragraphs of text, with the enclosed small text appearing smaller and in gray color, as defined by the CSS style. It’s worth noting that XHTML 1.0 Strict is a stricter version of XHTML, and requires adherence to strict rules regarding document structure and content.
XHTML 1.1 Document
Here’s an example of an XHTML 1.1 document that uses the <small>
tag:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example Document with Small Tag</title>
<style type="text/css">
body {
font-family: Arial, sans-serif;
}
.small-text {
font-size: smaller;
color: gray;
}
</style>
</head>
<body>
<h1>Example Document with Small Tag</h1>
<p>This is some regular text, and <small class="small-text">this is smaller text</small> that provides additional information.</p>
<p>This is some more regular text, and <small class="small-text">this is even smaller text</small> that provides more additional information.</p>
</body>
</html>
In this example, we have an XHTML 1.1 document that includes a <head>
section and a <body>
section. The <head>
section includes a <title>
tag to specify the title of the document, and a <style>
tag to define a CSS style for the .small-text
class.
In the <body>
section, we have two paragraphs of text. The first paragraph includes some regular text, followed by a <small>
tag with the class
attribute set to small-text
. This causes the enclosed text to be smaller in size than the surrounding text, and the CSS style defined in the <head>
section is applied to the enclosed text.
The second paragraph is similar to the first, but includes even smaller text enclosed in a <small>
tag with the class
attribute set to small-text
.
When we view this XHTML document in a web browser, we will see two paragraphs of text, with the enclosed small text appearing smaller and in gray color, as defined by the CSS style. It’s worth noting that XHTML 1.1 is a newer version of XHTML that includes some additional features and stricter requirements for document structure and content.