Portafolio en HTML semántico accesible

Contenido del curso

No sé dónde empezar

Fundamentos de HTML

Listas y Enlaces

Formularios y Tablas

Contenido Multimedia

Accesibilidad Web Y SEO

Proyecto final

17
Portafolio en HTML semántico accesible
Viendo ahora

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:01

Portafolio en HTML semántico accesible

Curso de HTML

Clase 17 de 17

Clase 17 / 17

Recursos

Construir un portafolio web en HTML semántico es la mejor forma de mostrar tu trabajo como desarrollador, conseguir entrevistas y dejar lista la base para sumarle estilos después. Aquí verás cómo armar esa estructura usando etiquetas semánticas, atributos ARIA y buenas prácticas de SEO, pensado para quien apenas termina de aprender HTML.

¿Qué debe incluir el head de un portafolio profesional?

El head es la parte invisible que ayuda a que tu página sea encontrada y se vea bien cuando alguien la comparte. Aquí defines los datos esenciales que motores de búsqueda y redes sociales necesitan para entender de qué trata tu portafolio.

Dentro del head se incluyen los siguientes elementos clave:

Metadatos básicos para SEO como descripción y autor.
Open Graph para que tu página se vea bien al compartirla en redes sociales.
Twitter Cards para personalizar la vista previa en Twitter.
URL canónica para evitar contenido duplicado.
Favicons para el icono que aparece en la pestaña del navegador.

¿Qué es Open Graph? Es un conjunto de metaetiquetas que controla cómo se ve el título, la descripción y la imagen de tu página cuando alguien la comparte en redes como Facebook o LinkedIn.

¿Cómo estructurar el header y la navegación con accesibilidad?

El header es lo primero que ve el visitante. Ahí va tu logotipo, tu nombre, el título de la página y la navegación principal [3:20]. Puedes ponerle el nombre que quieras: portafolio, perfil personal o experiencia.

La navegación se construye con la etiqueta nav y se le agregan atributos ARIA para que los lectores de pantalla entiendan qué hace cada enlace. Esto no es decorativo, es lo que hace tu sitio 100% accesible.

¿Cómo agregar un botón de descarga de CV en HTML?

Usa una etiqueta de ancla normal y súmale el atributo download. Al hacer clic, el archivo guardado en tu proyecto se descarga directo a la computadora del visitante.

html <a href="cv.pdf" download aria-label="Descarga el CV en PDF">Descargar CV</a>

Ese aria-label le dice a los lectores de pantalla exactamente qué va a pasar al activar el enlace. Pequeño detalle, gran diferencia en accesibilidad.

¿Cómo navegar a secciones específicas de la misma landing?

Los enlaces no solo sirven para mandar a otras páginas. También puedes usarlos para mover al usuario a una sección específica de la misma landing usando un id como referencia [5:40].

El truco es simple:

Asigna un id único a la sección destino, por ejemplo id="proyectos".
En tu enlace usa ese mismo identificador con href="#proyectos".
Al hacer clic, el navegador lleva al usuario directo a esa sección.

¿Cómo se enlaza a una sección con id en HTML? Pones un id en la sección destino y en el enlace usas el símbolo # seguido del id. Ejemplo: <a href="#proyectos">Ver mis proyectos</a>.

Con esto puedes hacer que tu barra de navegación funcione como un índice interno de la página.

¿Cómo organizar el contenido principal con etiquetas semánticas?

Todo el contenido importante vive dentro de la etiqueta main, que además puede llevar role="main" para reforzar el mensaje a los lectores de pantalla. Dentro encontrarás secciones como hero, estadísticas, sobre mí y proyectos.

Estas son las etiquetas que estructuran el cuerpo del portafolio:

section para bloques temáticos como Sobre mí o Proyectos.
article cuando el contenido tiene sentido por sí solo.
figure y figcaption para imágenes con descripción, como tu foto de perfil.
picture y source para servir distintas imágenes según el tamaño o formato del dispositivo.
div como comodín cuando no existe una etiqueta semántica específica.

Los div son útiles para dar estructura a estadísticas rápidas o tarjetas, y si quieres reforzar su significado puedes agregarles un atributo role con ARIA.

¿Qué secciones debe tener un portafolio de desarrollador?

Un portafolio funcional incluye un hero con call to action, una sección Sobre mí con un h2, valores personales con un h3, una pequeña tabla de habilidades, una galería de proyectos destacados y enlaces a información ampliada. Esa es la base mínima para mostrar quién eres y qué sabes hacer.

¿Por qué usar HTML semántico mejora el SEO y la accesibilidad?

Una estructura semántica no solo se ve ordenada en el código. Le dice al navegador, a Google y a los lectores de pantalla qué significa cada parte de tu página. Eso se traduce en mejor posicionamiento y una experiencia inclusiva.

Al combinar etiquetas como header, main, section, nav y footer con atributos ARIA y metadatos completos, tu portafolio cumple con las buenas prácticas que recompiensan los motores de búsqueda. Con más de 15 años de experiencia en desarrollo, te puedo decir que esta base te ahorra muchísimo trabajo después.

Lo que sigue es darle vida con CSS para que tu portafolio se vea tan bien como está estructurado. ¿Cómo vas a personalizar tu versión? Cuéntame qué secciones piensas agregar.

Rodrigo Gonzalez

Hace 8 meses

Si les está saliendo esto algo así <div> tomen el curso de fundamentos de ingenieria de software para que entiendan que: < representa < > representa >

Entonces no entren en pánico y <div> lo pueden leer así <div>

Ejemplo de una pregunta, sale así: Si un desarrollador debe refactorizar un archivo HTML antiguo que usa <div id="cabecera-principal"> Y &It; div id="contenido-primario"> , ¿cuál sería la modificación más efectiva usando etiquetas semánticas de HTML5 para mejorar la accesibilidad y el SEO?

Se puede leer: Si un desarrollador debe refactorizar un archivo HTML antiguo que usa <div id="cabecera-principal> Y < div id="contenido-primario> , ¿cuál sería la modificación más efectiva usando etiquetas semánticas de HTML5 para mejorar la accesibilidad y el SEO?

Tengan paciencia y suerte en sus exámenes.