soy Kseso y esto EsCSS

No es lo mismo, no da igual, elemento que tag

No es lo mismo, no da igual, elemento que tag

·Por Kseso ✎ 5

No es lo mismo, no da igual, elemento que tag

Con demasiada frecuencia tendemos a mezclar conceptos. Muy a menudo equivocamos términos y contribuimos a extender errores sin ser demasiado conscientes de ello. Yo el primero.
Y quizás uno de los más frecuentes en el que caemos sea equiparar y hablar como si fuesen lo mismo "elemento" y "tag". Y sí, escribí conscientemente "tag" y no etiqueta. Porque con la forma en español no es tan usual.
Son muchos los artículos de blogs e incluso en documentación "oficial" de aplicaciones, programas o proyecto donde se usan indistintamente. Transmitiendo que ambos son lo mismo.

Por si acaso ya te adelanto. Este artículo no tiene que ver con Css. Si acaso con Html (y algún otro lenguaje). O quizás no tenga que ver con nada y sólo sean comeduras de coco para un Lunes de otoño.

No es lo mismo un elemento que un tag. ¿O sí?

elemento html no es tagSi vamos a la especificación de HTML 4.01, vemos una nota aclaratoria al respecto, la captura de la derecha, donde resalta (en verde y negrita) que los elementos y tags son dos cosas bien diferentes.
En Html 4.01 un elemento está formado por una etiqueta de apertura, el contenido y una etiqueta de cierre. Así, esto sería un elemento <h1>KsesoCss</h1>. Donde <h1> es la etiqueta de inicio o apertura, KsesoCss es el contenido y </h1> la etiqueta de cierre o final.

Y el ejemplo anterior del h1 lo podríamos ampliar algo más. Pues el tag de apertura puede contener otras partes, como múltiples atributos y sus valores. Que formarían parte también del elemento.

Así que podríamos decir que un elemento está formado por sus etiquetas identificativas (tags) y su contenido.

Así que una etiqueta o tag forma parte del elemento pero no es el elemento. Como el motor forma parte del automóvil pero no es el automóvil.

Pero... (siempre hay alguno) no siempre los elementos son tan completos.

Tags opcionales

Si bien la especificación habla de etiqueta de apertura y cierre de los elementos antes y después del contenido, se puede omitir el cierre según en ciertos elementos.

Por ejemplo, en los elementos <li> | <p> | <td>... sólo es necesario saber dónde comienzan. No es es necesario indicar su final con la etiqueta de cierre.

Su final se lo marca el inicio del siguiente elemento:

<div> <ul> <li>Uno <li>Dos </ul> <p>Hola mundo </div>

La apertura del segundo elemento de la lista conlleva el cierre del primero. Y lo mismo para el párrafo.

Pero... hay más excepciones

Elementos vacíos

La especificación, además de indicar la etiqueta de cierre de algunos elementos como opcional, define a otros como elementos vacíos. Por lo tanto, además de poder dejarlos sin etiqueta final no pueden tener ningún tipo de contenido en ellos. <br> | <link> | <img> | <input> | <meta> son algunos ejemplos. Alguno de ellas, además de elemento vacío se les dice "reemplazados" en alguna parte. Al mostrarse el documento, el agente de usuario (i.e. navegador) lo sustituye por el valor de algún atributo. Como el elemento imagen por el valor de su src.

Los elementos vacíos se cierran sobre sí mismos, añadiendo una barra invertida antes de su > final: />

Pero... hay más

Elementos sin tags

Y como no hay dos sin tres, además del tag final omitible y los elementos vacíos, están aquellos que pueden prescindir de ambas etiquetas: apertura y cierre son opcionales: <html> | <head> | <body> porque los tres elementos existen en el documento por ellos mismos aunque no haya ni rastro de sus etiquetas.

Crea un documento html y escribe sólo <html> y abre el inspector de Chrome, Firefox u otro. Verás que el resto de elementos son creados.

Reconozco que en en este punto y en algún momento yo he defendido lo contrario en alguna conversación. Así que aquí mi rectificación sobre la obligatoriedad de abrir y cerrar estos elementos.

Otra cosa totalmente distinta es que si decides ahorrarte alguna de ellas puedan surgir imprevistos en función del navegador, como forzar el modo "chapuza".

Notas finales

elemento y tag en html5Como habrás visto en las referencias los enlaces son a la especificación de Html 4.01. Con XHTML Strict hay una máxima: todo lo que se abre se debe cerrar. Así que todos los elementos se den abrir y cerrar y los vacíos se deben cerrar sobre sí mismos.

Html5 lo que hace es básicamente, en el campo del marcado, añadir nuevos elementos (con sus tags) y dotarlos a todos de semántica, haciendo hincapié en este aspecto del uso en función de su naturaleza.

En las especificaciones de Html5 definen al elemento en el DOM como:

Elements in the DOM represent things; that is, they have intrinsic meaning, also known as semantics.
Los elementos en el DOM representan cosas, esto es, tienen un significado intrínseco, también conocido como la semántica.

Sin embargo, ya lo advierte el aviso, al ir al apartado del "elemento en el html" no hay introducción al mismo. Pero recuerda, Html5 es "una ampliación de Html4".

Quizás todo lo anterior sea de todo punto superfluo y sin mayor trascendencia. Pero nunca está de más procurar ser lo más preciso al expresarnos y hacerlo con la mayor precisión que podamos. Nos ahorraremos ambigüedades y aclaraciones.

Créditos:

En la búsqueda de info tanto en las especificaciones del W3c como en la web sobre las diferencias entre elemento y etiqueta me topé con este artículo de @kangax. Verás una gran similitud en la estructura de ambos. No es coincidencia.

Artículo publicado originalmente el 12/11/12. Actualizado el 04/12/2014

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso