Subido por:
En esta lección aprenderás cómo aplicar estilos visuales al texto utilizando etiquetas HTML como <b>, <i>, <u>, y también cómo dar estilos con CSS personalizado como cambiar el tipo de fuente, tamaño y color. Además, combinaremos todo en un solo ejemplo para practicar.
📌 Código de ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
.color-favorito {
font-family: 'Comic Sans MS', Comic Neue;
color: green;
font-size: 24px;
}
</style>
</head>
<body>
<p class="color-favorito"> <b> 1. Este texto está en negrita sin énfasis semántico.</b> </p>
<p class="color-favorito"> <strong> 2. Este texto está en negrita con énfasis semántico.</strong> </p>
<p class="color-favorito"> <i> 3. Este texto está en cursiva sin énfasis especial.</i> </p>
<p class="color-favorito"> <em> 4. Este texto está en cursiva con énfasis semántico.</em> </p>
<p class="color-favorito"> <u> 5. Este texto está subrayado solo por estilo.</u> </p>
<p class="color-favorito"> <mark> 6. Este texto está resaltado como si estuviera con marcador.</mark> </p>
<p class="color-favorito"> <del> 7. Este texto fue eliminado o ya no es válido.</del> </p>
<p class="color-favorito"> <s> 8. Este texto está tachado porque es incorrecto o está desactualizado.</s> </p>
<p class="color-favorito"> <ins> 9. Este texto fue insertado recientemente.</ins> </p>
<p class="color-favorito"> <small> 10. Este texto se ve más pequeño que el resto.</small> </p>
<p class="color-favorito"> 11. Fórmula química: H<sub>2</sub>O </p>
<p class="color-favorito"> 12. Potencia: 2<sup>3</sup> = 8 </p>
<p class="color-favorito"> 13. <code>console.log("Hola mundo");</code> ← Ejemplo de código </p>
<p class="color-favorito"> <pre>
14. Este bloque de texto
está preformateado:
- Mantiene espacios
- Y saltos de línea
</pre> </p>
<p class="color-favorito"> 15. El valor de la variable <var>x</var> es 10. </p>
<p class="color-favorito"> <span style="color: red;"> 16. Este texto usa <span> para aplicar estilos CSS (rojo).</span> </p>
<p class="color-favorito"> Encabezado nivel 17 </p>
</body>
</html>
🧠 ¿Qué hace cada línea?
| Línea | ¿Qué significa? |
|---|---|
<b> ... </b> |
Negrita (sin significado semántico especial) |
<strong> ... </strong> |
Negrita con énfasis semántico (indica importancia) |
<i> ... </i> |
Cursiva (sin énfasis semántico) |
<em> ... </em> |
Cursiva con énfasis semántico (indica énfasis) |
<u> ... </u> |
Subrayado (usado para subrayar texto) |
<mark> ... </mark> |
Texto resaltado (fondo amarillo por defecto) |
<del> ... </del> |
Tachado, indica texto eliminado (semántico) |
<s> ... </s> |
Tachado (texto incorrecto o inválido) |
<ins> ... </ins> |
Subrayado para indicar texto insertado (semántico) |
<small> ... </small> |
Texto más pequeño |
<sub> ... </sub> |
Subíndice (útil para fórmulas químicas como H2O) |
<sup> ... </sup> |
Superíndice (potencias o notas como x2) |
<code> ... </code> |
Fuente monoespaciada para código |
<pre> ... </pre> |
Texto preformateado, mantiene espacios y saltos de línea |
<var> ... </var> |
Texto que representa variables (semántico) |
<span> ... </span> |
Contenedor genérico en línea para aplicar estilos CSS |
🧪 Resultado en la página:
1. Este texto está en negrita sin énfasis semántico.
2. Este texto está en negrita y tiene un significado importante.
3. Este texto está en cursiva sin énfasis especial.
4. Este texto está en cursiva con énfasis semántico.
5. Este texto está subrayado solo por estilo.
6. Este texto está resaltado como si estuviera con marcador.
7. Este texto fue eliminado o ya no es válido.
8. Este texto está tachado porque es incorrecto o está desactualizado.
9. Este texto fue insertado recientemente.
10. Este texto se ve más pequeño que el resto.
11. Fórmula química: H2O
12. Potencia: 23 = 8
13. console.log("Hola mundo"); ← Ejemplo de código
14. Este bloque de texto
está preformateado:
- Mantiene espacios
- Y saltos de línea
15. El valor de la variable x es 10.
16. Este texto usa <span> para aplicar estilos CSS (rojo).
💡 Consejo rápido:
- ✅ Usa solo algunas etiquetas por párrafo para que no se vea recargado.
- ✅ No combines tachado + subrayado + resaltado, es confuso.
- ✅ Comic Sans es solo para ejemplos o diseños divertidos, no profesional.
- ✅ El color verde es visible, pero si tu fondo es claro, úsalos con cuidado.
- ✅ Usa clases (
class="nombre") para no repetir estilos muchas veces.