Construir un portafolio web desde cero implica entender cómo se arma visualmente cada bloque con HTML puro. Aquí aprenderás a crear la sección hero de tu página, esa zona protagonista que combina imagen de fondo, foto de perfil y datos personales, usando etiquetas semánticas, ids y clases para organizar el código como cajas anidadas.

Esta guía es para ti si estás dando tus primeros pasos en desarrollo web y quieres ver cómo se traduce un diseño en estructura HTML antes de aplicar estilos con CSS.

Qué es la sección hero y por qué importa en un portafolio web

La sección hero es ese bloque grande y visual que aparece justo debajo del header de una página. Funciona como tu carta de presentación: una imagen impactante, tu nombre, tu arroba de redes sociales y una descripción corta de lo que haces.

En el portafolio que se construye en la clase, el hero incluye una imagen de fondo (una computadora), una foto de perfil, el nombre completo, el usuario de redes y varios roles profesionales como course director at Platzi, backend developer, frontend web developer y YouTube tech content creator [04:32].

¿Qué es un hero en diseño web? Es la sección destacada al inicio de una página, pensada para captar la atención con una imagen grande y un mensaje breve sobre quién eres o qué ofreces.

Cómo estructurar el HTML pensando en cajas anidadas

La forma más práctica de traducir un diseño a código es pensar en cajas. Cada bloque visual es una caja, y dentro puede haber más cajas. Esa lógica se materializa con la etiqueta genérica div, que actúa como contenedor sin significado semántico propio [01:38].

En el portafolio, el hero arranca con una etiqueta <section> que envuelve todo. Dentro se crean dos contenedores principales: uno para la imagen de fondo y otro para la información del perfil. A su vez, el bloque de información se subdivide en otra caja para la foto y otra para los textos.

Por qué usar la etiqueta section en lugar de un div cualquiera

La etiqueta <section> aporta semántica: le dice al navegador y a los motores de búsqueda que ese fragmento representa una sección independiente con sentido propio. A esa sección se le asigna un identificador único con el atributo id="hero" para poder referenciarla después desde CSS o JavaScript.

Cuándo usar id y cuándo usar class en HTML

Aquí está una de las distinciones más importantes que se enseñan en la clase. Los ids son identificadores únicos: solo puede existir uno por página. Las clases, en cambio, sirven para agrupar elementos similares y se pueden repetir tantas veces como necesites [02:45].

En el portafolio se aplica así:

• El logo del header lleva id="logo" porque es único.
• La imagen de fondo lleva id="computadora" por la misma razón.
• La foto de perfil lleva id="foto".
• Tanto el contenedor del logo como el de la computadora y el de la foto comparten la clase image-container porque todos cumplen la misma función: contener una imagen.

¿Puedo tener dos ids iguales en una página HTML? No. Los ids deben ser únicos en todo el documento. Si necesitas agrupar varios elementos similares, usa una class.

Cómo agregar imágenes accesibles con src y alt

La etiqueta <img> se cierra a sí misma y necesita dos atributos clave. El primero es src, que apunta a la ruta del archivo, por ejemplo imagenes/foto.png. El segundo es alt, que describe la imagen y se muestra si el archivo no carga [03:10].

Usar alt no es opcional desde el punto de vista de accesibilidad: los lectores de pantalla lo leen en voz alta para personas con discapacidad visual, y los motores de búsqueda lo usan para entender el contenido visual. En la clase se asignan textos como mi foto y mi logo.

Qué etiquetas usar para los textos del hero

Dentro del contenedor de información se trabajan tres tipos de texto, cada uno con la etiqueta adecuada a su jerarquía:

• <h1> para el nombre completo, porque es el título principal de la página.
• <span> para la arroba del usuario, una etiqueta genérica que no aporta significado pero sirve para envolver texto corto cuando no hay una etiqueta más específica.
• <p> para la descripción profesional, ya que se trata de información relevante en formato de párrafo.

¿Para qué sirve la etiqueta span en HTML? Es un contenedor de texto en línea sin significado semántico. Úsala cuando necesites aplicar estilos o agrupar texto corto y no exista una etiqueta más apropiada.

Por qué la jerarquía de etiquetas afecta tu SEO

Usar <h1> para el nombre, <p> para descripciones y <span> para fragmentos genéricos no es solo estética. Los buscadores leen esa jerarquía para entender qué es importante en tu página. Un hero bien etiquetado ayuda a que tu portafolio sea más visible.

Cómo se ve el hero antes de aplicar CSS

Al recargar el navegador después de escribir todo el HTML, las imágenes se ven enormes y el texto aparece sin formato [07:15]. Eso es totalmente normal: HTML define qué elementos existen y cómo se relacionan, pero no cómo se ven. Los estilos visuales llegan después con CSS.

La estructura de cajas que armaste, con sus ids y clases, es la base que permitirá darle forma, color, tamaño y posición a cada elemento en las próximas clases.

¿Cómo organizaste tu propio hero? Cuéntame en los comentarios qué etiquetas usaste y qué dudas te surgieron al pensar tu portafolio en cajas.