Etiqueta esenciales: enlaces, imágenes y saltos de línea
Seguimos avanzando en nuestro curso de HTML5, y hoy vamos a charlar sobre tres etiquetas geniales que le dan vida a tus páginas web: <a>
para enlaces, <img>
para imágenes y <br>
para saltos de línea.
Enlaces: Conectando el Mundo
La etiqueta <a>
(de «anchor» o ancla) es la que te permite crear enlaces o hipervínculos. Con ella, puedes llevar a los usuarios a otras páginas, sitios web o incluso a puntos específicos dentro de la misma página. Es como el puente que une tu web con el resto del internet.
¿Cómo se usa?
- Apertura:
<a>
- Contenido: El texto o elemento que será clicable.
- Cierre:
</a>
- Atributo clave:
href
(Hypertext Reference), que dice a dónde lleva el enlace.
Ejemplo básico:
<a href="https://www.google.com">Ir a Google</a>

href="https://www.google.com"
: La dirección a la que va el enlace.- «Ir a Google»: El texto que se ve y en el que haces clic.
- Resultado: Un texto azul subrayado que te lleva a Google al hacer clic.
Atributos útiles
target
: Controla dónde se abre el enlace.
target="_blank"
: Abre en una pestaña nueva.
<a href="https://www.youtube.com" target="_blank">Ver YouTube</a>
- Sin
target
, se abre en la misma pestaña.
title
: Muestra un tooltip (texto emergente) al pasar el ratón.
<a href="https://www.wikipedia.org" title="Enciclopedia libre">Wikipedia</a>
id
: Para enlazar a un punto dentro de la misma página.
<a href="#seccion1">Ir a Sección 1</a> <!-- Más abajo en la página --> <h2 id="seccion1">Sección 1</h2>
Ejemplo práctico:
<p>Visita <a href="https://www.github.com" target="_blank" title="Código y más">GitHub</a> para proyectos geniales.</p>

Incorporación de Imágenes: Dale Vida Visual
La etiqueta <img>
te permite añadir imágenes a tu página. Es como pegar fotos en un álbum digital. A diferencia de otras etiquetas, <img>
es un elemento vacío: no tiene contenido ni cierre (no necesitas </img>
), pero usa atributos para funcionar.
¿Cómo se usa?
- Solo apertura:
<img>
- Atributos clave:
src
: La ruta o URL de la imagen.alt
: Texto alternativo si la imagen no carga o para accesibilidad.
Ejemplo básico:
<img src="perrito.jpg" alt="Un perrito feliz">
src="perrito.jpg"
: La imagen debe estar en la misma carpeta que tu HTML (o usa una URL completa comohttps://...
).alt="Un perrito feliz"
: Si la imagen no carga, se muestra este texto; también lo leen los lectores de pantalla.

Los Atributos – el Tamaño de las Imágene
Los atributos width
(ancho) y height
(alto) te permiten decidir cómo de grande o pequeña se ve una imagen en tu página. Por defecto, si no los pones, la imagen se muestra en su tamaño original, pero ajustarlos es clave para que tu web se vea como quieres.
Usando píxeles (valores absolutos)
La forma más común de usar width
y height
es con píxeles (px), que es una medida fija. Es como decirle al navegador: «Quiero que esta imagen tenga exactamente este tamaño».
<img src="perrito.jpg" alt="Un perrito feliz"> <img src="perrito.jpg" alt="Un perrito feliz" width="200" height="150">

width="200"
: La imagen será 200 píxeles de ancho.height="150"
: 150 píxeles de alto.- Resultado: Una imagen rectangular de 200×150 píxeles.
Consejo:
- Si solo pones uno (digamos
width="200"
), el navegador ajusta el otro proporcionalmente para no deformar la imagen. Pero es mejor poner ambos para tener control total.
Usando porcentajes (valores relativos)
También puedes usar porcentajes (%) en width
y height
, lo que hace que el tamaño sea relativo al contenedor donde está la imagen (como un <div>
o el <body>
). Esto es genial para que tu web se adapte a diferentes pantallas, como en celulares o tablets.
Ejemplo con porcentajes:
<div style="width: 500px;"> <img src="perrito.jpg" alt="perrito feliz" width="50%" height="50%"> </div>

- El
<div>
tiene 500 píxeles de ancho. width="50%"
: La imagen ocupa el 50% del ancho del<div>
, o sea, 250 píxeles.height="50%"
: Aquí hay un truco: el porcentaje del alto suele basarse en el ancho del contenedor si no se define un alto explícito, pero puede no comportarse como esperas sin CSS adicional. Normalmente, usa píxeles paraheight
si buscas precisión.
Ejemplo más realista:
<body> <img src="flor.jpg" alt="Una flor" width="100%"> </body>

width="100%"
: La imagen se estira para ocupar el 100% del ancho de la página (el<body>
).- Sin
height
, se ajusta proporcionalmente.
Combinando píxeles y porcentajes
Puedes mezclarlos según lo que necesites:
<img src="perrito.jpg" alt="Un perro" width="50%" height="200">

- Ancho: 50% del contenedor.
- Alto: 200 píxeles fijos.
Advertencia:
- Proporciones: Si cambias solo
width
oheight
con porcentajes o píxeles sin cuidar la proporción original, la imagen puede verse estirada o aplastada. Usa ambos o deja que el navegador calcule uno automáticamente. - CSS es mejor para esto: Aunque
width
yheight
funcionan, en proyectos reales se usa CSS para más control (lo veremos más adelante).
Ejemplo deformado (¡evita esto!):
<img src="perrito.jpg" alt="perrito feliz" width="300" height="50">

Resultado: Un perro aplastado porque el alto es muy pequeño comparado con el ancho.
Rutas Relativas – Encontrando tus Imágenes
El atributo src
(source) le dice al navegador dónde está la imagen. Puede ser una URL completa (como https://...
) o una ruta relativa, que depende de dónde está tu archivo HTML. Las rutas relativas son súper comunes porque te permiten usar imágenes locales sin depender de internet, pero pueden confundir al principio. Vamos a desglosarlo como si fuera un mapa.
¿Qué es una ruta relativa?
Es la dirección de la imagen en relación a la ubicación de tu archivo HTML. Imagina que tu HTML es una persona parada en un lugar, y la imagen es algo que tiene que encontrar cerca.
Caso 1: Misma carpeta
Si la imagen está en la misma carpeta que tu documento HTML:
<img src="perrito.jpg" alt="Perro">
src="perrito.jpg"
: Solo pones el nombre del archivo (y su extensión:.jpg
,.png
, etc.).- Ejemplo: Si tienes
index.html
yperrito.jpg
enC:/MiWeb/
, funciona directo.
Caso 2: Subcarpeta
Si la imagen está en una carpeta dentro de la misma ubicación que tu HTML (digamos, una carpeta llamada «imágenes»):
<img src="imágenes/perrito.png" alt="Perrito">
src="imágenes/perrito.png"
: Le dices «entra a la carpeta ‘imágenes’ y busca ‘perrito.png'».- Ejemplo:
C:/MiWeb/index.html
yC:/MiWeb/imágenes/perrito.png
.
Caso 3: Carpeta superior
Si tu HTML está dentro de una subcarpeta y la imagen está afuera, en la carpeta principal:
<img src="../perrito.jpg" alt="Perrito">
../
: Significa «sube un nivel» (sal de la carpeta actual).- Ejemplo:
C:/MiWeb/html/index.html
yC:/MiWeb/perrito.jpg
.
Caso 4: Más niveles
Si necesitas subir varios niveles o entrar a otras carpetas:
<img src="../../fotos/perrito.jpg" alt="perrito">
../../
: Sube dos niveles, luego entra a «fotos».- Ejemplo:
C:/MiWeb/html/paginas/index.html
yC:/MiWeb/fotos/perrito.jpg
.
Ejemplo práctico con estructura de carpetas
Imagina esta estructura:
MiWeb/ ├── index.html ├── imágenes/ │ ├── gato.jpg │ └── perro.png └── páginas/ └── about.html
- En
index.html
(raíz):
<img src="imágenes/gato.jpg" alt="Gato" width="50%">
Busca en la subcarpeta «imágenes».
- En
about.html
(dentro de «páginas»):
<img src="../imágenes/perro.png" alt="Perro" width="200" height="150">
../
sube a «MiWeb», luego entra a «imágenes».
Consejo:
- Organiza tus archivos: Guarda las imágenes en una carpeta como «imágenes» o «assets» para no perderte.
- Prueba en tu computadora: Crea un HTML y una carpeta con una imagen, y juega con rutas como
imágenes/foto.jpg
o../foto.jpg
. - Errores comunes: Si ves un ícono roto, revisa que el nombre y la ruta sean correctos (¡cuidado con mayúsculas o espacios!).
Ejemplo Completo Ampliado
Vamos a combinar tamaños y rutas relativas en una página:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Mi Álbum</title> </head> <body> <!-- Título --> <h1>Mi Álbum de Viajes</h1> <!-- Imagen en la misma carpeta --> <p>Una foto local:<br> <img src="perrito.jpg" alt="Perrito" width="300" height="200"></p> <!-- Imagen en subcarpeta con porcentaje --> <p>Desde una carpeta:<br> <img src="foto/montaña.png" alt="Montaña nevada" width="50%"></p> <!-- Imagen con enlace --> <p>Más detalles:<br> <a href="https://es.wikipedia.org/wiki/Monta%C3%B1a#/media/Archivo:Mount_Logan.jpg"> <img src="foto/montaña.jpg" alt="Río tranquilo" width="100%" height="150"> </a></p> </body> </html>

¿Qué ves?
- Una imagen de 300×200 píxeles desde la misma carpeta.
- Una imagen que ocupa el 50% del ancho desde «fotos».
- Una imagen clicable al 100% del ancho con alto fijo.
Consejos
- Píxeles vs. Porcentajes: Usa píxeles para tamaños exactos y porcentajes para adaptarse a la pantalla.
- Prueba tamaños: Cambia
width
yheight
en tu HTML y recarga el navegador para ver cómo queda. - Rutas relativas: Dibuja un mapa mental de tus carpetas si te pierdes (HTML -> sube -> entra).
- Guarda proporciones: Si usas porcentajes, prueba CSS después para más control.
width
yheight
: Ajusta el tamaño con píxeles (fijo) o porcentajes (relativo al contenedor). Combínalos con cuidado para no deformar.- Rutas relativas: Usa
src
para encontrar imágenes según dónde está tu HTML (foto.jpg
,imágenes/foto.jpg
,../foto.jpg
).
Saltos de Línea: Espacio a Tu Medida
La etiqueta <br>
(de «break») fuerza un salto de línea dentro de un elemento, como <p>
. Es un elemento de línea y vacío (sin cierre), ideal para separar texto sin crear un nuevo párrafo.
¿Cómo se usa?
- Solo:
<br>
- No lleva contenido ni atributos obligatorios.
Ejemplo básico:
<p>Hola, soy Juan<br>¿Y tú?</p>

Sin <br>
, todo estaría en una sola línea.
¿Cuándo usarlo?
- Para separar líneas dentro del mismo bloque (como direcciones o poemas).
- Si quieres un espacio mayor, usa varios:
<br><br>
.
Ejemplo práctico:
<p>Dirección:<br>Calle Falsa 123<br>Ciudad, País</p>

Combinándolas: Ejemplo Completo
Vamos a armar una página que use <a>
, <img>
y <br>
juntas, como si fuera un mini proyecto:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Mi Galería</title> </head> <body> <!-- Título y bienvenida --> <h1>Mi Galería de Fotos</h1> <p>Bienvenidos a mi colección:</p> <!-- Imagen con enlace --> <p>Mira esta foto:<br> <a href="https://www.nationalgeographic.com" target="_blank"> <img src="https://wallpapers.com/images/featured-full/hermosa-montana-ws98i8hty7cg93pw.jpg" alt="Naturaleza" width="200" height="200"> </a><br> Haz clic en la imagen para ver más.</p> <!-- Lista de enlaces --> <h2>Otros sitios interesantes</h2> <ul> <li><a href="https://www.wikipedia.org">Wikipedia</a></li> <li><a href="https://www.github.com" target="_blank">GitHub</a></li> </ul> </body> </html>
¿Qué ves?
- Un título «Mi Galería de Fotos».
- Un párrafo con una imagen clicable que lleva a National Geographic (en pestaña nueva).
<br>
separa el texto y la imagen para que no se amontonen.- Una lista de enlaces a otros sitios.
Consejos
<a>
: Prueba enlaces a tus sitios favoritos y juega contarget="_blank"
.<img>
: Usa imágenes pequeñas al principio (descarga una o usa URLs comohttps://via.placeholder.com/100
). No olvidesalt
.<br>
: Úsalo cuando quieras un salto rápido, pero si necesitas más espacio, considera<p>
para párrafos separados.- Combina: Haz que una imagen sea un enlace wrappeándola con
<a>
.
En Resumen
<a>
: Crea enlaces para navegar, conhref
como estrella y extras comotarget
otitle
.<img>
: Añade imágenes consrc
yalt
, ajustando tamaño si quieres.<br>
: Da saltos de línea simples dentro de un bloque.
Estas etiquetas son como pinceles para tu lienzo web: te conectan, decoran y organizan. ¿Te animas a hacer una página con tus propias imágenes y enlaces? Si quieres más ejemplos o tienes dudas, ¡déjame un comentario.