Construir una sección de íconos sociales en HTML es uno de los pasos más prácticos cuando estás creando tu portafolio web. Con unas pocas etiquetas bien organizadas puedes ofrecer acceso directo a todas tus redes desde un solo lugar, y eso es exactamente lo que se trabaja aquí: descripción personal, enlaces con imágenes y buenas prácticas de estructura.
¿Cómo se organiza el contenido principal con la etiqueta main?
Después de tener listo el hero del portafolio —con el header y un section—, llega el momento de agregar más información sobre ti. Para eso se utiliza la etiqueta main [03:07], que representa el contenido principal de la página. Dentro de ella se coloca todo lo que describe quién eres y qué haces.
El primer elemento que va dentro de main es una etiqueta p (párrafo) con tu descripción personal [03:30]. Un dato interesante: HTML acepta emojis directamente dentro del texto, los detecta como caracteres normales sin necesidad de código especial [04:02].
Si aún no tienes tu descripción lista, Visual Studio Code ofrece un atajo muy útil llamado lorem [04:24]. Al escribir lorem dentro de una etiqueta y presionar enter, el editor genera texto de relleno automáticamente. No significa nada, pero sirve como marcador temporal mientras sigues maquetando.
¿Qué estructura HTML necesitas para los íconos sociales?
Para agrupar los enlaces a redes sociales se usa una lista desordenada con la etiqueta ul [05:05]. Este tipo de lista muestra elementos con viñetas en lugar de números. Por buenas prácticas, cuando tienes una serie de enlaces de navegación, estos deben ir dentro de un ul.
La estructura completa se ve así:
html
<ul class="social-icons">
<li>
<a href="#" id="linkedin" class="social-icon">
<img src="images/icons/linkedin.png" alt="LinkedIn">
</a>
</li>
</ul>
Cada ícono social sigue el mismo patrón [05:30]:
- li: cada elemento individual de la lista.
- a: la etiqueta de enlace o hipervínculo que redirige al usuario a otra página.
- img: la imagen del ícono de la red social.
El atributo href="#" dentro de la etiqueta a [06:30] indica que por ahora el enlace no redirige a ningún sitio. Es un marcador temporal útil mientras estás maquetando. Cuando el proyecto avance, se reemplaza por la URL real de cada red social.
¿Por qué usar clases diferentes en el contenedor y en cada ícono?
Se asigna la clase social-icons (con s) al contenedor ul y la clase social-icon (sin s) a cada enlace individual [08:05]. Aunque parecen iguales, son clases distintas que permiten aplicar estilos CSS diferentes al grupo completo y a cada elemento por separado.
¿Cómo duplicar elementos rápidamente en Visual Studio Code?
Una vez creado el primer ícono, puedes copiarlo y pegarlo tantas veces como necesites [08:30]. En el ejemplo se crean cinco íconos: LinkedIn, GitHub, Twitter, YouTube y Platzi.
Visual Studio Code permite usar múltiples cursores simultáneamente [09:00]. En Mac OS se activa manteniendo la tecla command mientras seleccionas texto con doble clic. En Windows funciona con la tecla alt o control, dependiendo de tu configuración. Esto te permite editar varios puntos del código al mismo tiempo.
¿Por qué los íconos no se ven correctamente en el navegador?
Al recargar la página [10:38], la descripción aparece correctamente y los íconos se listan, pero no son visibles porque las imágenes son de color blanco sobre fondo blanco. Para confirmar que están cargados correctamente se usa la herramienta de inspeccionar elemento del navegador (clic derecho > inspeccionar) [11:00], que muestra la información de cada imagen y su ruta.
Este comportamiento es completamente normal. HTML solo se encarga de la estructura y el contenido, no de la presentación visual [11:40]. Para que todo se vea organizado y atractivo es necesario utilizar CSS, el lenguaje de estilos que controla colores, tamaños, posiciones y todo lo que hace que una página sea visualmente profesional.
Un punto importante sobre las imágenes: se menciona que lo ideal para íconos no es usar archivos de imagen, sino formatos como SVG [07:25], que están optimizados para este propósito. Sin embargo, para mantener la simplicidad en esta etapa se trabaja con archivos .png.
¿Ya tienes tu descripción lista y tus íconos preparados? Comparte en los comentarios cuántas redes sociales vas a incluir en tu portafolio.
