HTML tiene muchas etiquetas que muchas personas usan todos los días, como <div>, <p> y <a>. Pero también hay algunas joyas ocultas que a menudo pasan desapercibidas. Estas etiquetas pueden ayudar a que los sitios web sean más atractivos, accesibles y significativos sin mucho esfuerzo adicional.
En este artículo, discutiremos un grupo de elementos HTML únicos que pueden mejorar tus páginas web. Ofrecen funciones específicas para formatear texto, mejorar la legibilidad y agregar características interactivas.
Tabla de Contenidos
La etiqueta <q>: Citas cortas en línea
La etiqueta <q> se utiliza para agregar citas breves dentro de un párrafo. Ayuda a que las citas luzcan diferentes y sean más fáciles de identificar, sin interrumpir el flujo del texto. Esta etiqueta agrega automáticamente comillas alrededor del contenido.
Descripción y Sintaxis
La estructura básica de la etiqueta <q> es simple:
<p>She said, <q>This is amazing!</q></p>
Esto se mostraría como:
Ella dijo: “¡Esto es increíble!”
Diferencias con el elemento <blockquote>
La etiqueta <q> es para citas cortas dentro de una oración. Por otro lado, el elemento <blockquote> se utiliza para citas más largas que generalmente necesitan su propio espacio o párrafo.
Por ejemplo:
<blockquote>
"This is a long quote that needs its own space. It is different from a short quote."
</blockquote>
Este bloque aparecerá con sangría y está destinado a resaltar un fragmento más grande de texto citado.
Casos de Uso: Agregar citas dentro de párrafos
La etiqueta <q> es perfecta para los casos en los que necesitas mencionar una cita en una oración sin separarla demasiado. Por ejemplo, al citar a alguien en un artículo o publicación de blog:
<p>The professor said, <q>Practice makes perfect</q>, during the class.</p>
En este caso, la etiqueta <q> mantiene la cita pequeña y dentro del mismo párrafo.
El profesor dijo, La práctica hace al maestro
, durante la clase.
Compatibilidad con Navegadores y Consejos de Estilo
La mayoría de los navegadores modernos añaden automáticamente comillas al contenido dentro de una etiqueta <q>. Pero puedes cambiar su apariencia usando CSS si es necesario. Así es como puedes darle estilo:
q {
quotes: "«" "»";
font-style: italic;
}
Este código cambiará las comillas por marcas de estilo francés (« y ») y hará que la cita esté en cursiva.
La mayoría de los navegadores admiten la etiqueta <q>, por lo que no tienes que preocuparte por problemas de compatibilidad para los usuarios modernos. Sin embargo, los navegadores antiguos pueden necesitar atención adicional, así que siempre prueba si tu audiencia utiliza versiones antiguas.
La etiqueta <s>: Texto Tachado
La etiqueta <s> se utiliza para mostrar texto que ya no es correcto, relevante o que ha sido eliminado. Coloca una línea a través del texto, lo que llamamos “tachado”. Esta etiqueta se utiliza a menudo para indicar algo que ha sido editado o actualizado.
Explicación y Uso
La etiqueta <s> es fácil de usar. Envuélvela alrededor del texto que deseas tachar:
<p>This product was <s>$50</s> now only $30!</p>
Esto se mostrará como:
¡Este producto era $50 y ahora solo $30!
Casos de Uso Comunes: Indicar Contenido Eliminado o Irrelevante
La etiqueta <s> es excelente para mostrar cambios de precio, ediciones o contenido que ya no es válido. Por ejemplo:
Actualizaciones de precios:
<p><s>$75</s> $50 (Limited Offer!)</p>
$75 $50 (¡Oferta Limitada!)
Correcciones o cambios:
<p><s>Old website address</s> New website address</p>
Dirección web antigua Nueva dirección web
Contenido que ya no es relevante:
<p>This feature is <s>no longer available</s>.</p>
Esta función ya no está disponible.
Posibilidades de Estilo con CSS
Puedes personalizar cómo se ve el tachado usando CSS. Por ejemplo, puedes cambiar el color de la línea o del texto:
s {
text-decoration: line-through;
color: red;
}
En este caso, el texto tendrá una línea roja a través de él, dando más énfasis al hecho de que ha sido tachado.
Significado Semántico Versus Decoración Visual
La etiqueta <s> tiene un cierto significado semántico. Generalmente representa contenido que alguna vez fue válido pero ahora es incorrecto o está desactualizado. Es más que un simple cambio de estilo. Por ejemplo, es perfecta para mostrar cambios en documentos legales, correcciones en publicaciones de blogs o actualizaciones de precios.
Por otro lado, si estás usando el tachado solo por decoración visual sin significar que el texto es incorrecto, es mejor usar CSS directamente, así:
span.strike {
text-decoration: line-through;
}
Y luego aplicarlo en tu HTML:
<p>This text is <span class="strike">crossed out</span> just for fun!</p>
Este enfoque es puramente para estilizar y no tiene el mismo significado que la etiqueta <s>.
La etiqueta <mark>: Texto resaltado
La etiqueta <mark> se utiliza para resaltar texto. Ayuda a llamar la atención sobre ciertas partes de tu contenido, haciéndolas destacar. Por defecto, los navegadores resaltan el texto con un fondo amarillo cuando se usa la etiqueta <mark>.
Propósito de la etiqueta <mark>
La etiqueta <mark> es excelente cuando deseas enfatizar algo importante. A menudo se utiliza para mostrar resultados de búsqueda, cambios recientes o cualquier texto que necesite atención especial.
A continuación, un ejemplo de cómo funciona:
<p>This is a <mark>highlighted</mark> word.</p>
Esto se mostrará como:
Esto es una palabra resaltada.
Mejores prácticas para usar <mark> para énfasis o resultados de búsqueda
Resaltando términos clave: Si deseas enfatizar palabras o frases importantes en un artículo o publicación de blog, la etiqueta <mark> es una forma sencilla de hacerlo:
<p>The most important concept here is <mark>efficiency</mark>.</p>
El concepto más importante aquí es eficiencia.
Resultados de búsqueda: Al mostrar resultados de búsqueda en una página web, usar la etiqueta <mark> para resaltar los términos coincidentes facilita a los usuarios encontrar lo que están buscando:
<p>Your search for <mark>HTML</mark> found these results:</p>
Tu búsqueda de HTML encontró estos resultados:
Actualizaciones recientes: También puedes usar la etiqueta <mark> para mostrar nuevas actualizaciones o cambios en tu contenido:
<p>We have recently added the <mark>new feature</mark> to the app.</p>
Recientemente hemos añadido la nueva función a la aplicación.
Cómo estilizar texto resaltado de manera efectiva
Si bien el color predeterminado para <mark> es amarillo, puedes cambiarlo con CSS para que coincida con el diseño de tu sitio web. Aquí tienes un ejemplo de cómo personalizar el texto resaltado:
mark {
background-color: lightblue;
color: black;
padding: 2px;
}
Esto le dará al texto un fondo azul claro con texto negro.
Si deseas que el texto destaque aún más, puedes agregar un borde o cambiar el estilo de la fuente:
mark {
background-color: yellow;
color: black;
font-weight: bold;
border-radius: 4px;
}
Esto haría que el texto resaltado se vea más pulido y llamativo.
Compatibilidad del navegador y consideraciones de accesibilidad
La etiqueta <mark> es compatible con todos los navegadores modernos, por lo que no tendrás problemas de compatibilidad. Solo asegúrate de que el color de fondo que elijas proporcione suficiente contraste para la legibilidad, especialmente para usuarios con discapacidades visuales.
Usar un fondo claro con texto oscuro es una buena regla general. Probar el contraste de color garantiza que el contenido resaltado siga siendo accesible para todos, incluidos aquellos que utilizan lectores de pantalla.
La etiqueta <ruby>: Anotando texto en idiomas asiáticos orientales
La etiqueta <ruby> se utiliza para agregar pequeñas anotaciones al texto, a menudo visto en idiomas asiáticos orientales como japonés o chino. Estas anotaciones ayudan a los lectores con la pronunciación o el significado, especialmente cuando los caracteres son complejos o poco familiares.
Definición y casos de uso para <ruby>
En idiomas como el japonés, es común utilizar una pequeña guía encima o al lado de los caracteres para mostrar cómo deben pronunciarse. La etiqueta <ruby> empareja el texto principal con una pequeña anotación, generalmente en un script más simple.
Aquí hay un ejemplo básico:
<ruby>漢 <rt>かん</rt> 字 <rt>じ</rt></ruby>
Esto muestra los caracteres kanji japoneses 漢字 con su pronunciación (furigana) mostrada arriba o al lado como かんじ (kanji).
漢 字
La importancia de los subelementos <rp> y <rt>
El elemento <rt> se utiliza dentro de la etiqueta <ruby> para definir la anotación (como la pronunciación) para el texto principal. Significa “texto ruby”.
<ruby>漢 <rt>かん</rt></ruby>
Esto mostrará 漢 con かん (kan) arriba como la anotación.
漢
El elemento <rp>, que significa “paréntesis ruby”, se utiliza como una alternativa para los navegadores que no soportan la etiqueta <ruby>. Envuelve caracteres adicionales, como paréntesis, alrededor del texto ruby para mostrar que es una anotación:
<ruby>漢 <rp>(</rp><rt>かん</rt><rp>)</rp></ruby>
Si el navegador no soporta anotaciones ruby, mostrará la pronunciación dentro de paréntesis, así:
漢 (かん).
Ejemplos prácticos: Anotaciones ruby para el aprendizaje de idiomas
La etiqueta <ruby> es una herramienta útil para los estudiantes de idiomas. Puede mostrar la pronunciación de palabras o caracteres desconocidos directamente arriba o al lado de ellos. Esto facilita la lectura y el aprendizaje de nuevo vocabulario para los principiantes.
Por ejemplo, digamos que quieres ayudar a alguien a aprender la palabra china para “persona”:
<ruby>人 <rt>rén</rt></ruby>
Esto mostraría 人 con la pronunciación rén arriba de ella.
人
Para oraciones más largas:
<p><ruby>我 <rt>wǒ</rt></ruby> <ruby>是 <rt>shì</rt></ruby> <ruby>学生 <rt>xuéshēng</rt></ruby>.</p>
Esto ayuda a los estudiantes a ver tanto los caracteres como la pronunciación correcta.
Yo soy estudiante.
Compatibilidad entre navegadores y consideraciones de representación
La etiqueta <ruby> es compatible con la mayoría de los navegadores modernos, pero es posible que los más antiguos no la representen correctamente. Ahí es donde entra en juego el elemento <rp>, asegurando que las anotaciones sigan siendo legibles si el navegador no admite el texto ruby.
Para la accesibilidad, asegúrate de que las anotaciones tengan suficiente espacio a su alrededor para que sean fáciles de leer. También puedes usar CSS para ajustar la apariencia de las anotaciones:
ruby rt {
font-size: 0.75em;
color: gray;
}
Esto hará que el texto ruby sea más pequeño y de un color diferente para mantenerlo visualmente separado del contenido principal.
Utilizar la etiqueta <ruby> es una excelente manera de mejorar la legibilidad para los estudiantes de idiomas o lectores poco familiarizados con ciertos guiones. Solo recuerda verificar el soporte del navegador y agregar alternativas para brindar una mejor experiencia de usuario en diferentes dispositivos.
La etiqueta <time>: Tiempo y fecha semánticos
La etiqueta <time> se utiliza para marcar fechas u horas en un formato legible por máquinas. Ayuda a que los motores de búsqueda, navegadores y otras herramientas reconozcan la información relacionada con el tiempo de manera más clara, lo que es útil para mejorar la visibilidad en los resultados de búsqueda o para un mejor análisis de datos.
Utilizando la etiqueta <time> para fechas y horas legibles por máquinas
Cuando utilizas la etiqueta <time>, puedes proporcionar fechas u horas que sean fáciles de leer tanto para las personas como para las computadoras. Esto es especialmente útil en blogs, artículos de noticias o páginas de eventos.
Aquí hay un ejemplo:
<p>Published on <time datetime="2024-10-01">October 1, 2024</time></p>
El texto “1 de octubre de 2024” es lo que los usuarios verán, pero el atributo datetime proporciona una versión legible por máquina de la fecha. Los motores de búsqueda ahora pueden interpretar fácilmente esta fecha.
Publicado el
También puedes usar la etiqueta <time> para mostrar horas:
<p>The event starts at <time datetime="13:00">1:00 PM</time>.</p>
Esto deja claro tanto a los usuarios como a las máquinas cuándo ocurre el evento.
El evento comienza a las .
Cómo <time> mejora el SEO y el análisis de datos para los detalles del evento
Los motores de búsqueda dependen de datos estructurados para entender mejor el contenido. La etiqueta <time> les da una idea más clara de cuándo ocurren eventos, publicaciones o plazos, mejorando la relevancia de los resultados de búsqueda. Por ejemplo, los motores de búsqueda pueden mostrar mejor la fecha de publicación de una entrada de blog o la hora de un evento.
Para una página de evento, el siguiente ejemplo proporciona información horaria tanto para humanos como para máquinas:
<p>Join us for the workshop on <time datetime="2024-12-15">December 15, 2024</time> at <time datetime="15:30">3:30 PM</time>.</p>
Los motores de búsqueda y los rastreadores web pueden extraer estos datos y usarlos para crear fragmentos enriquecidos en los resultados de búsqueda, ayudando a que el evento sea notado.
Ejemplos de uso en artículos, blogs y páginas de eventos
Aquí hay algunos ejemplos prácticos de cómo puedes usar la etiqueta <time>:
-
Publicaciones del blog: Puedes mostrar cuándo se publicó o se actualizó por última vez un artículo:
<p>Última actualización el <time datetime="2024-09-28">28 de septiembre de 2024</time>.</p> -
Listados de eventos: Los sitios web de eventos pueden usar la etiqueta
<time>para listar cuándo se llevará a cabo un evento:<p>Nuestro próximo encuentro será el <time datetime="2024-11-10">10 de noviembre de 2024</time> a las <time datetime="18:00">6:00 PM</time>.</p> -
Fechas límite: Al presentar fechas límite importantes, utiliza la etiqueta
<time>para mayor claridad:<p>Envía tu solicitud antes de <time datetime="2024-10-30T23:59">30 de octubre de 2024, 11:59 PM</time>.</p>
En todos estos ejemplos, el atributo datetime asegura que las computadoras puedan leer la información de tiempo correctamente, mientras que los usuarios ven una versión más legible.
Soporte de Navegadores y Accesibilidad
La etiqueta <time> es ampliamente soportada en los navegadores modernos. También mejora la accesibilidad porque los lectores de pantalla pueden interpretar la fecha y hora más precisamente, brindando una mejor experiencia para los usuarios con discapacidades.
La etiqueta <bdi>: Aislamiento de texto bidireccional
La etiqueta <bdi> significa “aislamiento bidireccional” y se utiliza para prevenir problemas de dirección de texto en sitios web multilingües. Esta etiqueta es especialmente útil cuando se trabaja con contenido que incluye tanto idiomas de izquierda a derecha (LTR) como de derecha a izquierda (RTL).
El papel de la etiqueta <bdi> en sitios multilingües
Al mezclar idiomas con diferentes direcciones de texto, como el inglés (LTR) y el árabe (RTL), el flujo natural del texto a veces puede volverse desordenado. La etiqueta <bdi> ayuda a mantener el diseño del texto limpio, asegurando que cada porción del texto se muestre correctamente, sin importar la dirección del idioma.
Por ejemplo, si deseas mostrar la entrada del usuario (como un nombre de usuario) junto a otro texto, y no sabes en qué idioma estará el nombre de usuario, puedes usar <bdi> para asegurarte de que no interfiera con el flujo.
Cómo usar <bdi> para prevenir problemas de dirección de texto
La etiqueta <bdi> envuelve la parte del texto que deseas aislar, y evita que la dirección del texto se vea afectada por el contenido circundante.
Aquí hay un ejemplo simple:
<p>User <bdi>اسم</bdi> has logged in.</p>
Si el nombre de usuario está en árabe (que se lee RTL), la etiqueta <bdi> asegura que el resto de la oración (que está en inglés y se lee LTR) no se interrumpa. Sin la etiqueta <bdi>, la oración podría mostrarse incorrectamente debido a la mezcla de direcciones de texto.
Otro ejemplo con números:
<p>Invoice number: <bdi>#1234</bdi></p>
Si el número de factura incluye texto o números en diferentes direcciones, la etiqueta <bdi> asegura que el formato se mantenga correcto.
Ejemplos de <bdi>
La etiqueta <bdi> se utiliza comúnmente en aplicaciones multilingües, plataformas de contenido generado por usuarios y sitios web que manejan múltiples idiomas a la vez. Por ejemplo, los sitios web que permiten a los usuarios ingresar datos, como nombres o direcciones, pueden usar <bdi> para asegurar una correcta alineación del texto.
Aquí hay un ejemplo en un foro:
<p><bdi>مستخدم</bdi> liked your post!</p>
Sin <bdi>, el texto podría mostrarse de manera incómoda, pero con ella, tanto el nombre de usuario en árabe como el texto en inglés se muestran correctamente.
Compatibilidad del Navegador
La etiqueta <bdi> es compatible con todos los navegadores modernos, incluidos Chrome, Firefox, Safari y Edge. Es una solución ligera, no requiere estilos especiales y ayuda a mantener el diseño de tu contenido ordenado al tratar con texto multilingüe.
La Etiqueta <dfn>: Definiendo Términos
La etiqueta <dfn> se utiliza para marcar la primera instancia de un término que se está definiendo dentro de una página web. Ayuda a los lectores a reconocer rápidamente que una palabra o frase en particular es una definición, mejorando la claridad de tu contenido, especialmente en la redacción técnica.
Cómo Usar <dfn> para Marcar Definiciones
La etiqueta <dfn> es simple de usar. La envuelves alrededor de la palabra o frase que deseas definir. Típicamente, el término aparece cerca de la explicación de su significado.
Ejemplo:
<p>The <dfn>DOM</dfn> (Document Object Model) is a programming interface for web documents.</p>
Aquí, la etiqueta <dfn> resalta que “DOM” es el término que se está definiendo.
El DOM (Document Object Model) es una interfaz de programación para documentos web.
Mejores Prácticas para Proporcionar Explicaciones en el Artículo
Cuando se utiliza la etiqueta <dfn>, asegúrate de que el término que estás definiendo esté seguido de cerca por su explicación. Esto mantiene las cosas claras y ayuda a los lectores a conectar el término con su significado de inmediato.
También es buena idea utilizar <dfn> solo la primera vez que se introduce un término, ya que repetirlo varias veces puede confundir al lector.
Por ejemplo, en un artículo técnico sobre HTML:
<p>The <dfn>API</dfn> (Application Programming Interface) allows different software applications to communicate with each other. Once defined, an API can simplify many web development tasks.</p>
En este caso, “API” se define cuando se menciona por primera vez, y los usos posteriores de “API” ya no necesitan la etiqueta <dfn>.
Cómo <dfn> Mejora la Claridad del Contenido Técnico
Utilizar la etiqueta <dfn> en la redacción técnica es una excelente manera de hacer que el contenido sea más fácil de seguir. Indica claramente a los lectores cuando estás introduciendo un nuevo término, lo cual es especialmente útil al explicar ideas complejas. Esto ayuda a mejorar la legibilidad y permite a los usuarios comprender los conceptos clave más rápidamente.
Al marcar definiciones con <dfn>, los motores de búsqueda y otras herramientas también pueden ser capaces de interpretar mejor tu contenido, haciéndolo más accesible. Por ejemplo, glosarios técnicos o sitios web educativos pueden usar <dfn> para resaltar sus términos.
Ejemplo de <dfn>
<p>The <dfn>URL</dfn> (Uniform Resource Locator) is the address used to access a resource on the web.</p>
En esta oración, el lector se introduce al término “URL”, seguido de una explicación clara. Este método de introducir términos con la etiqueta <dfn> ayuda a que el contenido técnico sea mucho más fácil de leer y entender, especialmente para aquellos que no están familiarizados con el tema.
La etiqueta <wbr>: Oportunidades de Salto de Línea
La etiqueta <wbr> se utiliza para sugerir dónde se puede dividir una palabra o URL para crear un salto de línea si es necesario. Esto es útil cuando se trata con palabras largas, URLs, o cualquier texto que pueda romper el diseño de una página web.
Qué es la etiqueta <wbr> y por qué es esencial para palabras largas o URLs
A veces, palabras largas o URLs pueden arruinar el diseño de una página web al causar desplazamiento horizontal o romper el diseño. La etiqueta <wbr> le da al navegador una pista de dónde dividir la palabra, pero solo si es necesario. Esto ayuda a mantener el texto legible y evita el desbordamiento.
Por ejemplo, si tienes una URL larga, puedes colocar la etiqueta <wbr> para indicar al navegador dónde puede dividir el texto:
<p>Visit our website at https://www.example<wbr>.com/super/long-url-that-might-break-layout</p>
Si el navegador necesita dividir la URL, lo hará después del <wbr>, asegurando que el diseño permanezca intacto.
Mejores Prácticas para Controlar el Ajuste de Palabras y el Desbordamiento de Texto
La etiqueta <wbr> debe usarse en lugares donde el texto pueda causar problemas de desbordamiento, como términos técnicos largos, direcciones de correo electrónico o URLs. Pero no abuses de ella, ya que saltos innecesarios pueden hacer que el texto sea más difícil de leer.
Aquí tienes otro ejemplo con una palabra larga:
<p>This word is too long: anti<wbr>disestablishmentarianism.</p>
Si la palabra se hace demasiado larga para la línea, el navegador la dividirá después de “anti-” sin afectar la legibilidad.
En combinación con CSS, también puedes controlar el ajuste de palabras y el desbordamiento de texto para obtener mejores resultados:
p {
word-wrap: break-word;
overflow-wrap: break-word;
}
Este CSS asegura que el texto se ajuste de manera ordenada cuando sea necesario, y utilizando <wbr> puedes tener más control sobre dónde se producen esas divisiones.
Soporte del Navegador para <wr> y Desafíos Potenciales
La etiqueta <wbr> es compatible con todos los navegadores principales, incluidos Chrome, Firefox, Safari y Edge. Es ligera y no necesita ningún estilo especial para funcionar.
Pero una cosa a tener en cuenta es que el uso excesivo de la etiqueta puede hacer que las divisiones de texto parezcan poco naturales si el contenido se redimensiona o se ve en diferentes tamaños de pantalla.
Por ejemplo:
<p>Contact us at longemail<wbr>@example<wbr>.com for more information.</p>
En este caso, puedes evitar que las direcciones de correo electrónico largas causen problemas de diseño, pero el correo electrónico podría aparecer cortado en diferentes lugares según el ancho de la pantalla.
Usa <wbr> cuando anticipes cadenas de texto largas que no se rompan naturalmente, manteniendo tu diseño limpio y funcional en todos los dispositivos.
La Etiqueta <ins>: Texto Insertado
La etiqueta <ins> se utiliza para mostrar texto que se ha añadido a un documento. Esto es útil a menudo para hacer seguimiento de ediciones, actualizaciones o cambios en documentos. También viene con un subrayado predeterminado para resaltar el nuevo contenido.
¿Qué es la etiqueta <ins> y cómo se compara con la etiqueta <s>?
La etiqueta <ins> está diseñada para marcar contenido insertado, mientras que la etiqueta <s> se utiliza para texto que ha sido eliminado o que ya no es relevante. Ambas etiquetas son útiles cuando necesitas mostrar cambios en un documento, como actualizaciones o revisiones.
Ejemplo:
<p>This is the <ins>new text</ins> that was added.</p>
<p>This is the <s>old text</s> that is no longer valid.</p>
Aquí, la etiqueta <ins> resalta lo que se ha añadido, y la etiqueta <s> muestra lo que ha sido tachado como obsoleto.
Este es el nuevo texto que se añadió.
Este es el texto antiguo que ya no es válido.
Uso en el seguimiento de ediciones de documentos o control de versiones
La etiqueta <ins> se utiliza comúnmente al gestionar documentos que necesitan control de versiones o donde las ediciones deben ser visibles. Por ejemplo, puedes usarla en plataformas de escritura colaborativa o documentos legales para mostrar qué partes se han añadido.
Ejemplo de un documento con cambios:
<p>The contract was updated to include <ins>an extra clause</ins> on data privacy.</p>
Esto deja claro al lector que la sección sobre “privacidad de datos” fue añadida recientemente.
En desarrollo de software o gestión de contenido, podrías usar la etiqueta <ins> para mostrar texto que ha sido introducido recientemente en archivos controlados por versiones, facilitando el seguimiento de ediciones y revisiones a lo largo del tiempo.
Opciones de estilo para enfatizar cambios
La apariencia predeterminada de la etiqueta <ins> es subrayada, pero puedes personalizarla usando CSS para una mejor énfasis, especialmente si deseas que los cambios resalten más.
Aquí te mostramos cómo puedes estilizar la etiqueta <ins> con diferentes efectos visuales:
ins {
background-color: #d4edda;
color: green;
text-decoration: none; /* Elimina el subrayado predeterminado */
}
Esto dará al texto insertado un color verde y un fondo verde claro, haciéndolo más notable.
También puedes agregar diferentes estilos como una fuente en negrita o un borde:
ins {
font-weight: bold;
border-bottom: 2px solid green;
}
Estas opciones de estilo facilitan a los usuarios identificar lo que se ha añadido o cambiado, mejorando la legibilidad y transparencia de las ediciones del documento.
En general, la etiqueta <ins> es una forma simple pero efectiva de rastrear contenido insertado, siendo muy útil tanto para documentos técnicos como para plataformas colaborativas donde las revisiones deben ser claramente visibles.
La etiqueta <del>: Texto eliminado
La etiqueta <del> se utiliza para mostrar texto que ha sido eliminado o retirado de un documento. Esta etiqueta tacha el texto por defecto, facilitando la identificación de lo que ha sido eliminado. Es especialmente útil en situaciones donde es necesario rastrear cambios o revisiones.
Propósito y uso de la etiqueta <del> para texto tachado
La función principal de la etiqueta <del> es mostrar visualmente que se ha eliminado algún contenido. Es común en documentos, artículos o código donde los cambios deben ser visibles para el lector. El texto eliminado generalmente tendrá un tachado, indicando que ya no es relevante o válido.
Ejemplo:
<p>This product costs <del>$50</del> $40 now.</p>
En este ejemplo, el cambio de precio es claro. El precio antiguo ($50) está tachado, y el nuevo precio ($40) sigue inmediatamente después.
Cómo se puede combinar con <ins> para rastrear revisiones
La etiqueta <del> se puede emparejar con la etiqueta <ins> para mostrar tanto el contenido eliminado como el recién añadido, lo que la hace perfecta para hacer un seguimiento de ediciones o revisiones. Esto es muy útil en la escritura colaborativa, documentos legales o cualquier situación donde los cambios deben ser registrados claramente.
Ejemplo de seguimiento de revisiones:
<p>The meeting has been moved <del>Monday</del> <ins>Tuesday</ins>.</p>
Aquí, es fácil ver que “lunes” fue reemplazado por “martes,” y el lector sabe exactamente qué cambió.
Mejores prácticas para mostrar y dar estilo al contenido eliminado
Por defecto, la etiqueta <del> aplica un tachado al texto, pero puedes darle estilo adicional con CSS para que sea más visible o se ajuste a tus necesidades de diseño.
Aquí tienes un ejemplo de personalización del aspecto del texto eliminado:
del {
color: red;
text-decoration: line-through;
}
Esto hace que el texto eliminado aparezca en rojo, atrayendo más atención. También puedes combinarlo con formatos adicionales, como desvanecer el texto:
del {
color: gray;
opacity: 0.7;
}
Este estilo reduce el énfasis en el contenido eliminado, haciéndolo menos distractor pero aún visible para los lectores.
La etiqueta <del> proporciona una forma simple y efectiva de seguir y mostrar cambios, especialmente cuando se combina con la etiqueta <ins>. Es esencial para mantener los documentos transparentes y claros para cualquier persona que revise ediciones o actualizaciones.
Conclusión
El uso de estos elementos HTML únicos amplía lo que es posible en la web, lo que ayuda a crear contenido más significativo y accesible. Etiquetas como <q>, <s>, <mark>, <ruby>, <time>, <bdi>, <dfn>, <wbr>, <ins> y <del> aportan cada una sus propias ventajas para tareas específicas. Estos elementos hacen más que simplemente dar estilo al texto; añaden contexto, mejoran la experiencia del usuario y mejoran la estructura del documento.
Utilizar estas etiquetas correctamente no solo hace que tus páginas web sean más claras, sino que también mejora la compatibilidad entre dispositivos y motores de búsqueda. Al aplicar estos elementos, piensa en cómo cada uno sirve tanto a la presentación visual como a la estructura de la información. Ofrecen formas simples pero poderosas de hacer que los sitios web sean más ricos y más fáciles de entender, beneficiando a una amplia gama de usuarios.
Si tienes alguna pregunta o sugerencia, no dudes en ponerte en contacto en LinkedIn. Si disfrutaste de este contenido, considera invitarme a un café para apoyar la creación de más contenidos amigables para desarrolladores.
Source:
https://www.freecodecamp.org/news/less-common-html-elements-and-how-to-use-them/