Fundamentos de Programación●Principiante

Enlaces, Imágenes y Estructura Semántica

120 min

6 vistas

01 diciembre 2025

Crear navegación con enlaces, añadir imágenes optimizadas y maquetar usando etiquetas semánticas HTML5.

Introducción

Navegación y rutas: Las rutas relativas (/imagenes/logo.png) dependen de la ubicación del archivo; las absolutas (https://...) apuntan a recursos externos. Usa rutas relativas para tu proyecto y absolutas para enlaces externos.
Semántica = significado: Etiquetas como <header> o <article> describen la intención del contenido. Los buscadores y tecnologías asistivas usan esta información para dar contexto y mejorar SEO/accesibilidad.

Enlaces

html
1<a href="https://developer.mozilla.org/" target="_blank" rel="noreferrer">MDN</a>
2<a href="#seccion1">Ir a sección 1</a>
3<a href="mailto:contacto@ejemplo.com">Contacto</a>
4<a href="/docs/guia.pdf" download>Descargar guía</a>

href define la ruta o acción; target="_blank" abre en nueva pestaña y debe acompañarse de rel="noreferrer"/noopener por seguridad; los anclajes (#id) permiten saltar dentro de la misma página.

Imágenes y figuras

html
1<figure>
2  <img src="assets/portada.webp" alt="Portada del curso" width="320" />
3  <figcaption>Introducción a HTML5</figcaption>
4</figure>

Usa alt descriptivo para accesibilidad y SEO. Prefiere WebP/SVG por peso y calidad; controla tamaño con width/height y optimiza rutas relativas.

Estructura Semántica HTML5

html
1<header>
2  <nav>
3    <a href="#inicio">Inicio</a>
4    <a href="#servicios">Servicios</a>
5  </nav>
6</header>
7<main>
8  <section id="inicio">
9    <article>
10      <h2>Bienvenidos</h2>
11      <p>Contenido principal...</p>
12    </article>
13  </section>
14  <aside>
15    <h3>Notas</h3>
16  </aside>
17</main>
18<footer>© 2024 Mi Sitio</footer>

<header> y <nav> agrupan la navegación; <main> contiene el contenido central; <section> organiza bloques temáticos; <article> representa unidades independientes (post, tarjeta); <aside> para contenido relacionado; <footer> para créditos y enlaces finales.

Ejemplos de Código

3 ejemplos

Card con enlace

html

1<article>
2  <a href="proyecto.html">
3    <figure>
4      <img src="thumb-proyecto.jpg" alt="Miniatura del proyecto" width="320" />
5      <figcaption>Ver proyecto completo</figcaption>
6    </figure>
7  </a>
8</article>

Menú básico

html

1<header>
2  <nav>
3    <ul>
4      <li><a href="#inicio">Inicio</a></li>
5      <li><a href="#portafolio">Portafolio</a></li>
6      <li><a href="#contacto">Contacto</a></li>
7    </ul>
8  </nav>
9</header>

Estructura semántica

html

1<main>
2  <section>
3    <article>
4      <h2>Título del artículo</h2>
5      <p>Texto principal.</p>
6    </article>
7  </section>
8  <aside>
9    <h3>Recursos</h3>
10    <ul>
11      <li><a href="#">Enlace 1</a></li>
12    </ul>
13  </aside>
14</main>

Recursos

5 recursos disponibles

¡Hora de Practicar!

PrácticaPrincipiante15 min

Práctica Guiada

- Construir una landing: hero con título y botón, navegación interna a secciones (servicios/testimonios/contacto), sección con tarjetas de servicio usando `<article>`, y un `<footer>` con enlaces de contacto/redes.

Desafío de Código

EjercicioPrincipiante15 min

Ejercicios Prácticos

Practica

Crea un menú con 3 enlaces internos y uno externo (nueva pestaña).
Inserta una imagen con alt descriptivo y pie de figura.
Maqueta un artículo con título, párrafo y un aside para enlaces relacionados.
Valida el documento en el validador W3C.

Documentación Oficial

DocumentaciónPrincipiante15 min

`<a>`: The Anchor element

Uso completo del elemento de enlace y sus atributos.

MDN: Elemento

Guía Paso a Paso

TutorialPrincipiante15 min

Imágenes en HTML

Mejores prácticas para trabajar con imágenes.

Tutorial para manejo de imagenes

Documentación Oficial

DocumentaciónPrincipiante15 min

Semántica en HTML5

Mejores prácticas para trabajar con imágenes.

Guía de semántica