Tag y atributos

HTML (acrónimo de Hypertext Markup Language) es un lenguaje de markup compuesto por una serie de elementos, conocidos como tag y atributos, que forman el núcleo de la estructura de una página web, su esqueleto.

Imaginémoslos como un conjunto de herramientas que nos permiten modelar nuestro documento.

Por ejemplo, hay elementos que te permiten insertar imágenes en html, así como videos o enlaces, y elementos que te permiten insertar títulos, párrafos y mucho más.

Todavía hay otros elementos que no tienen una representación tangible, pero cuyo único propósito es dar un valor semántico a una parte del documento en el que se insertan. Estos últimos se conocen como etiquetas semánticas, pero los veremos más adelante.

Estructura de un tag

Ahora entremos en el detalle de las etiquetas HTML y analicemos las partes que las componen. Un elemento HTML normalmente consta de dos etiquetas: la etiqueta de apertura y la etiqueta de cierre.

Estructura de un elemento HTML 

La etiqueta de apertura consta del nombre del elemento (en el ejemplo anterior es un título) entre corchetes angulares ("<" y ">").

La etiqueta de cierre tiene la misma estructura que la de apertura, con la diferencia de que el nombre del elemento va precedido de una barra inclinada "/".

Es importante recordar que los elementos no son etiquetas, sino que están representados por etiquetas dentro del código. Sin embargo, se consideran erróneamente lo mismo. Las etiquetas de apertura y cierre abarcan el contenido.

Sin embargo, no todos los elementos siguen el modelo antes mencionado: algunos están compuestos por una sola etiqueta que generalmente se usa para insertar/incorporar algo dentro del documento HTML (por ejemplo, la etiqueta <img> que permite insertar imágenes en html). Estas etiquetas, conocidas como etiquetas independientes, no tienen contenido, pero pueden tener sus propios atributos que le permiten agregar información adicional (como el atributo src para la etiqueta <img>).

Atributos en HTML

Como se acaba de mencionar, además de una etiqueta y contenido, el elemento puede tener atributos. Estos últimos definen los valores o propiedades que utilizan los navegadores para procesar el documento. Por ejemplo, la etiqueta <a> (ancla) le permite insertar un enlace dentro del documento. Esto lo permite el atributo "href", que contiene, en concreto, la referencia de hipertexto, es decir, un enlace externo al que se dirigirá al usuario.

El atributo "rel" identifica la relación entre el documento actual (el que contiene el enlace) y el documento de destino (el que está insertado en el href).

Tag ancla 

Como puede ver en el ejemplo anterior, los atributos son parejas clave-valor separados por el carácter = (igual) seguido del valor asignado entre comillas.

Muchos de los atributos de HTML5 se conocen como atributos globales, lo que significa que están disponibles para todos los elementos. Sin embargo, la mayoría de los elementos tienen un conjunto específico de atributos, disponibles solo para ellos.