HTML es el punto de partida del desarrollo web y entenderlo es más simple de lo que parece: todo se construye con etiquetas. Si vienes del mundo del frontend y backend y quieres saber cómo se arma la estructura visual de una página, aquí encontrarás la base que necesitas para empezar a escribir tu primer código.

¿Qué son las etiquetas en HTML y para qué sirven?

Las etiquetas son la unidad básica con la que defines cada parte de una página web. Imagina que cada sección de tu sitio es una cajita con un nombre que indica qué contiene y qué función cumple.

En una estructura típica, encuentras tres bloques principales que organizan visualmente cualquier sitio:

• header: la etiqueta que define la cabecera de la página.
• contenido: el cuerpo donde colocas textos, imágenes y descripciones.
• footer: la etiqueta para el pie de página.

¿Qué es una etiqueta en HTML? Es un marcador con nombre que define un elemento de la página, como un encabezado, una imagen o un párrafo. Funciona como una cajita que envuelve contenido y le da significado.

Lo interesante viene cuando entiendes que una etiqueta puede contener otras etiquetas dentro. Puedes tener una caja de contenido y, dentro, colocar una imagen de un gato y otra caja con su descripción. Así se construyen páginas reales: anidando elementos uno dentro de otro [01:30].

¿Cómo se escribe una etiqueta HTML correctamente?

La sintaxis es directa y se repite siempre igual. Una etiqueta tiene un nombre, un contenido en medio y una etiqueta de cierre marcada con una diagonal. Esa estructura es la que el navegador interpreta para mostrarte texto, imágenes o cualquier otro elemento.

¿Qué son los atributos de una etiqueta?

Los atributos son propiedades que describen a la etiqueta y le dan instrucciones específicas. Piensa en ellos como las características de tu cajita: tamaño, origen del contenido, identificador.

En el caso de una imagen, los atributos más comunes son:

• width: define el ancho en píxeles, por ejemplo width="500".
• height: define el alto en píxeles, por ejemplo height="500".
• src o source: indica de dónde se toma la imagen, como mistermichi.jpg.

Con solo esa línea de código, obtienes una imagen renderizada en pantalla con las medidas exactas que definiste.

¿Qué son las etiquetas que se cierran por sí solas?

No todas las etiquetas necesitan una etiqueta de cierre. Algunas se cierran por sí mismas porque no envuelven contenido, solo aportan un elemento puntual. La etiqueta img es el ejemplo clásico: se escribe una sola vez, con sus atributos, y listo.

¿Cuándo uso una etiqueta sin cierre? Cuando la etiqueta no contiene texto ni otros elementos dentro, como las imágenes (img) o los saltos de línea. Se llaman etiquetas autocontenidas.

¿Qué tipos de etiquetas HTML existen y cuándo usarlas?

HTML ofrece un catálogo amplio de etiquetas, cada una con un propósito semántico claro. Conocer las más comunes te permite estructurar cualquier página sin complicaciones [03:45].

Entre las etiquetas que más vas a usar están:

• Etiquetas de texto y títulos para encabezados y párrafos.
• Etiqueta de cuerpo del documento para envolver todo el contenido visible.
• Etiquetas genéricas para agrupar bloques sin un significado específico.
• Etiquetas de imagen para insertar gráficos.
• Etiqueta de pie de página para cerrar la estructura.

La idea no es memorizarlas todas de golpe. A medida que construyas proyectos, vas a ir descubriendo cuál necesitas en cada momento, y la documentación está siempre disponible en internet para consultarla.

Ahora que ya tienes claro qué son las etiquetas, cómo se escriben y cómo se anidan, el siguiente paso es ponerlo en práctica escribiendo código HTML real. ¿Qué etiqueta crees que vas a usar primero en tu página? Cuéntanos en los comentarios.