En este tema, aprenderemos sobre las etiquetas de formateo de texto en HTML. Estas etiquetas nos permiten dar estilo y formato al texto en nuestras páginas web, mejorando la legibilidad y la presentación del contenido.
Conceptos Clave
- Etiquetas de Formateo Comunes:
<b>,<i>,<u>,<strong>,<em>,<mark>,<small>,<del>,<ins>,<sub>,<sup>. - Diferencias entre Etiquetas Semánticas y No Semánticas.
- Uso Correcto de las Etiquetas de Formateo.
Etiquetas de Formateo Comunes
Etiqueta <b> y <strong>
<b>: Utilizada para hacer el texto en negrita. No tiene significado semántico.<strong>: Utilizada para resaltar texto con importancia fuerte. Tiene significado semántico.
Ejemplo:
<p>Este es un <b>texto en negrita</b>.</p> <p>Este es un <strong>texto con importancia fuerte</strong>.</p>
Etiqueta <i> y <em>
<i>: Utilizada para hacer el texto en cursiva. No tiene significado semántico.<em>: Utilizada para enfatizar el texto. Tiene significado semántico.
Ejemplo:
Etiqueta <u> y <mark>
<u>: Utilizada para subrayar texto. No tiene significado semántico.<mark>: Utilizada para resaltar texto como si estuviera marcado con un resaltador. Tiene significado semántico.
Ejemplo:
Etiqueta <small>
<small>: Utilizada para mostrar texto en un tamaño más pequeño.
Ejemplo:
Etiqueta <del> y <ins>
<del>: Utilizada para mostrar texto que ha sido eliminado.<ins>: Utilizada para mostrar texto que ha sido insertado.
Ejemplo:
Etiqueta <sub> y <sup>
<sub>: Utilizada para mostrar texto en subíndice.<sup>: Utilizada para mostrar texto en superíndice.
Ejemplo:
<p>Este es un texto con subíndice H<sub>2</sub>O.</p> <p>Este es un texto con superíndice E=mc<sup>2</sup>.</p>
Diferencias entre Etiquetas Semánticas y No Semánticas
Las etiquetas semánticas no solo aplican un estilo visual, sino que también proporcionan información sobre el significado del contenido. Esto es importante para la accesibilidad y para que los motores de búsqueda comprendan mejor el contenido de la página.
- No Semánticas:
<b>,<i>,<u>,<small>. - Semánticas:
<strong>,<em>,<mark>,<del>,<ins>,<sub>,<sup>.
Uso Correcto de las Etiquetas de Formateo
Es importante utilizar las etiquetas de formateo de manera adecuada para mantener la semántica y accesibilidad de la página web. Por ejemplo, usar <strong> en lugar de <b> cuando el texto tiene una importancia fuerte, o <em> en lugar de <i> para enfatizar el texto.
Ejercicio Práctico
Ejercicio 1
Crea un documento HTML que utilice las etiquetas de formateo para dar estilo al siguiente texto:
Este es un texto en negrita. Este es un texto con importancia fuerte. Este es un texto en cursiva. Este es un texto enfatizado. Este es un texto subrayado. Este es un texto resaltado. Este es un texto pequeño. Este es un texto eliminado. Este es un texto insertado. Este es un texto con subíndice H2O. Este es un texto con superíndice E=mc2.
Solución:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Etiquetas de Formateo de Texto</title>
</head>
<body>
<p>Este es un <b>texto en negrita</b>.</p>
<p>Este es un <strong>texto con importancia fuerte</strong>.</p>
<p>Este es un <i>texto en cursiva</i>.</p>
<p>Este es un <em>texto enfatizado</em>.</p>
<p>Este es un <u>texto subrayado</u>.</p>
<p>Este es un <mark>texto resaltado</mark>.</p>
<p>Este es un <small>texto pequeño</small>.</p>
<p>Este es un <del>texto eliminado</del>.</p>
<p>Este es un <ins>texto insertado</ins>.</p>
<p>Este es un texto con subíndice H<sub>2</sub>O.</p>
<p>Este es un texto con superíndice E=mc<sup>2</sup>.</p>
</body>
</html>Retroalimentación sobre Errores Comunes
- Uso Incorrecto de Etiquetas Semánticas: Asegúrate de usar etiquetas semánticas como
<strong>y<em>en lugar de<b>y<i>cuando el texto tiene un significado especial. - Olvidar Cerrar Etiquetas: Siempre cierra las etiquetas para evitar errores de renderizado.
- Uso Excesivo de Etiquetas de Formateo: No abuses de las etiquetas de formateo. Úsalas solo cuando sea necesario para mejorar la legibilidad y la semántica del contenido.
Conclusión
En esta lección, hemos aprendido sobre las diferentes etiquetas de formateo de texto en HTML y su uso adecuado. Estas etiquetas nos permiten dar estilo y significado al texto, mejorando la presentación y accesibilidad de nuestras páginas web. En la próxima lección, exploraremos cómo crear listas ordenadas y desordenadas en HTML.
¡Sigue practicando y experimentando con estas etiquetas para dominar el formateo de texto en HTML!
Curso de HTML
Módulo 1: Introducción a HTML
- ¿Qué es HTML?
- Configurando tu Entorno
- Estructura Básica de HTML
- Etiquetas y Elementos HTML
- Creando tu Primera Página HTML
Módulo 2: Formateo de Texto en HTML
- Encabezados y Párrafos
- Etiquetas de Formateo de Texto
- Listas: Ordenadas y Desordenadas
- Citas en Bloque y Texto Preformateado
Módulo 3: Enlaces y Medios en HTML
Módulo 4: Tablas en HTML
- Estructura Básica de una Tabla
- Encabezados y Pies de Tabla
- Unión de Celdas: Colspan y Rowspan
- Estilizando Tablas
Módulo 5: Formularios en HTML
- Creando un Formulario Básico
- Elementos del Formulario: Input, Textarea y Select
- Atributos y Validación del Formulario
- Enviando Formularios
Módulo 6: Elementos Semánticos de HTML5
Módulo 7: Técnicas Avanzadas de HTML
Módulo 8: Integración de HTML y CSS
- Vinculando CSS a HTML
- CSS en Línea, Interno y Externo
- Selectores Básicos de CSS
- Estilizando Elementos HTML
Módulo 9: Diseño Web Responsivo
- Introducción al Diseño Responsivo
- Etiqueta Meta del Viewport
- Consultas de Medios
- Imágenes y Videos Responsivos
Módulo 10: Mejores Prácticas y Accesibilidad
- Mejores Prácticas de HTML
- Conceptos Básicos de Accesibilidad Web
- Usando Roles ARIA
- Pruebas de Accesibilidad