¿Cómo organizar texto e imágenes con HTML?

Organizar texto e imágenes en HTML significa usar las etiquetas correctas para que el navegador muestre tu contenido con orden y sentido.

¿Sabías que el 80% de los usuarios abandonan una página si el contenido se ve desordenado? No importa qué tan buena sea tu información. Si no está bien organizada, nadie la lee.

En esta lección vas a aprender a usar encabezados, párrafos, listas e imágenes. Con esas cuatro herramientas puedes construir páginas claras y profesionales.

La historia de Rodrigo y su primer catálogo en línea

Rodrigo tiene 24 años y vende accesorios para celular en Monterrey. Su negocio iba bien en redes sociales, pero quería una página propia.

Abrió su editor de texto y escribió todo el contenido de golpe, sin etiquetas. El resultado fue un bloque gigante de texto. Todo junto, sin espacios, sin orden.

Entonces aprendió a usar encabezados y párrafos. En una tarde, su página cambió completamente. Los clientes empezaron a entender el catálogo sin llamarle para preguntar.

Encabezados: el esqueleto de tu página

Los encabezados van de <h1> hasta <h6>. El <h1> es el más importante y el más grande. El <h6> es el más pequeño.

Piensa en ellos como los títulos de un periódico. El <h1> es el titular principal. Los <h2> son las secciones. Los <h3> son los subtemas dentro de cada sección.

Así usó Rodrigo los encabezados en su catálogo:

<h1>Accesorios para celular en Monterrey</h1>
<h2>Fundas</h2>
<h3>Fundas para iPhone</h3>
<h3>Fundas para Samsung</h3>
<h2>Cargadores</h2>
<h3>Cargadores rápidos</h3>
<h3>Cargadores inalámbricos</h3>

El navegador muestra cada nivel con un tamaño diferente. El <h1> aparece grande y en negritas. El <h3> aparece más pequeño.

Una regla importante: usa solo un <h1> por página. Es el título principal. Puedes usar varios <h2> y <h3> sin problema.

Párrafos: el contenido real

La etiqueta <p> define un párrafo. El navegador agrega espacio automático arriba y abajo de cada párrafo.

Rodrigo añadió descripciones a sus productos con párrafos:

<h2>Fundas</h2>
<p>Tenemos fundas para más de 50 modelos de celular.</p>
<p>Todas nuestras fundas incluyen garantía de 6 meses.</p>

El resultado se ve limpio y fácil de leer. Sin la etiqueta <p>, todo el texto aparece junto sin separación.

¿Ves la diferencia? Un párrafo bien colocado le dice al lector dónde empieza y dónde termina una idea.

Listas: cuando tienes varios puntos que decir

Hay dos tipos de listas en HTML. La lista no ordenada <ul> usa puntos o viñetas. La lista ordenada <ol> usa números.

Cada elemento de la lista va dentro de una etiqueta <li>.

Rodrigo usó una lista para mostrar los beneficios de comprarle:

<h2>¿Por qué comprarnos?</h2>
<ul>
  <li>Envío gratis a todo Monterrey</li>
  <li>Garantía de 6 meses en todos los productos</li>
  <li>Más de 500 modelos disponibles</li>
  <li>Pago con tarjeta, transferencia o efectivo</li>
</ul>

Y usó una lista ordenada para el proceso de compra:

<h2>¿Cómo comprar?</h2>
<ol>
  <li>Elige tu producto en el catálogo</li>
  <li>Escríbenos por WhatsApp</li>
  <li>Elige tu método de pago</li>
  <li>Recibe tu pedido en 24 horas</li>
</ol>

¿Cuándo usar cada una? Usa <ul> cuando el orden no importa, como una lista de beneficios. Usa <ol> cuando el orden sí importa, como los pasos de un proceso.

La historia de Camila y las imágenes que no cargaban

Camila trabaja en el área de marketing de una tienda de ropa en la Ciudad de México. Su jefe le pidió una página sencilla para mostrar la nueva colección de temporada.

Camila escribió el código, puso las imágenes y abrió el navegador. Las imágenes no aparecían. Solo se veía un ícono roto y el texto alternativo.

El problema era simple: había escrito mal la ruta de los archivos. Aprendió cómo funciona la etiqueta <img> y en diez minutos todo estaba listo.

Imágenes: cómo mostrarlas correctamente

La etiqueta <img> no tiene etiqueta de cierre. Es una etiqueta de apertura sola.

Tiene dos atributos obligatorios:

• src: la ruta de la imagen
• alt: el texto alternativo que describe la imagen

Así se ve una imagen básica:

<img src="coleccion-verano.jpg" alt="Vestido de verano color azul">

El atributo src le dice al navegador dónde encontrar la imagen. El atributo alt aparece si la imagen no carga. También lo usan los lectores de pantalla para personas con discapacidad visual.

Camila aprendió algo clave: si la imagen está en la misma carpeta que tu archivo HTML, solo escribe el nombre del archivo. Si está en una subcarpeta llamada "imagenes", escríbelo así:

<img src="imagenes/coleccion-verano.jpg" alt="Vestido de verano color azul">

También puedes usar imágenes de internet con la URL completa:

<img src="https://ejemplo.com/foto-producto.jpg" alt="Producto de temporada">

Una buena práctica: guarda siempre tus imágenes en una carpeta llamada imagenes dentro de tu proyecto. Así es más fácil organizarlas.

Una página completa: el ejemplo de Rodrigo terminado

Aquí está la página completa que armó Rodrigo con todo lo que aprendiste en esta lección:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Accesorios para celular - Monterrey</title>
</head>
<body>

  <h1>Accesorios para celular en Monterrey</h1>
  <p>Somos especialistas en accesorios originales. Más de 5 años en el mercado regiomontano.</p>

  <img src="imagenes/tienda.jpg" alt="Foto de nuestra tienda en Monterrey">

  <h2>¿Por qué comprarnos?</h2>
  <ul>
    <li>Envío gratis a todo Monterrey</li>
    <li>Garantía de 6 meses en todos los productos</li>
    <li>Más de 500 modelos disponibles</li>
  </ul>

  <h2>Fundas</h2>
  <p>Contamos con fundas para más de 50 modelos de celular.</p>
  <img src="imagenes/fundas.jpg" alt="Variedad de fundas para celular">

  <h2>¿Cómo comprar?</h2>
  <ol>
    <li>Elige tu producto en el catálogo</li>
    <li>Escríbenos por WhatsApp al 81-1234-5678</li>
    <li>Elige tu método de pago</li>
    <li>Recibe tu pedido en 24 horas</li>
  </ol>

</body>
</html>

Esa es una página real. Lista para abrir en el navegador. Limpia, ordenada y fácil de leer.

Errores comunes al organizar texto e imágenes

Estos son los errores que Rodrigo y Camila cometieron antes de aprender a hacerlo bien.

Usar varios <h1> en la misma página. Solo debe haber uno. Es el título principal. Si necesitas más niveles, usa <h2> y <h3>.

Olvidar el atributo alt en las imágenes. No es solo decorativo. Es importante para accesibilidad y para que Google entienda tu página.

Escribir texto sin etiquetas <p>. El texto sin etiquetar se pega todo junto. Siempre encierra tus párrafos en <p>.

Confundir <ul> con <ol>. Si los pasos tienen un orden específico, usa <ol>. Si son solo opciones o características, usa <ul>.

Escribir mal la ruta de la imagen. Si tu imagen no aparece, revisa si el nombre del archivo tiene mayúsculas o espacios. Los navegadores distinguen entre Foto.jpg y foto.jpg.

Lo que puedes hacer ahora mismo

Abre tu editor de texto y crea una página sobre algo que te guste: tu negocio, tu colonia, tu equipo de fútbol favorito.

Incluye al menos un <h1>, dos <h2>, tres <p>, una lista y una imagen. No necesitas conexión a internet. No necesitas nada especial.

Con esas cinco herramientas ya puedes construir páginas como las que ves todos los días en Liverpool, Mercado Libre o Bimbo.

La diferencia entre una página amateur y una profesional no es magia. Es estructura. Y tú ya sabes cómo crearla.