Formato de texto HTML

Ya usaste el atributo style para cambiar cómo se ve el texto. Las etiquetas de formato responden a otra pregunta: ¿qué significa este trozo de texto? Advertencias importantes, énfasis hablado, resaltados, ediciones, letra pequeña y fórmulas como H₂O pertenecen a elementos HTML dedicados. Los navegadores a menudo los muestran en negrita o cursiva por defecto, pero las herramientas de asistencia y los sistemas de búsqueda también pueden usar el significado — algo que el color solo no aporta.

¿Qué es el formato de texto HTML?

Los elementos de formato de texto envuelven una palabra o frase dentro de un párrafo (o texto similar) para marcar un rol: importancia, énfasis, resaltado, eliminación, inserción y más. Son elementos en línea. No inician un bloque nuevo como p o h1. Los colocas alrededor del tramo exacto de texto que lleva ese rol y los cierras para que el resto de la oración vuelva a la normalidad.

Respuesta directa

Usa etiquetas de formato semánticas para el significado: strong para importancia fuerte, em para énfasis de estrés (como si acentuases la palabra al hablar), mark para resaltar relevancia, small para letra pequeña o comentarios laterales, del e ins para texto eliminado o insertado, y sub / sup para subíndice y superíndice. Prefiere estas etiquetas cuando el significado importa. Cuando solo quieres negrita o cursiva sin significado extra, usa CSS — incluidas las ideas de style en línea de la sesión anterior — en lugar de abusar de strong o em.

Referencia de etiquetas de un vistazo

Primero strong y em

strong y em son el par que más usarás. Recurre a strong cuando el contenido es importante — un término clave, una advertencia, la etiqueta de un campo obligatorio en el texto. Recurre a em cuando cambiarías la voz para acentuar una palabra. La negrita y la cursiva por defecto son solo la presentación habitual; las etiquetas siguen llevando significado si una hoja de estilo cambia el aspecto después.

Lectura del ejemplo

• strong envuelve «precio final» porque esa frase es importante en la oración
• em envuelve «antes» porque el momento es la idea acentuada
• Ambas etiquetas van dentro de un párrafo; no sustituyen a p
• Si solo querías texto azul marino sin significado de importancia, style (o CSS más adelante) sería la mejor herramienta

Más etiquetas de formato en un párrafo

Cuando strong y em se sientan naturales, añade las ayudas para resaltados, ediciones, letra pequeña y fórmulas. Mantén el anidamiento superficial: envuelve solo las palabras que necesitan cada rol.

Qué hace cada ayuda

• sub baja el «2» de la fórmula del agua; sup sube el exponente en 12²
• del e ins muestran un rastro de edición — valor antiguo fuera, valor nuevo dentro
• small marca letra pequeña secundaria, no la afirmación principal
• mark resalta un acierto relevante, similar a un resaltado de búsqueda
• strong y em siguen marcando importancia y énfasis dentro del mismo párrafo
  No necesitas cada etiqueta en cada oración. Elige las que coincidan con el significado real de tu texto.

Etiquetas de significado frente a estilo solo visual

Las páginas antiguas a veces usan b e i para negrita y cursiva sin significado fuerte. En este curso, prefiere strong cuando el contenido es importante y em cuando acentuarías una palabra al hablar. Usa CSS cuando solo quieres aspecto. Ese hábito mantiene tu HTML honesto: las etiquetas de formato describen el contenido y las hojas de estilo describen la presentación.

Practica en tu editor

1. Escribe un párrafo normal sobre el precio de un producto.
2. Envuelve el nombre del producto en strong.
3. Envuelve una palabra de advertencia en em.
4. Marca un precio antiguo con del y uno nuevo con ins.
5. Opcional: añade una nota tipo nota al pie con small, o un trozo de fórmula con sub / sup.
6. Guarda y abre la página. Confirma que las etiquetas están cerradas y el significado se lee con claridad.
7. Deja a propósito una etiqueta de cierre fuera, actualiza, observa cómo el resto de la línea sigue con estilo y luego corrígelo.
   Ver cómo una etiqueta sin cerrar «filtra» el estilo por el párrafo entrena el anidamiento cuidadoso más rápido que solo copiar ejemplos perfectos.

Errores que debilitan el formato

• Usar solo style="font-weight: bold" cuando la palabra es realmente importante — prefiere strong para el significado
• Usar strong en todas partes solo para engrosar el texto — diluye la importancia
• Anidar cinco etiquetas de formato unas dentro de otras sin motivo
• Usar sup / sub como decoración en lugar de índices reales (matemáticas, química, notas al pie)
• Olvidar las etiquetas de cierre para que el resto de la página herede negrita, cursiva o resaltado
• Tratar mark como pintura amarilla general para párrafos enteros de texto no relacionado

Resumen

• Las etiquetas de formato añaden significado dentro del texto, no solo decoración
• Empieza con strong y em; luego añade mark, small, del, ins, sub y sup cuando haga falta
• Prefiere etiquetas semánticas cuando importan la importancia, el énfasis, las ediciones o los índices
• Usa CSS cuando solo necesitas aspecto sin significado extra
• Mantén el anidamiento simple y cierra siempre cada etiqueta que abras
• Elige etiquetas según el significado de la oración, no por la costumbre de poner todo en negrita