Etiqueta small en HTML
¿Qué es la etiqueta <small> en HTML?
La etiqueta HTML <small> es una etiqueta de formato de texto que se utiliza para indicar que el texto contenido dentro de ella es de menor importancia o tamaño que el texto circundante. Cuando se usa la etiqueta <small>, el texto dentro de ella se mostrará en una fuente más pequeña en la mayoría de los navegadores web.
La etiqueta <small> es útil para indicar que el texto es secundario o menos importante en comparación con el texto circundante. Por ejemplo, se puede utilizar para mostrar el copyright o la información de la fuente en el pie de página de un sitio web.
Es importante tener en cuenta que la etiqueta <small> no se debe utilizar para mostrar texto que es difícil de leer o ilegible debido a su tamaño reducido. El tamaño de la fuente debe ser legible y coherente con el resto del texto en la página.
La etiqueta <small> es una de las etiquetas de formato de texto básicas de HTML5 y se puede utilizar en combinación con otras etiquetas de formato de texto para crear documentos web bien estructurados y legibles.
Ejemplo de uso
Aquí te presento un ejemplo sencillo de cómo se puede utilizar la etiqueta <small> en HTML:
<p>Esta es una nota a pie de página <small>Esta nota es de menor tamaño que el texto normal</small>.</p>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado la etiqueta <small> para mostrar una nota a pie de página con texto de menor tamaño que el texto normal que lo rodea.
Atributos
La etiqueta HTML <small> no admite muchos atributos, ya que se utiliza principalmente para indicar que el texto es pequeño o para proporcionar información adicional sobre el texto.
Los atributos principales que admite son los siguientes:
- class: este atributo se utiliza para aplicar estilos CSS a la etiqueta <small> y para agrupar varias etiquetas con el mismo estilo.
- id: este atributo se utiliza para identificar la etiqueta en el documento y puede ser útil para aplicar estilos CSS o para acceder a la etiqueta mediante JavaScript.
Además de estos atributos, la etiqueta <small> también admite otros atributos opcionales, como “style”, que se utiliza para aplicar estilos en línea a la etiqueta, o “title”, que se utiliza para proporcionar información adicional sobre el texto.
Ejemplo:
Aquí te presento un ejemplo de cómo se puede utilizar el atributo “class” en la etiqueta <small>:
<p><small class="notificacion">Última actualización: 10 de marzo de 2023</small></p>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado la etiqueta <small> para indicar que el texto es pequeño y para proporcionar información adicional sobre la última actualización de un documento.
Hemos utilizado el atributo “class” para aplicar un estilo personalizado con CSS a la etiqueta <small>. En la regla CSS definida, hemos aplicado un color gris y un tamaño de fuente más pequeño alrededor del texto para que sea menos visible.
Más ejemplos
Aquí te presento cuatro ejemplos completos y avanzados de la etiqueta <small> de HTML5:
Ejemplo 1: Utilizando la etiqueta <small> para indicar que el texto es pequeño y proporcionar información adicional sobre una imagen.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta small</title>
<style>
.imagen {
float: right;
margin-left: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h2>Requisitos para la admisión</h2>
<img src="requisitos.jpg" alt="Requisitos para la admisión" class="imagen">
<p>Los requisitos para la admisión son los siguientes:</p>
<ul>
<li>Formulario de solicitud completo</li>
<li>Certificado de estudios secundarios</li>
<li><small>Carta de recomendación de un profesor o un empleador</small></li>
</ul>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado la etiqueta <small> para indicar que la carta de recomendación es un requisito opcional y para proporcionar información adicional sobre la misma.
Hemos utilizado el atributo “class” para aplicar un estilo personalizado con CSS a la etiqueta <small>. En la regla CSS definida, hemos aplicado un tamaño de fuente más pequeño y un estilo de fuente en cursiva para indicar que es opcional.
Ejemplo 2: Utilizando la etiqueta <small> dentro de un enlace <a> para proporcionar información adicional sobre un enlace.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta small en un enlace</title>
</head>
<body>
<p>Visite nuestro sitio web para obtener más información <a href="https://www.ejemplo.com"><small>(requisitos de admisión)</small></a>.</p>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado la etiqueta <small> dentro de un enlace <a> para proporcionar información adicional sobre el enlace.
Al hacer clic en el enlace, el usuario será dirigido al sitio web especificado en el atributo “href”. Hemos utilizado el tamaño de fuente más pequeño para que el texto sea menos visible y no distraiga al usuario del texto principal.
Ejemplo 3: Utilizando la etiqueta <small> dentro de la etiqueta <p> para indicar que el texto es pequeño y proporcionar información adicional sobre una fecha.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta small en un párrafo</title>
</head>
<body>
<p><small>Última actualización: 10 de marzo de 2023</small></p>
<p>La fecha límite para la presentación de solicitudes es el 31 de marzo de 2023.</p>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado la etiqueta <small> dentro de la etiqueta <p> para indicar que el texto es pequeño y para proporcionar información adicional sobre la última actualización de un documento.
Hemos utilizado el tamaño de fuente más pequeño para que el texto sea menos visible y no distraiga al usuario del texto principal.
Ejemplo 4: Añadir una nota legal en el pie de página de un sitio web:
<footer>
<p>Copyright © 2023 Mi sitio web</p>
<small>Todos los derechos reservados. El contenido de este sitio no puede ser reproducido sin permiso.</small>
</footer>
Lenguaje del código: HTML, XML (xml)