Definición <b> y <strong>

Las etiquetas <b> y <strong> son etiquetas de texto que, por defecto, hacen que el contenido dentro de ellas se muestre en negrita en los navegadores. No obstante, su diferencia principal radica en su significado semántico: <b> (bold) es un elemento estilístico que indica que el texto debe visualizarse en negrita, mientras que <strong> es un elemento semántico que destaca texto con gran relevancia o un énfasis significativo.

Cuándo usar <b> y <strong>

El estándar HTML Living ofrece pautas claras para emplear <strong>, señalando que debe usarse en texto que posea gran relevancia, transmita urgencia o denote seriedad.

• Relevancia: El elemento <strong> se puede usar en un título, subtítulo o párrafo para destacar la sección más significativa, separándola de otras partes que podrían ser más extensas, más ligeras o simplemente texto estándar.
• Gravedad: El elemento <strong> puede servir para enfatizar un mensaje de advertencia o precaución.
• Prioridad: El elemento <strong> puede utilizarse para indicar contenido que el usuario debe visualizar antes que otras secciones del documento.

La etiqueta <b> se emplea únicamente para aplicar un formato en negrita a texto que no requiere un significado adicional, como destacar una palabra por razones estilísticas o de énfasis visual sin alterar su sentido. No obstante, en prácticas actuales, se recomienda usar CSS para dar formato en negrita incluso en estos casos.

Se debe tener cuidado con el énfasis: no se recomienda sustituir semánticamente <strong> por <b> Si la intención es únicamente aplicar negrita de forma visual, es mejor optar por CSS o utilizar un <span> con una clase, en lugar de emplear <strong> sin una razón justificada.

Accesibilidad y lectores de pantalla <b> y <strong>

• Énfasis en lectura: La etiqueta <strong> indica a los lectores de pantalla que el contenido tiene mayor relevancia, y algunos incluso ajustan la entonación al leerlo. En cambio, <b> no implica énfasis, por lo que los lectores de pantalla normalmente lo pasan por alto en modo auditivo.
• Normas WCAG: Se aconseja emplear marcado semántico para resaltar texto (p.ej. <strong> / <em>) según las pautas de accesibilidad. El WCAG considera un fallo de nivel A utilizar <b> o <i> con fines de énfasis. En resumen, para destacar texto por su significado, se debe optar siempre por <strong>, asegurando que la información sea accesible para todos los usuarios, incluidos aquellos con discapacidad.
• Técnica W3C: Indica que los elementos <strong> y <em> aportan una estructura semántica. De acuerdo con W3C, estas etiquetas pueden presentarse de diversas formas (como cambios visuales o en la entonación al leer). Por eso, utilizarlas adecuadamente optimiza la interpretación del contenido en tecnologías de asistencia.

Ejemplos de código <b> y <strong>

1. Aquí, la palabra "capítulo" y el número del capítulo es la información que se repite en todos los títulos, y el nombre real del capítulo está marcado con <strong>.
2. En este ejemplo, el nombre del diagrama en la leyenda se resalta con <strong> para separarlo del texto estándar (anterior) y de la descripción (posterior).
3. En este caso, el título principal es "Flores, abejas y miel", aunque el autor añadió más palabras cómicas. El elemento <strong> se emplea entonces para destacar la primera sección y separarla de la parte final.
4. En este caso, el elemento <strong> se emplea para señalar la sección del texto que el usuario debe priorizar al leer.

Configuración CSS por Defecto <b> y <strong>

Los navegadores aplican automáticamente los siguientes estilos CSS:

                  
                    b {
                        font-weight: bold;
                        display: inline;
                    }

                    strong {
                        font-weight: bold;
                        display: inline;
                    }
                  
                

Ambos elementos reciben el mismo estilo visual por defecto, aunque su significado semántico es diferente.

Buenas prácticas modernas <b> y <strong>

• HTML semántico: Se recomienda que se utilicen las etiquetas <strong> y <em> para transmitir énfasis semántico, en lugar de recurrir a etiquetas de carácter puramente visual. No se deben emplear <b> ni <i> para enfatizar contenido; si solo se requiere un formato visual, es preferible optar por CSS.
• Separación de contenido y estilo: La presentación debe gestionarse mediante CSS. Según MDN, no se debe utilizar <strong> únicamente para fines estilísticos; en esos casos, es mejor usar <span> junto con CSS. Asimismo, el W3C desaconseja el uso de <b> para estilos, recomendando también el uso de CSS.
• Accesibilidad ante todo: Es importante seguir las recomendaciones de WCAG: las etiquetas <b> e <i> no deben usarse para indicar un énfasis relevante. Emplear las etiquetas adecuadas mejora la experiencia de usuarios que dependen de lectores de pantalla o tecnologías de asistencia.
• Estructura coherente: No se debe abusar de las negritas para simular “falsos encabezados” ni para estructurar contenido. Es mejor utilizar etiquetas semánticas apropiadas (<h1> – <h6>, listas, <article>, etc.) para organizar el documento, reservando <strong> exclusivamente para destacar lo que tiene verdadera importancia.

Alternativas CSS recomendadas <b> y <strong>

Cuando el objetivo es sólo estilo visual (negrita) y no enfatizar semánticamente, lo mejor es aplicar estilos con CSS. Por ejemplo:

1. Clases CSS: Definir una clase en una hoja de estilos:

                         
                           .negrita {
                             font-weight: bold;
                           }
                         
                       

   Y usarla en HTML:

                         
                           <p>Texto normal y <span class="negrita">texto en negrita</span> con CSS.</p>
                         
                       

2. Estilo en línea (no recomendado):

                         
                           <span style="font-weight: bold;">Texto en negrita</span>
                         
                       

   Es preferible separar estilo en CSS externo, pero funciona.
3. Frameworks CSS: Muchas bibliotecas (Bootstrap, Tailwind, etc.) ofrecen clases listas para negrita (p.ej. fw-bold o font-bold). Utilizarlas puede estandarizar el estilo sin añadir semántica extra.
4. Otras etiquetas semánticas: Si una persona desea destacar texto sin usar negrita, puede considerar el uso de <em> (para un énfasis leve) o <mark> (para un resaltado con fondo), cada uno con sus propios significados semánticos. Sin embargo, para un formato puramente visual, la estrategia más flexible y accesible es emplear CSS.

Definición <i> y <em>

Las etiquetas <i> y <em> son etiquetas de texto que, por defecto, hacen que el contenido dentro de ellas se muestre en cursiva en los navegadores. No obstante, su diferencia principal radica en su significado semántico: <i> (italic) es un elemento estilístico que representa texto que se distingue del contexto normal, como jerga, nombres científicos o frases extranjeras, sin implicar énfasis adicional. Por otro lado, <em> es un elemento semántico que marca texto con énfasis, destacando su importancia o alterando el significado en la oración.

Cuándo usar <i> y <em>

• La etiqueta <i> se usa más para fines estilísticos o presentacionales:
  • Se utiliza para marcar el texto dentro de ella como italic (cursiva).
  • Es más un elemento visual o con propósito presentacional.
  • Representa texto que debe diferenciarse del texto normal que lo rodea, pero sin añadir importancia semántica o estrés.
  • Los ejemplos de uso incluyen la identificación de un libro o periódico que normalmente se pondría en cursiva estilísticamente, o términos técnicos, o frases en otro idioma.
• Usar <em> cuando se quiera darle énfasis semántico a una palabra o frase:
  • Se utiliza para marcar el texto dentro de ella como enfatizado.
  • Es una pista semántica, no solo visual. Dependiendo del medio utilizado, su interpretación puede variar.
  • Indica que el texto debe tener un énfasis extra que debe ser destacado. Por ejemplo, se puede usar para enfatizar una acción dentro de una oración.
  • Un programa de texto a voz podría pronunciar estas palabras con un tono de voz diferente para transmitir que el texto es importante de alguna manera.

Accesibilidad y lectores de pantalla <i> y<em>

La etiqueta <em> cuenta con un rol ARIA implícito de “emphasis”, mientras que <i> emplea un rol genérico. En teoría, un lector de pantalla podría destacar el contenido de <em> (por ejemplo, mediante un cambio de entonación). No obstante, estudios recientes indican que la mayoría de los lectores de pantalla, como VoiceOver, JAWS y NVDA, no anuncian explícitamente los elementos <em> ni <strong>, pasando por alto el énfasis. En consecuencia, tanto <em> como <i> suelen interpretarse como texto normal para los usuarios que dependen de tecnologías de asistencia, sin que el cambio semántico se traduzca en un énfasis audible. A pesar de esto, la etiqueta <em> sigue siendo la opción adecuada para marcar énfasis semántico, ya que favorece el SEO y la estructura del contenido, mientras que <i> es más apropiada para contenidos específicos, como términos técnicos, facilitando su identificación por agentes automáticos y la indexación.

Configuración CSS por Defecto <i> y <em>

Los navegadores aplican automáticamente los siguientes estilos CSS:

                  
                    i {
                        font-style: italic;
                        display: inline;
                    }

                    em {
                        font-style: italic;
                        display: inline;
                    }
                  
                

Ambos elementos reciben el mismo estilo visual por defecto, aunque su significado semántico es diferente.

Ejemplos de código <i> y <em>

Énfasis de texto (<em>): el fragmento dentro de <em> se interpreta como destacado. Por ejemplo:

En estos casos, las palabras "siempre", "toda" y "primero" son las que tienen mayor relevancia en cada frase.

Texto con tono diferente (<i>): no cambia el sentido, solo el estilo. Por ejemplo:

Buenas prácticas modernas <i> y <em>

Según las especificaciones HTML5 y las guías de accesibilidad, se recomiendan las siguientes prácticas:

• Usar <em> para énfasis semántico: Reserve <em> solo cuando desee reflejar énfasis real en el contenido. No lo use solo para cursivas decorativas.
• Usar <i> para texto de otro tono/idioma: Emplee <i> en textos con contexto especial (jerga, palabras extranjeras, títulos de obras, pensamiento interno, nombres técnicos). No lo use para énfasis de importancia.
• Estilos vía CSS: No usar <i> ni <b> para únicamente estilizar texto. Si la meta es cursiva sin semántica, mejor utilizar <span> con CSS (por ej. .cursiva {font-style: italic;}).
• HTML semántico: Añadir significado extra mejora la accesibilidad, SEO y mantenimiento. P.ej., <em> añade información de énfasis, <i> indica “texto alternativo”, mientras que <strong> se usa para énfasis fuerte (importancia alta).
• Atributos adicionales: Si usa <i> para texto en otro idioma, incluya lang="...” con el código del idioma. Esto ayuda a lectores de pantalla y buscadores a manejar el contenido correctamente.

Alternativas CSS recomendadas <i> y <em>

Al igual que en caso de alternativas CSS recomendadas <b> y <strong>, se tienen los siguientes casos:

1. Clases CSS: Definir una clase en una hoja de estilos:

                         
                           .texto-italico { 
                             font-style: italic;
                           }
                         
                       

   Y usarla en HTML:

                         
                           <span class="texto-italico">Palabra en cursiva</span>
                         
                       

2. Estilo en línea (no recomendado):

                         
                           <span font-style: italic;;">Texto en cursiva</span>
                         
                       

   Es preferible separar estilo en CSS externo, pero funciona.
3. Frameworks CSS: Muchas bibliotecas (Bootstrap, Tailwind, etc.) ofrecen clases listas para negrita (p.ej. fst-italic" o font-italic). Utilizarlas puede estandarizar el estilo sin añadir semántica extra.
4. Otras etiquetas semánticas: Si una persona desea destacar texto sin usar negrita, puede considerar el uso de <em> (para un énfasis leve) o <mark> (para un resaltado con fondo), cada uno con sus propios significados semánticos. Sin embargo, para un formato puramente visual, la estrategia más flexible y accesible es emplear CSS.

Definición <mark>

El elemento HTML <mark> es una funcionalidad incorporada en HTML5, diseñada específicamente para marcar o resaltar texto dentro de un documento. Su uso principal se da cuando el texto destacado resulta relevante en un contexto diferente. Un ejemplo habitual de su aplicación es en los resultados de una búsqueda, donde las palabras que coinciden con la consulta del usuario se resaltan en el contenido, facilitándole a este identificar rápidamente lo que busca.

Cuándo usar <mark>

Se debe emplear <mark> cuando desee señalar que un fragmento de texto posee una relevancia particular durante la lectura o en conexión con la acción que el usuario está realizando en ese momento. A continuación, se presentan algunos ejemplos claros:

• Resultados de búsqueda: Si se está buscando una palabra en un sitio web, se puede emplear <mark> para destacar todas las instancias de esa palabra en el texto.
• Destacar citas: Para enfatizar una sección concreta de una cita que resulte relevante para el tema en discusión.
• Errores o advertencias: Cuando se presenta un texto y hay una parte especialmente crítica o significativa que se necesita hacer notar.
• Código o ejemplos: Para resaltar secciones específicas de un código o ejemplo que se está explicando.

Accesibilidad y lectores de pantalla <mark>

• La etiqueta <mark> se emplea principalmente para resaltar texto de forma visual, pero no agrega un significado semántico adicional ni suele ser anunciada como texto resaltado por los lectores de pantalla.
• Para optimizar la accesibilidad, se sugiere que una persona emplee atributos aria, como aria-label, o incluya texto explicativo adicional cuando el contexto lo demande.

                  
                    <!-- Ejemplo básico de <mark> sin ARIA -->
                    <p>El término más buscado fue <mark>Desarrollo WEB</mark>.</p>

                    <!-- Ejemplo con aria-label para dar contexto -->
                    <p>El término más buscado fue
                      <mark aria-label="Texto resaltado por ser importante">Desarrollo WEB</mark>.
                    </p>

                    <!-- Texto oculto para lectores de pantalla -->
                    <p id="descripcion-marca" style="position: absolute; left: -9999px;">
                      Texto resaltado: Desarrollo WEB
                    </p>
                    <!-- Contenido visible para todos los usuarios -->
                    <p>
                      El término más buscado fue
                      <mark aria-labelledby="descripcion-marca">Desarrollo WEB</mark>.
                    </p>
                  
                

En el primer ejemplo: El atributo aria-label informa al lector de pantalla sobre el propósito del texto marcado, permitiendo que lo interprete y anuncie en este caso como “Texto resaltado por su importancia: desarrollo web”, aunque este mensaje no sea visible para el usuario.

Segundo ejemplo:

• <p id="descripcion-marca">: Este párrafo contiene el texto que el lector de pantalla va a leer:
  • Está oculto visualmente usando style="position: absolute; left: -9999px;", lo que significa que los lectores de pantalla sí lo leen, pero los usuarios no lo ven en la pantalla.
  • Este es un truco común para mejorar la accesibilidad sin mostrar información innecesaria al usuario.
  • En este caso el lector dirá: "Texto resaltado por ser importante: Desarrollo WEB".
• <mark aria-labelledby="descripcion-marca">: Esta es la etiqueta que resalta visualmente el texto.
  • El lector de pantalla localizará el contenido del párrafo con id="descripcion-marca" y lo leerá en voz alta, en este caso: "Texto resaltado: Desarrollo WEB".

Configuración CSS por Defecto <mark>

Por defecto, los navegadores aplican a <mark> un estilo de resaltado amarillo con texto negro.

                  
                    mark {
                      background-color: yellow;
                      color: black;
                      block:inline;
                    }
                  
                

Algunos navegadores pueden usar variaciones:

• Chrome/Safari: background: #ffff00 (amarillo puro)
• Firefox: background: #ffff00 con ligeras variaciones
• Edge: Similar al estándar con background: yellow

Ejemplos de código <mark>

Resultados de búsqueda:

Código Resaltados:

Resaltado interactivo:

Diferentes niveles de importancia:

Contenido importante en documentación:

Buenas prácticas modernas <mark>

• Uso semántico apropiado:

                      
                        <!-- ✅ Correcto: marca términos de búsqueda -->
                        <p>Encontramos <mark>JavaScript</mark> en 47 resultados</p>
  
                        <!-- ❌ Incorrecto: usado para énfasis general -->
                        <p>Esto es <mark>muy importante</mark> recordar</p>
                      
                      

• Evitar su uso excesivo, ya que puede confundir o saturar visualmente al usuario.
• Estilos CSS consistentes:
  • Define estilos personalizados para mantener consistencia visual.
  • Asegura suficiente contraste para accesibilidad (ratio mínimo 4.5:1).
  • Considera el modo oscuro en tus estilos.
• Contexto claro:
  • Proporciona contexto cuando el resaltado no sea obvio.
  • Usa atributos title o aria-label para información adicional.
• Desempeño:
  • Para grandes volúmenes de texto, considera técnicas de resaltado eficientes.
  • Evita el uso excesivo que pueda distraer al usuario.

Alternativas CSS recomendadas <mark>

Para casos donde <mark> no sea semánticamente apropiado:

• Pseudo-elementos CSS:

                      
                        .highlight {
                            position: relative;
                        }
  
                        .highlight::before {
                            content: '';
                            position: absolute;
                            background: linear-gradient(104deg, rgba(130, 255, 173, 0) 0.9%, rgba(130, 255, 173, 1.25) 2.4%, rgba(130, 255, 173, 0.5) 5.8%, rgba(130, 255, 173, 0.1) 93%, rgba(130, 255, 173, 0) 96%);
                            width: 100%;
                            height: 100%;
                            z-index: -1;
                        }
                      
                    

• Variables CSS para temas:

                      
                        :root {
                            --highlight-bg: #fff3cd;
                            --highlight-color: #856404;
                            --highlight-border: #ffeaa7;
                        }
  
                        [data-theme="dark"] {
                            --highlight-bg: #3d4849;
                            --highlight-color: #ffd700;
                            --highlight-border: #ffd700;
                        }
  
                        mark {
                            background-color: var(--highlight-bg);
                            color: var(--highlight-color);
                            border: 1px solid var(--highlight-border);
                        }
                      
                    

• Clases utilitarias:

                        
                          .highlight-search { background-color: #e3f2fd; color: #1565c0; }
                          .highlight-warning { background-color: #fff3e0; color: #ef6c00; }
                          .highlight-success { background-color: #e8f5e8; color: #2e7d32; }
                          .highlight-info { background-color: #f3e5f5; color: #7b1fa2; }
                        
                      

Definición <small>

El elemento HTML <small> representa texto secundario o de menor relevancia en un documento web, con un propósito principalmente semántico que trasciende su apariencia visual. En HTML5, este elemento se redefine para denotar comentarios laterales, notas al pie o texto legal, como derechos de autor, independientemente de su estilo de presentación. Esta evolución semántica lo transforma de un simple modificador visual en una herramienta que aporta significado estructural al contenido.

El elemento <small> se distingue por su naturaleza semántica, que indica que el contenido es complementario al texto principal, a diferencia de otros métodos para reducir el tamaño del texto. Esta distinción es esencial para que tecnologías de asistencia, motores de búsqueda y otros agentes de usuario interpreten correctamente el contenido HTML. Aunque los navegadores aplican por defecto un estilo CSS de font-size: smaller, este efecto visual es secundario frente a su función semántica.

El elemento <small> es un elemento en línea que puede contener contenido de fraseo, lo que permite integrarlo en párrafos, títulos y otros elementos de texto sin alterar el flujo del documento.

                      
                        small {
                          font-size: 80%;
                          line-height: 1.25;
                          display: inline;
                        }
                      
                    

                    
                      /* Para texto decorativo o de diseño */
                      .small-text {
                        font-size: 0.875em; /* 14px si base es 16px */
                        line-height: 1.4;
                      }

                      .caption-text {
                        font-size: 0.75em; /* 12px si base es 16px */
                        color: #666;
                        font-style: italic;
                      }

                      /* Para diferentes contextos */
                      .footer-note {
                        font-size: 0.8em;
                        opacity: 0.8;
                      }

                      /* Adaptable */
                      .fine-print {
                        font-size: clamp(0.75rem, 2vw, 0.875rem);
                      }
                    
                  

Definición <del> y <ins>

Las etiquetas <del> y <ins> son elementos HTML semánticos utilizados para marcar cambios en el contenido de un documento:

• <del> (de deleted, "eliminado"): Representa texto que ha sido suprimido o retirado del documento. Es como si se hubiera tachado algo con un lápiz.
• <ins> (de inserted, "insertado"): Destaca texto que se ha agregado o editado en el documento. Es como si se hubiera subrayado algo para indicar que es nuevo.

Estas etiquetas suelen utilizarse en documentos donde es importante mostrar el historial de cambios (como wikis, editores de texto colaborativos, comparaciones de versiones, etc.).

Cuándo usar <del> y <ins>

• Resaltar correcciones en documentos: Permite mostrar de forma clara las revisiones o enmiendas realizadas en textos, como en borradores o documentos colaborativos.
• Indicar precios anteriores en ofertas: Se utiliza en comercios electrónicos para destacar precios actualizados frente a los anteriores, mejorando la transparencia en promociones.
• Señalar contenido obsoleto pero relevante: Marca información que ha sido reemplazada, pero que aún se conserva para referencia o contexto.
• Documentar cambios en políticas o términos: Facilita la trazabilidad de modificaciones en documentos normativos, como términos de servicio o políticas empresariales, asegurando claridad en las actualizaciones.
• Visualizar versiones anteriores en sistemas de control de cambios: En herramientas de control de versiones, como Git o sistemas de gestión de contenido, <ins> ayuda a destacar las adiciones en el historial de revisiones, complementando el uso de <del> para eliminaciones. Estas aplicaciones refuerzan la utilidad de <ins> y <del> para mantener un registro claro y semántico de las modificaciones en diversos contextos, desde la gestión documental hasta la comunicación comercial.

Accesibilidad y lectores de pantalla <del> y <ins>

Las etiquetas HTML <del> y <ins> facilitan la accesibilidad al marcar contenido eliminado o añadido, permitiendo que los lectores de pantalla informen claramente los cambios a usuarios con discapacidades visuales, a diferencia de los estilos visuales como tachado o subrayado en CSS, que carecen de significado semántico. Su uso en documentos colaborativos, legales o sistemas de control de versiones mejora la claridad, trazabilidad y experiencia de usuario inclusiva.

Para maximizar la accesibilidad al emplear las etiquetas <del> y <ins>, es recomendable integrar los siguientes atributos adicionales:

• Cite: El atributo cite vincula a una URL que explica las razones de un cambio marcado con <del> y <ins>, proporcionando contexto adicional para mejorar la trazabilidad y compatibilidad con tecnologías asistivas:

                        
                          <p>El precio del producto es
                            <del cite="https://empresa.com/cambios-precios-2024">$50</del>
                            <ins cite="https://empresa.com/cambios-precios-2024">$45</ins>
                            debido a la promoción de temporada.</p>
                        
                      

• Datetime: El atributo datetime especifica la fecha y hora exactas de una modificación realizada con <del> y <ins>, facilitando el seguimiento temporal de los cambios y mejorando la interacción con tecnologías asistivas, se debe utilizar el formato ISO 8601:

                        
                          <p>La reunión será el
                            <del datetime="2024-05-27T10:30:00">viernes a las 2 PM</del>
                            <ins datetime="2024-05-27T11:15:00">jueves a las 3 PM</ins>
                            en la sala de conferencias.</p>
                        
                      

• Aria-label: El atributo aria-label ofrece descripciones textuales para <del> y <ins>, asegurando que los cambios sean accesibles y comprensibles para usuarios de lectores de pantalla, promoviendo inclusividad:

                        
                          <p>El estado del pedido es:
                            <del aria-label="estado anterior eliminado">En proceso</del>
                            <ins aria-label="nuevo estado agregado">Enviado</ins>
                          </p>
                          <p>
                            <del aria-label="párrafo eliminado sobre política antigua">
                            Política de devoluciones: 15 días </del>
                            <ins aria-label="párrafo agregado con nueva política">
                            Política de devoluciones: 30 días con garantía completa </ins>
                          </p>
                        
                      

• Title: Proporciona información adicional que aparece como tooltip al pasar el mouse sobre el elemento:

                        
                          <p>El nombre de la empresa es <del title="Nombre anterior antes de la fusión">TechCorp</del>
                            <ins title="Nuevo nombre después de la fusión con InnovaSoft">TechCorp InnovaSoft</ins>
                          </p>
                          <article>
                            <del title="Sección eliminada por información desactualizada - Revisión del 25/05/2024">
                            Esta función estará disponible en la próxima actualización. </del>
                            <ins title="Información actualizada con fecha de lanzamiento - Agregado el 27/05/2024">
                            Esta función ya está disponible desde la versión 2.1 lanzada el 20 de mayo. </ins>
                          </article>
                        
                      

Los lectores de pantalla modernos manejan estas etiquetas de diferentes formas:

• NVDA y JAWS: Anuncian "eliminado" para <del> e "insertado" para <ins>.
• VoiceOver: Proporciona información contextual sobre los cambios.
• Algunos lectores: Pueden ignorar completamente el contenido de <del>.

Configuración CSS por Defecto <del> y <ins>

• Estilos Predeterminados para <del>:

                        
                          del {
                            text-decoration: line-through;
                          }
                        
                      

  Algunos navegadores aplican estilos sutiles, como cambios de color u opacidad, al texto marcado con <del> para destacar visualmente su eliminación, usando estilos predeterminados claros y consistentes que facilitan la identificación de cambios sin afectar la accesibilidad.
• Estilos Predeterminados para <ins>:

                        
                          ins {
                            text-decoration: underline;
                          }
                        
                      

Ejemplos de código <del> y <ins>

Buenas prácticas modernas <del> y <ins>

• No usar <del> y <ins> solo para efectos visuales; si solo se quiere tachar o subrayar, es mejor usar CSS (span con clases).
• Incluir atributos datetime para mayor contexto.
• Usar estas etiquetas en documentos donde se necesita trazabilidad del contenido.
• Combinar con herramientas de control de versiones en editores colaborativos.
• Evitar su uso excesivo, ya que puede afectar la claridad del contenido si hay muchos cambios.

Alternativas CSS recomendadas <del> y <ins>

Cuando no se desea usar <del> y <ins> por motivos semánticos o de presentación visual solamente, se pueden usar elementos span con clases personalizadas:

                  
                    <p>
                      Precio anterior: <span class="tachado">$50</span>,
                      nuevo precio: <span class="resaltado">$40</span>
                    </p>
                  
                

                  
                    .tachado {
                      text-decoration: line-through;
                      color: gray;
                    }

                    .resaltado {
                      text-decoration: underline;
                      font-weight: bold;
                      color: green;
                    }
                  
                

Para mostrar estados (disponible/no disponible):

                  
                    /* Mejor alternativa con clases semánticas */
                    .product-unavailable {
                        text-decoration: line-through;
                        opacity: 0.6;
                        color: #666;
                    }

                    .product-featured {
                        background-color: #fff3cd;
                        border-left: 4px solid #ffc107;
                        padding-left: 1rem;
                    }
                  
                

Para comparaciones de precios complejas:

                  
                    <!--  Estructura más semántica -->
                    <div class="price-comparison">
                        <span class="price-old" aria-label="precio anterior">$29.99</span>
                        <span class="price-current" aria-label="precio actual">$19.99</span>
                        <span class="discount">33% descuento</span>
                    </div>
                  
                

Componentes modernos con CSS:

                  
                    .revision-block {
                        border-left: 4px solid #e9ecef;
                        padding-left: 1rem;
                        margin: 1rem 0;
                    }

                    .revision-block del {
                        display: block;
                        background-color: #f8d7da;
                        color: #721c24;
                        padding: 0.5rem;
                        margin-bottom: 0.5rem;
                        border-radius: 0.25rem;
                    }

                    .revision-block ins {
                        display: block;
                        background-color: #d4edda;
                        color: #155724;
                        padding: 0.5rem;
                        border-radius: 0.25rem;
                        text-decoration: none;
                    }
                  
                

Definición <sup> y <sub>

El elemento HTML <sup> define texto que se muestra en superíndice, es decir, más alto y generalmente más pequeño que el texto principal, por motivos tipográficos. Por su parte, el elemento <sub> indica texto en subíndice, que aparece más bajo y también suele ser más pequeño. Ambos elementos pertenecen a la categoría de semántica de texto en línea en HTML.

Las etiquetas <sup> y <sub> estructuran semánticamente un documento HTML para facilitar su interpretación y representación por agentes de usuario. Por ejemplo, un lector de pantalla puede transmitir el significado específico del texto en superíndice o subíndice, mejorando la comprensión del contenido por parte del usuario.

Cuándo usar <sup> y <sub>

Las etiquetas <sup> y <sub> deben reservarse para casos tipográficos donde el posicionamiento del texto afecte su significado. Para fines puramente visuales o decorativos, es preferible utilizar CSS.

• Notación Matemática y Científica:
  • Exponentes y Potencias: La etiqueta <sup> se utiliza frecuentemente para representar exponentes en expresiones matemáticas, como x <sup> </sup> para "x al cuadrado" o en la conocida ecuación E=mc<sup>2</sup> (E=mc2).
  • Fórmulas Químicas: La etiqueta <sub> es esencial para señalar la cantidad de átomos en fórmulas químicas, como H<sub>2</sub>O (agua, H2O). Asimismo, <sup> se emplea junto con <sub> para indicar cargas iónicas cargas iónicas o números de masa, por ejemplo, en SO<sub>4</sub><sup>2-</sup> (ion sulfato, SO42-).
  • > Para representar ecuaciones matemáticas complejas, se recomienda emplear herramientas como MathML, MathJax o LaTeX.js, que ofrecen una notación precisa y semántica, facilitando la correcta interpretación por parte de sistemas computacionales.
• Referencias y Notas al Pie: La etiqueta <sup> se usa comúnmente para marcar referencias a notas al pie o citas bibliográficas, elevando un número o símbolo que guía al lector a detalles adicionales en el documento o en fuentes externas, manteniendo la fluidez del texto principal.
• Marcas Registradas y Derechos de Autor: Es habitual emplear la etiqueta <sup> para indicar marcas registradas <sup>TM</sup> (^TM) o derechos de autor <sup>C</sup>(^(c)) en superíndice, señalando su protección legal. Sin embargo, algunos expertos recomiendan usar directamente los caracteres Unicode ™ y ®, que ya incluyen el formato de superíndice en su diseño. No obstante, esta opción puede generar problemas de compatibilidad, ya que no todas las fuentes admiten el conjunto completo de glifos Unicode.
• Números Ordinales y Abreviaturas Lingüísticas: La etiqueta <sup> se utiliza para formatear números ordinales en ciertos idiomas, como 5<sup>th</sup> (5th) en inglés o 5<sup>e</sup> (5e) en francés, y para representar letras sobrescritas en abreviaturas, como M<sup>lle</sup> (Mlle) para "Mademoiselle" en francés. Su propósito es proporcionar un formato semántico que indique la posición elevada de un carácter, mejorando la claridad y la compatibilidad con tecnologías de asistencia.

Accesibilidad y lectores de pantalla <sup> y <sub>

Ambas etiquetas <sup> y <sub> tienen buena accesibilidad semántica:

• Los lectores de pantalla reconocen <sup> y <sub> como texto en superíndice o subíndicen es decir poseen un rol ARIA implícito.
• Sin embargo, no todos los lectores anuncian esta diferencia de forma explícita al usuario.
• Para mejorar la accesibilidad:
  • Agregar un atributo aria-label o usar etiquetas explicativas cuando el contexto lo requiera:

                              
                                <!-- Añadir contexto con aria-label -->
                                <span aria-label="Agua, H dos O">H<sub>2</sub>O</span>
    
                                <!-- Usar role="img" para fórmulas complejas -->
                                <span role="img" aria-label="x al cuadrado">x<sup>2</sup></span>
    
                                <!-- Proporcionar texto alternativo -->
                                <p>Einstein demostró que E=mc<sup>2</sup>
                                  <span class="sr-only">(E igual a m por c al cuadrado)</span></p>
                              
                            

  • Evitar usarlos únicamente como medio de transmitir información crítica visual (por ejemplo, no usar solo <sup> para mostrar un asterisco importante).
  • En contextos científicos o matemáticos complejos, se recomienda usar MathML o herramientas accesibles como MathJax.
• Pueden causar confusión en fórmulas complejas.
• El contexto puede perderse.

Configuración CSS por Defecto <sup> y <sub>

Los navegadores aplican estilos predefinidos para estas etiquetas:

                  
                    sup {
                      vertical-align: super;
                      font-size: smaller;
                      line-height: normal;
                    }

                    sub {
                      vertical-align: sub;
                      font-size: smaller;
                      line-height: normal;
                    }
                  
                

Esto significa que el texto aparecerá más pequeño y desplazado hacia arriba (sup) o hacia abajo (sub).

Personalización común:

                  
                    sup, sub {
                        font-size: 0.75em;
                        line-height: 0;
                        position: relative;
                        vertical-align: baseline;
                    }

                    sup {
                        top: -0.5em;
                    }

                    sub {
                        bottom: -0.25em;
                    }
                  
                

Ejemplos de código <sup> y <sub>

• Ejemplos de Implementación Correcta de Ejemplos de Implementación Correcta de <sup>:

                        
                          <!-- Exponente en Matemáticas -->
                          <p>El valor de 2<sup>3</sup> es 8.</p>
                          <!-- Este ejemplo muestra cómo representar una potencia, donde el "3" es un exponente del "2".  -->
  
                          <!-- Abreviatura Lingüística (Francés) -->
                          <p>Robert a présenté son rapport à M<sup>lle</sup> Bernard.</p>
                          <!-- Aquí, M<sup>lle</sup> es una abreviatura de "Mademoiselle", un uso tipográfico específico de algunos idiomas. -->
  
                          <!-- Número Ordinal (Inglés) -->
                          <p>La 5<sup>th</sup> edición del libro.</p>
  
                          <!-- Marca Registrada: -->
                          <p>Nombre de la Empresa<sup>®</sup></p>
                        
                      

• Ejemplos de Implementación Correcta de <sub>:

                        
                          <!-- Fórmula Química -->
                          <p>La fórmula del agua es H<sub>2</sub>O.</p>
  
                          <!-- Variable con Subíndice -->
                          <p>El resultado queda guardado en la variable <var>x<sub>t</sub></var>.</p>
                        
                      

• Combinación de Superíndices y Subíndices en Contextos Específicos:

                        
                          <!-- Fórmula Química Compleja -->
                          <p>El ion sulfato se representa como SO<sub>4</sub><sup>2-</sup>.</p>
  
                          <!-- Notas al Pie Combinadas -->
                          <p>Este texto contiene una referencia<sup>1</sup> y otra<sup>2</sup>.</p>
                        
                      

Buenas prácticas modernas <sup> y <sub>

• Se recomienda emplear los elementos <sup> y <sub> únicamente cuando sean necesarios para representar significados específicos, como en notaciones matemáticas, fórmulas químicas o notas al pie.
• No se deben utilizar los elementos <sup> y <sub> con fines meramente decorativos. Para ajustar la posición del texto con propósitos visuales, es preferible emplear estilos CSS.
• Utilizar HTML semántico y estructurado para mejorar accesibilidad y SEO.
• Usar MathML para notaciones matemáticas complejas, ya que HTML no admite anidamiento de <sup> y <sub>.
• Asegurar buena contraste y legibilidad si se usan en tamaños pequeños.

Alternativas CSS recomendadas <sup> y <sub>

Cuando se desee crear el efecto visual sin usar etiquetas semánticas, puede emplearse CSS:

                  
                    /* Alternativa CSS para superíndice decorativo */
                    .superscript {
                        font-size: 0.8em;
                        vertical-align: super;
                        line-height: 0;
                    }

                    /* Alternativa CSS para subíndice decorativo */
                    .subscript {
                        font-size: 0.8em;
                        vertical-align: sub;
                        line-height: 0;
                    }

                    /* Para alineación vertical compleja */
                    .formula {
                        display: inline-flex;
                        flex-direction: column;
                        align-items: center;
                    }

                    .numerator {
                        font-size: 0.8em;
                        border-bottom: 1px solid;
                        padding-bottom: 2px;
                    }

                    .denominator {
                        font-size: 0.8em;
                        padding-top: 2px;
                    }