Después de maquetar el hero de tu portafolio, llega el momento de añadir una sección de descripción personal y los iconos de redes sociales que conecten tu sitio con tu presencia digital. Aquí aprendes a estructurar esa parte usando etiquetas semánticas de HTML como main, ul, li, a e img, todo dentro de buenas prácticas de maquetación.

Cómo organizo el contenido principal con la etiqueta main

La etiqueta main representa el contenido principal de tu página. Ahí va la descripción de quién eres y qué haces, envuelta en un párrafo simple con la etiqueta p.

html

<main> <p>Tu descripción personal aquí 🚀</p> </main>

Un detalle interesante: HTML reconoce los emojis como texto normal, así que puedes incluirlos sin configuración extra. Y si todavía no tienes lista tu descripción, Visual Studio Code te deja escribir lorem y presionar Enter para generar texto de relleno automático [03:18].

¿Qué es la etiqueta main en HTML? Es una etiqueta semántica que envuelve el contenido principal y único de la página. Ayuda a navegadores y motores de búsqueda a identificar dónde está la información central.

Por qué usar etiquetas semánticas en lugar de divs

Usar main, header o section en vez de div genéricos mejora la accesibilidad y el SEO. Los lectores de pantalla y los buscadores entienden mejor la jerarquía de tu contenido cuando cada bloque tiene una etiqueta con significado.

Cómo estructuro los iconos sociales con ul y li

Los enlaces de navegación o redes sociales suelen ir dentro de una lista desordenada (ul) por buenas prácticas. Cada red social ocupa un li independiente, y dentro va una etiqueta a que funciona como hipervínculo [05:30].

html

<ul class="social-icons"> <li> <a href="#" id="linkedin" class="social-icon"> <img src="images/icons/linkedin.png" alt="LinkedIn"> </a> </li> </ul>

Fíjate en algo importante: la clase del contenedor ul se llama social-icons (con S), mientras que la clase de cada enlace individual es social-icon (sin S). Aunque parezcan iguales, una sola letra las convierte en clases totalmente distintas.

Para qué sirve el href con almohadilla

Mientras estás maquetando, puedes usar href="#" para que el enlace no redirija a ningún lado. El usuario puede hacer clic, pero la página se mantiene igual. Esto es útil cuando todavía no tienes las URLs reales de tus redes [06:45].

Cómo agrego cinco redes sociales sin reescribir código

En lugar de teclear cinco veces la misma estructura, copia el primer li completo y pégalo cuatro veces más. Visual Studio Code tiene un truco que acelera todavía más el trabajo: el cursor múltiple.

• En macOS, mantén presionada la tecla Command y haz clic en otra palabra para crear un segundo cursor.
• En Windows, prueba con Alt o Ctrl según tu configuración.
• Con dos cursores activos, escribes una vez y se reflejan los cambios en ambos lugares.

Las cinco redes sociales del ejemplo son: LinkedIn, GitHub, Twitter, YouTube y Platzi. Cada una con su propio id, su clase social-icon y su imagen correspondiente en formato .png [09:10].

¿Por qué usar id y class al mismo tiempo en un enlace? El id identifica de forma única a ese enlace concreto (útil para JavaScript o anclas), mientras que class permite aplicar estilos compartidos a varios elementos similares.

Imágenes png frente a iconos svg

En esta maquetación se usan archivos .png para los iconos, pero lo ideal en proyectos reales es usar SVG. Los SVG son vectoriales, escalan sin perder calidad y pesan menos. Por simplicidad didáctica aquí se trabaja con PNG, pero ten en mente que en producción los iconos sociales casi siempre van en SVG.

Por qué los iconos se ven invisibles en el navegador

Al recargar la página, la descripción aparece pero los iconos parecen no estar. La razón es que los iconos son blancos sobre fondo blanco. Si abres las herramientas de desarrollador con clic derecho e Inspeccionar, vas a ver que las imágenes sí están cargadas y la ruta es correcta [12:40].

Esto confirma algo clave sobre HTML: este lenguaje solo sirve para poner los materiales sobre la mesa. La estructura está lista, los enlaces funcionan, las imágenes se cargan, pero el aspecto visual todavía es tosco. Imágenes gigantes, listas con viñetas, iconos invisibles.

La razón es simple: HTML no se encarga del diseño. Para que tu portafolio se vea bonito y envidiable, el siguiente paso es CSS, el lenguaje que aplica colores, tamaños, espaciados y posicionamiento.

¿Qué red social vas a poner tú en tu portafolio que no sea de las cinco del ejemplo? Cuéntame en los comentarios cómo estructurarías tu propia lista de iconos.