Comprender cómo está construida cada etiqueta de HTML es fundamental para escribir código limpio y profesional. Cada pieza tiene un nombre específico que se usa a diario en la industria, y conocer esa terminología marca la diferencia entre alguien que apenas copia fragmentos y alguien que realmente domina el lenguaje de la web.
¿Qué partes componen una etiqueta de HTML?
Toda etiqueta sigue una estructura clara que se conoce como anatomía de una etiqueta HTML. Tomemos como ejemplo la etiqueta de ancla (<a>), que sirve para crear enlaces o links dentro de una página.
Una etiqueta puede descomponerse en las siguientes partes:
- Etiqueta de apertura (open tag): es la parte inicial, por ejemplo
<a href="...">. Indica el comienzo del elemento. [0:42]
- Etiqueta de cierre (close tag): se escribe igual que la de apertura pero con una barra diagonal, por ejemplo
</a>. No todas las etiquetas la necesitan, y es importante saber diferenciar cuáles sí y cuáles no. [0:53]
- Contenido: es todo lo que va entre la etiqueta de apertura y la de cierre. En el caso de la etiqueta de ancla, suele ser el texto visible del enlace, como el nombre de la página o una referencia que indica a dónde se va a dirigir el usuario. [1:15]
Cuando unimos la etiqueta de apertura, el contenido y la etiqueta de cierre, obtenemos lo que se denomina un elemento. Un elemento de HTML es entonces la unidad completa que el navegador interpreta y muestra en pantalla. [1:30]
¿Qué son los atributos y cómo funcionan?
Dentro de la etiqueta de apertura pueden aparecer los atributos, que proporcionan información adicional sobre el elemento. [1:40]
Existen distintos tipos de atributos:
- Atributos vacíos: solo llevan una palabra o incluso una letra, sin necesidad de asignarles un valor.
- Atributos compuestos: están formados por el nombre del atributo y el valor del atributo, separados por el signo
=.
En el ejemplo de la etiqueta de ancla, href es el nombre del atributo y la URL a la que queremos dirigirnos al hacer clic es su valor. Se escribe así:
html
<a href="https://ejemplo.com">Visitar página</a>
Aquí href le indica al navegador la dirección destino, mientras que el texto "Visitar página" es el contenido visible para el usuario. [1:50]
¿Por qué algunas etiquetas no llevan cierre?
No todas las etiquetas de HTML requieren una etiqueta de cierre. Las etiquetas que no encierran contenido entre apertura y cierre se conocen como etiquetas autoconclusivas o self-closing tags. Un ejemplo clásico son las etiquetas de imagen (<img>) y las de video, que también utilizan atributos para definir la fuente del archivo y otras propiedades. [2:15]
Reconocer esta diferencia es clave para evitar errores de sintaxis y escribir HTML válido. Las etiquetas multimedia, como <img> y <video>, se exploran con mayor profundidad al trabajar con contenido visual y audiovisual dentro de una página web.
Dominar la terminología —open tag, close tag, contenido, atributo, valor y elemento— permite comunicarse con claridad en cualquier equipo de desarrollo. Si alguna de estas partes aún no te queda del todo clara, prueba crear tu propio enlace con la etiqueta <a> y experimenta cambiando el atributo href y el contenido para ver los resultados en el navegador.
