Formato de texto

Texto en negrita e itálica

HTML ofrece varias etiquetas para dar formato al texto, permitiendo resaltar palabras o frases importantes mediante negrita e itálica. Estas herramientas son fundamentales para mejorar la legibilidad y jerarquía visual del contenido.

Texto en negrita

Para mostrar texto en negrita, HTML proporciona dos opciones principales que, aunque visualmente similares, tienen propósitos diferentes:

La etiqueta **<strong>** indica que el contenido tiene especial importancia o relevancia:

<p>Este es un mensaje <strong>muy importante</strong> para recordar.</p>

La etiqueta **<b>** simplemente aplica formato visual de negrita sin implicar importancia semántica:

<p>El producto modelo <b>X-2000</b> está disponible en stock.</p>

La diferencia clave radica en el significado semántico. Los lectores de pantalla y motores de búsqueda interpretan <strong> como contenido importante, mientras que <b> es puramente visual.

Texto en itálica

Para el formato en itálica, también existen dos alternativas con distintos propósitos:

La etiqueta **<em>** enfatiza el contenido, cambiando el tono o significado de la frase:

<p>No puedo <em>creer</em> que haya funcionado tan bien.</p>

La etiqueta **<i>** aplica formato visual de itálica para casos específicos como términos técnicos o nombres:

<p>El archivo se guardó en la carpeta <i>documentos</i> automáticamente.</p>

Al igual que con la negrita, <em> tiene valor semántico mientras que <i> es principalmente visual.

Combinación de formatos

Puedes combinar ambos formatos para crear énfasis múltiple en el mismo texto:

<p>Este punto es <strong><em>extremadamente crítico</em></strong> para el proyecto.</p>

También es posible anidar las etiquetas en diferente orden según la prioridad del énfasis:

<p>La fecha límite es <em><strong>mañana a las 9:00</strong></em> sin excepción.</p>

Cuándo usar cada etiqueta

Usa **<strong>** cuando:

• El contenido sea importante para la comprensión del texto
• Quieras que los lectores de pantalla enfaticen la palabra
• El texto representa una advertencia o información crítica

Usa **<b>** cuando:

• Necesites destacar visualmente sin importancia semántica
• Muestres nombres de productos, marcas o referencias
• El formato sea puramente estético

Usa **<em>** cuando:

• Quieras cambiar el tono o énfasis de una frase
• El contexto cambie el significado de las palabras
• Necesites resaltar contraste o comparación

Usa **<i>** cuando:

• Muestres términos técnicos, palabras extranjeras o títulos
• El formato sea convencional (como nombres científicos)
• No haya énfasis emocional o tonal

<p>
    El <strong>protocolo de seguridad</strong> requiere que todos los 
    <i>backups</i> se realicen <em>antes</em> de cualquier actualización 
    del sistema <b>versión 2.1</b> o superior.
</p>

Texto subrayado y tachado

HTML incluye etiquetas específicas para aplicar subrayado y tachado al texto, cada una con sus propios casos de uso y consideraciones semánticas. Estas opciones de formato son útiles para mostrar cambios en el contenido o destacar información específica.

Texto subrayado

Para subrayar texto, HTML ofrece la etiqueta <u>, que aplica un subrayado visual al contenido:

<p>El término <u>subrayado</u> se utiliza para destacar palabras clave.</p>

Sin embargo, es importante usar el subrayado con moderación, ya que los usuarios web asocian tradicionalmente el texto subrayado con enlaces. Esto puede crear confusión en la navegación.

Casos apropiados para **<u>**:

• Nombres propios en idiomas que requieren subrayado por convención
• Palabras mal escritas en contextos educativos
• Anotaciones o correcciones en documentos

<p>En el texto aparece la palabra <u>recibir</u> con una errata.</p>

Texto tachado

Para mostrar texto tachado, HTML proporciona dos etiquetas principales:

La etiqueta **<s>** indica contenido que ya no es preciso o relevante:

<p>El precio original era <s>50 euros</s> ahora 35 euros.</p>

La etiqueta **<del>** marca contenido que ha sido eliminado del documento:

<p>La reunión será el <del>martes</del> miércoles a las 10:00.</p>

La diferencia fundamental es que <s> representa información desactualizada o incorrecta, mientras que <del> indica una eliminación específica en el documento.

Texto insertado

Como complemento a <del>, HTML incluye la etiqueta <ins> para marcar contenido añadido:

<p>La fecha límite es el <del>15 de marzo</del> <ins>20 de marzo</ins>.</p>

Esta combinación es especialmente útil para mostrar revisiones y cambios en documentos:

<p>
    El presupuesto total asciende a <del>5.000 euros</del> 
    <ins>6.500 euros</ins> debido a los cambios solicitados.
</p>

Combinaciones y casos prácticos

Puedes combinar estas etiquetas con otras de formato para crear efectos más específicos:

<p>
    <strong>Importante:</strong> El evento del <del>viernes</del> 
    <ins><em>sábado</em></ins> se realizará en el <u>Auditorio Principal</u>.
</p>

Ejemplo práctico en una lista de tareas:

<ul>
    <li><s>Revisar documentación</s></li>
    <li><s>Enviar correos pendientes</s></li>
    <li>Preparar presentación</li>
    <li><ins>Confirmar asistentes</ins></li>
</ul>

Consideraciones de uso

Para texto subrayado:

• Evita su uso excesivo para prevenir confusión con enlaces
• Úsalo principalmente para anotaciones o convenciones específicas
• Considera alternativas como <mark> para resaltar información

Para texto tachado:

• Usa <s> para precios antiguos, ofertas vencidas o información desactualizada
• Usa <del> junto con <ins> para mostrar cambios documentales
• Mantén el contenido tachado legible para que los usuarios entiendan el contexto

Texto resaltado y marcado

HTML proporciona varias etiquetas especializadas para resaltar y marcar texto con propósitos específicos. Estas etiquetas van más allá del simple formato visual, ofreciendo significado semántico que mejora la accesibilidad y comprensión del contenido.

Texto resaltado

La etiqueta <mark> permite resaltar texto como si usáramos un rotulador fluorescente sobre papel. Su propósito principal es destacar contenido relevante en un contexto específico:

<p>En el documento aparece la palabra <mark>importante</mark> varias veces.</p>

Texto de código y elementos técnicos

Para mostrar código o elementos técnicos dentro del texto, HTML ofrece varias opciones:

La etiqueta **<code>** marca fragmentos de código o comandos:

<p>Usa el comando <code>git commit</code> para guardar los cambios.</p>

La etiqueta **<kbd>** representa teclas del teclado o combinaciones de teclas:

<p>Presiona <kbd>Ctrl</kbd> + <kbd>S</kbd> para guardar el archivo.</p>

La etiqueta **<samp>** muestra salida de programas o sistemas:

<p>El sistema devolvió el mensaje: <samp>Proceso completado exitosamente</samp></p>

La etiqueta **<var>** indica variables matemáticas o de programación:

<p>La fórmula es <var>a</var> + <var>b</var> = <var>c</var></p>

Texto pequeño y anotaciones

La etiqueta <small> representa texto con menor importancia, como comentarios legales o anotaciones:

<p>
    Este producto incluye garantía de 2 años.
    <small>*Aplican términos y condiciones</small>
</p>

Es importante no confundir <small> con una simple reducción visual del tamaño. Su propósito es semántico, indicando contenido secundario:

<article>
    <h2>Nuevo Producto Lanzado</h2>
    <p>Presentamos nuestra última innovación en tecnología móvil...</p>
    <small>Publicado el 15 de enero de 2024 por el equipo de marketing</small>
</article>

Combinaciones prácticas

Estas etiquetas pueden combinarse para crear documentación técnica rica en significado:

<p>
    Para instalar el paquete, ejecuta <code>npm install express</code> 
    en tu terminal. Si aparece el error <samp>Permission denied</samp>, 
    usa <kbd>sudo</kbd> antes del comando.
</p>

Casos de uso específicos

Para resaltado con **<mark>**:

• Términos de búsqueda en resultados
• Información relevante en contexto específico
• Cambios importantes en documentos de actualización
• Palabras clave en contenido educativo

Para elementos técnicos:

• <code> - Nombres de funciones, comandos, fragmentos de código
• <kbd> - Teclas, atajos de teclado, combinaciones
• <samp> - Mensajes del sistema, output de programas
• <var> - Variables matemáticas, parámetros de funciones

Para anotaciones con **<small>**:

• Información legal o disclaimers
• Metadatos como fechas de publicación
• Comentarios explicativos secundarios
• Créditos o atribuciones