EasyCode365EasyCode365

Encabezados y párrafos

¡Bienvenido a "Fundamentos de HTML"! Me emociona mucho acompañarte en tu camino de desarrollo web. Hoy vamos a aprender cómo organizar texto en una página web. Si alguna vez escribiste un ensayo o leíste un libro, ya conoces los conceptos básicos para estructurar contenido.

¡Vamos allá!

El propósito de las etiquetas de texto

Quizás te estés preguntando: ¿Por qué necesitamos etiquetas especiales? ¿Por qué no puedo escribir palabras directamente en la pantalla?

Si solo escribes palabras en un documento HTML y presionas "Enter" para crear líneas nuevas, el navegador ignorará esos espacios y unirá todo en un solo bloque de texto grande y difícil de leer. Usamos etiquetas HTML especiales para resolver este problema.

Las etiquetas le dan estructura y significado al texto, y le indican al navegador cuál es el propósito de cada parte. Esta estructura no es solo visual; es muy importante por dos razones principales:

  • Motores de búsqueda: Las etiquetas ayudan a los buscadores (como Google) a entender de qué trata tu página para poder posicionarla correctamente.
  • Lectores de pantalla: Las personas con discapacidad visual suelen usar lectores de pantalla, que son programas que leen páginas web en voz alta. Estas herramientas usan las etiquetas como señales para ayudar a navegar el sitio rápidamente.

Párrafos (<p>)

Para el texto normal del contenido, usamos la etiqueta de párrafo, que se escribe como <p>.

Cada vez que quieras escribir una oración normal o un grupo de oraciones relacionadas, simplemente envuélvelas con etiquetas de párrafo. Cuando un navegador ve una etiqueta <p>, sabe que debe agrupar ese texto y añade automáticamente un poco de espacio arriba y abajo. Ese espaciado natural crea un diseño limpio y hace que el texto sea más fácil de leer.

Jerarquía de encabezados (<h1> a <h6>)

Los encabezados son los títulos y subtítulos de tu página web. HTML ofrece seis niveles de etiquetas de encabezado, desde <h1> (el nivel más alto e importante) hasta <h6> (el nivel más bajo y menos importante).

Piensa en estos encabezados como el esquema de un periódico o un libro de texto:

  • El título del libro: El título principal en la portada es tu <h1>.
  • Los capítulos: Los títulos principales de capítulos dentro del libro son tus etiquetas <h2>.
  • Los subtemas: Si un capítulo se divide en secciones más pequeñas, esas serían tus etiquetas <h3>, y así sucesivamente.

Las reglas de oro de la semántica

Cuando hablamos de "semántica" en desarrollo web, simplemente nos referimos a usar la etiqueta correcta para la tarea correcta, para que tu código tenga un significado claro. Al usar encabezados, debes seguir siempre estas reglas de oro:

  • Solo un <h1> por página: Piensa en <h1> como el título principal del documento. Como una página debería tener un solo tema principal, normalmente también debería tener una sola etiqueta <h1>.
  • No saltes niveles: Tus encabezados deben seguir un orden secuencial estricto. Por ejemplo, no deberías saltar directamente de un <h2> a un <h4>. Saltar niveles crea una estructura confusa tanto para buscadores como para lectores de pantalla.
  • Nunca uses encabezados para estilo: NUNCA uses una etiqueta de encabezado solo porque quieres que el texto se vea grande o en negrita. Los encabezados son solo para organizar la estructura de la página. Si quieres cambiar el tamaño o grosor de un texto normal, eso le corresponde a CSS (Cascading Style Sheets, un lenguaje aparte que usamos específicamente para dar estilo a los sitios web).

Un ejemplo claro

Aquí tienes un ejemplo corto y fácil de leer que muestra cómo combinar encabezados y párrafos para crear una página web con estructura correcta:

Se puede editar
<h1>La guía definitiva sobre perros</h1>
<p>Los perros son mascotas populares en todo el mundo. Son conocidos por su lealtad y su personalidad juguetona.</p>

<h2>Cómo elegir la raza de perro adecuada</h2>
<p>Antes de llevar un perro a casa, es importante elegir una raza que se adapte a tu estilo de vida.</p>

<h2>Entrenamiento básico para perros</h2>
<p>Entrenar a tu cachorro requiere paciencia y constancia. ¡Usa siempre refuerzo positivo!</p>

Resumen

¡Lo lograste! Estas son las ideas clave de esta lección:

  • Usamos etiquetas de texto HTML para que navegadores, buscadores y lectores de pantalla puedan entender y mostrar correctamente nuestro contenido.
  • Usa la etiqueta <p> para todo tu texto de cuerpo y oraciones normales.
  • Usa etiquetas de <h1> a <h6> para crear una estructura lógica en la página, como los capítulos de un libro.
  • Usa siempre un solo <h1> por página, no saltes niveles de encabezado y nunca uses encabezados solo para que el texto se vea grande o en negrita.

¡Excelente trabajo hoy! Estás construyendo una base muy sólida en desarrollo web.