Learn HTML

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:

  1. class – Specifies one or more class names for an element, which can be used to apply CSS styles to the element.
  2. id – Specifies a unique identifier for an element, which can be used with CSS or JavaScript to reference the element.
  3. style – Specifies inline CSS styles for an element, which can be used to override styles defined in an external stylesheet.
  4. 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:

  1. 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.
  2. The <small> tag does not have any specific attributes that are unique to it. However, you can still use global attributes such as class, id, style, and title with the <small> tag to apply styles or provide additional information.
  3. 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.
  4. 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.
  5. 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:

  1. Chrome
  2. Internet Explorer (IE)
  3. Opera
  4. Safari (WebKit)
  5. Firefox (Gecko)
  6. Android
  7. Firefox Mobile (Gecko)
  8. Edge Mobile
  9. Opera Mobile
  10. 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.

 

 

 

About the author

Home4Cloud