Tema 5 · Fundamentos

Formato de Texto y Énfasis

Aprende a dar formato tipográfico y significado semántico a tus textos: negrita, cursiva, subrayado, tachado, resaltado y superíndices.

Encabezados, Párrafos y Saltos Citas, Abreviaturas y Comentarios

Formato Semántico vs Formato Visual

En HTML5, varias etiquetas pueden parecer idénticas visualmente en la pantalla, pero tienen propósitos semánticos muy distintos para motores de búsqueda y lectores de pantalla para invidentes.

Etiqueta Nombre Significado y Uso Recomendado
<strong> Importancia Fuerte Indica que el texto tiene gran urgencia, seriedad o importancia. El navegador lo pone en negrita y los lectores de pantalla elevan el tono de voz.
<b> Negrita Visual Aplica negrita meramente estética sin otorgarle relevancia semántica o énfasis auditivo adicional.
<em> Énfasis Indica texto con un énfasis entonacional diferente al leerlo en voz alta. Se muestra en cursiva.
<i> Itálica Visual Texto en cursiva para términos técnicos, palabras extranjeras, pensamientos o nombres científicos (ej: Homo sapiens).
<mark> Texto Resaltado Simula el trazo de un marcador fluorescente sobre texto relevante en una búsqueda o cita.
<small> Texto Pequeño Representa texto secundario, como letra chica legal, descargos de responsabilidad o avisos de copyright.
<del> Eliminado / Tachado Representa texto que ha sido tachado o descartado (muy usado en tiendas online para precios anteriores).
<ins> Insertado Representa texto nuevo insertado que reemplaza a un contenido anterior, generalmente con subrayado.
<sub> Subíndice Texto debajo de la línea base, como en fórmulas químicas (H2O).
<sup> Superíndice Texto elevado por encima de la línea base, como potencias matemáticas (210 = 1024) o llamadas a pie de página.

⚡ Demostración de Etiquetas de Formato de Texto

Observa cómo se renderiza cada elemento tipográfico en un artículo web interactivo:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Ejemplos de Formato de Texto</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; line-height: 1.7; background: #fdfdfd; }
    .articulo { max-width: 550px; background: #ffffff; padding: 25px; border-radius: 10px; border: 1px solid #e2e8f0; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
    .precio-oferta { font-size: 1.25rem; font-weight: bold; color: #16a34a; }
  </style>
</head>
<body>

  <article class="articulo">
    <h2 style="margin-top: 0; color: #0f172a;">Oferta Especial de Servidores</h2>
    
    <p>
      <strong>¡Atención desarrolladores!</strong> Solo por hoy, adquiere tu máquina virtual con procesadores de <em>última generación</em>.
    </p>

    <p>
      El paquete incluye una velocidad de <mark>10 Gbps garantizados</mark> en fibra óptica.
    </p>

    <p>
      Precio anterior: <del>$99 USD/mes</del><br>
      Precio con descuento: <ins class="precio-oferta">$49 USD/mes</ins>
    </p>

    <hr style="border: 0; border-top: 1px solid #e2e8f0;">

    <p>
      Fórmula de consumo de enfriamiento: H<sub>2</sub>O a 4<sup>&deg;</sup>C.<br>
      Capacidad de direccionamiento: 2<sup>32</sup> direcciones IPv4.
    </p>

    <p>
      <small>&copy; 2026 Kilopolis Cloud. Aplican términos y condiciones de servicio.</small>
    </p>
  </article>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de HTML5 y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno HTML/CSS/BS5 Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.