Etiqueta strong en HTML
¿Qué es la etiqueta <strong> en HTML?
La etiqueta HTML <strong> es una etiqueta de formato de texto que se utiliza para indicar que el texto contenido dentro de ella es importante o enfático. Cuando se usa la etiqueta <strong>, el texto dentro de ella se mostrará en negrita en la mayoría de los navegadores web.
La etiqueta <strong> es útil para indicar que el texto es significativo o enfático en comparación con el texto circundante. Por ejemplo, se puede utilizar para resaltar un título o una palabra clave en un documento.
Es importante tener en cuenta que la etiqueta <strong> no se debe utilizar simplemente para mostrar el texto en negrita, sino que debe usarse para resaltar el significado y la importancia del texto contenido dentro de ella.
La etiqueta <strong> 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 <strong> en HTML5:
<p>Este es un <strong>texto importante</strong> en una oración.</p>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado la etiqueta <strong> para indicar que el texto “texto importante” es importante para la comprensión del contenido de la oración. El texto se mostrará en negrita en la mayoría de los navegadores web, lo que lo hace más visible y fácil de leer.
Atributos
La etiqueta <strong> en HTML no tiene atributos específicos, sin embargo, se pueden utilizar los atributos globales en cualquier elemento HTML. Los atributos más comunes utilizados con <strong> son:
- class: Este atributo permite asignar una o varias clases al elemento <strong>, lo que permite aplicar estilos CSS específicos a través de una hoja de estilo en cascada (CSS).
Ejemplo:
<strong class="important">Texto importante</strong>
<span style="background-color: rgb(255, 255, 255); color: initial;"></span>
Lenguaje del código: HTML, XML (xml)- id: Este atributo permite asignar un identificador único al elemento <strong>, lo que permite aplicar estilos CSS específicos a través de una hoja de estilo en cascada (CSS).
Ejemplo:
<strong id="important">Texto importante</strong>
Lenguaje del código: HTML, XML (xml)- style: Este atributo permite aplicar estilos CSS directamente al elemento <strong>. Aunque esta es una forma rápida de aplicar estilos, se recomienda utilizar clases o identificadores en su lugar para un mejor control y mantenimiento del código.
Ejemplo:
<strong style="color: red;">Texto importante</strong>
<span style="background-color: rgb(255, 255, 255); color: initial;"></span>
Lenguaje del código: HTML, XML (xml)- title: Este atributo permite añadir un texto de ayuda o título al elemento <strong>. Este texto se mostrará como una herramienta de ayuda cuando el usuario posiciona el cursor sobre el elemento.
Ejemplo:
<strong title="Este es un texto importante">Texto importante</strong>
Lenguaje del código: HTML, XML (xml)En resumen, los atributos más importantes de la etiqueta <strong> son los atributos globales, como class, id, style y title, ya que permiten aplicar estilos y proporcionar información adicional sobre el texto dentro del elemento <strong>.
Sin embargo, es importante tener en cuenta que su uso principal es dar énfasis semántico al texto y no solo estético.
Más ejemplos
Aquí te presento tres ejemplos completos y avanzados de la etiqueta <strong> de HTML5:
Ejemplo 1: Utilizando la etiqueta <strong> para enfatizar el título de un artículo.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta strong</title>
<style>
h1 {
font-size: 36px;
font-weight: normal;
margin-bottom: 20px;
}
.destacado {
color: #ff6600;
font-weight: bold;
}
</style>
</head>
<body>
<header>
<h1><strong class="destacado">Cómo ahorrar dinero</strong> en tu próximo viaje</h1>
</header>
<article>
<p>En este artículo, te ofrecemos consejos útiles para <strong>ahorrar dinero</strong> en tus próximas vacaciones. Desde buscar ofertas de vuelos hasta reservar alojamiento económico, te ofrecemos las mejores prácticas para que puedas disfrutar de tus vacaciones sin arruinarte.</p>
</article>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado la etiqueta <strong> para enfatizar el título de un artículo. Hemos utilizado el atributo “class” para aplicar un estilo personalizado con CSS a la etiqueta <strong>.
En la regla CSS definida, hemos aplicado un color de texto naranja y un peso de fuente en negrita alrededor del texto para que se destaque más.
Ejemplo 2: Utilizando la etiqueta <strong> para enfatizar las palabras clave en una lista.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta strong en una lista</title>
<style>
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.lista-destacada li strong {
color: #ff0000;
}
</style>
</head>
<body>
<ul class="lista-destacada">
<li><strong>Marketing digital:</strong> aprende las mejores técnicas para promocionar tu negocio en línea.</li>
<li><strong>Desarrollo web:</strong> domina los lenguajes de programación y las herramientas necesarias para construir sitios web profesionales.</li>
<li><strong>Diseño gráfico:</strong> crea diseños impactantes para tus proyectos con las herramientas adecuadas.</li>
</ul>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, hemos utilizado la etiqueta <strong> dentro de elementos <li> de una lista para enfatizar las palabras clave. Hemos utilizado el atributo “class” para aplicar un estilo personalizado con CSS a la lista.
En la regla CSS definida, hemos aplicado un color de texto rojo alrededor del texto dentro de la etiqueta <strong> para que se destaque más.