Volver a clases
Fundamentos de Programación●Principiante
Enlaces, Imágenes y Estructura Semántica
120 min
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
html1<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>
hrefdefine la ruta o acción;target="_blank"abre en nueva pestaña y debe acompañarse derel="noreferrer"/noopenerpor seguridad; los anclajes (#id) permiten saltar dentro de la misma página.
Imágenes y figuras
html1<figure> 2 <img src="assets/portada.webp" alt="Portada del curso" width="320" /> 3 <figcaption>Introducción a HTML5</figcaption> 4</figure>
- Usa
altdescriptivo para accesibilidad y SEO. Prefiere WebP/SVG por peso y calidad; controla tamaño conwidth/heighty optimiza rutas relativas.
Estructura Semántica HTML5
html1<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
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>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>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
6 recursos disponibles
¡Hora de Practicar!
PrácticaPrincipiante15 min🟡 IA con bitácora
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🔴 Sin IA
Ejercicios Prácticos
Practica
- Crea un menú con 3 enlaces internos y uno externo (nueva pestaña).
- Inserta una imagen con
altdescriptivo 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.
Guía Paso a Paso
TutorialPrincipiante15 min
Imágenes en HTML
Mejores prácticas para trabajar con imágenes.
Documentación Oficial
DocumentaciónPrincipiante15 min
Semántica en HTML5
Mejores prácticas para trabajar con imágenes.
Reto de Lectura
Reto de LecturaPrincipiante30 min🔴 Sin IA
Reto de Lectura — ¿Cuál maquetación aceptarías?
Dos versiones del mismo blog. Una la generó una IA a la primera; la otra pasó por un desarrollador que sabe HTML. Decide cuál aceptarías en un code review y justifica con 4 razones concretas.
Mismo contenido, dos estructuras. ¿Cuál aceptarías en code review? Da al menos 4 razones concretas comparando etiquetas específicas.
Versión A:
html1<div class="top"> 2 <div class="logo">Mi Blog</div> 3 <div class="links"> 4 <span onclick="go('inicio')">Inicio</span> 5 <span onclick="go('posts')">Posts</span> 6 </div> 7</div> 8<div class="content"> 9 <div class="post"> 10 <div class="post-title">Aprendiendo HTML</div> 11 <div class="post-date">10 de marzo</div> 12 <div class="post-body">Hoy aprendí sobre etiquetas...</div> 13 </div> 14</div> 15<div class="bottom">© 2026 Mi Blog</div>
Versión B:
html1<header> 2 <h1>Mi Blog</h1> 3 <nav aria-label="principal"> 4 <ul> 5 <li><a href="/inicio">Inicio</a></li> 6 <li><a href="/posts">Posts</a></li> 7 </ul> 8 </nav> 9</header> 10<main> 11 <article> 12 <h2>Aprendiendo HTML</h2> 13 <time datetime="2026-03-10">10 de marzo</time> 14 <p>Hoy aprendí sobre etiquetas...</p> 15 </article> 16</main> 17<footer>© 2026 Mi Blog</footer>
Preguntas extra:
- ¿Qué pasa en la versión A si el usuario navega con teclado (tecla Tab)?
- ¿Cómo "ve" Google cada versión?
- ¿Cuál es más fácil de mantener dentro de 6 meses y por qué?